import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Upload, FileText, AlertTriangle, CheckCircle2, Loader2, ArrowLeft } from "lucide-react";
import { cn } from "@/lib/utils";
import { toast } from "sonner";
import { useFinanceData } from "@/context/FinanceDataContext";
import { useMoney } from "@/hooks/useMoney";
import {
  parseCsv, detectMapping, buildTransactions,
  EMPTY_MAPPING, type ColumnMapping, type ColumnKey, type ImportRow, type ParsedFile,
} from "@/lib/import/parse";
import { extractPdfTransactions, pdfRowsAsRecords, PDF_HEADERS } from "@/lib/import/pdf";
import { CategoryBadge } from "@/components/elements/CategoryIcon";
import { accountDisplayName, canHoldTransactions } from "@/lib/accounts";

type Step = "choose" | "map" | "done";

const REQUIRED: ColumnKey[] = ["date", "description"];

const FIELD_LABELS: Record<ColumnKey, string> = {
  date: "Date",
  description: "Description",
  amount: "Amount",
  category: "Category (optional)",
  debit: "Debit / money out",
  credit: "Credit / money in",
};

/**
 * Import transactions from a CSV or bank export.
 *
 * `lib/csv-parser.ts` and `lib/pdf-parser.ts` shipped in this repo, fully
 * written and referenced by nothing, while every empty state in the app invited
 * the user to "Import Data" and then offered only Plaid. This is the flow those
 * modules were missing.
 */
export function ImportDialog({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  const { accounts: allAccounts, transactions, addTransactions, refreshData, dateFormat } = useFinanceData();
  const accounts = useMemo(() => allAccounts.filter((a) => canHoldTransactions(a.type)), [allAccounts]);
  const { money } = useMoney();

  const [step, setStep] = useState<Step>("choose");
  const [fileName, setFileName] = useState("");
  const [parsed, setParsed] = useState<ParsedFile | null>(null);
  const [mapping, setMapping] = useState<ColumnMapping>(EMPTY_MAPPING);
  const [accountId, setAccountId] = useState(accounts[0]?.id ?? "");
  const [allPositiveAreExpenses, setAllPositiveAreExpenses] = useState(false);
  const [skipDuplicates, setSkipDuplicates] = useState(true);
  const [busy, setBusy] = useState(false);
  const [dragging, setDragging] = useState(false);
  const [pdfNote, setPdfNote] = useState("");
  const [imported, setImported] = useState(0);
  const inputRef = useRef<HTMLInputElement>(null);

  // `accounts` is empty on first render while the context loads, so seeding the
  // selection from useState's initial value leaves it blank forever, and with
  // no account the preview can build nothing and the import button never
  // enables. Adopt the first account as soon as one exists.
  useEffect(() => {
    if (!accountId && accounts.length > 0) setAccountId(accounts[0].id);
  }, [accounts, accountId]);

  const reset = useCallback(() => {
    setStep("choose");
    setFileName("");
    setParsed(null);
    setMapping(EMPTY_MAPPING);
    setAllPositiveAreExpenses(false);
    setSkipDuplicates(true);
    setImported(0);
    setPdfNote("");
    setAccountId(accounts[0]?.id ?? "");
  }, [accounts]);

  const handleFile = useCallback(
    async (file: File) => {
      const isPdf = /\.pdf$/i.test(file.name);
      if (!isPdf && !/\.(csv|tsv|txt)$/i.test(file.name)) {
        toast.error("Choose a .csv or .pdf statement");
        return;
      }
      setBusy(true);
      try {
        let result: ParsedFile;
        if (isPdf) {
          // PDF statements have no schema, so this is a guess, which is exactly
          // why it lands on the same preview step for confirmation.
          const extracted = await extractPdfTransactions(file, dateFormat);
          if (extracted.rows.length === 0) {
            toast.error("Couldn't find any transactions in that PDF");
            return;
          }
          result = { headers: PDF_HEADERS, rows: pdfRowsAsRecords(extracted.rows) };
          setPdfNote(
            extracted.skipped > 0
              ? `Read ${extracted.rows.length} of ${extracted.scanned} statement lines, check the preview.`
              : `Read ${extracted.rows.length} lines, check the preview before importing.`
          );
        } else {
          result = await parseCsv(file);
          setPdfNote("");
          if (result.rows.length === 0) {
            toast.error("That file has no rows");
            return;
          }
        }
        setParsed(result);
        setMapping(detectMapping(result.headers));
        setFileName(file.name);
        setStep("map");
      } catch {
        toast.error("Couldn't read that file");
      } finally {
        setBusy(false);
      }
    },
    [dateFormat]
  );

  const account = accounts.find((a) => a.id === accountId);

  /** Preview is computed live, so changing a mapping updates it immediately. */
  const rows: ImportRow[] = useMemo(() => {
    if (!parsed || !account) return [];
    return buildTransactions(parsed.rows, {
      mapping,
      dateFormat,
      accountId,
      accountName: accountDisplayName(account),
      existing: transactions,
      treatAmountsAsExpenses: allPositiveAreExpenses,
    });
  }, [parsed, mapping, dateFormat, accountId, account, transactions, allPositiveAreExpenses]);

  const valid = rows.filter((r) => r.transaction);
  const failed = rows.filter((r) => !r.transaction);
  const duplicates = valid.filter((r) => r.duplicate);
  const toImport = skipDuplicates ? valid.filter((r) => !r.duplicate) : valid;

  const hasAmountSource = !!mapping.amount || !!mapping.debit || !!mapping.credit;
  const missing = REQUIRED.filter((k) => !mapping[k]);
  const canImport = missing.length === 0 && hasAmountSource && !!accountId && toImport.length > 0;

  const doImport = async () => {
    setBusy(true);
    try {
      await addTransactions(toImport.map((r) => r.transaction!));
      setImported(toImport.length);
      setStep("done");
      refreshData();
    } catch {
      toast.error("Import failed");
    } finally {
      setBusy(false);
    }
  };

  const close = (o: boolean) => {
    if (!o) reset();
    onOpenChange(o);
  };

  return (
    <Dialog open={open} onOpenChange={close}>
      <DialogContent className="sm:max-w-[680px] max-h-[86vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>
            {step === "choose" && "Import transactions"}
            {step === "map" && "Check the columns"}
            {step === "done" && "Import complete"}
          </DialogTitle>
        </DialogHeader>

        {step === "choose" && (
          <div className="space-y-4 py-2">
            {accounts.length === 0 ? (
              <p className="text-sm text-muted-foreground">
                Add or connect an account first, imported transactions need somewhere to live.
              </p>
            ) : (
              <>
                <div
                  role="button"
                  tabIndex={0}
                  onClick={() => inputRef.current?.click()}
                  onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && inputRef.current?.click()}
                  onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
                  onDragLeave={() => setDragging(false)}
                  onDrop={(e) => {
                    e.preventDefault();
                    setDragging(false);
                    const f = e.dataTransfer.files?.[0];
                    if (f) void handleFile(f);
                  }}
                  className={cn(
                    "border-2 border-dashed rounded-xl p-10 text-center transition-colors cursor-pointer",
                    dragging ? "border-primary bg-primary/5" : "border-border hover:border-primary/50"
                  )}
                >
                  {busy ? (
                    <Loader2 className="h-8 w-8 mx-auto animate-spin text-primary" />
                  ) : (
                    <Upload className="h-8 w-8 mx-auto text-muted-foreground" />
                  )}
                  <p className="text-sm font-medium text-foreground mt-3">
                    Drop a CSV or PDF statement here, or click to choose
                  </p>
                  <p className="text-xs text-muted-foreground mt-1">
                    CSV is most reliable; PDF statements are read best-effort and shown for review
                  </p>
                </div>
                <input
                  ref={inputRef}
                  type="file"
                  accept=".csv,.tsv,.txt,.pdf,text/csv,application/pdf"
                  className="sr-only"
                  onChange={(e) => {
                    const f = e.target.files?.[0];
                    if (f) void handleFile(f);
                    e.target.value = "";
                  }}
                />
              </>
            )}
          </div>
        )}

        {step === "map" && parsed && (
          <div className="space-y-5 py-1">
            <div className="flex items-center gap-2 text-xs text-muted-foreground">
              <FileText size={13} strokeWidth={1.5} />
              <span className="font-medium text-foreground">{fileName}</span>
              <span>· {parsed.rows.length} rows</span>
            </div>

            {pdfNote && (
              <p className="text-xs text-chart-yellow flex items-start gap-1.5">
                <AlertTriangle size={12} strokeWidth={1.5} className="mt-0.5 shrink-0" />
                {pdfNote}
              </p>
            )}

            <div className="space-y-1.5">
              <Label>Import into</Label>
              <Select value={accountId} onValueChange={setAccountId}>
                <SelectTrigger><SelectValue placeholder="Choose an account" /></SelectTrigger>
                <SelectContent>
                  {accounts.map((a) => (
                    <SelectItem key={a.id} value={a.id}>{accountDisplayName(a)}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label>Columns</Label>
              <div className="grid grid-cols-2 gap-3">
                {(Object.keys(FIELD_LABELS) as ColumnKey[]).map((key) => (
                  <div key={key} className="space-y-1">
                    <p className="text-xs text-muted-foreground">
                      {FIELD_LABELS[key]}
                      {REQUIRED.includes(key) && <span className="text-chart-red ml-0.5">*</span>}
                    </p>
                    <Select
                      value={mapping[key] || "__none__"}
                      onValueChange={(v) => setMapping((m) => ({ ...m, [key]: v === "__none__" ? "" : v }))}
                    >
                      <SelectTrigger className="h-9"><SelectValue placeholder="Not mapped" /></SelectTrigger>
                      <SelectContent>
                        <SelectItem value="__none__">Not mapped</SelectItem>
                        {parsed.headers.map((h) => <SelectItem key={h} value={h}>{h}</SelectItem>)}
                      </SelectContent>
                    </Select>
                  </div>
                ))}
              </div>
              {!hasAmountSource && (
                <p className="text-xs text-chart-red">
                  Map an Amount column, or a Debit/Credit pair.
                </p>
              )}
              <p className="text-[11px] text-muted-foreground">
                Ambiguous dates like 01/02/2026 are read as {dateFormat}, change that in
                Settings → Preferences.
              </p>
            </div>

            <div className="space-y-2">
              <label className="flex items-center gap-2 text-sm cursor-pointer">
                <Checkbox
                  checked={allPositiveAreExpenses}
                  onCheckedChange={(c) => setAllPositiveAreExpenses(!!c)}
                />
                <span className="text-foreground">Amounts are all positive, treat them as spending</span>
              </label>
              <label className="flex items-center gap-2 text-sm cursor-pointer">
                <Checkbox checked={skipDuplicates} onCheckedChange={(c) => setSkipDuplicates(!!c)} />
                <span className="text-foreground">
                  Skip rows that look already imported
                  {duplicates.length > 0 && (
                    <span className="text-muted-foreground"> ({duplicates.length} found)</span>
                  )}
                </span>
              </label>
            </div>

            {/* Preview, what will actually be created. */}
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label>Preview</Label>
                <div className="flex items-center gap-2 text-xs">
                  <Badge variant="secondary" className="bg-chart-green/10 text-chart-green">
                    {toImport.length} to import
                  </Badge>
                  {duplicates.length > 0 && (
                    <Badge variant="secondary" className="bg-chart-yellow/10 text-chart-yellow">
                      {duplicates.length} duplicate{duplicates.length === 1 ? "" : "s"}
                    </Badge>
                  )}
                  {failed.length > 0 && (
                    <Badge variant="secondary" className="bg-chart-red/10 text-chart-red">
                      {failed.length} unreadable
                    </Badge>
                  )}
                </div>
              </div>

              <div className="border border-border/50 rounded-lg overflow-hidden max-h-56 overflow-y-auto">
                {toImport.slice(0, 40).map((r) => (
                  <div
                    key={r.index}
                    className="grid grid-cols-[92px_1fr_auto] gap-2 items-center px-3 py-2 text-xs border-b border-border/20 last:border-0"
                  >
                    <span className="text-muted-foreground tabular-nums">{r.transaction!.date}</span>
                    <span className="truncate text-foreground" title={r.transaction!.description}>
                      {r.transaction!.description}
                    </span>
                    <span className="flex items-center gap-2 shrink-0">
                      <CategoryBadge category={r.transaction!.category} className="px-1.5 text-[10px]" />
                      <span className={cn("tabular-nums font-medium", r.transaction!.amount < 0 ? "text-foreground" : "text-chart-green")}>
                        {money(r.transaction!.amount)}
                      </span>
                    </span>
                  </div>
                ))}
                {toImport.length === 0 && (
                  <p className="text-xs text-muted-foreground text-center py-6">
                    Nothing to import with these settings.
                  </p>
                )}
              </div>

              {/* Failures are listed rather than silently dropped, so a
                  mis-mapped column is obvious instead of looking like data loss. */}
              {failed.length > 0 && (
                <details className="text-xs">
                  <summary className="cursor-pointer text-muted-foreground hover:text-foreground flex items-center gap-1.5">
                    <AlertTriangle size={12} strokeWidth={1.5} className="text-chart-yellow" />
                    {failed.length} row{failed.length === 1 ? "" : "s"} couldn't be read
                  </summary>
                  <div className="mt-2 space-y-1 max-h-28 overflow-y-auto">
                    {failed.slice(0, 20).map((r) => (
                      <p key={r.index} className="text-muted-foreground">
                        Row {r.index + 2}: {r.error}
                      </p>
                    ))}
                  </div>
                </details>
              )}
            </div>
          </div>
        )}

        {step === "done" && (
          <div className="py-8 text-center space-y-3">
            <CheckCircle2 className="h-12 w-12 mx-auto text-chart-green" />
            <p className="text-lg font-semibold text-foreground">
              Imported {imported} transaction{imported === 1 ? "" : "s"}
            </p>
            <p className="text-sm text-muted-foreground">
              They're in your transaction list and counted towards your budgets.
            </p>
          </div>
        )}

        <DialogFooter className="sm:justify-between">
          {step === "map" ? (
            <Button variant="ghost" className="gap-1.5" onClick={() => setStep("choose")}>
              <ArrowLeft size={14} strokeWidth={1.5} /> Back
            </Button>
          ) : <span />}
          <div className="flex gap-2">
            <Button variant="outline" onClick={() => close(false)}>
              {step === "done" ? "Close" : "Cancel"}
            </Button>
            {step === "map" && (
              <Button onClick={() => void doImport()} disabled={!canImport || busy}>
                {busy ? "Importing…" : `Import ${toImport.length}`}
              </Button>
            )}
            {step === "done" && <Button onClick={reset}>Import another</Button>}
          </div>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}