import { useEffect, useState } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { toast } from "sonner";
import { toDateString } from "@/lib/format";
import { isDebtAccount, isIlliquidAsset } from "@/lib/accounts";
import { DatePicker } from "@/components/elements/DatePicker";
import type { Account } from "@/types/finance";

/** The eight the database's CHECK constraint accepts, anything else is a 500. */
const ACCOUNT_TYPES: { value: Account["type"]; label: string }[] = [
  { value: "checking", label: "Checking" },
  { value: "savings", label: "Savings" },
  { value: "credit", label: "Credit card" },
  { value: "investment", label: "Investment" },
  { value: "loan", label: "Loan" },
  { value: "vehicle", label: "Vehicle" },
  { value: "property", label: "Property" },
  { value: "cash", label: "Cash on hand" },
];

const PROPERTY_TYPES: { value: NonNullable<Account["propertyType"]>; label: string }[] = [
  { value: "primary", label: "Primary residence" },
  { value: "rental", label: "Rental" },
  { value: "other", label: "Other" },
];

interface Props {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** Present when editing; absent when adding. */
  account?: Account | null;
  onAdd: (a: Account) => Promise<void>;
  onUpdate: (id: string, updates: Partial<Account>) => Promise<void>;
  /** Limit the Type picker (the Accounts page offers bank types, the Assets
   * page the rest). Defaults to all eight. */
  types?: Account["type"][];
}

/**
 * Add or edit a manual account.
 *
 * Previously the only editable field anywhere was the nickname, so cash and any
 * institution Plaid does not reach simply could not be represented.
 */
export function AccountDialog({ open, onOpenChange, account, onAdd, onUpdate, types }: Props) {
  const typeOptions = types ? ACCOUNT_TYPES.filter((t) => types.includes(t.value) || t.value === account?.type) : ACCOUNT_TYPES;
  const editing = !!account;
  // A Plaid account's figures are owned by the sync and overwritten on the next
  // run, so only the nickname is editable for those.
  const plaidManaged = !!account?.id.startsWith("plaid-");

  const [name, setName] = useState("");
  const [institution, setInstitution] = useState("");
  const [type, setType] = useState<Account["type"]>("checking");
  const [balance, setBalance] = useState("");
  const [creditLimit, setCreditLimit] = useState("");
  const [mask, setMask] = useState("");
  const [originalPrincipal, setOriginalPrincipal] = useState("");
  const [interestRate, setInterestRate] = useState("");
  const [monthlyPayment, setMonthlyPayment] = useState("");
  const [termMonths, setTermMonths] = useState("");
  const [originationDate, setOriginationDate] = useState("");
  const [purchasePrice, setPurchasePrice] = useState("");
  const [purchaseDate, setPurchaseDate] = useState("");
  const [propertyType, setPropertyType] = useState<NonNullable<Account["propertyType"]>>("primary");
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (!open) return;
    setName(account?.name ?? "");
    setInstitution(account?.institution ?? "");
    setType(account?.type ?? types?.[0] ?? "checking");
    setBalance(account ? String(account.balance) : "");
    setCreditLimit(account?.creditLimit != null ? String(account.creditLimit) : "");
    setMask(account?.mask ?? "");
    setOriginalPrincipal(account?.originalPrincipal != null ? String(account.originalPrincipal) : "");
    setInterestRate(account?.interestRate != null ? String(account.interestRate) : "");
    setMonthlyPayment(account?.monthlyPayment != null ? String(account.monthlyPayment) : "");
    setTermMonths(account?.termMonths != null ? String(account.termMonths) : "");
    setOriginationDate(account?.originationDate ?? "");
    setPurchasePrice(account?.purchasePrice != null ? String(account.purchasePrice) : "");
    setPurchaseDate(account?.purchaseDate ?? "");
    setPropertyType(account?.propertyType ?? "primary");
  }, [open, account, types]);

  const submit = async () => {
    const trimmedName = name.trim();
    if (!trimmedName) { toast.error("Give the account a name"); return; }
    const parsedBalance = parseFloat(balance);
    if (Number.isNaN(parsedBalance)) { toast.error("Enter a balance"); return; }

    // A credit card's or loan's balance is what you owe, stored negative so
    // that summing every account's balance gives net worth.
    const isDebt = isDebtAccount(type);
    const signedBalance = isDebt ? -Math.abs(parsedBalance) : parsedBalance;
    const limit = creditLimit.trim() ? Math.abs(parseFloat(creditLimit)) : null;
    const loanFields = type === "loan" ? {
      originalPrincipal: originalPrincipal.trim() ? Math.abs(parseFloat(originalPrincipal)) : null,
      interestRate: interestRate.trim() ? parseFloat(interestRate) : null,
      monthlyPayment: monthlyPayment.trim() ? Math.abs(parseFloat(monthlyPayment)) : null,
      termMonths: termMonths.trim() ? Math.round(parseFloat(termMonths)) : null,
      originationDate: originationDate || null,
    } : {
      originalPrincipal: null, interestRate: null, monthlyPayment: null, termMonths: null, originationDate: null,
    };
    const assetFields = isIlliquidAsset(type) ? {
      purchasePrice: purchasePrice.trim() ? Math.abs(parseFloat(purchasePrice)) : null,
      purchaseDate: purchaseDate || null,
      propertyType: type === "property" ? propertyType : null,
    } : {
      purchasePrice: null, purchaseDate: null, propertyType: null,
    };

    setSaving(true);
    try {
      if (editing) {
        await onUpdate(account!.id, {
          name: trimmedName,
          institution: institution.trim() || trimmedName,
          type,
          balance: signedBalance,
          creditLimit: type === "credit" ? limit : null,
          available: type === "credit" && limit != null ? limit - Math.abs(signedBalance) : null,
          mask: mask.trim() || undefined,
          ...loanFields,
          ...assetFields,
        });
        toast.success("Account updated");
      } else {
        await onAdd({
          // `manual-` keeps it clear of the `plaid-` rows that the Plaid sync
          // deletes and rebuilds wholesale on every run.
          id: `manual-acct-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
          name: trimmedName,
          institution: institution.trim() || trimmedName,
          type,
          balance: signedBalance,
          available: type === "credit" && limit != null ? limit - Math.abs(signedBalance) : null,
          creditLimit: type === "credit" ? limit : null,
          lastSynced: toDateString(new Date()),
          mask: mask.trim(),
          ...loanFields,
          ...assetFields,
        });
        toast.success("Account added");
      }
      onOpenChange(false);
    } catch {
      toast.error(editing ? "Couldn't update the account" : "Couldn't add the account");
    } finally {
      setSaving(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[440px]">
        <DialogHeader>
          <DialogTitle>{editing ? "Edit account" : "Add account"}</DialogTitle>
        </DialogHeader>

        {plaidManaged ? (
          <p className="text-sm text-muted-foreground py-2">
            This account syncs from your bank, so its balance and details are
            managed there. You can rename it from the card's pencil icon.
          </p>
        ) : (
          <div className="space-y-4 py-2">
            <div className="space-y-1.5">
              <Label>Name</Label>
              <Input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder={type === "cash" ? "e.g. Wallet, Cash at home" : "e.g. Chase Savings"}
                autoFocus
              />
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label>Institution</Label>
                <Input
                  value={institution}
                  onChange={(e) => setInstitution(e.target.value)}
                  placeholder="Optional"
                />
              </div>
              <div className="space-y-1.5">
                <Label>Type</Label>
                <Select value={type} onValueChange={(v) => setType(v as Account["type"])}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    {typeOptions.map((t) => (
                      <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label>{isDebtAccount(type) ? "Balance owed" : isIlliquidAsset(type) ? "Current value" : type === "cash" ? "Amount of cash" : "Current balance"}</Label>
                <Input
                  type="number"
                  step="0.01"
                  value={balance}
                  onChange={(e) => setBalance(e.target.value)}
                  placeholder="0.00"
                  onKeyDown={(e) => e.key === "Enter" && void submit()}
                />
              </div>
              {type === "credit" ? (
                <div className="space-y-1.5">
                  <Label>Credit limit</Label>
                  <Input
                    type="number"
                    step="0.01"
                    value={creditLimit}
                    onChange={(e) => setCreditLimit(e.target.value)}
                    placeholder="Optional"
                  />
                </div>
              ) : isIlliquidAsset(type) ? (
                type === "property" && (
                  <div className="space-y-1.5">
                    <Label>Property type</Label>
                    <Select value={propertyType} onValueChange={(v) => setPropertyType(v as NonNullable<Account["propertyType"]>)}>
                      <SelectTrigger><SelectValue /></SelectTrigger>
                      <SelectContent>
                        {PROPERTY_TYPES.map((t) => (
                          <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                )
              ) : type === "cash" ? null : (
                <div className="space-y-1.5">
                  <Label>Last 4 digits</Label>
                  <Input
                    value={mask}
                    onChange={(e) => setMask(e.target.value.slice(0, 4))}
                    placeholder="Optional"
                  />
                </div>
              )}
            </div>

            {isIlliquidAsset(type) && (
              <div className="space-y-3 border-t border-border/40 pt-3">
                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Purchase details</p>
                <div className="grid grid-cols-2 gap-3">
                  <div className="space-y-1.5">
                    <Label>Purchase price</Label>
                    <Input
                      type="number" step="0.01" value={purchasePrice}
                      onChange={(e) => setPurchasePrice(e.target.value)}
                      placeholder="Optional"
                    />
                  </div>
                  <div className="space-y-1.5">
                    <Label>Purchase date</Label>
                    <DatePicker
                      value={purchaseDate || null}
                      onChange={(d) => setPurchaseDate(d ?? "")}
                      maxDate={new Date()}
                      clearable
                    />
                  </div>
                </div>
              </div>
            )}

            {type === "loan" && (
              <div className="space-y-3 border-t border-border/40 pt-3">
                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Loan terms</p>
                <div className="grid grid-cols-2 gap-3">
                  <div className="space-y-1.5">
                    <Label>Original principal</Label>
                    <Input
                      type="number" step="0.01" value={originalPrincipal}
                      onChange={(e) => setOriginalPrincipal(e.target.value)}
                      placeholder="Optional"
                    />
                  </div>
                  <div className="space-y-1.5">
                    <Label>Interest rate (%)</Label>
                    <Input
                      type="number" step="0.01" value={interestRate}
                      onChange={(e) => setInterestRate(e.target.value)}
                      placeholder="Optional"
                    />
                  </div>
                  <div className="space-y-1.5">
                    <Label>Monthly payment</Label>
                    <Input
                      type="number" step="0.01" value={monthlyPayment}
                      onChange={(e) => setMonthlyPayment(e.target.value)}
                      placeholder="Optional"
                    />
                  </div>
                  <div className="space-y-1.5">
                    <Label>Term (months)</Label>
                    <Input
                      type="number" step="1" value={termMonths}
                      onChange={(e) => setTermMonths(e.target.value)}
                      placeholder="Optional"
                    />
                  </div>
                </div>
                <div className="space-y-1.5">
                  <Label>Origination date</Label>
                  <DatePicker
                    value={originationDate || null}
                    onChange={(d) => setOriginationDate(d ?? "")}
                    maxDate={new Date()}
                    clearable
                  />
                </div>
              </div>
            )}

            {isDebtAccount(type) && (
              <p className="text-xs text-muted-foreground">
                Enter what you owe as a positive number, it's stored as a debt so
                your net worth adds up.
              </p>
            )}
          </div>
        )}

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            {plaidManaged ? "Close" : "Cancel"}
          </Button>
          {!plaidManaged && (
            <Button onClick={() => void submit()} disabled={saving}>
              {saving ? "Saving…" : editing ? "Save" : "Add account"}
            </Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}