"use client";

import { useState, useEffect, useCallback } from "react";
import { ArrowLeft, Loader2, Check, AlertTriangle, Calculator, Pencil } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { usePayrollSettings } from "@/lib/payroll-settings-hook";
import { calculatePayslip, toPeriod, type TaxJurisdiction, type PayslipCalculation } from "@/lib/payroll";
import { fetchEmployees } from "@/lib/supabase/employees-actions";
import { createPayrollRunWithPayslips, confirmPayrollRun } from "@/lib/supabase/payroll-actions";
import {
  type EmployeeWithRelations,
  EMPLOYMENT_TYPE_LABELS,
} from "@/lib/supabase/employees-types";
import { formatDateShort } from "@/lib/supabase/payroll-types";
import { PayrollAnomalyAlert } from "@/components/ai/PayrollAnomalyAlert";
import PageSkeleton from "./PageSkeleton";

type Step = "period" | "review" | "confirm";

export default function PayrollNewPage({
  onBack,
  onSuccess,
}: {
  onBack: () => void;
  onSuccess: () => void;
}) {
  const [step, setStep] = useState<Step>("period");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [employees, setEmployees] = useState<EmployeeWithRelations[]>([]);
  const [periodStart, setPeriodStart] = useState("");
  const [periodEnd, setPeriodEnd] = useState("");
  const [payFrequency, setPayFrequency] = useState<"weekly" | "fortnightly" | "monthly">("monthly");

  // Adjusted hours for hourly employees
  const [adjustedHours, setAdjustedHours] = useState<Record<string, number>>({});

  const { jurisdiction, settings, loading: settingsLoading } = usePayrollSettings();

  useEffect(() => {
    let cancelled = false;
    fetchEmployees()
      .then((emps) => { if (!cancelled) setEmployees(emps); })
      .catch(() => {});
    return () => { cancelled = true; };
  }, []);

  // Calculate payslips for all active employees
  const payslipCalculations = jurisdiction
    ? employees
        .filter((e) => e.status === "active")
        .map((emp) => {
          const isHourly = emp.employment_type === "casual" || emp.employment_type === "contractor";
          const hours = isHourly ? (adjustedHours[emp.id] ?? 38) : 0;
          const annualSalary = emp.salary ? Number(emp.salary) : isHourly && emp.hourly_rate ? Number(emp.hourly_rate) * hours * 52 : 0;

          if (annualSalary <= 0) return null;

          const calc = calculatePayslip({
            grossAnnual: annualSalary,
            payFrequency,
            jurisdiction,
          });

          return {
            employee: emp,
            hours,
            hourlyRate: emp.hourly_rate ? Number(emp.hourly_rate) : undefined,
            calculation: calc,
          };
        })
        .filter(Boolean) as {
        employee: EmployeeWithRelations;
        hours: number;
        hourlyRate?: number;
        calculation: PayslipCalculation;
      }[]
    : [];

  const totals = payslipCalculations.reduce(
    (acc, p) => ({
      gross: acc.gross + p.calculation.grossPay,
      deductions: acc.deductions + p.calculation.totalDeductions,
      net: acc.net + p.calculation.netPay,
      employer: acc.employer + p.calculation.totalEmployerContributions,
    }),
    { gross: 0, deductions: 0, net: 0, employer: 0 }
  );

  const handlePeriodSubmit = () => {
    if (!periodStart || !periodEnd) { setError("Please select both start and end dates"); return; }
    if (periodEnd < periodStart) { setError("End date must be after start date"); return; }
    setError(null);
    setStep("review");
  };

  const handleConfirm = async () => {
    if (!jurisdiction || !settings) return;
    setError(null);
    setSaving(true);

    try {
      const payslips = payslipCalculations.map((p) => ({
        employee_id: p.employee.id,
        gross_pay: p.calculation.grossPay,
        total_deductions: p.calculation.totalDeductions,
        net_pay: p.calculation.netPay,
        employer_contributions: p.calculation.totalEmployerContributions,
        deduction_lines: p.calculation.deductions,
        employer_contribution_lines: p.calculation.employerContributions,
        hours_worked: p.hourlyRate ? p.hours : undefined,
        hourly_rate: p.hourlyRate,
      }));

      const result = await createPayrollRunWithPayslips(
        {
          period_start: periodStart,
          period_end: periodEnd,
          pay_frequency: payFrequency,
          employees: payslipCalculations.map((p) => ({ employee_id: p.employee.id })),
        },
        jurisdiction.countryCode,
        jurisdiction.name,
        payslips
      );

      if (!result.success) { setError(result.error || "Failed to create payroll run"); return; }

      onSuccess();
    } catch (e: any) {
      setError(e.message || "An unexpected error occurred");
    } finally {
      setSaving(false);
    }
  };

  if (settingsLoading) return <PageSkeleton name="Payroll" />;

  if (!jurisdiction) {
    return (
      <div className="p-6 lg:p-8">
        <div className="flex items-center gap-4 mb-6">
          <button onClick={onBack} className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
            <ArrowLeft className="w-5 h-5 text-gray-500" />
          </button>
          <div>
            <h1 className="text-3xl font-serif font-bold text-gray-900">Run Payroll</h1>
          </div>
        </div>
        <div className="bg-amber-50 border border-amber-200 rounded-lg p-6 text-center">
          <AlertTriangle className="w-8 h-8 text-amber-500 mx-auto mb-3" />
          <p className="text-sm font-medium text-amber-800">Payroll jurisdiction not configured</p>
          <p className="text-xs text-amber-600 mt-1">Go to onboarding to set up your payroll settings.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <button onClick={onBack} className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
          <ArrowLeft className="w-5 h-5 text-gray-500" />
        </button>
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Run Payroll</h1>
          <p className="text-gray-500 mt-1">
            {jurisdiction.name} · {jurisdiction.currency}
          </p>
        </div>
      </div>

      {/* Step indicator */}
      <div className="flex items-center gap-3">
        {(["period", "review", "confirm"] as Step[]).map((s, i) => (
          <div key={s} className="flex items-center gap-2 flex-1">
            <div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold transition-all ${
              s === step ? "bg-[#1D9E75] text-white" :
              ["period", "review", "confirm"].indexOf(s) < ["period", "review", "confirm"].indexOf(step)
                ? "bg-[#1D9E75] text-white"
                : "bg-gray-200 text-gray-400"
            }`}>
              {["period", "review", "confirm"].indexOf(s) < ["period", "review", "confirm"].indexOf(step)
                ? <Check className="w-3.5 h-3.5" />
                : i + 1}
            </div>
            <span className={`text-xs font-medium hidden sm:block ${s === step ? "text-gray-900" : "text-gray-400"}`}>
              {s === "period" ? "Period" : s === "review" ? "Review" : "Confirm"}
            </span>
            {i < 2 && <div className="flex-1 h-px bg-gray-200" />}
          </div>
        ))}
      </div>

      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{error}</div>
      )}

      {/* Step 1: Period selection */}
      {step === "period" && (
        <Card className="border-0 shadow-sm">
          <CardContent className="p-6 space-y-5">
            <h2 className="text-lg font-semibold text-gray-900">Pay Period</h2>

            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
              <div>
                <Label htmlFor="periodStart">Start Date</Label>
                <Input id="periodStart" type="date" value={periodStart} onChange={(e) => setPeriodStart(e.target.value)} className="mt-1" />
              </div>
              <div>
                <Label htmlFor="periodEnd">End Date</Label>
                <Input id="periodEnd" type="date" value={periodEnd} onChange={(e) => setPeriodEnd(e.target.value)} className="mt-1" min={periodStart} />
              </div>
              <div>
                <Label htmlFor="payFrequency">Pay Frequency</Label>
                <select
                  id="payFrequency"
                  value={payFrequency}
                  onChange={(e) => setPayFrequency(e.target.value as typeof payFrequency)}
                  className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                >
                  <option value="weekly">Weekly</option>
                  <option value="fortnightly">Fortnightly</option>
                  <option value="monthly">Monthly</option>
                </select>
              </div>
            </div>

            {/* Flat rate info for manual jurisdictions */}
            {settings && !settings.is_natively_supported && settings.flat_income_tax_rate != null && (
              <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg flex items-start gap-3">
                <Calculator className="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" />
                <div className="flex-1">
                  <p className="text-sm font-medium text-amber-800">
                    Flat income tax rate: {(settings.flat_income_tax_rate * 100).toFixed(1)}%
                  </p>
                  <p className="text-xs text-amber-600 mt-0.5">
                    Employer pension: {((settings.employer_pension_rate || 0) * 100).toFixed(1)}%
                    {settings.tax_free_allowance ? ` · Tax-free allowance: ${jurisdiction.currency} ${(settings.tax_free_allowance).toLocaleString()}` : ""}
                  </p>
                </div>
              </div>
            )}

            <div className="flex justify-end pt-4 border-t border-gray-100">
              <Button onClick={handlePeriodSubmit} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
                Review Payroll
                <ArrowLeft className="w-4 h-4 -rotate-90" />
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Step 2: Review */}
      {step === "review" && (
        <div className="space-y-4">
          {/* AI Anomaly Check */}
          {payslipCalculations.length > 0 && (
            <PayrollAnomalyAlert
              payslips={payslipCalculations.map((p) => ({
                employee_id: p.employee.id,
                employee_name: `${p.employee.first_name} ${p.employee.last_name}`,
                job_title: p.employee.job_title,
                gross_pay: p.calculation.grossPay,
                net_pay: p.calculation.netPay,
                hours_worked: p.hourlyRate ? p.hours : null,
                hourly_rate: p.hourlyRate || null,
              }))}
              period={`${payFrequency} (${formatDateShort(periodStart)} — ${formatDateShort(periodEnd)})`}
            />
          )}

          {/* Summary bar */}
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
            {[
              { label: "Total Gross", value: `${jurisdiction.currency} ${totals.gross.toFixed(2)}` },
              { label: "Total Deductions", value: `${jurisdiction.currency} ${totals.deductions.toFixed(2)}` },
              { label: "Total Net", value: `${jurisdiction.currency} ${totals.net.toFixed(2)}` },
              { label: "Employer Cost", value: `${jurisdiction.currency} ${totals.employer.toFixed(2)}` },
            ].map((s) => (
              <div key={s.label} className="bg-white rounded-lg border border-gray-200 p-4">
                <p className="text-xs text-gray-500">{s.label}</p>
                <p className="text-lg font-bold text-gray-900 mt-1">{s.value}</p>
              </div>
            ))}
          </div>

          {/* Employee table */}
          <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
            <table className="w-full">
              <thead>
                <tr className="border-b border-gray-100">
                  <th className="text-left text-xs font-medium text-gray-500 py-3 px-4">Employee</th>
                  <th className="text-left text-xs font-medium text-gray-500 py-3 px-4 hidden md:table-cell">Type</th>
                  <th className="text-right text-xs font-medium text-gray-500 py-3 px-4">Gross</th>
                  <th className="text-right text-xs font-medium text-gray-500 py-3 px-4 hidden sm:table-cell">Deductions</th>
                  <th className="text-right text-xs font-medium text-gray-500 py-3 px-4">Net</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-50">
                {payslipCalculations.map((p) => (
                  <tr key={p.employee.id} className="hover:bg-gray-50/50 transition-colors">
                    <td className="py-3 px-4">
                      <div className="flex items-center gap-3">
                        <div className="w-8 h-8 rounded-full bg-teal-500 flex items-center justify-center text-white text-xs font-semibold flex-shrink-0">
                          {p.employee.first_name[0]}{p.employee.last_name[0]}
                        </div>
                        <div>
                          <p className="text-sm font-medium text-gray-900">
                            {p.employee.first_name} {p.employee.last_name}
                          </p>
                          <p className="text-xs text-gray-500">{p.employee.job_title || ""}</p>
                        </div>
                      </div>
                    </td>
                    <td className="py-3 px-4 hidden md:table-cell">
                      <span className="text-xs text-gray-600">{EMPLOYMENT_TYPE_LABELS[p.employee.employment_type]}</span>
                      {p.hourlyRate && (
                        <div className="mt-1">
                          <div className="flex items-center gap-1">
                            <Input
                              type="number"
                              min="0"
                              max="168"
                              value={p.hours}
                              onChange={(e) => setAdjustedHours((prev) => ({ ...prev, [p.employee.id]: parseFloat(e.target.value) || 0 }))}
                              className="w-16 h-7 text-xs px-2"
                            />
                            <span className="text-[10px] text-gray-400">hrs</span>
                            <Pencil className="w-3 h-3 text-gray-300" />
                          </div>
                        </div>
                      )}
                    </td>
                    <td className="py-3 px-4 text-right text-sm text-gray-900 font-medium">
                      {jurisdiction.currency} {p.calculation.grossPay.toFixed(2)}
                    </td>
                    <td className="py-3 px-4 text-right text-sm text-gray-500 hidden sm:table-cell">
                      {jurisdiction.currency} {p.calculation.totalDeductions.toFixed(2)}
                    </td>
                    <td className="py-3 px-4 text-right text-sm text-emerald-600 font-semibold">
                      {jurisdiction.currency} {p.calculation.netPay.toFixed(2)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Actions */}
          <div className="flex justify-between pt-4">
            <Button variant="outline" onClick={() => setStep("period")} className="cursor-pointer">
              Back
            </Button>
            <Button onClick={() => setStep("confirm")} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
              Confirm & Save
              <Check className="w-4 h-4" />
            </Button>
          </div>
        </div>
      )}

      {/* Step 3: Confirm */}
      {step === "confirm" && (
        <Card className="border-0 shadow-sm">
          <CardContent className="p-6 space-y-6">
            <div className="text-center">
              <div className="w-16 h-16 bg-teal-50 rounded-full flex items-center justify-center mx-auto mb-4">
                <Check className="w-8 h-8 text-[#1D9E75]" />
              </div>
              <h2 className="text-xl font-semibold text-gray-900">Confirm Payroll Run</h2>
              <p className="text-sm text-gray-500 mt-2">
                {payslipCalculations.length} employees · {jurisdiction.currency} {totals.net.toFixed(2)} total net pay
              </p>
              <p className="text-xs text-gray-400 mt-1">
                {formatDateShort(periodStart)} — {formatDateShort(periodEnd)} · {payFrequency}
              </p>
            </div>

            {/* Deduction breakdown for first employee (preview) */}
            {payslipCalculations.length > 0 && (
              <div className="p-4 bg-gray-50 rounded-lg">
                <p className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">
                  Sample deduction breakdown ({payslipCalculations[0].employee.first_name} {payslipCalculations[0].employee.last_name})
                </p>
                <div className="space-y-2">
                  {payslipCalculations[0].calculation.deductions.map((d) => (
                    <div key={d.name} className="flex justify-between text-sm">
                      <span className="text-gray-600">{d.name}</span>
                      <span className="text-gray-900 font-medium">{jurisdiction.currency} {d.amount.toFixed(2)}</span>
                    </div>
                  ))}
                  <div className="border-t border-gray-200 pt-2 flex justify-between text-sm">
                    <span className="font-medium text-gray-900">Net Pay</span>
                    <span className="font-bold text-emerald-600">{jurisdiction.currency} {payslipCalculations[0].calculation.netPay.toFixed(2)}</span>
                  </div>
                </div>
              </div>
            )}

            <div className="flex justify-between pt-4 border-t border-gray-100">
              <Button variant="outline" onClick={() => setStep("review")} className="cursor-pointer">
                Back
              </Button>
              <Button
                onClick={handleConfirm}
                disabled={saving}
                className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer"
              >
                {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
                {saving ? "Processing..." : "Confirm Payroll"}
              </Button>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}