"use client";

import { useMemo, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useAlertConfirm } from "@/components/ui/alert-dialog";
import { useLocalStorage } from "@/lib/hooks/use-local-storage";
import { SEED_FILINGS, type FilingStatus, type SeedFiling } from "@/lib/sag/filings-seed";
import { ALL_ORGANIZATIONS } from "@/lib/sag/entities";
import { formatDate } from "@/lib/utils";

interface FilingState {
  status?: FilingStatus;
  nextDueDate?: string;
  lastFiledDate?: string;
  notes?: string;
}

export function FilingsTracker() {
  const [state, setState] = useLocalStorage<Record<string, FilingState>>("sag.filings.state", {});
  const [userFilings, setUserFilings] = useLocalStorage<SeedFiling[]>("sag.filings.user", []);
  const [showAdd, setShowAdd] = useState(false);
  const [filterEntity, setFilterEntity] = useState<string>("all");
  const [filterStatus, setFilterStatus] = useState<"all" | FilingStatus>("all");
  const { confirm: confirmAlert, AlertConfirmPortal } = useAlertConfirm();

  const merged = useMemo(() => {
    const all = [...SEED_FILINGS, ...userFilings];
    return all.map((f) => {
      const s = state[f.id] ?? {};
      const dueDate = s.nextDueDate ?? f.nextDueDate;
      let status: FilingStatus = s.status ?? "Upcoming";
      if (!s.status && dueDate && new Date(dueDate) < new Date()) {
        status = "Late";
      }
      return { ...f, nextDueDate: dueDate, status, lastFiledDate: s.lastFiledDate, notes: s.notes };
    });
  }, [state, userFilings]);

  const filtered = merged.filter((f) => {
    if (filterEntity !== "all" && f.organizationSlug !== filterEntity) return false;
    if (filterStatus !== "all" && f.status !== filterStatus) return false;
    return true;
  });

  // Sort: late > upcoming with date > upcoming no date > filed
  const sorted = [...filtered].sort((a, b) => {
    const order = { Late: 0, Upcoming: 1, "Not Required": 2, Filed: 3 } as const;
    if (order[a.status] !== order[b.status]) return order[a.status] - order[b.status];
    if (a.nextDueDate && b.nextDueDate) return a.nextDueDate.localeCompare(b.nextDueDate);
    if (a.nextDueDate) return -1;
    if (b.nextDueDate) return 1;
    return a.filingType.localeCompare(b.filingType);
  });

  const stats = {
    total: merged.length,
    late: merged.filter((f) => f.status === "Late").length,
    upcoming30d: merged.filter(
      (f) => f.status === "Upcoming" && f.nextDueDate && daysUntil(f.nextDueDate) <= 30 && daysUntil(f.nextDueDate) >= 0
    ).length,
    filed: merged.filter((f) => f.status === "Filed").length,
  };

  function setFilingState(id: string, patch: Partial<FilingState>) {
    setState({ ...state, [id]: { ...state[id], ...patch } });
  }

  function markFiled(id: string) {
    const today = new Date().toISOString().slice(0, 10);
    setFilingState(id, { status: "Filed", lastFiledDate: today });
  }

  async function deleteUserFiling(id: string) {
    const ok = await confirmAlert({
      title: "Delete this filing?",
      description: "This permanently removes the record. Cannot be undone.",
      actionLabel: "Delete",
      destructive: true,
    });
    if (!ok) return;
    setUserFilings(userFilings.filter((f) => f.id !== id));
  }

  function addFiling(f: Omit<SeedFiling, "id">) {
    setUserFilings([{ ...f, id: `user-${Date.now()}` }, ...userFilings]);
    setShowAdd(false);
  }

  return (
    <>
    <div className="space-y-6">
      <section className="grid gap-4 md:grid-cols-4">
        <Stat label="Total filings" value={String(stats.total)} />
        <Stat label="Late" value={String(stats.late)} tone={stats.late > 0 ? "destructive" : "default"} />
        <Stat label="Due in 30 days" value={String(stats.upcoming30d)} tone={stats.upcoming30d > 0 ? "warning" : "default"} />
        <Stat label="Filed" value={String(stats.filed)} tone="success" />
      </section>

      <Card>
        <CardContent className="p-4 flex flex-wrap items-center gap-3">
          <select
            value={filterEntity}
            onChange={(e) => setFilterEntity(e.target.value)}
            className="h-10 rounded-md border border-input bg-background px-3 text-sm"
          >
            <option value="all">All entities</option>
            {ALL_ORGANIZATIONS.map((o) => (
              <option key={o.slug} value={o.slug}>{o.emoji} {o.name}</option>
            ))}
          </select>
          <select
            value={filterStatus}
            onChange={(e) => setFilterStatus(e.target.value as "all" | FilingStatus)}
            className="h-10 rounded-md border border-input bg-background px-3 text-sm"
          >
            <option value="all">All statuses</option>
            <option value="Upcoming">Upcoming</option>
            <option value="Late">Late</option>
            <option value="Filed">Filed</option>
            <option value="Not Required">Not Required</option>
          </select>
          <span className="text-xs text-muted-foreground tabular-nums">
            {sorted.length} of {merged.length}
          </span>
          <Button variant="brand" size="sm" className="ml-auto" onClick={() => setShowAdd((v) => !v)}>
            {showAdd ? "Cancel" : "+ Add filing"}
          </Button>
        </CardContent>
      </Card>

      {showAdd && <AddFilingForm onAdd={addFiling} onCancel={() => setShowAdd(false)} />}

      <Card>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="border-b bg-muted/40">
                <tr>
                  <th className="text-left p-3 font-medium">Entity</th>
                  <th className="text-left p-3 font-medium">Filing</th>
                  <th className="text-left p-3 font-medium">Cadence</th>
                  <th className="text-left p-3 font-medium">Next due</th>
                  <th className="text-left p-3 font-medium">Status</th>
                  <th className="text-right p-3 font-medium">Actions</th>
                </tr>
              </thead>
              <tbody>
                {sorted.map((f) => {
                  const org = ALL_ORGANIZATIONS.find((o) => o.slug === f.organizationSlug);
                  const days = f.nextDueDate ? daysUntil(f.nextDueDate) : null;
                  const isUser = f.id.startsWith("user-");
                  return (
                    <FilingRow
                      key={f.id}
                      filing={f}
                      orgName={org?.name ?? f.organizationSlug}
                      orgEmoji={org?.emoji}
                      days={days}
                      onUpdate={(patch) => setFilingState(f.id, patch)}
                      onMarkFiled={() => markFiled(f.id)}
                      onDelete={isUser ? () => deleteUserFiling(f.id) : undefined}
                    />
                  );
                })}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

      <p className="text-xs text-muted-foreground">
        State + filed dates saved locally. Filing-due dates assume default NC LLC cadence (annual report Apr 15, E-500 due 20th of following month).
      </p>
    </div>
    <AlertConfirmPortal />
    </>
  );
}

function FilingRow({
  filing,
  orgName,
  orgEmoji,
  days,
  onUpdate,
  onMarkFiled,
  onDelete,
}: {
  filing: SeedFiling & { status: FilingStatus; lastFiledDate?: string; notes?: string };
  orgName: string;
  orgEmoji?: string;
  days: number | null;
  onUpdate: (patch: Partial<FilingState>) => void;
  onMarkFiled: () => void;
  onDelete?: () => void;
}) {
  const [editing, setEditing] = useState(false);
  return (
    <>
      <tr className="border-b last:border-b-0 hover:bg-muted/20">
        <td className="p-3">
          <span className="inline-flex items-center gap-2 text-sm">
            <span>{orgEmoji ?? "🏢"}</span>
            <span>{orgName}</span>
          </span>
        </td>
        <td className="p-3">
          <div className="font-medium">{filing.filingType}</div>
          <div className="text-xs text-muted-foreground">{filing.agency}</div>
          {filing.lastFiledDate && (
            <div className="text-[10px] text-green-700 dark:text-green-400">
              ✓ Last filed {formatDate(filing.lastFiledDate)}
            </div>
          )}
          {filing.notes && <div className="text-[10px] text-muted-foreground italic">{filing.notes}</div>}
        </td>
        <td className="p-3 text-xs">{filing.cadence}</td>
        <td className="p-3 text-xs">
          {filing.nextDueDate ? (
            <>
              <div>{formatDate(filing.nextDueDate)}</div>
              {days !== null && (
                <Badge
                  variant={days < 0 ? "destructive" : days <= 30 ? "warning" : days <= 90 ? "info" : "outline"}
                  className="mt-1 text-[10px]"
                >
                  {days < 0 ? `${Math.abs(days)}d late` : `${days}d left`}
                </Badge>
              )}
            </>
          ) : (
            <span className="text-muted-foreground">—</span>
          )}
        </td>
        <td className="p-3">
          <Badge
            variant={
              filing.status === "Filed"
                ? "success"
                : filing.status === "Late"
                ? "destructive"
                : filing.status === "Not Required"
                ? "outline"
                : "warning"
            }
          >
            {filing.status}
          </Badge>
        </td>
        <td className="p-3 text-right">
          <div className="flex items-center justify-end gap-1">
            {filing.status !== "Filed" && (
              <Button variant="brand" size="sm" onClick={onMarkFiled}>
                Mark filed
              </Button>
            )}
            {filing.filingUrl && (
              <Button asChild variant="ghost" size="sm">
                <a href={filing.filingUrl} target="_blank" rel="noopener noreferrer">↗</a>
              </Button>
            )}
            <Button variant="ghost" size="sm" onClick={() => setEditing((v) => !v)}>
              {editing ? "Done" : "Edit"}
            </Button>
            {onDelete && (
              <Button variant="ghost" size="sm" onClick={onDelete}>×</Button>
            )}
          </div>
        </td>
      </tr>
      {editing && (
        <tr className="bg-muted/30 border-b">
          <td colSpan={6} className="p-4">
            <div className="grid gap-3 md:grid-cols-3">
              <Field label="Next due date">
                <Input
                  type="date"
                  value={filing.nextDueDate ?? ""}
                  onChange={(e) => onUpdate({ nextDueDate: e.target.value })}
                />
              </Field>
              <Field label="Status">
                <select
                  value={filing.status}
                  onChange={(e) => onUpdate({ status: e.target.value as FilingStatus })}
                  className="w-full h-10 rounded-md border border-input bg-background px-3 text-sm"
                >
                  <option value="Upcoming">Upcoming</option>
                  <option value="Filed">Filed</option>
                  <option value="Late">Late</option>
                  <option value="Not Required">Not Required</option>
                </select>
              </Field>
              <Field label="Last filed">
                <Input
                  type="date"
                  value={filing.lastFiledDate ?? ""}
                  onChange={(e) => onUpdate({ lastFiledDate: e.target.value })}
                />
              </Field>
              <Field label="Notes" className="md:col-span-3">
                <Input
                  value={filing.notes ?? ""}
                  onChange={(e) => onUpdate({ notes: e.target.value })}
                />
              </Field>
            </div>
          </td>
        </tr>
      )}
    </>
  );
}

function AddFilingForm({ onAdd, onCancel }: { onAdd: (f: Omit<SeedFiling, "id">) => void; onCancel: () => void }) {
  const [form, setForm] = useState<Omit<SeedFiling, "id">>({
    organizationSlug: ALL_ORGANIZATIONS[0]?.slug ?? "south-armz-global",
    filingType: "",
    agency: "",
    cadence: "Annual",
  });

  function submit(e: React.FormEvent) {
    e.preventDefault();
    if (!form.filingType.trim() || !form.agency.trim()) return;
    onAdd(form);
  }

  return (
    <Card>
      <CardContent className="p-6">
        <form onSubmit={submit} className="grid gap-3 md:grid-cols-2">
          <Field label="Entity">
            <select
              value={form.organizationSlug}
              onChange={(e) => setForm({ ...form, organizationSlug: e.target.value })}
              className="w-full h-10 rounded-md border border-input bg-background px-3 text-sm"
            >
              {ALL_ORGANIZATIONS.map((o) => <option key={o.slug} value={o.slug}>{o.emoji} {o.name}</option>)}
            </select>
          </Field>
          <Field label="Filing type">
            <Input
              value={form.filingType}
              onChange={(e) => setForm({ ...form, filingType: e.target.value })}
              placeholder="e.g. Form 1065 (Partnership Return)"
              required
            />
          </Field>
          <Field label="Agency">
            <Input
              value={form.agency}
              onChange={(e) => setForm({ ...form, agency: e.target.value })}
              placeholder="IRS / NCDOR / SoS / TTB / FCC / etc."
              required
            />
          </Field>
          <Field label="Cadence">
            <select
              value={form.cadence}
              onChange={(e) => setForm({ ...form, cadence: e.target.value as SeedFiling["cadence"] })}
              className="w-full h-10 rounded-md border border-input bg-background px-3 text-sm"
            >
              <option value="Annual">Annual</option>
              <option value="Biennial">Biennial</option>
              <option value="Semi-Annual">Semi-Annual</option>
              <option value="Quarterly">Quarterly</option>
              <option value="Monthly">Monthly</option>
              <option value="One-Time">One-Time</option>
            </select>
          </Field>
          <Field label="Next due date">
            <Input
              type="date"
              value={form.nextDueDate ?? ""}
              onChange={(e) => setForm({ ...form, nextDueDate: e.target.value })}
            />
          </Field>
          <Field label="Filing URL">
            <Input
              value={form.filingUrl ?? ""}
              onChange={(e) => setForm({ ...form, filingUrl: e.target.value })}
              placeholder="https://..."
            />
          </Field>
          <Field label="Description" className="md:col-span-2">
            <Input
              value={form.description ?? ""}
              onChange={(e) => setForm({ ...form, description: e.target.value })}
            />
          </Field>
          <div className="md:col-span-2 flex justify-end gap-2">
            <Button variant="ghost" size="sm" type="button" onClick={onCancel}>Cancel</Button>
            <Button variant="brand" size="sm" type="submit">Add filing</Button>
          </div>
        </form>
      </CardContent>
    </Card>
  );
}

function Field({ label, children, className }: { label: string; children: React.ReactNode; className?: string }) {
  return (
    <div className={className}>
      <label className="text-xs text-muted-foreground">{label}</label>
      <div className="mt-1">{children}</div>
    </div>
  );
}

function Stat({
  label,
  value,
  tone = "default",
}: {
  label: string;
  value: string;
  tone?: "default" | "success" | "warning" | "destructive";
}) {
  const colorClass =
    tone === "success"
      ? "text-green-700 dark:text-green-400"
      : tone === "warning"
      ? "text-yellow-700 dark:text-yellow-400"
      : tone === "destructive"
      ? "text-destructive"
      : "text-foreground";
  return (
    <Card>
      <CardContent className="p-5">
        <div className="text-xs uppercase tracking-wider text-muted-foreground">{label}</div>
        <div className={`mt-1 text-2xl font-semibold tabular-nums ${colorClass}`}>{value}</div>
      </CardContent>
    </Card>
  );
}

function daysUntil(iso: string): number {
  return Math.floor((new Date(iso).getTime() - new Date().getTime()) / 86400000);
}