"use client";

import { useState, useEffect, useCallback } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { ArrowLeft, Printer, Download, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { fetchPayslip } from "@/lib/supabase/payroll-actions";
import {
  STATUS_LABELS,
  STATUS_COLORS,
  formatDateShort,
  type PayslipWithEmployee,
} from "@/lib/supabase/payroll-types";
import PageSkeleton from "./PageSkeleton";

function formatDateLong(dateStr: string): string {
  return new Date(dateStr + "T00:00:00").toLocaleDateString("en-AU", {
    weekday: "long",
    day: "numeric",
    month: "long",
    year: "numeric",
  });
}

export default function PayslipDetailPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const runId = searchParams.get("run");
  const employeeId = searchParams.get("emp");
  const periodStart = searchParams.get("ps");
  const periodEnd = searchParams.get("pe");

  const [payslip, setPayslip] = useState<PayslipWithEmployee | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!runId || !employeeId) { setError("Missing payslip parameters"); setLoading(false); return; }
    let cancelled = false;
    fetchPayslip(runId, employeeId)
      .then((p) => { if (!cancelled) { if (p) setPayslip(p); else setError("Payslip not found"); } })
      .catch(() => { if (!cancelled) setError("Failed to load payslip"); })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [runId, employeeId]);

  const handlePrint = useCallback(() => {
    window.print();
  }, []);

  if (loading) return <PageSkeleton name="Payslip" />;

  if (!payslip || error) {
    return (
      <div className="p-6 lg:p-8">
        <div className="flex items-center gap-4 mb-6">
          <button onClick={() => router.push("/payroll")} className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
            <ArrowLeft className="w-5 h-5 text-gray-500" />
          </button>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Payslip</h1>
        </div>
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
          {error || "Payslip not found"}
        </div>
      </div>
    );
  }

  const employeeName = `${payslip.employee?.first_name || ""} ${payslip.employee?.last_name || ""}`.trim();

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header - hidden when printing */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 print:hidden">
        <div className="flex items-center gap-4">
          <button onClick={() => router.push("/payroll")} 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">Payslip</h1>
            <p className="text-gray-500 mt-1">{employeeName}</p>
          </div>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" onClick={handlePrint} className="gap-2 cursor-pointer">
            <Printer className="w-4 h-4" />
            Print
          </Button>
        </div>
      </div>

      {/* Payslip Content - print-optimised */}
      <div className="max-w-3xl mx-auto bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden print:shadow-none print:border-0 print:max-w-none">
        {/* Payslip Header */}
        <div className="bg-[#1D9E75] text-white px-8 py-6 print:bg-gray-800">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-xl font-bold">Vela</h2>
              <p className="text-sm text-white/80 mt-1">Payslip</p>
            </div>
            <div className="text-right">
              <p className="text-sm font-medium">{employeeName}</p>
              <p className="text-xs text-white/70">{payslip.employee?.job_title || ""}</p>
            </div>
          </div>
        </div>

        {/* Pay Period & Status */}
        <div className="px-8 py-4 border-b border-gray-100 flex items-center justify-between">
          <div>
            <p className="text-xs text-gray-500 uppercase tracking-wider">Pay Period</p>
            <p className="text-sm font-medium text-gray-900 mt-0.5">
              {periodStart && periodEnd
                ? `${formatDateLong(periodStart)} — ${formatDateLong(periodEnd)}`
                : `Payslip #${payslip.id.slice(0, 8)}`}
            </p>
          </div>
          <Badge variant="outline" className={`border ${STATUS_COLORS.processed}`}>
            Processed
          </Badge>
        </div>

        {/* Earnings */}
        <div className="px-8 py-6">
          <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">Earnings</h3>
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-gray-600">
                Gross Pay
                {payslip.hours_worked && ` (${payslip.hours_worked} hours`}{payslip.hourly_rate ? ` @ ${payslip.hourly_rate.toFixed(2)}/hr)` : ")"}
              </span>
              <span className="text-gray-900 font-medium">{payslip.gross_pay.toFixed(2)}</span>
            </div>
          </div>
        </div>

        {/* Deductions */}
        {payslip.deduction_lines && payslip.deduction_lines.length > 0 && (
          <div className="px-8 py-6 border-t border-gray-100">
            <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">Deductions</h3>
            <div className="space-y-2">
              {payslip.deduction_lines.map((line, i) => (
                <div key={i} className="flex justify-between text-sm">
                  <div>
                    <span className="text-gray-600">{line.name}</span>
                    {line.description && (
                      <p className="text-[11px] text-gray-400">{line.description}</p>
                    )}
                  </div>
                  <span className="text-gray-900 font-medium">-{line.amount.toFixed(2)}</span>
                </div>
              ))}
              <div className="flex justify-between text-sm pt-2 border-t border-gray-100">
                <span className="font-medium text-gray-900">Total Deductions</span>
                <span className="font-medium text-red-600">-{payslip.total_deductions.toFixed(2)}</span>
              </div>
            </div>
          </div>
        )}

        {/* Net Pay */}
        <div className="px-8 py-6 bg-gray-50 border-t border-gray-100">
          <div className="flex justify-between items-center">
            <span className="text-base font-bold text-gray-900">Net Pay</span>
            <span className="text-xl font-bold text-emerald-600">{payslip.net_pay.toFixed(2)}</span>
          </div>
        </div>

        {/* Employer Contributions */}
        {payslip.employer_contribution_lines && payslip.employer_contribution_lines.length > 0 && (
          <div className="px-8 py-6 border-t border-gray-100 print:opacity-75">
            <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">
              Employer Contributions (not deducted from pay)
            </h3>
            <div className="space-y-2">
              {payslip.employer_contribution_lines.map((line, i) => (
                <div key={i} className="flex justify-between text-sm">
                  <div>
                    <span className="text-gray-600">{line.name}</span>
                    {line.description && (
                      <p className="text-[11px] text-gray-400">{line.description}</p>
                    )}
                  </div>
                  <span className="text-gray-900 font-medium">{line.amount.toFixed(2)}</span>
                </div>
              ))}
              <div className="flex justify-between text-sm pt-2 border-t border-gray-100">
                <span className="font-medium text-gray-900">Total Employer</span>
                <span className="font-medium text-gray-900">{payslip.employer_contributions.toFixed(2)}</span>
              </div>
            </div>
          </div>
        )}

        {/* Footer */}
        <div className="px-8 py-4 bg-gray-50 border-t border-gray-200 text-center print:hidden">
          <p className="text-xs text-gray-400">
            Generated on {new Date().toLocaleDateString("en-AU", { day: "numeric", month: "long", year: "numeric" })} · Vela Payroll
          </p>
        </div>
      </div>
    </div>
  );
}