"use client";

import { useState } from "react";
import { ShieldAlert, AlertTriangle, AlertCircle, Info, Loader2, RefreshCcw, X } from "lucide-react";
import { runPayrollAnomalyAnalysis } from "@/lib/supabase/ai-actions";
import type { PayrollAnomalyResult, PayslipDataForAI } from "@/lib/gemini";

interface PayrollAnomalyAlertProps {
  payslips: {
    employee_id: string;
    employee_name: string;
    job_title: string | null;
    gross_pay: number;
    net_pay: number;
    hours_worked: number | null;
    hourly_rate: number | null;
  }[];
  period: string;
}

const SEVERITY_CONFIG = {
  low: { icon: Info, color: "text-blue-600", bg: "bg-blue-50", border: "border-blue-200" },
  medium: { icon: AlertCircle, color: "text-amber-600", bg: "bg-amber-50", border: "border-amber-200" },
  high: { icon: AlertTriangle, color: "text-red-600", bg: "bg-red-50", border: "border-red-200" },
};

export function PayrollAnomalyAlert({ payslips, period }: PayrollAnomalyAlertProps) {
  const [analyzing, setAnalyzing] = useState(false);
  const [result, setResult] = useState<PayrollAnomalyResult | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [dismissed, setDismissed] = useState(false);

  const handleAnalyze = async () => {
    setAnalyzing(true);
    setError(null);
    try {
      const payslipData: PayslipDataForAI[] = payslips.map((p) => ({
        employee_name: p.employee_name,
        job_title: p.job_title,
        gross_pay: p.gross_pay,
        net_pay: p.net_pay,
        hours_worked: p.hours_worked,
        hourly_rate: p.hourly_rate,
      }));

      const response = await runPayrollAnomalyAnalysis(payslipData, period);

      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.hasAnomalies) return null;

  return (
    <div className="mb-4">
      {/* 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"
        >
          <ShieldAlert className="w-4 h-4" />
          Run AI Payroll Check
        </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 payroll for anomalies...
        </div>
      )}

      {/* Error state */}
      {error && !analyzing && (
        <div className="bg-red-50 border border-red-200 rounded-xl p-4 flex items-start gap-3">
          <AlertTriangle 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.hasAnomalies ? "border-amber-200 bg-amber-50/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.hasAnomalies ? (
                  <AlertTriangle className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
                ) : (
                  <ShieldAlert 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.hasAnomalies ? "Anomalies Detected" : "No Anomalies Found"}
                  </p>
                  <p className="text-xs text-gray-600 mt-1">{result.summary}</p>

                  {result.hasAnomalies && result.anomalies.length > 0 && (
                    <div className="mt-3 space-y-2">
                      {result.anomalies.map((a, i) => {
                        const config = SEVERITY_CONFIG[a.severity] || SEVERITY_CONFIG.low;
                        const Icon = config.icon;
                        return (
                          <div key={i} className={`flex items-start gap-2 ${config.bg} ${config.border} border rounded-lg px-3 py-2`}>
                            <Icon className={`w-4 h-4 ${config.color} shrink-0 mt-0.5`} />
                            <div>
                              <span className="text-xs font-semibold text-gray-900">{a.employee}</span>
                              <span className="text-xs text-gray-600 ml-1.5">— {a.description}</span>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  )}
                </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>
  );
}