import { useEffect, useState } from "react";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@/components/ui/sheet";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";
import { Link } from "react-router-dom";
import { Building2 } from "lucide-react";
import { Transaction } from "@/types/finance";
import { useMoney } from "@/hooks/useMoney";
import { normalizeMerchant } from "@/lib/merchant";
import { CategoryBadge } from "@/components/elements/CategoryIcon";
import { CategoryPicker } from "@/components/elements/CategoryPicker";
import { DetailRow } from "@/components/elements/DetailRow";
import { TagPicker } from "@/components/elements/TagPicker";
import { SplitEditor } from "@/components/elements/SplitEditor";
import { useTags, useTagMutations, useTransactionTags } from "@/hooks/useTags";
import { useTransactionSplits } from "@/hooks/useSplits";
import { useTransactionAccountName } from "@/hooks/useAccountNames";

export const allCategories = [
  "Food & Dining", "Shopping", "Transportation", "Entertainment",
  "Bills & Utilities", "Health", "Travel", "Income", "Transfer", "Groceries",
];

interface TransactionDetailProps {
  transaction: Transaction | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onCategoryChange?: (txnId: string, newCategory: string) => void;
  onNoteChange?: (txnId: string, note: string) => Promise<void> | void;
  /** Called after a split is saved or removed, so the caller can refresh
   * whatever list it's showing this transaction in (its own isSplit/
   * splitCount there won't otherwise update until the next fetch). */
  onSplitsChange?: (txnId: string) => void;
  categories?: string[];
}

export function TransactionDetail({
  transaction, open, onOpenChange, onCategoryChange, onNoteChange, onSplitsChange, categories,
}: TransactionDetailProps) {
  // Hooks must run unconditionally, so the null guard comes after them.
  const { moneyAbs, date: fmtDate } = useMoney({ accountId: transaction?.accountId });
  const [note, setNote] = useState("");
  const [savingNote, setSavingNote] = useState(false);
  const { data: allTags = [] } = useTags();
  const { data: txnTags = [], setTags } = useTransactionTags(transaction?.id);
  const { create: createTag } = useTagMutations();
  const txnTagIds = txnTags.map((t) => t.id);
  const { data: splits = [], setSplits } = useTransactionSplits(transaction?.id);
  const [splitEditorOpen, setSplitEditorOpen] = useState(false);
  const txnAccountName = useTransactionAccountName();

  useEffect(() => {
    setNote(transaction?.note ?? "");
  }, [transaction]);

  if (!transaction) return null;

  const noteDirty = note !== (transaction.note ?? "");
  const saveNote = async () => {
    if (!noteDirty || !onNoteChange) return;
    setSavingNote(true);
    try {
      await onNoteChange(transaction.id, note);
    } finally {
      setSavingNote(false);
    }
  };

  const accountName = txnAccountName(transaction);
  const formattedAmount = `${transaction.amount >= 0 ? "+" : "\u2212"}${moneyAbs(transaction.amount)}`;

  return (
    <>
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className="bg-card sm:max-w-md p-0 border-border/50">
        <div className="p-6 space-y-6">
          {/* Radix requires a title for the panel to be announced to screen
              readers. It doubles as the visible heading. */}
          <SheetHeader className="space-y-3 pt-2 text-left">
            <SheetDescription className="text-xs text-muted-foreground tracking-wide">
              {accountName}
            </SheetDescription>
            <SheetTitle className="text-3xl font-bold text-foreground tracking-tight">
              {formattedAmount}
            </SheetTitle>
          </SheetHeader>

          {/* L-5: View account link */}
          {transaction.accountId && (
            <Link
              to={`/transactions?account=${encodeURIComponent(transaction.accountId)}`}
              className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted/50 hover:bg-muted text-sm text-muted-foreground hover:text-foreground transition-colors"
              onClick={() => onOpenChange(false)}
            >
              <Building2 size={14} strokeWidth={1.5} />
              <span className="font-medium">{accountName || "View account"}</span>
              <span className="ml-auto text-xs">→</span>
            </Link>
          )}

          {/* Merchant, then the facts as label/value rows */}
          <div className="space-y-2">
            <p className="text-sm font-semibold text-foreground">{normalizeMerchant(transaction.description) || transaction.description}</p>
            <dl className="divide-y divide-border/40">
              <DetailRow label="Date">{fmtDate(transaction.date)}</DetailRow>
              <DetailRow label="Type"><span className="capitalize">{transaction.type}</span></DetailRow>
              <DetailRow label="Category"><CategoryBadge category={transaction.category} /></DetailRow>
            </dl>
          </div>

          <Separator className="bg-border/50" />

          {/* Category Select, or a read-only breakdown once split. Driven by
              the live splits query rather than transaction.isSplit: that
              prop is a snapshot taken when the panel opened and doesn't
              update in place after a save within this same session. */}
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <p className="text-xs text-muted-foreground font-medium uppercase tracking-wider">Category</p>
              <button
                type="button"
                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
                onClick={() => setSplitEditorOpen(true)}
              >
                {splits.length > 0 ? "Edit split" : "Split"}
              </button>
            </div>
            {splits.length > 0 ? (
              <div className="space-y-1.5">
                {splits.map((s) => (
                  <div
                    key={s.id}
                    className="flex items-center justify-between gap-2 text-sm px-3 py-2 rounded-md bg-muted/40 border border-border/50"
                  >
                    <CategoryBadge category={s.category || "Uncategorized"} />
                    <span className="font-medium tabular-nums">{moneyAbs(s.amount)}</span>
                  </div>
                ))}
              </div>
            ) : (
              <CategoryPicker
                value={transaction.category}
                onChange={(val) => onCategoryChange?.(transaction.id, val)}
                categories={categories || allCategories}
                triggerClassName="bg-background border-border/50 h-9"
              />
            )}
          </div>

          <Separator className="bg-border/50" />

          {/* Tags */}
          <div className="space-y-2">
            <p className="text-xs text-muted-foreground font-medium uppercase tracking-wider">Tags</p>
            <TagPicker
              tags={allTags}
              selectedIds={txnTagIds}
              onChange={(ids) => setTags.mutate(ids)}
              onCreate={(name) => createTag.mutateAsync({ name }).then((t) => t.id)}
              disabled={setTags.isPending}
            />
          </div>

          <Separator className="bg-border/50" />

          {/* Notes, the field was readOnly because there was no column to
              store it in; it saves on blur now. */}
          <div className="space-y-2">
            <p className="text-xs text-muted-foreground font-medium uppercase tracking-wider">Notes</p>
            <Textarea
              value={note}
              onChange={(e) => setNote(e.target.value)}
              onBlur={() => void saveNote()}
              placeholder="Add a note…"
              disabled={!onNoteChange || savingNote}
              className="bg-background border-border/50 text-sm min-h-[72px] resize-none"
            />
            {noteDirty && (
              <p className="text-[11px] text-muted-foreground">
                {savingNote ? "Saving…" : "Click outside to save"}
              </p>
            )}
          </div>

          <Separator className="bg-border/50" />

          {/* Bank Description */}
          <div className="space-y-2">
            <p className="text-xs text-muted-foreground font-medium uppercase tracking-wider">Bank description</p>
            <p className="text-sm font-medium text-foreground">{transaction.description}</p>
          </div>
        </div>
      </SheetContent>
    </Sheet>

    <SplitEditor
      open={splitEditorOpen}
      onOpenChange={setSplitEditorOpen}
      transactionAmount={transaction.amount}
      initialSplits={splits}
      onSave={(rows) => setSplits.mutateAsync(rows).then(() => onSplitsChange?.(transaction.id))}
      saving={setSplits.isPending}
    />
    </>
  );
}