import React, { useEffect, useMemo, useRef, useState } from "react";
import { AlertCircle, Check, FileUp, Loader2, X } from "lucide-react";
import { Button, Checkbox, DatePicker, Dialog, Drawer, Textarea, Tooltip, Upload } from "tdesign-react";
import AccessibleInput from "../../components/AccessibleInput";
import { api, ApiError } from "../../services/api";
import { apiFieldErrors } from "../../services/formErrors";
import { dateFromInput, dateInputValue, formatBytes } from "./date";
import type { Expense, Notify } from "./types";
import { useUnsavedActions, useUnsavedChanges } from "../../contexts/UnsavedChanges";
import { useDrawerFocus } from "../../hooks/useDrawerFocus";

type Props = { expense?: Expense | null; timezone?: string; onClose: () => void; onSaved: () => void; notify?: Notify };
type UploadFile = File & { raw?: File };
type ExpenseField = "paidAt" | "amount" | "note" | "paymentProofs" | "invoices" | "invoiceMissingReason";

export default function ExpenseDrawer({ expense, timezone = "Asia/Shanghai", onClose, onSaved, notify }: Props) {
  const initial = useMemo(() => ({ amount: expense ? (expense.amountCents / 100).toFixed(2) : "", note: expense?.note || "", paidAt: expense ? dateInputValue(new Date(expense.paidAt), timezone) : dateInputValue(new Date(), timezone), reason: expense?.invoiceMissingReason || "" }), [expense, timezone]);
  const [amount, setAmount] = useState(initial.amount); const [note, setNote] = useState(initial.note); const [paidAt, setPaidAt] = useState(initial.paidAt);
  const [proofs, setProofs] = useState<File[]>([]); const [invoices, setInvoices] = useState<File[]>([]); const [missing, setMissing] = useState(Boolean(initial.reason)); const [reason, setReason] = useState(initial.reason);
  const [serverInvoiceCount, setServerInvoiceCount] = useState(expense?.invoiceCount || 0); const [version, setVersion] = useState(expense?.version || 1); const [busy, setBusy] = useState(false); const [error, setError] = useState(""); const [conflict, setConflict] = useState<Expense | null>(null);
  const [fieldErrors, setFieldErrors] = useState<Partial<Record<ExpenseField, string>>>({});
  const [datePickerOpen, setDatePickerOpen] = useState(false);
  const submitInFlight = useRef(false);
  useDrawerFocus(true, ".tn-expense-drawer");
  useEffect(() => { setAmount(initial.amount); setNote(initial.note); setPaidAt(initial.paidAt); setReason(initial.reason); setMissing(Boolean(initial.reason)); setServerInvoiceCount(expense?.invoiceCount || 0); setVersion(expense?.version || 1); setProofs([]); setInvoices([]); }, [initial, expense]);
  // The drawer is mounted through a portal; explicitly hydrate from the record
  // identity as well so a portal reuse cannot leave stale blank controls.
  useEffect(() => {
    if (!expense) return;
    setAmount((expense.amountCents / 100).toFixed(2));
    setNote(expense.note || "");
    setPaidAt(dateInputValue(new Date(expense.paidAt), timezone));
    setReason(expense.invoiceMissingReason || "");
    setMissing(Boolean(expense.invoiceMissingReason));
    setServerInvoiceCount(expense.invoiceCount || 0);
    setVersion(expense.version || 1);
  }, [expense?.id, expense?.amountCents, expense?.paidAt, expense?.note, expense?.invoiceMissingReason, expense?.invoiceCount, expense?.version, timezone]);
  useEffect(() => {
    // TDesign keeps its native file input hidden and does not forward ARIA
    // props to it. Label both inputs explicitly for assistive technology;
    // the visible trigger buttons remain the primary keyboard targets.
    const inputs: Array<[string, string, string, string]> = [
      [".tn-payment-proof-upload input[type=file]", "expense-payment-proofs-input", "expense-payment-proofs-label", "付款凭证文件"],
      [".tn-invoice-upload input[type=file]", "expense-invoices-input", "expense-invoices-label", "发票文件"],
    ];
    const applyLabels = () => inputs.forEach(([selector, id, labelledBy, label]) => {
      const input = document.querySelector<HTMLInputElement>(selector);
      if (!input) return;
      input.id = id;
      input.setAttribute("aria-labelledby", labelledBy);
      input.setAttribute("aria-label", label);
    });
    // Drawer content is portalled after the first effect pass. Retry on the
    // next frame and once after the opening transition so the native inputs
    // receive their labels in both mounted and animated states.
    applyLabels();
    const frame = window.requestAnimationFrame(applyLabels);
    const timer = window.setTimeout(applyLabels, 260);
    return () => { window.cancelAnimationFrame(frame); window.clearTimeout(timer); };
  }, []);
  const hasInvoice = serverInvoiceCount + invoices.length > 0;
  const dirty = proofs.length > 0 || invoices.length > 0 || amount !== initial.amount || note !== initial.note || paidAt !== initial.paidAt || reason !== initial.reason || missing !== Boolean(initial.reason);
  const { requestDiscard } = useUnsavedActions();
  useUnsavedChanges(dirty);
  const clearField = (...fields: ExpenseField[]) => {
    setFieldErrors(current => {
      const next = { ...current };
      fields.forEach(field => delete next[field]);
      return next;
    });
    setError("");
  };
  const choose = (kind: "proof" | "invoice") => (files: any[]) => {
    clearField(kind === "proof" ? "paymentProofs" : "invoices", "invoiceMissingReason");
    const next = files.map((f: any) => (f.raw || f.originFileObj || f) as UploadFile).filter((f: any) => f instanceof File || f?.name);
    if (kind === "proof") setProofs(next.slice(0, Math.max(0, 20 - invoices.length))); else { setInvoices(next.slice(0, Math.max(0, 20 - proofs.length))); if (next.length) { setMissing(false); setReason(""); } }
  };
  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (busy || submitInFlight.current) return;
    setError("");
    const nextErrors: Partial<Record<ExpenseField, string>> = {};
    if (!expense && !proofs.length) nextErrors.paymentProofs = "至少选择一张付款凭证";
    if (!/^(?:0|[1-9]\d*)(?:\.\d{1,2})?$/.test(amount) || Number(amount) <= 0) nextErrors.amount = "金额必须为大于零且最多两位小数";
    let iso = "";
    try { iso = dateFromInput(paidAt, timezone); } catch (caught) { nextErrors.paidAt = (caught as Error).message; }
    const normalized = missing ? reason.trim() : "";
    if (!hasInvoice && !normalized) nextErrors.invoiceMissingReason = "请上传发票，或勾选“无发票”并填写原因";
    if (Object.keys(nextErrors).length) { setFieldErrors(nextErrors); setError("请检查标记的字段后再保存"); focusExpenseField(nextErrors); return; }
    setFieldErrors({});
    submitInFlight.current = true;
    setBusy(true);
    try {
      if (expense) {
        // A multipart edit carries the fields and all new attachments in one
        // optimistic-lock transaction. This prevents partial edits when one
        // upload or a later validation fails.
        const body = new FormData();
        body.append("paidAt", iso);
        body.append("amount", amount);
        body.append("note", note);
        body.append("invoiceMissingReason", hasInvoice ? "" : normalized);
        body.append("version", String(version));
        proofs.forEach(file => body.append("paymentProofs", file));
        invoices.forEach(file => body.append("invoices", file));
        const updated = await api<{ expense: Expense }>(`/api/expenses/${expense.id}`, { method: "PATCH", body });
        setVersion(updated.expense.version);
        setServerInvoiceCount(updated.expense.invoiceCount);
      } else { const body = new FormData(); body.append("paidAt", iso); body.append("amount", amount); body.append("note", note); body.append("invoiceMissingReason", normalized); proofs.forEach(f => body.append("paymentProofs", f)); invoices.forEach(f => body.append("invoices", f)); await api("/api/expenses", { method: "POST", body }); }
      notify?.(expense ? "账目已更新" : "账目已保存", "success"); onSaved(); onClose();
    } catch (caught) {
      if (caught instanceof ApiError && caught.status === 409 && (caught as any).details?.current) setConflict((caught as any).details.current);
      else {
        const mapped = apiFieldErrors(caught) as Partial<Record<ExpenseField, string>>;
        if (Object.keys(mapped).length) { setFieldErrors(mapped); setError("请检查标记的字段后再保存"); focusExpenseField(mapped); }
        else setError((caught as Error).message);
      }
    } finally { submitInFlight.current = false; setBusy(false); }
  };
  const closeDrawer = (context?: { trigger?: string }) => {
    // ESC first belongs to the nested date/time popup. TDesign bubbles the
    // same key to Drawer, so consume that close event while the popup is open.
    if (context?.trigger === "esc" && datePickerOpen) {
      setDatePickerOpen(false);
      return;
    }
    requestDiscard(onClose);
  };
  return <>
    <Drawer className="tn-content-drawer tn-expense-drawer" placement="right" size="480px" visible destroyOnClose header={expense ? "编辑账目" : "新增账目"} onClose={closeDrawer} footer={<><Button variant="outline" onClick={() => requestDiscard(onClose)} disabled={busy}>取消</Button><Button theme="primary" onClick={() => { void submit({ preventDefault() {} } as React.FormEvent); }} disabled={busy}>{busy ? <Loader2 size={16} className="spin" /> : <><Check size={16} />保存</>}</Button></>}>
      <form className="expense-form" onSubmit={submit}>
        <label className="tn-form-field"><span>支付时间</span><DatePicker disabled={busy} inputProps={{ "aria-label": "支付时间", "aria-invalid": Boolean(fieldErrors.paidAt), "aria-describedby": fieldErrors.paidAt ? "expense-paid-at-error" : undefined } as any} popupProps={{ onVisibleChange: (visible: boolean) => setDatePickerOpen(visible) }} enableTimePicker format="YYYY-MM-DD HH:mm" value={paidAt} onChange={(v: any) => { setPaidAt(String(v)); clearField("paidAt"); }} /><small>选择日期和时间（精确到分钟，按应用时区保存）</small><FieldError id="expense-paid-at-error" message={fieldErrors.paidAt} /></label>
        <label className="tn-form-field"><span>金额（元）</span><AccessibleInput disabled={busy} inputAriaLabel="金额（元）" inputAriaInvalid={Boolean(fieldErrors.amount)} inputAriaDescribedby={fieldErrors.amount ? "expense-amount-error" : undefined} value={amount} onChange={value => { setAmount(value); clearField("amount"); }} placeholder="0.00" /><FieldError id="expense-amount-error" message={fieldErrors.amount} /></label>
        <label className="tn-form-field"><span>备注</span><Textarea disabled={busy} aria-label="备注" aria-invalid={Boolean(fieldErrors.note)} aria-describedby={fieldErrors.note ? "expense-note-error" : undefined} value={note} onChange={value => { setNote(value); clearField("note"); }} maxlength={2000} placeholder="可选" /><FieldError id="expense-note-error" message={fieldErrors.note} /></label>
        <div className="tn-form-field" role="group" aria-labelledby="expense-payment-proofs-label"><span id="expense-payment-proofs-label">付款凭证（至少 1 张）</span><Upload disabled={busy} className="tn-payment-proof-upload" aria-label="选择付款凭证文件" aria-labelledby="expense-payment-proofs-label" multiple autoUpload={false} accept="image/jpeg,image/png,image/webp" onChange={choose("proof") as any} trigger={<Button type="button" variant="outline" disabled={busy} aria-invalid={Boolean(fieldErrors.paymentProofs)} aria-describedby={fieldErrors.paymentProofs ? "expense-proof-error" : undefined} icon={<FileUp size={15} />}>选择付款凭证</Button>} /><FieldError id="expense-proof-error" message={fieldErrors.paymentProofs} /></div>
        {proofs.length > 0 && <FileList files={proofs} disabled={busy} remove={f => setProofs(proofs.filter(x => x !== f))} />}
        <div className="tn-form-field" role="group" aria-labelledby="expense-invoices-label"><span id="expense-invoices-label">发票（可选）</span><Upload disabled={busy} className="tn-invoice-upload" aria-label="选择发票文件" aria-labelledby="expense-invoices-label" multiple autoUpload={false} accept=".pdf,.ofd,.xml,application/pdf,application/ofd,application/xml" onChange={choose("invoice") as any} trigger={<Button type="button" variant="outline" disabled={busy} aria-invalid={Boolean(fieldErrors.invoices)} aria-describedby={fieldErrors.invoices ? "expense-invoice-error" : undefined} icon={<FileUp size={15} />}>选择发票</Button>} /><FieldError id="expense-invoice-error" message={fieldErrors.invoices} /></div>
        {invoices.length > 0 && <FileList files={invoices} disabled={busy} remove={f => setInvoices(invoices.filter(x => x !== f))} />}
        <Checkbox className="invoice-missing-toggle" aria-invalid={Boolean(fieldErrors.invoiceMissingReason)} aria-describedby={fieldErrors.invoiceMissingReason ? "expense-reason-error" : undefined} checked={missing} disabled={busy || hasInvoice} onChange={(checked: boolean) => { setMissing(checked); clearField("invoiceMissingReason"); if (!checked) setReason(""); }}>无发票</Checkbox>
        {!hasInvoice && !missing && (fieldErrors.invoiceMissingReason ? <small id="expense-reason-error" className="tn-field-error" role="alert">{fieldErrors.invoiceMissingReason}</small> : <small className="tn-form-help">请上传发票，或勾选“无发票”并填写原因。</small>)}
        {hasInvoice && <small>已上传发票，无需填写无发票原因。</small>}
        {missing && !hasInvoice && <label className="tn-form-field"><span>无发票原因</span><Textarea disabled={busy} aria-label="无发票原因" aria-invalid={Boolean(fieldErrors.invoiceMissingReason)} aria-describedby={fieldErrors.invoiceMissingReason ? "expense-reason-error" : undefined} value={reason} onChange={value => { setReason(value); clearField("invoiceMissingReason"); }} maxlength={500} placeholder="例如：商家无法开具发票" /><FieldError id="expense-reason-error" message={fieldErrors.invoiceMissingReason} /></label>}
        {error && <div role="alert" className="expense-error"><AlertCircle size={16} />{error}</div>}
      </form>
    </Drawer>
    <Dialog visible={Boolean(conflict)} header="记录已被更新" confirmBtn="保留当前内容" cancelBtn="加载服务器版本" onClose={() => { setConflict(null); setError("冲突提示已关闭，请再次保存以重新确认最新版本。"); }} onConfirm={() => { if (conflict) { setVersion(conflict.version); setServerInvoiceCount(conflict.invoiceCount); setConflict(null); setError("当前内容已保留，请再次保存以覆盖服务器版本。"); } }} onCancel={() => { if (conflict) { setAmount((conflict.amountCents / 100).toFixed(2)); setNote(conflict.note); setPaidAt(dateInputValue(new Date(conflict.paidAt), timezone)); setVersion(conflict.version); setServerInvoiceCount(conflict.invoiceCount); setConflict(null); } }}>另一位管理员刚刚修改了这笔账目。请选择如何处理，系统不会静默覆盖。</Dialog>
  </>;
}
function focusExpenseField(errors: Partial<Record<ExpenseField, string>>) {
  const selectors: Partial<Record<ExpenseField, string>> = {
    paidAt: "[aria-describedby='expense-paid-at-error'], [aria-describedby='expense-paid-at-error'] input",
    amount: "[aria-describedby='expense-amount-error'] input, [aria-describedby='expense-amount-error']",
    note: "[aria-describedby='expense-note-error'] textarea, [aria-describedby='expense-note-error']",
    paymentProofs: "[aria-describedby='expense-proof-error']",
    invoices: "[aria-describedby='expense-invoice-error']",
    invoiceMissingReason: "[aria-describedby='expense-reason-error'] textarea, [aria-describedby='expense-reason-error'], .invoice-missing-toggle",
  };
  const field = (["paidAt", "amount", "note", "paymentProofs", "invoices", "invoiceMissingReason"] as ExpenseField[]).find(key => errors[key]);
  if (!field) return;
  requestAnimationFrame(() => {
    const node = document.querySelector<HTMLElement>(selectors[field] || "");
    const target = node && /^(INPUT|TEXTAREA|BUTTON|SELECT)$/.test(node.tagName)
      ? node
      : node?.querySelector<HTMLElement>("input, textarea, button, select");
    target?.focus();
  });
}
function FieldError({ id, message }: { id: string; message?: string }) { return message ? <small id={id} className="tn-field-error" role="alert">{message}</small> : null; }
function FileList({ files, remove, disabled = false }: { files: File[]; remove: (f: File) => void; disabled?: boolean }) { return <ul className="expense-file-list">{files.map(f => <li key={`${f.name}-${f.size}-${f.lastModified}`}><FileUp size={14} />{f.name}<small>{formatBytes(f.size)}</small><Tooltip content="移除文件" placement="left"><Button variant="text" shape="circle" disabled={disabled} onClick={() => remove(f)} aria-label={`移除文件 ${f.name}`}><X size={14} /></Button></Tooltip></li>)}</ul>; }