"use client";

import { FormEvent, useMemo, useState } from "react";
import {
  Banknote,
  CircleDollarSign,
  Eye,
  FilePlus2,
  FileText,
  HandCoins,
  Plus,
  ReceiptText,
  Search,
  TriangleAlert,
  WalletCards,
} from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Dialog } from "@/components/ui/dialog";
import { Input, Textarea } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { Table } from "@/components/ui/table";
import {
  BILLING_STATUS_LABELS,
  BILLING_STATUS_VALUES,
  INVOICE_STATUS_LABELS,
  PAYMENT_METHOD_LABELS,
  PAYMENT_METHOD_VALUES,
  addBillingCharge,
  addBillingPayment,
  calculateBillingSummary,
  formatBillingPeriod,
  formatCny,
  toBillingStatementView,
} from "@/modules/billing/types";
import type {
  BillingCharge,
  BillingStatement,
  BillingStatementView,
  BillingStatus,
  InvoiceStatus,
  PaymentMethod,
} from "@/modules/billing/types";

type BillingWorkspaceClientProps = {
  initialStatements: BillingStatement[];
};

type PaymentFormState = {
  amountYuan: string;
  method: PaymentMethod;
  paidAt: string;
  reference: string;
  note: string;
};

type ChargeFormState = {
  category: string;
  description: string;
  quantity: string;
  serviceDate: string;
  unitPriceYuan: string;
};

type DialogState =
  | { kind: "detail"; statementId: string }
  | { kind: "payment"; statementId: string; form: PaymentFormState }
  | { kind: "charge"; statementId: string; form: ChargeFormState };

const STATUS_SORT_ORDER: Record<BillingStatus, number> = {
  overdue: 0,
  partial: 1,
  pending: 2,
  paid: 3,
};

const chargeCategoryOptions = [
  { value: "床位服务", label: "床位服务" },
  { value: "护理服务", label: "护理服务" },
  { value: "膳食服务", label: "膳食服务" },
  { value: "健康管理", label: "健康管理" },
  { value: "康复服务", label: "康复服务" },
  { value: "生活用品", label: "生活用品" },
  { value: "其他费用", label: "其他费用" },
];

function formatDate(value: string): string {
  return new Date(value).toLocaleDateString("zh-CN");
}

function formatDateTime(value: string): string {
  return new Date(value).toLocaleString("zh-CN");
}

function toDateInputValue(date: Date): string {
  const localDate = new Date(date.getTime() - date.getTimezoneOffset() * 60 * 1000);
  return localDate.toISOString().slice(0, 10);
}

function toDateTimeInputValue(date: Date): string {
  const localDate = new Date(date.getTime() - date.getTimezoneOffset() * 60 * 1000);
  return localDate.toISOString().slice(0, 16);
}

function parseYuanToCents(value: string): number | undefined {
  const amount = Number(value);
  if (!Number.isFinite(amount) || amount <= 0) {
    return undefined;
  }
  return Math.round(amount * 100);
}

function getStatusVariant(status: BillingStatus): "danger" | "secondary" | "success" | "warning" {
  if (status === "paid") {
    return "success";
  }
  if (status === "overdue") {
    return "danger";
  }
  if (status === "partial") {
    return "warning";
  }
  return "secondary";
}

function getInvoiceVariant(status: InvoiceStatus): "secondary" | "success" | "warning" {
  if (status === "issued") {
    return "success";
  }
  if (status === "pending") {
    return "warning";
  }
  return "secondary";
}

export function BillingWorkspaceClient({ initialStatements }: BillingWorkspaceClientProps): React.ReactElement {
  const [statements, setStatements] = useState(initialStatements);
  const [query, setQuery] = useState("");
  const [statusFilter, setStatusFilter] = useState<"all" | BillingStatus>("all");
  const [dialog, setDialog] = useState<DialogState>();
  const [message, setMessage] = useState("");
  const [referenceDate] = useState(() => new Date());

  const statementViews = useMemo(
    () =>
      statements
        .map((statement) => toBillingStatementView(statement, referenceDate))
        .sort((left, right) => STATUS_SORT_ORDER[left.status] - STATUS_SORT_ORDER[right.status]),
    [referenceDate, statements],
  );
  const summary = useMemo(
    () => calculateBillingSummary(statements, referenceDate),
    [referenceDate, statements],
  );
  const normalizedQuery = query.trim().toLowerCase();
  const filteredStatements = useMemo(
    () =>
      statementViews.filter((statement) => {
        const matchesStatus = statusFilter === "all" || statement.status === statusFilter;
        const matchesQuery =
          !normalizedQuery ||
          [
            statement.id,
            statement.elderName,
            statement.roomLabel,
            statement.contactName,
            statement.contactPhone,
          ]
            .join(" ")
            .toLowerCase()
            .includes(normalizedQuery);
        return matchesStatus && matchesQuery;
      }),
    [normalizedQuery, statementViews, statusFilter],
  );
  const selectedStatement = dialog
    ? statementViews.find((statement) => statement.id === dialog.statementId)
    : undefined;

  function openPayment(statement: BillingStatementView): void {
    setMessage("");
    setDialog({
      kind: "payment",
      statementId: statement.id,
      form: {
        amountYuan: (statement.outstandingCents / 100).toFixed(2),
        method: "wechat",
        paidAt: toDateTimeInputValue(new Date()),
        reference: "",
        note: "",
      },
    });
  }

  function openCharge(statement: BillingStatementView): void {
    setMessage("");
    setDialog({
      kind: "charge",
      statementId: statement.id,
      form: {
        category: "护理服务",
        description: "",
        quantity: "1",
        serviceDate: toDateInputValue(new Date()),
        unitPriceYuan: "",
      },
    });
  }

  function updatePaymentForm(next: Partial<PaymentFormState>): void {
    setDialog((current) =>
      current?.kind === "payment" ? { ...current, form: { ...current.form, ...next } } : current,
    );
  }

  function updateChargeForm(next: Partial<ChargeFormState>): void {
    setDialog((current) =>
      current?.kind === "charge" ? { ...current, form: { ...current.form, ...next } } : current,
    );
  }

  function submitPayment(event: FormEvent<HTMLFormElement>): void {
    event.preventDefault();
    if (dialog?.kind !== "payment" || !selectedStatement) {
      return;
    }

    const amountCents = parseYuanToCents(dialog.form.amountYuan);
    if (!amountCents) {
      setMessage("请输入有效的收款金额");
      return;
    }
    if (amountCents > selectedStatement.outstandingCents) {
      setMessage(`收款金额不能超过待收金额 ${formatCny(selectedStatement.outstandingCents)}`);
      return;
    }

    const paidAt = new Date(dialog.form.paidAt);
    if (Number.isNaN(paidAt.getTime())) {
      setMessage("请选择有效的收款时间");
      return;
    }

    const statementId = selectedStatement.id;
    const payment = {
      id: `${statementId}-payment-${Date.now()}`,
      amountCents,
      method: dialog.form.method,
      paidAt: paidAt.toISOString(),
      reference: dialog.form.reference.trim() || `PAY${Date.now()}`,
      operator: "当前操作员",
      note: dialog.form.note.trim(),
    };
    setStatements((current) =>
      current.map((statement) =>
        statement.id === statementId ? addBillingPayment(statement, payment) : statement,
      ),
    );
    setDialog({ kind: "detail", statementId });
    setMessage(`${selectedStatement.elderName} 收款 ${formatCny(amountCents)} 已登记`);
  }

  function submitCharge(event: FormEvent<HTMLFormElement>): void {
    event.preventDefault();
    if (dialog?.kind !== "charge" || !selectedStatement) {
      return;
    }

    const quantity = Number(dialog.form.quantity);
    const unitPriceCents = parseYuanToCents(dialog.form.unitPriceYuan);
    if (!dialog.form.description.trim()) {
      setMessage("请输入费用项目说明");
      return;
    }
    if (!Number.isFinite(quantity) || quantity <= 0) {
      setMessage("请输入有效的数量");
      return;
    }
    if (!unitPriceCents) {
      setMessage("请输入有效的单价");
      return;
    }

    const serviceDate = new Date(`${dialog.form.serviceDate}T12:00:00`);
    if (Number.isNaN(serviceDate.getTime())) {
      setMessage("请选择有效的服务日期");
      return;
    }

    const statementId = selectedStatement.id;
    const charge: BillingCharge = {
      id: `${statementId}-charge-${Date.now()}`,
      category: dialog.form.category,
      description: dialog.form.description.trim(),
      quantity,
      serviceDate: serviceDate.toISOString(),
      unitPriceCents,
    };
    setStatements((current) =>
      current.map((statement) =>
        statement.id === statementId ? addBillingCharge(statement, charge) : statement,
      ),
    );
    setDialog({ kind: "detail", statementId });
    setMessage(`${selectedStatement.elderName} 新增费用 ${formatCny(Math.round(quantity * unitPriceCents))}`);
  }

  function generateReceipt(statement: BillingStatementView): void {
    if (statement.payments.length === 0 || statement.receiptCount >= statement.payments.length) {
      setMessage("当前收款记录均已生成收据");
      return;
    }
    setStatements((current) =>
      current.map((item) =>
        item.id === statement.id ? { ...item, receiptCount: item.payments.length } : item,
      ),
    );
    setMessage(`${statement.elderName} 的最新收款收据已生成`);
  }

  function issueInvoice(statement: BillingStatementView): void {
    if (statement.outstandingCents > 0) {
      setMessage("账单结清后才能开具发票");
      return;
    }
    if (statement.invoiceStatus === "issued") {
      setMessage(`发票 ${statement.invoiceNumber ?? ""} 已开具`);
      return;
    }

    const compactDate = new Date().toISOString().slice(0, 10).replaceAll("-", "");
    const invoiceNumber = `FP${compactDate}${statement.id.slice(-3).toUpperCase()}`;
    setStatements((current) =>
      current.map((item) =>
        item.id === statement.id ? { ...item, invoiceStatus: "issued", invoiceNumber } : item,
      ),
    );
    setMessage(`${statement.elderName} 的电子发票已开具：${invoiceNumber}`);
  }

  const dialogTitle =
    dialog?.kind === "payment" ? "登记收款" : dialog?.kind === "charge" ? "登记费用" : "账单详情";

  return (
    <div className="mx-auto flex w-full max-w-7xl flex-col gap-5">
      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <MetricCard icon={CircleDollarSign} label="本月应收" value={formatCny(summary.receivableCents)} />
        <MetricCard icon={HandCoins} label="本月已收" value={formatCny(summary.collectedCents)} />
        <MetricCard icon={WalletCards} label="待收金额" value={formatCny(summary.outstandingCents)} />
        <MetricCard icon={TriangleAlert} label="逾期账户" value={`${summary.overdueCount} 户`} tone="danger" />
      </section>

      <section className="flex flex-col gap-4 border-b pb-5 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <h1 className="text-3xl font-semibold tracking-normal">费用管理</h1>
          <p className="mt-2 text-sm text-muted-foreground">统一查看老人月度账单、费用项目、收款记录和票据状态。</p>
        </div>
        <div className="grid w-full gap-2 sm:grid-cols-2 lg:w-auto lg:min-w-[34rem]">
          <label className="relative block">
            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              aria-label="搜索费用账单"
              className="pl-9"
              onChange={(event) => setQuery(event.target.value)}
              placeholder="搜索老人、房间、联系人或账单号"
              value={query}
            />
          </label>
          <Select
            aria-label="账单状态"
            onValueChange={(value) => setStatusFilter(value as "all" | BillingStatus)}
            options={[
              { value: "all", label: "全部账单状态" },
              ...BILLING_STATUS_VALUES.map((status) => ({ value: status, label: BILLING_STATUS_LABELS[status] })),
            ]}
            value={statusFilter}
          />
        </div>
      </section>

      {message ? (
        <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
          {message}
        </p>
      ) : null}

      <Card>
        <CardHeader className="gap-1">
          <CardTitle>月度账单</CardTitle>
          <CardDescription>当前显示 {filteredStatements.length} 条账单。</CardDescription>
        </CardHeader>
        <CardContent className="overflow-x-auto">
          <Table className="w-full min-w-[1040px] text-sm">
            <Table.Header className="bg-secondary text-left text-xs text-muted-foreground">
              <Table.Row>
                <Table.Head className="px-4 py-3">老人 / 账期</Table.Head>
                <Table.Head className="px-4 py-3">房间床位</Table.Head>
                <Table.Head className="px-4 py-3">应收金额</Table.Head>
                <Table.Head className="px-4 py-3">已收金额</Table.Head>
                <Table.Head className="px-4 py-3">待收金额</Table.Head>
                <Table.Head className="px-4 py-3">到期日</Table.Head>
                <Table.Head className="px-4 py-3">状态</Table.Head>
                <Table.Head className="px-4 py-3">票据</Table.Head>
                <Table.Head className="px-4 py-3 text-right">操作</Table.Head>
              </Table.Row>
            </Table.Header>
            <Table.Body className="divide-y bg-card">
              {filteredStatements.map((statement) => (
                <Table.Row key={statement.id}>
                  <Table.Cell className="px-4 py-3">
                    <p className="font-medium">{statement.elderName}</p>
                    <p className="text-xs text-muted-foreground">
                      {formatBillingPeriod(statement.period)} / {statement.id.toUpperCase()}
                    </p>
                  </Table.Cell>
                  <Table.Cell className="px-4 py-3 text-muted-foreground">{statement.roomLabel}</Table.Cell>
                  <Table.Cell className="px-4 py-3 font-medium tabular-nums">{formatCny(statement.totalCents)}</Table.Cell>
                  <Table.Cell className="px-4 py-3 tabular-nums text-muted-foreground">{formatCny(statement.paidCents)}</Table.Cell>
                  <Table.Cell className="px-4 py-3 font-medium tabular-nums">{formatCny(statement.outstandingCents)}</Table.Cell>
                  <Table.Cell className="px-4 py-3 text-muted-foreground">{formatDate(statement.dueAt)}</Table.Cell>
                  <Table.Cell className="px-4 py-3">
                    <Badge variant={getStatusVariant(statement.status)}>{BILLING_STATUS_LABELS[statement.status]}</Badge>
                  </Table.Cell>
                  <Table.Cell className="px-4 py-3">
                    <Badge variant={getInvoiceVariant(statement.invoiceStatus)}>
                      {INVOICE_STATUS_LABELS[statement.invoiceStatus]}
                    </Badge>
                  </Table.Cell>
                  <Table.Cell className="px-4 py-3">
                    <div className="flex justify-end gap-2">
                      <Button
                        aria-label={`查看 ${statement.elderName} 账单`}
                        onClick={() => setDialog({ kind: "detail", statementId: statement.id })}
                        size="icon"
                        title="查看账单"
                        type="button"
                        variant="outline"
                      >
                        <Eye className="size-4" aria-hidden="true" />
                      </Button>
                      <Button
                        aria-label={`登记 ${statement.elderName} 费用`}
                        onClick={() => openCharge(statement)}
                        size="icon"
                        title="登记费用"
                        type="button"
                        variant="outline"
                      >
                        <Plus className="size-4" aria-hidden="true" />
                      </Button>
                      <Button
                        aria-label={`登记 ${statement.elderName} 收款`}
                        disabled={statement.outstandingCents === 0}
                        onClick={() => openPayment(statement)}
                        size="icon"
                        title="登记收款"
                        type="button"
                      >
                        <Banknote className="size-4" aria-hidden="true" />
                      </Button>
                    </div>
                  </Table.Cell>
                </Table.Row>
              ))}
              {filteredStatements.length === 0 ? (
                <Table.Row>
                  <Table.Cell className="px-4 py-10 text-center text-muted-foreground" colSpan={9}>
                    暂无匹配账单
                  </Table.Cell>
                </Table.Row>
              ) : null}
            </Table.Body>
          </Table>
        </CardContent>
      </Card>

      <Dialog
        description={selectedStatement ? `${selectedStatement.elderName} / ${formatBillingPeriod(selectedStatement.period)}` : undefined}
        onClose={() => setDialog(undefined)}
        open={dialog !== undefined && selectedStatement !== undefined}
        title={dialogTitle}
        width={dialog?.kind === "detail" ? "wide" : "lg"}
      >
        {dialog?.kind === "detail" && selectedStatement ? (
          <StatementDetail
            onCharge={() => openCharge(selectedStatement)}
            onInvoice={() => issueInvoice(selectedStatement)}
            onPayment={() => openPayment(selectedStatement)}
            onReceipt={() => generateReceipt(selectedStatement)}
            statement={selectedStatement}
          />
        ) : null}
        {dialog?.kind === "payment" && selectedStatement ? (
          <PaymentForm
            form={dialog.form}
            onCancel={() => setDialog({ kind: "detail", statementId: selectedStatement.id })}
            onSubmit={submitPayment}
            onUpdate={updatePaymentForm}
            statement={selectedStatement}
          />
        ) : null}
        {dialog?.kind === "charge" && selectedStatement ? (
          <ChargeForm
            form={dialog.form}
            onCancel={() => setDialog({ kind: "detail", statementId: selectedStatement.id })}
            onSubmit={submitCharge}
            onUpdate={updateChargeForm}
          />
        ) : null}
      </Dialog>
    </div>
  );
}

function StatementDetail({
  onCharge,
  onInvoice,
  onPayment,
  onReceipt,
  statement,
}: {
  onCharge: () => void;
  onInvoice: () => void;
  onPayment: () => void;
  onReceipt: () => void;
  statement: BillingStatementView;
}): React.ReactElement {
  const canGenerateReceipt = statement.payments.length > statement.receiptCount;
  const canIssueInvoice = statement.outstandingCents === 0 && statement.invoiceStatus !== "issued";

  return (
    <div className="grid gap-5">
      <section className="grid gap-4 border-b pb-5 sm:grid-cols-2 lg:grid-cols-4">
        <SummaryItem label="应收金额" value={formatCny(statement.totalCents)} />
        <SummaryItem label="已收金额" value={formatCny(statement.paidCents)} />
        <SummaryItem label="待收金额" value={formatCny(statement.outstandingCents)} />
        <div>
          <p className="text-xs text-muted-foreground">账单状态</p>
          <Badge className="mt-2" variant={getStatusVariant(statement.status)}>
            {BILLING_STATUS_LABELS[statement.status]}
          </Badge>
        </div>
      </section>

      <section className="grid gap-3 rounded-md border bg-secondary/25 p-4 sm:grid-cols-2 lg:grid-cols-4">
        <InfoItem label="房间床位" value={statement.roomLabel} />
        <InfoItem label="缴费联系人" value={statement.contactName} />
        <InfoItem label="联系电话" value={statement.contactPhone} />
        <InfoItem label="到期日期" value={formatDate(statement.dueAt)} />
      </section>

      <section className="grid gap-2">
        <div className="flex items-center justify-between gap-3">
          <h3 className="text-sm font-semibold">费用明细</h3>
          <Button onClick={onCharge} size="sm" type="button" variant="outline">
            <FilePlus2 className="size-4" aria-hidden="true" />
            登记费用
          </Button>
        </div>
        <div className="overflow-x-auto rounded-md border">
          <Table className="w-full min-w-[720px] text-sm">
            <Table.Header className="bg-secondary text-left text-xs text-muted-foreground">
              <Table.Row>
                <Table.Head className="px-4 py-3">费用项目</Table.Head>
                <Table.Head className="px-4 py-3">服务日期</Table.Head>
                <Table.Head className="px-4 py-3">数量</Table.Head>
                <Table.Head className="px-4 py-3">单价</Table.Head>
                <Table.Head className="px-4 py-3 text-right">金额</Table.Head>
              </Table.Row>
            </Table.Header>
            <Table.Body className="divide-y bg-card">
              {statement.charges.map((charge) => (
                <Table.Row key={charge.id}>
                  <Table.Cell className="px-4 py-3">
                    <p className="font-medium">{charge.description}</p>
                    <p className="text-xs text-muted-foreground">{charge.category}</p>
                  </Table.Cell>
                  <Table.Cell className="px-4 py-3 text-muted-foreground">{formatDate(charge.serviceDate)}</Table.Cell>
                  <Table.Cell className="px-4 py-3 tabular-nums">{charge.quantity}</Table.Cell>
                  <Table.Cell className="px-4 py-3 tabular-nums">{formatCny(charge.unitPriceCents)}</Table.Cell>
                  <Table.Cell className="px-4 py-3 text-right font-medium tabular-nums">
                    {formatCny(Math.round(charge.quantity * charge.unitPriceCents))}
                  </Table.Cell>
                </Table.Row>
              ))}
            </Table.Body>
          </Table>
        </div>
      </section>

      <section className="grid gap-2">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h3 className="text-sm font-semibold">收款与票据</h3>
            <p className="mt-1 text-xs text-muted-foreground">
              收据 {statement.receiptCount}/{statement.payments.length} · {INVOICE_STATUS_LABELS[statement.invoiceStatus]}
              {statement.invoiceNumber ? ` / ${statement.invoiceNumber}` : ""}
            </p>
          </div>
          <div className="flex flex-wrap gap-2">
            <Button disabled={statement.outstandingCents === 0} onClick={onPayment} size="sm" type="button">
              <Banknote className="size-4" aria-hidden="true" />
              登记收款
            </Button>
            <Button disabled={!canGenerateReceipt} onClick={onReceipt} size="sm" type="button" variant="outline">
              <ReceiptText className="size-4" aria-hidden="true" />
              生成收据
            </Button>
            <Button disabled={!canIssueInvoice} onClick={onInvoice} size="sm" type="button" variant="outline">
              <FileText className="size-4" aria-hidden="true" />
              {statement.invoiceStatus === "issued" ? "发票已开具" : "开具发票"}
            </Button>
          </div>
        </div>
        <div className="overflow-x-auto rounded-md border">
          <Table className="w-full min-w-[760px] text-sm">
            <Table.Header className="bg-secondary text-left text-xs text-muted-foreground">
              <Table.Row>
                <Table.Head className="px-4 py-3">收款时间</Table.Head>
                <Table.Head className="px-4 py-3">方式</Table.Head>
                <Table.Head className="px-4 py-3">流水号</Table.Head>
                <Table.Head className="px-4 py-3">经办人</Table.Head>
                <Table.Head className="px-4 py-3">收据</Table.Head>
                <Table.Head className="px-4 py-3 text-right">金额</Table.Head>
              </Table.Row>
            </Table.Header>
            <Table.Body className="divide-y bg-card">
              {statement.payments.map((payment, index) => (
                <Table.Row key={payment.id}>
                  <Table.Cell className="px-4 py-3 text-muted-foreground">{formatDateTime(payment.paidAt)}</Table.Cell>
                  <Table.Cell className="px-4 py-3">{PAYMENT_METHOD_LABELS[payment.method]}</Table.Cell>
                  <Table.Cell className="px-4 py-3 text-muted-foreground">{payment.reference}</Table.Cell>
                  <Table.Cell className="px-4 py-3 text-muted-foreground">{payment.operator}</Table.Cell>
                  <Table.Cell className="px-4 py-3">
                    <Badge variant={index < statement.receiptCount ? "success" : "secondary"}>
                      {index < statement.receiptCount ? "已生成" : "待生成"}
                    </Badge>
                  </Table.Cell>
                  <Table.Cell className="px-4 py-3 text-right font-medium tabular-nums">{formatCny(payment.amountCents)}</Table.Cell>
                </Table.Row>
              ))}
              {statement.payments.length === 0 ? (
                <Table.Row>
                  <Table.Cell className="px-4 py-8 text-center text-muted-foreground" colSpan={6}>
                    暂无收款记录
                  </Table.Cell>
                </Table.Row>
              ) : null}
            </Table.Body>
          </Table>
        </div>
      </section>
    </div>
  );
}

function PaymentForm({
  form,
  onCancel,
  onSubmit,
  onUpdate,
  statement,
}: {
  form: PaymentFormState;
  onCancel: () => void;
  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
  onUpdate: (next: Partial<PaymentFormState>) => void;
  statement: BillingStatementView;
}): React.ReactElement {
  return (
    <form className="grid gap-4" onSubmit={onSubmit}>
      <div className="rounded-md border bg-secondary/25 p-4">
        <p className="text-sm text-muted-foreground">当前待收</p>
        <p className="mt-1 text-2xl font-semibold tabular-nums">{formatCny(statement.outstandingCents)}</p>
      </div>
      <div className="grid gap-3 sm:grid-cols-2">
        <Input
          label="收款金额（元）"
          max={(statement.outstandingCents / 100).toFixed(2)}
          min="0.01"
          onChange={(event) => onUpdate({ amountYuan: event.target.value })}
          required
          step="0.01"
          type="number"
          value={form.amountYuan}
        />
        <Select
          label="收款方式"
          onValueChange={(value) => onUpdate({ method: value as PaymentMethod })}
          options={PAYMENT_METHOD_VALUES.map((method) => ({ value: method, label: PAYMENT_METHOD_LABELS[method] }))}
          value={form.method}
        />
        <Input
          label="收款时间"
          onChange={(event) => onUpdate({ paidAt: event.target.value })}
          required
          type="datetime-local"
          value={form.paidAt}
        />
        <Input
          label="支付流水号"
          onChange={(event) => onUpdate({ reference: event.target.value })}
          placeholder="留空后自动生成"
          value={form.reference}
        />
      </div>
      <Textarea
        label="备注"
        onChange={(event) => onUpdate({ note: event.target.value })}
        placeholder="填写付款人或对账说明"
        value={form.note}
      />
      <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
        <Button onClick={onCancel} type="button" variant="outline">取消</Button>
        <Button type="submit">
          <Banknote className="size-4" aria-hidden="true" />
          确认收款
        </Button>
      </div>
    </form>
  );
}

function ChargeForm({
  form,
  onCancel,
  onSubmit,
  onUpdate,
}: {
  form: ChargeFormState;
  onCancel: () => void;
  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
  onUpdate: (next: Partial<ChargeFormState>) => void;
}): React.ReactElement {
  return (
    <form className="grid gap-4" onSubmit={onSubmit}>
      <div className="grid gap-3 sm:grid-cols-2">
        <Select
          label="费用分类"
          onValueChange={(value) => onUpdate({ category: value })}
          options={chargeCategoryOptions}
          value={form.category}
        />
        <Input
          label="服务日期"
          onChange={(event) => onUpdate({ serviceDate: event.target.value })}
          required
          type="date"
          value={form.serviceDate}
        />
      </div>
      <Input
        label="费用项目说明"
        onChange={(event) => onUpdate({ description: event.target.value })}
        placeholder="例如：临时陪诊服务"
        required
        value={form.description}
      />
      <div className="grid gap-3 sm:grid-cols-2">
        <Input
          label="数量"
          min="0.01"
          onChange={(event) => onUpdate({ quantity: event.target.value })}
          required
          step="0.01"
          type="number"
          value={form.quantity}
        />
        <Input
          label="单价（元）"
          min="0.01"
          onChange={(event) => onUpdate({ unitPriceYuan: event.target.value })}
          required
          step="0.01"
          type="number"
          value={form.unitPriceYuan}
        />
      </div>
      <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
        <Button onClick={onCancel} type="button" variant="outline">取消</Button>
        <Button type="submit">
          <Plus className="size-4" aria-hidden="true" />
          确认登记
        </Button>
      </div>
    </form>
  );
}

function MetricCard({
  icon: Icon,
  label,
  tone = "default",
  value,
}: {
  icon: React.ComponentType<{ "aria-hidden"?: boolean; className?: string }>;
  label: string;
  tone?: "danger" | "default";
  value: string;
}): React.ReactElement {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between gap-3 p-4">
        <div className="min-w-0">
          <p className="text-sm text-muted-foreground">{label}</p>
          <CardTitle className="mt-2 truncate text-2xl tabular-nums">{value}</CardTitle>
        </div>
        <Icon className={tone === "danger" ? "size-5 shrink-0 text-destructive" : "size-5 shrink-0 text-primary"} aria-hidden={true} />
      </CardHeader>
    </Card>
  );
}

function SummaryItem({ label, value }: { label: string; value: string }): React.ReactElement {
  return (
    <div>
      <p className="text-xs text-muted-foreground">{label}</p>
      <p className="mt-1 text-xl font-semibold tabular-nums">{value}</p>
    </div>
  );
}

function InfoItem({ label, value }: { label: string; value: string }): React.ReactElement {
  return (
    <div className="min-w-0">
      <p className="text-xs text-muted-foreground">{label}</p>
      <p className="mt-1 truncate text-sm font-medium">{value}</p>
    </div>
  );
}