"use client";

import { useState } from "react";
import { Lightbulb, Loader2, RefreshCcw, X, AlertCircle } from "lucide-react";
import { runLeavePatternAnalysis } from "@/lib/supabase/ai-actions";
import type { LeavePatternResult, LeaveRequestForAI } from "@/lib/gemini";

interface LeavePatternInsightsProps {
  leaveRequests: {
    employee_name: string;
    leave_type_name: string;
    start_date: string;
    end_date: string;
    days_count: number;
    status: string;
    reason: string | null;
  }[];
  monthLabel: string;
}

export function LeavePatternInsights({ leaveRequests, monthLabel }: LeavePatternInsightsProps) {
  const [analyzing, setAnalyzing] = useState(false);
  const [result, setResult] = useState<LeavePatternResult | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [dismissed, setDismissed] = useState(false);

  const handleAnalyze = async () => {
    setAnalyzing(true);
    setError(null);
    try {
      const leaveData: LeaveRequestForAI[] = leaveRequests.map((r) => ({
        employee_name: r.employee_name,
        leave_type_name: r.leave_type_name,
        start_date: r.start_date,
        end_date: r.end_date,
        days_count: r.days_count,
        status: r.status,
        reason: r.reason,
      }));

      const response = await runLeavePatternAnalysis(leaveData, monthLabel);

      if (!response.success) {
        if (response.blocked) {
          setError(`You've reached your free tier limit for AI queries (${response.current}/${response.limit}). Upgrade to Pro for unlimited access.`);
        } else {
          setError(response.error || "Analysis failed");
        }
        return;
      }

      if (response.result) {
        setResult(response.result);
        setDismissed(false);
      }
    } catch (e: any) {
      setError(e.message || "Analysis failed");
    } finally {
      setAnalyzing(false);
    }
  };

  if (dismissed && result && !result.hasInsights) return null;

  return (
    <div className="mb-6">
      {/* Trigger button when no result */}
      {!result && !analyzing && (
        <button
          onClick={handleAnalyze}
          className="flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-teal-600 transition-colors cursor-pointer"
        >
          <Lightbulb className="w-4 h-4" />
          Analyze Leave Patterns with AI
        </button>
      )}

      {/* Loading state */}
      {analyzing && (
        <div className="flex items-center gap-2 text-sm text-gray-500 bg-gray-50 rounded-xl px-4 py-3">
          <Loader2 className="w-4 h-4 animate-spin" />
          Analyzing leave patterns...
        </div>
      )}

      {/* Error state */}
      {error && !analyzing && (
        <div className="bg-red-50 border border-red-200 rounded-xl p-4 flex items-start gap-3">
          <AlertCircle className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
          <div className="flex-1">
            <p className="text-sm font-medium text-red-800">AI Check Failed</p>
            <p className="text-xs text-red-600 mt-1">{error}</p>
          </div>
          <button onClick={() => setError(null)} className="text-red-400 hover:text-red-600 cursor-pointer">
            <X className="w-4 h-4" />
          </button>
        </div>
      )}

      {/* Result */}
      {result && !analyzing && (
        <div className={`rounded-xl border overflow-hidden ${result.hasInsights ? "border-amber-200 bg-gradient-to-br from-amber-50 to-yellow-50" : "border-emerald-200 bg-emerald-50/50"}`}>
          <div className="p-4">
            <div className="flex items-start justify-between gap-3">
              <div className="flex items-start gap-3 flex-1">
                {result.hasInsights ? (
                  <Lightbulb className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
                ) : (
                  <Lightbulb className="w-5 h-5 text-emerald-600 shrink-0 mt-0.5" />
                )}
                <div className="flex-1">
                  <p className="text-sm font-semibold text-gray-900">
                    {result.hasInsights ? "Leave Pattern Insights" : "No Notable Patterns"}
                  </p>
                  <p className="text-xs text-gray-500 mt-0.5">{monthLabel}</p>

                  {result.hasInsights && result.insights.length > 0 && (
                    <div className="mt-3 space-y-2">
                      {result.insights.map((insight, i) => (
                        <div key={i} className="flex items-start gap-2 bg-white/70 rounded-lg px-3 py-2.5 border border-amber-100">
                          <span className="w-5 h-5 rounded-full bg-amber-100 text-amber-700 text-[10px] font-bold flex items-center justify-center shrink-0">
                            {i + 1}
                          </span>
                          <p className="text-xs text-gray-700 leading-relaxed">{insight}</p>
                        </div>
                      ))}
                    </div>
                  )}

                  {!result.hasInsights && (
                    <p className="text-xs text-emerald-700 mt-2">
                      Leave patterns look normal for this period. No unusual patterns detected.
                    </p>
                  )}
                </div>
              </div>
              <div className="flex items-center gap-1 shrink-0">
                <button
                  onClick={handleAnalyze}
                  className="p-1.5 hover:bg-white/60 rounded-md text-gray-400 hover:text-gray-600 transition-colors cursor-pointer"
                  title="Re-run analysis"
                >
                  <RefreshCcw className="w-3.5 h-3.5" />
                </button>
                <button
                  onClick={() => setDismissed(true)}
                  className="p-1.5 hover:bg-white/60 rounded-md text-gray-400 hover:text-gray-600 transition-colors cursor-pointer"
                  title="Dismiss"
                >
                  <X className="w-3.5 h-3.5" />
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}