import { useEffect, useState } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { CategoryPicker } from "@/components/elements/CategoryPicker";
import { useMoney } from "@/hooks/useMoney";
import { UNCATEGORIZED } from "@/lib/categories";
import type { SplitDto, SplitInput } from "@/lib/api";
import { Plus, X } from "lucide-react";
import { cn } from "@/lib/utils";

interface Row {
  category: string;
  amount: string;
}

const emptyRow = (): Row => ({ category: UNCATEGORIZED, amount: "" });

interface Props {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** The parent transaction's signed amount; splits target its magnitude. */
  transactionAmount: number;
  initialSplits: SplitDto[];
  onSave: (splits: SplitInput[]) => Promise<unknown>;
  saving?: boolean;
}

/**
 * Divides one transaction's amount across several categories. Sends the
 * whole set on save (set_transaction_splits replaces it wholesale), so this
 * always starts from the current splits (or two blank rows for a first-time
 * split) rather than diffing individual add/remove operations.
 */
export function SplitEditor({ open, onOpenChange, transactionAmount, initialSplits, onSave, saving }: Props) {
  const { moneyAbs } = useMoney();
  const [rows, setRows] = useState<Row[]>([emptyRow(), emptyRow()]);
  const target = Math.abs(transactionAmount);

  useEffect(() => {
    if (!open) return;
    setRows(
      initialSplits.length > 0
        ? initialSplits.map((s) => ({ category: s.category || UNCATEGORIZED, amount: String(s.amount) }))
        : [emptyRow(), emptyRow()]
    );
  }, [open, initialSplits]);

  const sum = rows.reduce((n, r) => n + (parseFloat(r.amount) || 0), 0);
  const remaining = Math.round((target - sum) * 100) / 100;
  const balanced = Math.abs(remaining) < 0.01;
  const rowsValid = rows.every((r) => r.category && (parseFloat(r.amount) || 0) > 0);
  const canSave = rows.length >= 2 && rowsValid && balanced;

  const update = (i: number, patch: Partial<Row>) =>
    setRows((prev) => prev.map((r, idx) => (idx === i ? { ...r, ...patch } : r)));
  const addRow = () => setRows((prev) => [...prev, emptyRow()]);
  const removeRow = (i: number) => setRows((prev) => prev.filter((_, idx) => idx !== i));

  const save = async () => {
    if (!canSave) return;
    await onSave(rows.map((r) => ({ category: r.category, amount: Math.round(parseFloat(r.amount) * 100) / 100 })));
    onOpenChange(false);
  };

  const removeSplit = async () => {
    await onSave([]);
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[440px]">
        <DialogHeader><DialogTitle>Split transaction</DialogTitle></DialogHeader>
        <div className="space-y-3 py-2">
          {rows.map((row, i) => (
            <div key={i} className="flex items-center gap-2">
              <CategoryPicker
                value={row.category}
                onChange={(c) => update(i, { category: c })}
                triggerClassName="h-9 flex-1"
              />
              <Input
                type="number" min="0" step="0.01" placeholder="0.00"
                value={row.amount}
                onChange={(e) => update(i, { amount: e.target.value })}
                className="w-24 shrink-0"
              />
              <Button
                type="button" variant="ghost" size="icon"
                className="h-8 w-8 shrink-0 text-muted-foreground hover:text-destructive"
                aria-label={`Remove row ${i + 1}`}
                onClick={() => removeRow(i)}
                disabled={rows.length <= 1}
              >
                <X size={14} strokeWidth={1.5} />
              </Button>
            </div>
          ))}

          <Button type="button" variant="outline" size="sm" className="gap-1.5" onClick={addRow}>
            <Plus size={13} strokeWidth={1.75} /> Add split
          </Button>

          <div className="flex items-center justify-between text-sm pt-1 border-t border-border/50">
            <span className="text-muted-foreground">Total: {moneyAbs(target)}</span>
            <span className={cn("font-medium", balanced ? "text-chart-green" : "text-chart-red")}>
              {balanced ? "Balanced" : remaining > 0 ? `${moneyAbs(remaining)} left` : `${moneyAbs(Math.abs(remaining))} over`}
            </span>
          </div>
        </div>
        <DialogFooter className="flex-row sm:justify-between">
          {initialSplits.length > 0 ? (
            <Button type="button" variant="ghost" className="text-destructive hover:text-destructive" onClick={() => void removeSplit()} disabled={saving}>
              Remove split
            </Button>
          ) : <span />}
          <div className="flex gap-2">
            <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
            <Button onClick={() => void save()} disabled={!canSave || saving}>
              {saving ? "Saving…" : "Save"}
            </Button>
          </div>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}