import { t as tr, useLocale, LanguagePicker } from './i18n';
import {
  useState,
  useEffect,
  useRef,
  createElement,
  Fragment,
  type FormEvent,
  type ReactNode,
} from 'react';
import {
  LayoutDashboard,
  CalendarDays,
  Wallet,
  Landmark,
  HandCoins,
  History as HistoryIcon,
  Settings,
  ArrowUpRight,
  Plus,
  LogOut,
  ArrowLeft,
  X,
  Download,
  Upload,
  RefreshCw,
  TrendingUp,
  ShieldCheck,
} from 'lucide-react';
import {
  api,
  ApiError,
  currencies,
  money,
  positionAmount,
  accountInputAmount,
  today,
  nowMinute,
  displayTime,
  type User,
  type Position,
  type Overview,
  type History,
  type Rate,
  type Total,
  type PageResult,
} from './api';
import './style.css';
import { GroupOrderContext } from './GroupOrderContext';
import { GroupOrderList } from './GroupOrderList';
import { orderedGroups, mergeGroupOrder } from './group-order';
import { Calendar } from './Calendar';
import { SchedulePanel } from './SchedulePanel';
import { IconPicker } from './IconPicker';
import { TransferForm } from './TransferForm';
import { DebtPaymentForm, operationLabel, type DebtOperation } from './DebtPaymentForm';
import type { Transfer } from './api';
import { IconLibrary, iconUrl } from './IconLibrary';
const labels: Record<string, string> = {
  overview: '资产总览',
  account: '账户',
  asset: '独立资产',
  debt: '债务',
  history: '变化记录',
  calendar: '收支日历',
  schedules: '定时计划',
  settings: '设置与备份',
};
const categories: Record<string, [string, string][]> = {
  account: [
    ['bank', '银行账户'],
    ['cash', '现金'],
    ['investment', '投资账户'],
    ['credit_card', '信用卡'],
    ['loan', '贷款账户'],
    ['other', '其他'],
  ],
  asset: [
    ['property', '房产'],
    ['vehicle', '车辆'],
    ['gold', '贵金属'],
    ['other', '其他资产'],
  ],
  debt: [
    ['mortgage', '房贷'],
    ['car_loan', '车贷'],
    ['personal', '个人借款'],
    ['other', '其他债务'],
  ],
};
const categoryLabel = (p: Position) =>
  tr(categories[p.kind]?.find(([v]) => v === p.category)?.[1] || p.category);
function Currency({ value, onChange }: { value: string; onChange: (v: string) => void }) {
  return (
    <select value={value} onChange={(e) => onChange(e.target.value)}>
      {currencies.map((c) => (
        <option key={c}>{c}</option>
      ))}
    </select>
  );
}
function Field({ label, children }: { label: string; children: ReactNode }) {
  return (
    <label className={label === tr('备注') ? 'field note-field' : 'field'}>
      <span>{tr(label)}</span>
      {children}
    </label>
  );
}
function Modal({
  title,
  close,
  children,
}: {
  title: string;
  close: () => void;
  children: ReactNode;
}) {
  return (
    <div
      className="veil"
      onClick={(e) => {
        if (e.target === e.currentTarget) close();
      }}
    >
      <section role="dialog" aria-modal="true" aria-label={title} className="modal">
        <header>
          <h2 className={title.includes(tr('清空本账号数据')) ? 'danger-text' : undefined}>
            {title}
          </h2>
          <button className="icon" aria-label={tr('关闭')} onClick={close}>
            <X size={20} />
          </button>
        </header>
        {children}
      </section>
    </div>
  );
}
function Empty({ title, body, action }: { title: string; body: string; action?: ReactNode }) {
  return (
    <div className="empty">
      <Wallet size={32} />
      <h3>{title}</h3>
      <p>{body}</p>
      {action}
    </div>
  );
}
function Chart({ rows, base }: { rows: Total[]; base: string }) {
  const valid = rows.filter((r) => r.complete);
  if (valid.length < 2)
    return (
      <Empty
        title={tr('等待更多历史记录')}
        body={tr('至少两个日期的完整余额和汇率记录，才能绘制趋势。')}
      />
    );
  const values = valid.flatMap((r) => [Number(r.assets), Number(r.liabilities), Number(r.net)]),
    min = Math.min(0, ...values),
    max = Math.max(1, ...values),
    w = 720,
    h = 210;
  const x = (date: string) =>
    35 +
    ((new Date(date).getTime() - new Date(rows[0].date).getTime()) /
      (new Date(rows.at(-1)!.date).getTime() - new Date(rows[0].date).getTime() || 1)) *
      (w - 65);
  const y = (v: string) => 15 + ((max - Number(v)) / (max - min)) * (h - 40);
  const series = ['assets', 'liabilities', 'net'] as const;
  return (
    <>
      <div className="legend">
        <span className="green">{tr('总资产')}</span>
        <span className="danger-text">{tr('总负债')}</span>
        <span className="blue">{tr('净资产')}</span>
        <small>{base}</small>
      </div>
      <svg
        viewBox={`0 0 ${w} ${h}`}
        className="chart"
        role="img"
        aria-label={tr('资产、负债和净资产历史趋势')}
      >
        <line x1="35" y1={y('0')} x2="690" y2={y('0')} stroke="#dbe4e2" />
        {series.map((s, i) => (
          <path
            key={s}
            d={rows
              .map((r, n) =>
                r.complete
                  ? `${n === 0 || !rows[n - 1].complete ? 'M' : 'L'}${x(r.date)},${y(r[s])}`
                  : '',
              )
              .join(' ')}
            fill="none"
            stroke={['#199b76', '#c73542', '#457bca'][i]}
            strokeWidth="3"
          />
        ))}
        {valid.map((r) => (
          <circle key={r.date} cx={x(r.date)} cy={y(r.net)} r="4" fill="#457bca">
            <title>
              {r.date} {tr('净资产')}
              {money(r.net, base)}
            </title>
          </circle>
        ))}
      </svg>
      <div className="chart-dates">
        <span>{rows[0].date}</span>
        <span>{rows.at(-1)!.date}</span>
      </div>
      {rows.some((r) => !r.complete) && (
        <p className="muted">{tr('缺失汇率的日期未绘制，曲线在该处断开。')}</p>
      )}
    </>
  );
}
export default function App() {
  const locale = useLocale();
  const sessionGeneration = useRef(0),
    loadGeneration = useRef(0);
  const authCheck = useRef<Promise<User> | null>(null);
  const [user, setUser] = useState<User | null>(null),
    [boot, setBoot] = useState(true),
    [register, setRegister] = useState(false),
    [page, setPage] = useState('overview'),
    [positions, setPositions] = useState<Position[]>([]),
    [overview, setOverview] = useState<Overview | null>(null),
    [rates, setRates] = useState<Rate[]>([]),
    [selected, setSelected] = useState<string | null>(null),
    [modal, setModal] = useState<{
      kind: string;
      p?: Position;
      h?: History;
      transfer?: Transfer;
      operation?: DebtOperation;
      groups?: string[];
    } | null>(null),
    [busy, setBusy] = useState(false),
    [loading, setLoading] = useState(false),
    [error, setError] = useState(''),
    [success, setSuccess] = useState('');
  const [calendarRefresh, setCalendarRefresh] = useState(0);
  const [quickMode, setQuickMode] = useState(false),
    [accountGroup, setAccountGroup] = useState<string | null>(null);
  const [fxStatus, setFxStatus] = useState<{
    state: string;
    message: string;
    attemptedAt: string | null;
  } | null>(null);
  const [backup, setBackup] = useState<unknown>(null),
    [preview, setPreview] = useState<{
      positions: number;
      revisions: number;
      rates: number;
      message: string;
      baseCurrency: string;
      currentBaseCurrency: string;
    } | null>(null);
  const [clearStep, setClearStep] = useState(0),
    [clearConfirmation, setClearConfirmation] = useState(0);
  const [settingsSection, setSettingsSection] = useState('general'),
    [transfers, setTransfers] = useState<Transfer[]>([]);
  const [historyRows, setHistoryRows] = useState<History[]>([]),
    [historyCursor, setHistoryCursor] = useState<string | null>(null),
    [transferCursor, setTransferCursor] = useState<string | null>(null),
    [rangeFrom, setRangeFrom] = useState(
      new Date(+new Date(today()) - 89 * 86400000).toISOString().slice(0, 10),
    ),
    [rangeTo, setRangeTo] = useState(today()),
    [grain, setGrain] = useState('day');
  const [dataVersion, setDataVersion] = useState(0);
  const previousDataVersion = useRef(0);
  const viewKey = [page, selected, rangeFrom, rangeTo, grain, settingsSection].join('|');
  const viewRef = useRef(viewKey);
  viewRef.current = viewKey;
  const userRef = useRef(user);
  userRef.current = user;
  const activityAt = useRef(0);
  function clearAccount() {
    setQuickMode(false);
    setAccountGroup('');
    setClearStep(0);
    setClearConfirmation(0);
    activityAt.current = 0;
    sessionGeneration.current++;
    loadGeneration.current++;
    setUser(null);
    setPositions([]);
    setOverview(null);
    setRates([]);
    setTransfers([]);
    setHistoryRows([]);
    setHistoryCursor(null);
    setTransferCursor(null);
    setFxStatus(null);
    setAccountGroup(null);
    setModal(null);
    setSelected(null);
    setBackup(null);
    setPreview(null);
    setPage('overview');
    setRegister(false);
    setLoading(false);
    setSuccess('');
  }
  const report = (e: unknown) => {
    setError(e instanceof Error ? e.message : tr('操作失败'));
    if (e instanceof ApiError && e.status === 401) {
      clearAccount();
    }
  };
  async function load(refreshUser = false, rangeOnly = false, runDue = true) {
    const session = sessionGeneration.current,
      request = ++loadGeneration.current,
      view = viewRef.current;
    const active = () =>
      session === sessionGeneration.current &&
      request === loadGeneration.current &&
      view === viewRef.current;
    setLoading(true);
    try {
      const s = refreshUser ? await api<User>('/auth/me') : userRef.current;
      if (!active() || !s) return;
      const visibilityChanged = !!s.revealed !== !!userRef.current?.revealed;
      if (visibilityChanged) rangeOnly = false;
      if (refreshUser) {
        setUser(s);
        setPage((current) => (s.hiddenMenus.includes(current) ? 'settings' : current));
        if (!s.revealed) {
          setPositions((rows) => rows.filter((p) => !p.hidden));
          setHistoryRows([]);
          setTransfers([]);
          if (visibilityChanged) setOverview(null);
        }
      }
      if (page === 'overview' && rangeOnly) {
        const t = await api<PageResult<Total>>(
          '/trend?' + new URLSearchParams({ from: rangeFrom, to: rangeTo, grain }),
        );
        if (!active()) return;
        if (t.revealed !== !!s.revealed) {
          void load(true);
          return;
        }
        setOverview((o) => (o ? { ...o, trend: t.items } : o));
      } else if (page === 'overview') {
        const [o, t, recent] = await Promise.all([
          api<Omit<Overview, 'trend' | 'recent'>>('/overview'),
          api<PageResult<Total>>(
            '/trend?' + new URLSearchParams({ from: rangeFrom, to: rangeTo, grain }),
          ),
          api<PageResult<History>>('/history?limit=20'),
        ]);
        if (!active()) return;
        if ([o.revealed, t.revealed, recent.revealed].some((v) => v !== !!s.revealed)) {
          void load(true);
          return;
        }
        setOverview({ ...o, trend: t.items, recent: recent.items });
      } else if (page === 'schedules') {
        const rows = await api<Position[]>('/positions?kind=account');
        if (active()) setPositions(rows);
      } else if (['account', 'asset', 'debt'].includes(page)) {
        if (page === 'account' && !rangeOnly && runDue) {
          const result = await api<{
            executed: number;
            errors: { message: string }[];
            hasMore: boolean;
          }>('/schedules/run', 'POST', {});
          if (!active()) return;
          if (result.errors.length) setError(result.errors[0].message);
          if (result.executed) setSuccess(tr('到期计划已记账') + ` (${result.executed})`);
        }
        const [p, h] = await Promise.all([
          api<Position[]>('/positions?kind=' + page),
          selected
            ? api<PageResult<History>>('/positions/' + selected + '/history?limit=50')
            : Promise.resolve(null),
        ]);
        if (!active()) return;
        setPositions(s.revealed ? p : p.filter((p) => !p.hidden));
        setHistoryRows(h?.items || []);
        setHistoryCursor(h?.nextCursor || null);
      } else if (page === 'history') {
        const [h, t] = await Promise.all([
          api<PageResult<History>>(
            '/history?' + new URLSearchParams({ from: rangeFrom, to: rangeTo, limit: '50' }),
          ),
          api<PageResult<Transfer>>(
            '/transfers?' + new URLSearchParams({ from: rangeFrom, to: rangeTo, limit: '50' }),
          ),
        ]);
        if (!active()) return;
        if ([h.revealed, t.revealed].some((v) => v !== !!s.revealed)) {
          void load(true);
          return;
        }
        setHistoryRows(h.items);
        setHistoryCursor(h.nextCursor);
        setTransfers(t.items);
        setTransferCursor(t.nextCursor);
      } else if (page === 'calendar') {
        setCalendarRefresh((value) => value + 1);
      } else if (page === 'settings') {
        const settings = await api<User & { rates: Rate[]; fxStatus: typeof fxStatus }>(
          '/settings' + (settingsSection === 'rates' ? '?rates=true' : ''),
        );
        if (!active()) return;
        setUser(settings);
        setRates(settings.rates);
        setFxStatus(settings.fxStatus);
      }
    } catch (e) {
      if (active()) report(e);
    } finally {
      if (active()) setLoading(false);
    }
  }
  async function more(kind: 'history' | 'transfers') {
    const session = sessionGeneration.current,
      view = viewRef.current,
      request = loadGeneration.current;
    const cursor = kind === 'history' ? historyCursor : transferCursor;
    if (!cursor || loading) return;
    setLoading(true);
    try {
      const accountId = ['account', 'asset', 'debt'].includes(page) ? selected : null;
      const endpoint =
        kind === 'history' && accountId ? '/positions/' + accountId + '/history' : '/' + kind;
      const query = new URLSearchParams({
        cursor,
        limit: '50',
        ...(!accountId ? { from: rangeFrom, to: rangeTo } : {}),
      });
      const result = await api<PageResult<History | Transfer>>(endpoint + '?' + query);
      if (
        session !== sessionGeneration.current ||
        view !== viewRef.current ||
        request !== loadGeneration.current
      )
        return;
      if (result.revealed !== !!userRef.current?.revealed) {
        void load(true);
        return;
      }
      if (kind === 'history') {
        setHistoryRows((rows) => [...rows, ...(result.items as History[])]);
        setHistoryCursor(result.nextCursor);
      } else {
        setTransfers((rows) => [...rows, ...(result.items as Transfer[])]);
        setTransferCursor(result.nextCursor);
      }
    } catch (e) {
      if (session === sessionGeneration.current && view === viewRef.current) report(e);
    } finally {
      if (session === sessionGeneration.current && view === viewRef.current) setLoading(false);
    }
  }
  const [movementPositions, setMovementPositions] = useState<Position[]>([]);
  const [movementLoading, setMovementLoading] = useState(true);
  useEffect(() => {
    if (!modal || !['transfer', 'debt-payment'].includes(modal.kind)) {
      setMovementPositions([]);
      setMovementLoading(true);
      return;
    }
    let cancelled = false;
    const session = sessionGeneration.current;
    setMovementLoading(true);
    void api<Position[]>('/positions')
      .then((rows) => {
        if (!cancelled && session === sessionGeneration.current) {
          setMovementPositions(rows);
          setMovementLoading(false);
        }
      })
      .catch((error) => {
        if (!cancelled && session === sessionGeneration.current) report(error);
      });
    return () => {
      cancelled = true;
    };
  }, [modal]);
  const [linkOptions, setLinkOptions] = useState<Position[]>([]);
  useEffect(() => {
    if (modal?.kind !== 'links') {
      setLinkOptions([]);
      return;
    }
    let cancelled = false;
    const session = sessionGeneration.current;
    void api<Position[]>('/positions')
      .then((rows) => {
        if (!cancelled && session === sessionGeneration.current)
          setLinkOptions(rows.filter((p) => p.kind !== 'debt'));
      })
      .catch((e) => {
        if (!cancelled && session === sessionGeneration.current) report(e);
      });
    return () => {
      cancelled = true;
    };
  }, [modal]);
  const previousView = useRef('');
  useEffect(() => {
    if (!user) return;
    const mutated = previousDataVersion.current !== dataVersion;
    previousDataVersion.current = dataVersion;
    const rangeOnly =
      !mutated && page === 'overview' && previousView.current.startsWith('overview|') && !!overview;
    previousView.current = viewKey;
    if (!rangeOnly) setOverview(null);
    setHistoryRows([]);
    setHistoryCursor(null);
    setTransfers([]);
    setTransferCursor(null);
    void load(true, rangeOnly, !mutated);
    return () => {
      loadGeneration.current++;
    };
  }, [viewKey, !!user, dataVersion]);
  useEffect(() => {
    const session = sessionGeneration.current;
    authCheck.current ||= api<User>('/auth/me');
    void authCheck.current
      .then((u) => {
        if (session !== sessionGeneration.current) return;
        setUser(u);
        if (u.lastActivity) activityAt.current = +new Date(u.lastActivity);
      })
      .catch((e) => {
        if (session === sessionGeneration.current && !(e instanceof ApiError && e.status === 401))
          report(e);
      })
      .finally(() => setBoot(false));
  }, []);
  useEffect(() => {
    window.scrollTo({ top: 0 });
  }, [page, selected]);
  useEffect(() => {
    if (!user) return;
    const session = sessionGeneration.current;
    let lastSent = 0,
      pending = false,
      revealExpired = false;
    const activity = () => {
      if (!document.hidden) {
        activityAt.current = Date.now();
        if (Date.now() - lastSent > 15000 && !pending) {
          pending = true;
          lastSent = Date.now();
          void api('/auth/activity', 'POST')
            .catch((e) => {
              if (session === sessionGeneration.current) report(e);
            })
            .finally(() => {
              pending = false;
            });
        }
      }
    };
    const check = window.setInterval(() => {
      if (
        user.idleMinutes &&
        activityAt.current &&
        Date.now() - activityAt.current >= user.idleMinutes * 60000
      ) {
        clearAccount();
        setError(tr('长时间无操作，已自动退出登录'));
        void api('/auth/logout', 'POST').catch(() => {});
      } else if (!revealExpired && user.revealUntil && Date.now() >= +new Date(user.revealUntil)) {
        revealExpired = true;
        setPositions([]);
        setOverview(null);
        setSelected(null);
        setModal(null);
        setHistoryRows([]);
        setTransfers([]);
        void load(true);
      }
    }, 1000);
    const events = ['pointerdown', 'pointermove', 'keydown', 'wheel', 'touchstart'];
    events.forEach((e) => window.addEventListener(e, activity, { passive: true }));
    return () => {
      window.clearInterval(check);
      events.forEach((e) => window.removeEventListener(e, activity));
    };
  }, [user?.idleMinutes, user?.revealUntil, !!user]);
  async function act(work: () => Promise<unknown>, message: string) {
    const session = sessionGeneration.current;
    setBusy(true);
    setError('');
    setSuccess('');
    try {
      const result = await work();
      if (session !== sessionGeneration.current) return;
      setSuccess(
        result &&
          typeof result === 'object' &&
          'message' in result &&
          typeof result.message === 'string'
          ? result.message
          : message,
      );
      const createdKind =
        modal && ['account', 'asset', 'debt'].includes(modal.kind) ? modal.kind : null;
      setModal(null);
      if (
        createdKind &&
        result &&
        typeof result === 'object' &&
        'id' in result &&
        typeof result.id === 'string'
      ) {
        setPage(createdKind);
        setSelected(result.id);
      }
      setDataVersion((value) => value + 1);
    } catch (e) {
      if (session === sessionGeneration.current) report(e);
    } finally {
      setBusy(false);
    }
  }
  async function auth(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const f = new FormData(e.currentTarget);
    const session = ++sessionGeneration.current;
    setBusy(true);
    setError('');
    try {
      const u = await api<User>('/auth/' + (register ? 'register' : 'login'), 'POST', {
        username: f.get('username'),
        password: f.get('password'),
      });
      if (session !== sessionGeneration.current) return;
      setPage('overview');
      setSelected(null);
      setModal(null);
      activityAt.current = Date.now();
      setUser(u);
    } catch (e) {
      report(e);
    } finally {
      setBusy(false);
    }
  }
  async function logout() {
    sessionGeneration.current++;
    setBusy(true);
    try {
      await api('/auth/logout', 'POST');
      clearAccount();
      setError('');
      setSuccess('');
    } catch (e) {
      report(e);
    } finally {
      setBusy(false);
    }
  }
  const p = positions.find((p) => p.id === selected && p.kind === page),
    newAction = (
      <button
        className="primary"
        onClick={() => setModal({ kind: page === 'overview' ? 'account' : page })}
      >
        <Plus size={17} />
        {tr('新增')}
        {page === 'overview' ? tr('账户') : tr(labels[page])}
      </button>
    );
  if (boot) return <div className="splash">{tr('WorthPath · 正在连接你的资产空间…')}</div>;
  if (!user)
    return (
      <div className="auth-layout">
        <div className="auth-language">
          <LanguagePicker />
        </div>
        <section className="auth-story">
          <div className="brand">
            <span>W</span> WorthPath
          </div>
          <div>
            <p className="eyebrow">YOUR WEALTH, IN PERSPECTIVE</p>
            <h1>
              {tr('让每一步积累，')}
              <br />
              {tr('都有清晰的方向。')}
            </h1>
            <p>
              {tr('在一个空间里，连接你的账户、资产与债务。')}
              <br />
              {tr('看见当下，也看见净资产的每一次变化。')}
            </p>
            <div className="story-line">
              <TrendingUp size={32} />
              <span>
                {tr('关注长期积累')}
                <br />
                <small>{tr('从第一份真实资产开始')}</small>
              </span>
            </div>
          </div>
          <small>{tr('个人资产管理 · 多币种 · 历史追踪')}</small>
        </section>
        <section className="auth-form">
          <div>
            <p className="eyebrow">{tr('开始你的资产之路')}</p>
            <h2>{register ? tr('创建账号') : tr('欢迎回来')}</h2>
            <p className="muted">
              {register ? tr('建立属于你的私人资产空间') : tr('登录以查看你的资产与负债')}
            </p>
            {error && (
              <div role="alert" className="notice error">
                {tr(error)}
              </div>
            )}
            <form onSubmit={auth}>
              <Field label={tr('账号')}>
                <input
                  name="username"
                  autoComplete="username"
                  required
                  minLength={3}
                  maxLength={64}
                  placeholder={tr('输入账号（至少 3 个字符）')}
                />
              </Field>
              <Field label={tr('密码')}>
                <input
                  name="password"
                  type="password"
                  autoComplete={register ? 'new-password' : 'current-password'}
                  required
                  minLength={10}
                  maxLength={72}
                  placeholder={tr('至少 10 个字符，最多 72 字节')}
                />
              </Field>
              <button className="primary full" disabled={busy}>
                {busy ? tr('正在处理…') : register ? tr('注册并进入') : tr('登录')}
                <ArrowUpRight size={18} />
              </button>
            </form>
            <p>
              {register ? tr('已有账号？') : tr('还没有账号？')}{' '}
              <button
                className="text"
                onClick={() => {
                  setRegister(!register);
                  setError('');
                }}
              >
                {register ? tr('登录') : tr('创建账号')}
              </button>
            </p>
            <p className="privacy">
              <ShieldCheck size={16} />
              {tr('个人数据按登录身份隔离')}
            </p>
          </div>
        </section>
      </div>
    );
  async function correctHistory(h: History) {
    if (h.reason.startsWith('transfer_') || h.reason.startsWith('loan_')) {
      const session = sessionGeneration.current,
        view = viewRef.current;
      try {
        const transfer = await api<Transfer>('/transfers/revision/' + h.id);
        if (session === sessionGeneration.current && view === viewRef.current)
          setModal({ kind: 'transfer-edit', transfer });
      } catch (e) {
        if (session === sessionGeneration.current && view === viewRef.current) report(e);
      }
      return;
    }
    const session = sessionGeneration.current,
      view = viewRef.current;
    try {
      const p = await api<Position>('/positions/' + h.positionId);
      if (session !== sessionGeneration.current || view !== viewRef.current) return;
      setModal({ kind: 'correction', p, h });
    } catch (e) {
      if (session === sessionGeneration.current && view === viewRef.current) report(e);
    }
  }
  function deleteHistory(h: History) {
    setError('');
    setModal({ kind: 'delete-record', h });
  }
  async function downloadBackup(forClear = false) {
    const session = sessionGeneration.current;
    setBusy(true);
    setError('');
    setSuccess('');
    try {
      const response = await fetch('/api/backup', { credentials: 'same-origin' });
      if (!response.ok) {
        const result = await response.json().catch(() => ({}));
        throw new ApiError(result.message || tr('备份下载失败'), response.status);
      }
      if (!response.headers.get('content-type')?.includes('application/zip'))
        throw new Error(tr('备份文件格式错误'));
      const blob = await response.blob();
      if (!blob.size) throw new Error(tr('备份文件为空'));
      if (session !== sessionGeneration.current) return;
      const url = URL.createObjectURL(blob),
        a = document.createElement('a');
      a.href = url;
      a.download = 'worthpath-' + today() + '.zip';
      document.body.appendChild(a);
      a.click();
      a.remove();
      window.setTimeout(() => URL.revokeObjectURL(url), 60000);
      setSuccess(tr('备份已生成，请确认文件已保存'));
      if (forClear) setClearStep(1);
    } catch (e) {
      if (session === sessionGeneration.current) report(e);
    } finally {
      if (session === sessionGeneration.current) setBusy(false);
    }
  }
  const nav = [
    ['overview', LayoutDashboard],
    ['account', Wallet],
    ['asset', Landmark],
    ['debt', HandCoins],
    ['history', HistoryIcon],
    ['calendar', CalendarDays],
    ['schedules', HistoryIcon],
    ['settings', Settings],
  ] as const;
  const visibleNav = nav.filter(([key]) => !(user.hiddenMenus || []).includes(key));
  const groups = orderedGroups(
    positions.filter((p) => p.kind === 'account').map((p) => p.groupName || ''),
    user.accountGroupOrder,
  );
  const groupRanks = new Map(groups.map((g, index) => [g, index]));
  return createElement(
    GroupOrderContext.Provider,
    { value: user.accountGroupOrder || [] },
    <div className={user.showNotes === false ? 'app notes-hidden' : 'app'}>
      {
        <aside className="sidebar">
          <div className="brand">
            <span>W</span> WorthPath
          </div>
          <p className="nav-caption">{tr('我的资产空间')}</p>
          <nav style={{ gridTemplateColumns: `repeat(${visibleNav.length}, 1fr)` }}>
            {visibleNav.map(([key, Icon]) => (
              <button
                key={key}
                className={page === key ? 'active' : ''}
                onClick={() => {
                  setPage(key);
                  setSelected(null);
                }}
              >
                <Icon size={19} />
                <span>{tr(labels[key])}</span>
              </button>
            ))}
          </nav>
          <div className="side-bottom">
            <div className="avatar">{user.username.slice(0, 1).toUpperCase()}</div>
            <div>
              <strong>{user.username}</strong>
              <small>
                {tr('个人账户 ·')}
                {user.baseCurrency}
              </small>
            </div>
            <button
              className="icon"
              aria-label={tr('退出登录')}
              disabled={busy}
              onClick={() => void logout()}
            >
              <LogOut size={18} />
            </button>
          </div>
        </aside>
      }
      <main>
        <header className="topbar">
          <span>
            {tr('个人财务 /')}
            {tr(labels[page])}
          </span>
          <div>
            <LanguagePicker />
            <span className="currency-pill">
              {tr('本位币')}
              {user.baseCurrency}
            </span>
            <button
              className="icon"
              aria-label={tr('刷新数据')}
              disabled={loading}
              onClick={() => void load()}
            >
              <RefreshCw size={17} />
            </button>
          </div>
        </header>
        <div className="content">
          <div className="privacy-toolbar">
            <span>
              {user.revealed
                ? tr('当前包含隐藏项目 · 验证 5 分钟后自动锁定')
                : tr('当前不包含隐藏账户、资产和债务，净资产按此范围计算')}
            </span>
            <button
              className="secondary"
              disabled={busy}
              onClick={() =>
                user.revealed
                  ? void act(() => api('/auth/lock', 'POST'), tr('隐藏项目已锁定'))
                  : setModal({ kind: 'reveal' })
              }
            >
              {user.revealed ? tr('锁定隐藏项目') : tr('显示隐藏资产（验证密码）')}
            </button>
          </div>
          <div className="page-heading">
            <div>
              <p className="eyebrow">WORTHPATH / {today()}</p>
              <h1>
                {p?.iconId && (
                  <img className="detail-icon" src={iconUrl(p.iconId)} alt={tr('账户图标')} />
                )}
                {p ? p.name : tr(labels[page])}
              </h1>
              <p className="muted">
                {page === 'overview'
                  ? tr('你的财富全貌，从这里开始。')
                  : page === 'settings'
                    ? tr('让数据始终可控，让换算清晰可靠。')
                    : tr('保留原币金额，追踪长期变化。')}
              </p>
            </div>
            <div className="actions">
              {page === 'account' && !p && (
                <button className="secondary" onClick={() => setModal({ kind: 'transfer' })}>
                  {tr('账户间转账')}
                </button>
              )}
              {['overview', 'account', 'asset', 'debt'].includes(page) && !p && newAction}
            </div>
          </div>
          {error && (
            <div className="notice error" role="alert">
              {error}
              <button className="text" onClick={() => setError('')}>
                {tr('关闭')}
              </button>
            </div>
          )}
          {success && (
            <div className="notice success" role="status">
              {tr(success)}
              <button className="text" onClick={() => setSuccess('')}>
                {tr('关闭')}
              </button>
            </div>
          )}
          {loading && (
            <p role="status" className="muted">
              {tr('正在刷新数据…')}
            </p>
          )}
          {page === 'overview' && overview && (
            <>
              {!overview.complete && (
                <div className="notice warning">
                  {tr('缺少')}
                  {overview.missing.join('、')} {tr('到')}
                  {user.baseCurrency} {tr('的汇率。以下仅展示已能换算的部分，不能作为完整总额。')}
                  <button className="text" onClick={() => setPage('settings')}>
                    {tr('设置汇率')}
                  </button>
                </div>
              )}
              <div className="metrics">
                {[
                  [tr('总资产'), overview.assets, 'asset'],
                  [tr('总负债'), overview.liabilities, 'debt'],
                  [tr('净资产'), overview.net, 'net'],
                ].map(([title, value, cls]) => (
                  <section className={'metric ' + cls} key={title}>
                    <div>
                      <span>
                        {title}
                        {!overview.complete ? tr('（部分）') : ''}
                      </span>
                      <ArrowUpRight size={18} />
                    </div>
                    <strong
                      className={
                        cls === 'debt' || value.startsWith('-') ? 'danger-text' : undefined
                      }
                    >
                      {money(value, user.baseCurrency)}
                    </strong>
                    <small>
                      {title === tr('净资产')
                        ? tr('总资产 − 总负债')
                        : title === tr('总资产')
                          ? tr('账户资产 + 独立资产')
                          : tr('负债账户 + 独立债务')}
                    </small>
                  </section>
                ))}
              </div>
              <div className="dashboard-grid">
                <section className="panel">
                  <div className="panel-title">
                    <h2>{tr('净资产轨迹')}</h2>
                    <span className="badge">{tr('按业务日期')}</span>
                  </div>
                  <div className="actions overview-filters">
                    <label>
                      {tr('开始')}
                      <input
                        type="date"
                        value={rangeFrom}
                        max={rangeTo}
                        onChange={(e) => setRangeFrom(e.target.value)}
                      />
                    </label>
                    <label>
                      {tr('结束')}
                      <input
                        type="date"
                        value={rangeTo}
                        min={rangeFrom}
                        max={today()}
                        onChange={(e) => setRangeTo(e.target.value)}
                      />
                    </label>
                    <select
                      aria-label={tr('统计粒度')}
                      value={grain}
                      onChange={(e) => setGrain(e.target.value)}
                    >
                      <option value="day">{tr('日（最多366天）')}</option>
                      <option value="week">{tr('周（最多3年）')}</option>
                      <option value="month">{tr('月（最多10年）')}</option>
                    </select>
                  </div>
                  <p className="muted">
                    {tr(
                      '默认最近90天；周一至周日及自然月取期末余额，变化归因累计区间内每日变化，首尾不足周期按实际范围。',
                    )}
                  </p>
                  <Chart rows={overview.trend} base={user.baseCurrency} />
                  <p className="muted">
                    {tr('按当时可用汇率重放；更正历史后重新计算。归档项目仍计入。')}
                  </p>
                </section>
                <section className="panel">
                  <h2>{tr('资产与负债组成')}</h2>
                  {overview.items.length ? (
                    ['account', 'asset', 'debt'].map((k) => (
                      <button
                        className="composition"
                        key={k}
                        onClick={() => {
                          setPage(k);
                          setSelected(null);
                        }}
                      >
                        <span>
                          {tr(labels[k])}
                          <small>
                            {overview.items.filter((p) => p.kind === k).length} {tr('个项目')}
                          </small>
                        </span>
                        <ArrowUpRight size={18} />
                      </button>
                    ))
                  ) : (
                    <Empty
                      title={tr('从一个账户开始')}
                      body={tr('添加银行、现金或投资账户，建立你的资产全貌。')}
                      action={newAction}
                    />
                  )}
                  <p className="privacy">
                    <ShieldCheck size={15} />
                    {tr('关联关系不会重复计入总额')}
                  </p>
                </section>
              </div>
              <section className="panel">
                <div className="panel-title">
                  <h2>{tr('最近变化')}</h2>
                  <button className="text" onClick={() => setPage('history')}>
                    {tr('查看全部 →')}
                  </button>
                </div>
                <HistoryTable
                  rows={overview.recent.slice(0, 6)}
                  open={(id) => {
                    setSelected(id);
                    setPage(overview.recent.find((h) => h.positionId === id)?.kind || 'account');
                  }}
                />
              </section>
              <div className="fx-caption">
                {tr('本位币')}
                {user.baseCurrency} {tr('· 汇率日期：')}
                {[
                  ...new Set(
                    overview.items
                      .filter((i) => i.currency !== user.baseCurrency && i.rateDate)
                      .map((i) => i.rateDate),
                  ),
                ].join(' / ') || tr('尚无外币汇率')}{' '}
                {tr('· 每日尝试更新，失败保留已有数据；旧日期汇率可能产生换算偏差。')}
              </div>
              {overview.trend.length > 1 && (
                <details className="panel attribution">
                  <summary>{tr('变化归因')}</summary>
                  <div className="table-wrap">
                    <table>
                      <thead>
                        <tr>
                          <th>{tr('日期')}</th>
                          <th>{tr('余额 / 估值变化')}</th>
                          <th>{tr('汇率变化')}</th>
                          <th>{tr('净资产')}</th>
                        </tr>
                      </thead>
                      <tbody>
                        {overview.trend.slice(-10).map((r) => (
                          <tr key={r.date}>
                            <td>{r.date}</td>
                            <td>
                              {r.balanceChange === null || r.balanceChange === undefined
                                ? '—'
                                : money(r.balanceChange, user.baseCurrency)}
                            </td>
                            <td>
                              {r.fxChange === null || r.fxChange === undefined
                                ? '—'
                                : money(r.fxChange, user.baseCurrency)}
                            </td>
                            <td>
                              {r.complete ? money(r.net, user.baseCurrency) : tr('汇率不完整')}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </details>
              )}
            </>
          )}
          {['account', 'asset', 'debt'].includes(page) &&
            (p ? (
              <>
                <button className="text back" onClick={() => setSelected(null)}>
                  <ArrowLeft size={16} />
                  {tr('返回列表')}
                </button>
                <section className="panel detail-summary">
                  <div>
                    <span className="badge">
                      {categoryLabel(p)} ·{' '}
                      {p.kind === 'debt'
                        ? tr(p.side === 'asset' ? '借款（待收）' : '欠款（待还）')
                        : p.side === 'asset'
                          ? tr('资产')
                          : tr(
                              p.kind === 'account' && p.amount.startsWith('-')
                                ? '溢缴存款'
                                : '负债',
                            )}
                      {p.archived ? tr(' · 已归档') : ''}
                    </span>
                    <h2 className={positionAmount(p).startsWith('-') ? 'danger-text' : undefined}>
                      {money(positionAmount(p), p.currency)}
                    </h2>
                    {p.hidden && <span className="badge">{tr('隐藏项目')}</span>}
                    <p className="muted">
                      {tr('本位币：')}
                      {p.converted !== null
                        ? money(positionAmount(p, p.converted || '0'), user.baseCurrency)
                        : tr('缺少汇率')}
                    </p>
                    <p className="notes-display">{p.notes || tr('暂无备注')}</p>
                    <small>{tr('币种和资产负债属性创建后固定。归档项目仍计入总览。')}</small>
                  </div>
                  <div className="actions">
                    {p.kind === 'account' && p.side === 'asset' && !p.archived && (
                      <>
                        <button
                          className="primary"
                          onClick={() => setModal({ kind: 'transfer', p })}
                        >
                          {tr('账户间转账')}
                        </button>
                        <button
                          className="secondary"
                          onClick={() => setModal({ kind: 'debt-payment', p })}
                        >
                          {tr('收款 / 还款')}
                        </button>
                      </>
                    )}
                    {p.kind === 'debt' && !p.archived && (
                      <>
                        <button
                          className="primary"
                          onClick={() =>
                            setModal({
                              kind: 'debt-payment',
                              p,
                              operation: p.side === 'asset' ? 'collect' : 'repay',
                            })
                          }
                        >
                          {operationLabel(p.side === 'asset' ? 'collect' : 'repay')}
                        </button>
                      </>
                    )}
                    <button className="secondary" onClick={() => setModal({ kind: 'edit', p })}>
                      {tr('编辑资料')}
                    </button>
                    <button
                      className="secondary"
                      disabled={busy}
                      onClick={() =>
                        void act(
                          () =>
                            api('/positions/' + p.id, 'PATCH', {
                              name: p.name,
                              category: p.category,
                              groupName: p.groupName,
                              notes: p.notes,
                              archived: !p.archived,
                              hidden: p.hidden,
                            }),
                          p.archived ? tr('项目已恢复') : tr('项目已归档'),
                        )
                      }
                    >
                      {p.archived ? tr('恢复项目') : tr('归档项目')}
                    </button>
                    <button
                      className="primary"
                      disabled={p.archived}
                      onClick={() => setModal({ kind: 'revision', p })}
                    >
                      {tr('更新')}
                      {p.kind === 'asset' ? tr('估值') : tr('余额')}
                    </button>
                  </div>
                </section>
                {p.kind === 'debt' && (
                  <section className="panel">
                    <div className="panel-title">
                      <h2>{tr('关联资产与账户')}</h2>
                      <button className="text" onClick={() => setModal({ kind: 'links', p })}>
                        {tr('管理关联')}
                      </button>
                    </div>
                    <p className="muted">{tr('只展示关系，不改变资产或债务的统计。')}</p>
                    {p.outgoing.length ? (
                      p.outgoing.map((l) => (
                        <button
                          className="secondary"
                          key={l.targetId}
                          onClick={() => {
                            setSelected(l.targetId);
                            setPage(l.target.kind);
                          }}
                        >
                          {l.target.name}
                        </button>
                      ))
                    ) : (
                      <p>{tr('尚未关联')}</p>
                    )}
                  </section>
                )}
                <section className="panel">
                  <h2>{tr('余额与估值历史')}</h2>
                  <p className="muted">
                    {tr(
                      '每次更新保留独立历史，同日按记录顺序展示。错误记录可单独更正，后续变化自动重算。',
                    )}
                  </p>
                  <HistoryTable
                    rows={historyRows}
                    correct={p.archived ? undefined : (h) => void correctHistory(h)}
                    remove={p.archived ? undefined : deleteHistory}
                    busy={busy}
                  />
                  {historyCursor && (
                    <button disabled={loading} onClick={() => void more('history')}>
                      {tr('加载更早记录')}
                    </button>
                  )}
                </section>
              </>
            ) : (
              <section className="panel">
                {page === 'account' && (
                  <>
                    <div className="actions account-tools">
                      <button
                        className={quickMode ? 'primary' : 'secondary'}
                        aria-pressed={quickMode}
                        onClick={() => setQuickMode(!quickMode)}
                      >
                        {tr(quickMode ? '退出快速记账' : '快速记账')}
                      </button>
                      <select
                        aria-label={tr('账户分组')}
                        value={accountGroup === null ? 'all' : JSON.stringify(accountGroup)}
                        onChange={(e) =>
                          setAccountGroup(
                            e.target.value === 'all' ? null : JSON.parse(e.target.value),
                          )
                        }
                      >
                        <option value="all">{tr('全部账户')}</option>
                        {groups.map((g) => (
                          <option key={g} value={JSON.stringify(g)}>
                            {g || tr('未分组')}
                          </option>
                        ))}
                      </select>
                      <button
                        className="secondary"
                        disabled={busy || groups.length < 2}
                        onClick={() => setModal({ kind: 'group-order', groups: [...groups] })}
                      >
                        {tr('分组排序')}
                      </button>
                    </div>
                    {quickMode && <p className="muted">{tr('点击账户卡片，直接填写当前余额。')}</p>}
                  </>
                )}
                {positions.some((p) => p.kind === page) ? (
                  <div className="position-grid">
                    {positions
                      .filter(
                        (p) =>
                          p.kind === page &&
                          (page !== 'account' ||
                            accountGroup === null ||
                            (p.groupName || '') === accountGroup),
                      )
                      .sort((a, b) =>
                        page === 'account'
                          ? (groupRanks.get(a.groupName || '') || 0) -
                            (groupRanks.get(b.groupName || '') || 0)
                          : 0,
                      )
                      .map((p, index, rows) => (
                        <Fragment key={p.id}>
                          {page === 'account' &&
                            accountGroup === null &&
                            (index === 0 ||
                              (rows[index - 1].groupName || '') !== (p.groupName || '')) && (
                              <h3 className="account-group-title">{p.groupName || tr('未分组')}</h3>
                            )}
                          <button
                            className="position-card"
                            key={p.id}
                            onClick={() =>
                              page === 'account' && quickMode && !p.archived
                                ? setModal({ kind: 'revision', p })
                                : setSelected(p.id)
                            }
                          >
                            <div>
                              <span className="position-icon">
                                {p.iconId ? (
                                  <img src={iconUrl(p.iconId)} alt={tr('账户图标')} />
                                ) : p.kind === 'asset' ? (
                                  <Landmark />
                                ) : p.kind === 'debt' ? (
                                  <HandCoins />
                                ) : (
                                  <Wallet />
                                )}
                              </span>
                              <ArrowUpRight size={18} />
                            </div>
                            <h3>{p.name}</h3>
                            {p.groupName && <span className="badge">{p.groupName}</span>}
                            <p>
                              {categoryLabel(p)} ·{' '}
                              {p.kind === 'debt'
                                ? tr(p.side === 'asset' ? '借款（待收）' : '欠款（待还）')
                                : p.side === 'asset'
                                  ? tr('资产')
                                  : tr(
                                      p.kind === 'account' && p.amount.startsWith('-')
                                        ? '溢缴存款'
                                        : '负债',
                                    )}
                              {p.archived ? tr(' · 已归档') : ''}
                            </p>
                            <strong
                              className={
                                positionAmount(p).startsWith('-') ? 'danger-text' : undefined
                              }
                            >
                              {money(positionAmount(p), p.currency)}
                            </strong>
                            <small>
                              {tr('折合')}{' '}
                              {p.converted === null
                                ? tr('缺少汇率')
                                : money(positionAmount(p, p.converted || '0'), user.baseCurrency)}
                            </small>
                          </button>
                        </Fragment>
                      ))}
                  </div>
                ) : (
                  <Empty
                    title={tr('还没有') + tr(labels[page])}
                    body={tr('添加真实数据后，这里将展示原币余额和历史变化。')}
                    action={newAction}
                  />
                )}
              </section>
            ))}
          {page === 'history' && (
            <>
              <section className="panel">
                <div className="actions">
                  <label>
                    {tr('开始')}
                    <input
                      type="date"
                      value={rangeFrom}
                      max={rangeTo}
                      onChange={(e) => setRangeFrom(e.target.value)}
                    />
                  </label>
                  <label>
                    {tr('结束')}
                    <input
                      type="date"
                      value={rangeTo}
                      min={rangeFrom}
                      max={today()}
                      onChange={(e) => setRangeTo(e.target.value)}
                    />
                  </label>
                </div>
                <h2>{tr('资金往来')}</h2>
                {transfers.length ? (
                  <div className="transfer-list">
                    {transfers.map((t) => (
                      <article key={t.id}>
                        <div>
                          <strong>
                            {operationLabel(t.operation || 'transfer')} ·
                            <button
                              className="text"
                              onClick={() => {
                                setSelected(t.sourceId);
                                setPage(t.source.kind);
                              }}
                            >
                              {t.source.name}
                            </button>
                            {' ↔ '}
                            <button
                              className="text"
                              onClick={() => {
                                setSelected(t.targetId);
                                setPage(t.target.kind);
                              }}
                            >
                              {t.target.name}
                            </button>
                          </strong>
                          <small>{displayTime(t.date)}</small>
                        </div>
                        <p>
                          {money(t.amount, t.sourceCurrency)} →{' '}
                          {money(t.received, t.targetCurrency)} {tr('· 手续费')}
                          {money(t.fee, t.sourceCurrency)}
                        </p>
                        {t.notes && <p className="muted notes-display">{t.notes}</p>}
                        <div className="actions record-actions">
                          <button
                            className="text"
                            disabled={busy}
                            onClick={() => setModal({ kind: 'transfer-edit', transfer: t })}
                          >
                            {tr('修改')}
                          </button>
                          <button
                            className="text danger-text"
                            disabled={busy}
                            onClick={() => {
                              setError('');
                              setModal({ kind: 'delete-record', transfer: t });
                            }}
                          >
                            {tr('删除')}
                          </button>
                        </div>
                      </article>
                    ))}
                  </div>
                ) : (
                  <p className="muted">{tr('暂无账户间转账记录。')}</p>
                )}
                {transferCursor && (
                  <button disabled={loading} onClick={() => void more('transfers')}>
                    {tr('加载更早转账')}
                  </button>
                )}
                <h2>{tr('全部金额变化')}</h2>
                <p className="muted">
                  {tr('原币绝对余额记录；负债减少即还款。选择项目可查看详情并更正。')}
                </p>
                <HistoryTable
                  rows={historyRows}
                  correct={(h) => void correctHistory(h)}
                  remove={deleteHistory}
                  busy={busy}
                  open={(id) => {
                    setSelected(id);
                    setPage(historyRows.find((h) => h.positionId === id)?.kind || 'account');
                  }}
                />
                {historyCursor && (
                  <button disabled={loading} onClick={() => void more('history')}>
                    {tr('加载更早记录')}
                  </button>
                )}
              </section>
            </>
          )}
          {page === 'schedules' && (
            <section className="panel">
              <SchedulePanel
                accounts={positions.filter(
                  (p) => p.kind === 'account' && p.side === 'asset' && !p.archived,
                )}
                refresh={() => load(false, true)}
              />
            </section>
          )}
          {page === 'calendar' && (
            <Calendar revealed={!!user.revealed} refreshVersion={calendarRefresh} />
          )}
          {page === 'settings' && (
            <>
              <section className="settings-switch panel">
                <label>
                  {tr('设置分类')}
                  <select
                    value={settingsSection}
                    onChange={(e) => setSettingsSection(e.target.value)}
                  >
                    <option value="general">{tr('个人与菜单设置')}</option>
                    <option value="security">{tr('账号与密码')}</option>
                    <option value="icons">{tr('图标库')}</option>
                    <option value="rates">{tr('每日汇率')}</option>
                    <option value="backup">{tr('备份与恢复')}</option>
                    <option className="danger-text" value="clear">
                      {tr('清空本账号数据')}
                    </option>
                  </select>
                </label>
              </section>
              {settingsSection === 'icons' && (
                <section className="panel">
                  <IconLibrary />
                </section>
              )}
              {settingsSection === 'security' && (
                <section className="panel">
                  <h2>{tr('账号与密码')}</h2>
                  <p className="muted">{tr('修改后其他登录会话将退出，当前会话保持登录。')}</p>
                  <form
                    key={user.username}
                    onSubmit={(e) => {
                      e.preventDefault();
                      const form = e.currentTarget,
                        f = new FormData(form);
                      const username = String(f.get('username')).trim(),
                        newPassword = String(f.get('newPassword'));
                      if (newPassword !== String(f.get('confirmPassword'))) {
                        setError(tr('两次输入的新密码不一致'));
                        return;
                      }
                      void act(async () => {
                        const result = await api('/auth/credentials', 'PATCH', {
                          currentPassword: f.get('currentPassword'),
                          ...(username !== user.username ? { username } : {}),
                          ...(newPassword ? { newPassword } : {}),
                        });
                        form.reset();
                        return result;
                      }, tr('账号与密码已更新'));
                    }}
                  >
                    <Field label={tr('账号')}>
                      <input
                        name="username"
                        autoComplete="username"
                        required
                        minLength={3}
                        maxLength={64}
                        defaultValue={user.username}
                      />
                    </Field>
                    <Field label={tr('当前密码')}>
                      <input
                        name="currentPassword"
                        type="password"
                        autoComplete="current-password"
                        required
                        minLength={10}
                        maxLength={72}
                      />
                    </Field>
                    <Field label={tr('新密码（不修改请留空）')}>
                      <input
                        name="newPassword"
                        type="password"
                        autoComplete="new-password"
                        minLength={10}
                        maxLength={72}
                      />
                    </Field>
                    <Field label={tr('确认新密码')}>
                      <input
                        name="confirmPassword"
                        type="password"
                        autoComplete="new-password"
                        minLength={10}
                        maxLength={72}
                      />
                    </Field>
                    <button className="primary" disabled={busy}>
                      {tr('保存修改')}
                    </button>
                  </form>
                </section>
              )}
              <div className="settings-grid">
                <section className="panel" hidden={settingsSection !== 'general'}>
                  <div className="panel-title">
                    <h2>{tr('个人与菜单设置')}</h2>
                    <button className="text" disabled={busy} onClick={() => void logout()}>
                      <LogOut size={16} />
                      {tr('退出登录')}
                    </button>
                  </div>
                  <p className="muted">
                    {tr('账号：')}
                    {user.username}
                    {tr('。切换本位币会重新换算整个历史，原币数据保留。')}
                  </p>
                  <form
                    onSubmit={(e) => {
                      e.preventDefault();
                      const f = new FormData(e.currentTarget);
                      void act(
                        () =>
                          api('/settings', 'PATCH', {
                            baseCurrency: f.get('baseCurrency'),
                            hiddenMenus: [
                              'overview',
                              'account',
                              'asset',
                              'debt',
                              'history',
                              'calendar',
                              'schedules',
                            ].filter((key) => !f.has('menu_' + key)),
                            idleMinutes: Number(f.get('idleMinutes')),
                            showNotes: f.has('showNotes'),
                          }),
                        tr('个人设置已保存'),
                      );
                    }}
                  >
                    <p className="muted">
                      {tr('选择需要显示的菜单项。设置入口始终保留，隐藏仅影响导航，不删除数据。')}
                    </p>
                    <div className="menu-preferences">
                      {[
                        'overview',
                        'account',
                        'asset',
                        'debt',
                        'history',
                        'calendar',
                        'schedules',
                      ].map((key) => (
                        <label key={key} className="switch-row">
                          <span>{tr(labels[key])}</span>
                          <input
                            type="checkbox"
                            role="switch"
                            aria-label={tr(labels[key]) + tr('显示')}
                            name={'menu_' + key}
                            key={key + String(user.hiddenMenus)}
                            defaultChecked={!(user.hiddenMenus || []).includes(key)}
                          />
                          <span className="switch-state" aria-hidden="true">
                            {tr('显示')}
                          </span>
                        </label>
                      ))}
                    </div>
                    <label className="switch-row">
                      <span>{tr('显示备注')}</span>
                      <input
                        type="checkbox"
                        role="switch"
                        name="showNotes"
                        aria-label={tr('显示备注')}
                        key={String(user.showNotes)}
                        defaultChecked={user.showNotes !== false}
                      />
                      <span className="switch-state" aria-hidden="true">
                        {tr('显示')}
                      </span>
                    </label>
                    <p className="muted">
                      {tr('关闭后隐藏列表、详情及编辑表单中的备注，已有备注仍会保留在备份中。')}
                    </p>
                    <Field label={tr('无操作自动退出（分钟）')}>
                      <select
                        name="idleMinutes"
                        key={user.idleMinutes}
                        defaultValue={user.idleMinutes}
                      >
                        {[...new Set([0, 5, 15, 30, 60, 120, 1440, user.idleMinutes])]
                          .sort((a, b) => a - b)
                          .map((n) => (
                            <option key={n} value={n}>
                              {n === 0 ? tr('关闭自动退出') : n + tr(' 分钟')}
                            </option>
                          ))}
                      </select>
                    </Field>
                    <p className="muted">
                      {tr(
                        '0 为关闭；最长 1440 分钟。到时退出登录并清除页面数据，浏览器标签页保留。',
                      )}
                    </p>
                    <Field label={tr('本位币')}>
                      <select
                        name="baseCurrency"
                        defaultValue={user.baseCurrency}
                        key={user.baseCurrency}
                      >
                        {currencies.map((c) => (
                          <option key={c}>{c}</option>
                        ))}
                      </select>
                    </Field>
                    <button className="primary" disabled={busy}>
                      {tr('保存设置')}
                    </button>
                  </form>
                </section>
                <section className="panel" hidden={settingsSection !== 'rates'}>
                  <h2>{tr('每日汇率')}</h2>
                  {fxStatus && (
                    <p
                      className={fxStatus.state === 'error' ? 'notice warning' : 'muted'}
                      role="status"
                    >
                      {tr(fxStatus.message)}
                      {fxStatus.attemptedAt
                        ? ' · ' +
                          new Date(fxStatus.attemptedAt).toLocaleString(locale, {
                            timeZone: 'Asia/Hong_Kong',
                          })
                        : ''}
                    </p>
                  )}
                  <p className="muted">
                    {tr(
                      '服务器每小时检查当日是否已尝试更新。外部请求固定下载公共汇率表，不发送个人数据。失败保留已有汇率，可稍后重试。',
                    )}
                  </p>
                  <button
                    className="secondary"
                    disabled={busy}
                    onClick={() =>
                      void act(
                        () => api('/rates/refresh', 'POST'),
                        tr('汇率已更新至数据源最新可用日期'),
                      )
                    }
                  >
                    <RefreshCw size={16} />
                    {tr('立即更新')}
                  </button>
                  <p className="muted">
                    {tr('公共参考汇率可能与银行成交价不同；休市日日期可能滞后。')}
                  </p>
                </section>
              </div>
              <section className="panel" hidden={settingsSection !== 'rates'}>
                <h2>{tr('已保存汇率')}</h2>
                {rates.length ? (
                  <div className="table-wrap">
                    <table>
                      <thead>
                        <tr>
                          <th>{tr('原币 → 本位币')}</th>
                          <th>{tr('汇率')}</th>
                          <th>{tr('日期')}</th>
                          <th>{tr('来源')}</th>
                        </tr>
                      </thead>
                      <tbody>
                        {rates.slice(0, 100).map((r) => (
                          <tr key={r.currency + r.baseCurrency + r.date}>
                            <td>
                              {r.currency} → {r.baseCurrency}
                            </td>
                            <td>{r.rate}</td>
                            <td>{r.date.slice(0, 10)}</td>
                            <td>{r.source === 'manual' ? tr('历史导入') : 'Frankfurter'}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                ) : (
                  <Empty
                    title={tr('没有保存的外币汇率')}
                    body={tr('添加外币项目后更新并保存自动汇率。')}
                  />
                )}
              </section>
              <section className="panel" hidden={settingsSection !== 'clear'}>
                <h2 className="danger-text">{tr('清空本账号数据')}</h2>
                <p className="muted">
                  {tr(
                    '清除本账号全部账户、资产、债务、历史、私有图标和汇率（包括隐藏项目）；保留登录账号、个人设置和已发布的共享图标。请先下载备份并确认文件已保存。',
                  )}
                </p>
                {clearStep === 0 ? (
                  <button
                    className="secondary"
                    disabled={busy}
                    onClick={() => void downloadBackup(true)}
                  >
                    <Download size={16} />
                    {tr('第一步：下载备份')}
                  </button>
                ) : clearStep === 1 ? (
                  <button
                    className="secondary"
                    disabled={busy}
                    onClick={async () => {
                      try {
                        const s = await api<{ ready: boolean }>('/backup/clear-status');
                        if (!s.ready) throw new Error(tr('备份尚未完成，请重新下载'));
                        setClearStep(2);
                      } catch (e) {
                        report(e);
                      }
                    }}
                  >
                    {tr('备份已保存，进入下一步')}
                  </button>
                ) : (
                  <form
                    onSubmit={(e) => {
                      e.preventDefault();
                      if (new FormData(e.currentTarget).get('confirmation') === tr('确定清空'))
                        setClearConfirmation(1);
                    }}
                  >
                    <Field label={tr('输入“确定清空”以确认')}>
                      <input
                        name="confirmation"
                        required
                        pattern={tr('确定清空')}
                        autoComplete="off"
                      />
                    </Field>
                    <button className="danger" disabled={busy}>
                      {tr('清空本账号数据')}
                    </button>
                  </form>
                )}
                {clearStep > 0 && (
                  <button className="text" onClick={() => setClearStep(0)}>
                    {tr('取消清空 / 重新下载')}
                  </button>
                )}
              </section>
              <section className="panel" hidden={settingsSection !== 'backup'}>
                <h2>{tr('数据备份与恢复')}</h2>
                <p className="muted">
                  {tr(
                    'ZIP 内分文件保存可读 JSON，包括全部账户、资产、债务、历史、关联、币种、设置、汇率、图标及配对转账，不限制记录条数；不包含任何认证凭据。备份含个人财务信息，请妥善保管。',
                  )}
                </p>
                <div className="actions">
                  <button
                    className="secondary"
                    disabled={busy}
                    onClick={() => void downloadBackup()}
                  >
                    <Download size={16} />
                    {tr('下载我的数据备份')}
                  </button>{' '}
                  <label className="secondary file-button">
                    <Upload size={16} />
                    {tr('选择备份并验证')}
                    <input
                      type="file"
                      accept=".zip,application/zip,.json,application/json"
                      disabled={busy}
                      onChange={async (e) => {
                        setBackup(null);
                        setPreview(null);
                        setError('');
                        const file = e.target.files?.[0];
                        if (!file) return;
                        const uploadSession = sessionGeneration.current;
                        setBusy(true);
                        try {
                          if (file.size > 512 * 1024 * 1024)
                            throw new Error(tr('ZIP 文件不能超过 512 MB（不限制记录条数）'));
                          const form = new FormData();
                          form.append('file', file);
                          const response = await fetch('/api/backup/upload', {
                            method: 'POST',
                            body: form,
                            credentials: 'same-origin',
                          });
                          const result = await response.json();
                          if (!response.ok)
                            throw new ApiError(
                              result.message || tr('ZIP 验证失败'),
                              response.status,
                            );
                          if (uploadSession !== sessionGeneration.current) return;
                          setBackup(result.token);
                          setPreview(result);
                        } catch (err) {
                          if (uploadSession === sessionGeneration.current) report(err);
                        } finally {
                          setBusy(false);
                          e.target.value = '';
                        }
                      }}
                    />
                  </label>
                </div>
                {preview && (
                  <div className="import-preview">
                    <h3>{tr('导入预览')}</h3>
                    <p>
                      {preview.positions} {tr('个项目 ·')}
                      {preview.revisions} {tr('条历史 ·')}
                      {preview.rates} {tr('条汇率')}
                    </p>
                    <p>
                      {tr('备份本位币')}
                      {preview.baseCurrency} {tr('/ 当前本位币')}
                      {preview.currentBaseCurrency}
                    </p>
                    <p>{tr(preview.message)}</p>
                    <button
                      className="primary"
                      disabled={busy}
                      onClick={() =>
                        void act(async () => {
                          await api('/backup/import-file', 'POST', {
                            confirmed: true,
                            token: backup,
                          });
                          setPreview(null);
                          setBackup(null);
                        }, tr('备份已完整导入'))
                      }
                    >
                      {tr('确认追加导入')}
                    </button>
                    <button
                      className="text"
                      onClick={() => {
                        setPreview(null);
                        setBackup(null);
                      }}
                    >
                      {tr('取消')}
                    </button>
                  </div>
                )}
              </section>
            </>
          )}
          <footer>{tr('WorthPath · 记录你的积累，理解你的财富')}</footer>
        </div>
      </main>
      {clearConfirmation > 0 && (
        <Modal
          key={clearConfirmation}
          title={
            clearConfirmation === 1
              ? tr('第一次确认：清空本账号数据')
              : tr('第二次确认：清空本账号数据')
          }
          close={() => {
            if (!busy) setClearConfirmation(0);
          }}
        >
          <p className="danger-text">
            {clearConfirmation === 1
              ? tr('将清空本账号全部财务数据及私有图标，请确认备份已保存。')
              : tr('这是最后一次确认。清空后只能通过备份恢复，其他用户的数据不受影响。')}
          </p>
          <p className="muted">{tr('登录账号、个人设置和已发布的共享图标会保留。')}</p>
          <div className="modal-actions clear-confirm-actions">
            {clearConfirmation === 1 ? (
              <>
                <button
                  autoFocus
                  className="secondary"
                  disabled={busy}
                  onClick={() => setClearConfirmation(0)}
                >
                  {tr('取消清空')}
                </button>
                <button className="danger" disabled={busy} onClick={() => setClearConfirmation(2)}>
                  {tr('继续清空')}
                </button>
              </>
            ) : (
              <>
                <button
                  className="danger"
                  disabled={busy}
                  onClick={() =>
                    void act(async () => {
                      await api('/backup/clear', 'POST', { confirmation: tr('确定清空') });
                      setClearConfirmation(0);
                      setClearStep(0);
                      setSelected(null);
                      setBackup(null);
                      setPreview(null);
                    }, tr('本账号数据已清空'))
                  }
                >
                  {busy ? tr('正在清空…') : tr('最终确认清空')}
                </button>
                <button
                  autoFocus
                  className="secondary"
                  disabled={busy}
                  onClick={() => setClearConfirmation(0)}
                >
                  {tr('取消清空')}
                </button>
              </>
            )}
          </div>
          {error && (
            <p role="alert" className="notice error">
              {error}
            </p>
          )}
        </Modal>
      )}
      {modal?.kind === 'group-order' && modal.groups && (
        <Modal title={tr('分组排序')} close={() => !busy && setModal(null)}>
          <GroupOrderList
            groups={modal.groups}
            busy={busy}
            onChange={(groups) =>
              setModal((current) =>
                current?.kind === 'group-order' ? { ...current, groups } : current,
              )
            }
          />
          <div className="modal-actions">
            <button className="secondary" disabled={busy} onClick={() => setModal(null)}>
              {tr('取消')}
            </button>
            <button
              className="primary"
              disabled={busy}
              onClick={() =>
                void act(
                  () =>
                    api('/settings', 'PATCH', {
                      accountGroupOrder: mergeGroupOrder(
                        modal.groups!,
                        user.accountGroupOrder || [],
                      ),
                    }),
                  tr('分组顺序已保存'),
                )
              }
            >
              {tr(busy ? '正在保存…' : '保存')}
            </button>
          </div>
        </Modal>
      )}
      {modal?.kind === 'delete-record' && (
        <Modal
          title={tr('删除记录')}
          close={() => {
            if (!busy) setModal(null);
          }}
        >
          <p>
            {modal.h
              ? modal.h.name
              : modal.transfer?.source.name + ' ↔ ' + modal.transfer?.target.name}
          </p>
          <p className="muted">{displayTime(modal.h?.time || modal.transfer!.date)}</p>
          <p>
            {tr(
              modal.transfer ||
                modal.h?.reason.startsWith('transfer_') ||
                modal.h?.reason.startsWith('loan_')
                ? '这笔资金往来的双方记录将一起删除，并重算后续余额。'
                : '这条记录将被删除，并重算后续余额。',
            )}
          </p>
          <p className="danger-text">{tr('删除后无法撤销，请确认已保存所需备份。')}</p>
          {error && (
            <p role="alert" className="notice error">
              {tr(error)}
            </p>
          )}
          <div className="modal-actions clear-confirm-actions">
            <button autoFocus disabled={busy} onClick={() => setModal(null)}>
              {tr('取消')}
            </button>
            <button
              className="danger"
              disabled={busy}
              onClick={() =>
                void act(
                  () =>
                    api(
                      modal.h
                        ? '/positions/' + modal.h.positionId + '/revisions/' + modal.h.id
                        : '/transfers/' + modal.transfer!.id,
                      'DELETE',
                    ),
                  tr('记录已删除，余额和日历已更新'),
                )
              }
            >
              {busy ? tr('正在处理…') : tr('确认删除')}
            </button>
          </div>
        </Modal>
      )}
      {modal?.kind === 'transfer-edit' && modal.transfer && (
        <Modal
          title={tr('修改资金往来')}
          close={() => {
            if (!busy) setModal(null);
          }}
        >
          <form
            onSubmit={(e) => {
              e.preventDefault();
              const t = modal.transfer!,
                f = Object.fromEntries(new FormData(e.currentTarget));
              void act(
                () =>
                  api('/transfers/' + t.id, 'PUT', {
                    ...f,
                    sourceId: t.sourceId,
                    targetId: t.targetId,
                    operation: t.operation,
                  }),
                tr('记录已修改，余额和日历已更新'),
              );
            }}
          >
            <p>
              {modal.transfer.source.name} ↔ {modal.transfer.target.name}
            </p>
            <Field label={tr('转出金额（') + modal.transfer.sourceCurrency + '）'}>
              <input
                name="amount"
                required
                inputMode="decimal"
                defaultValue={modal.transfer.amount}
              />
            </Field>
            <Field label={tr('实际到账（') + modal.transfer.targetCurrency + '）'}>
              <input
                name="received"
                required
                inputMode="decimal"
                defaultValue={modal.transfer.received}
              />
            </Field>
            <Field label={tr('手续费 / 优惠（') + modal.transfer.sourceCurrency + '）'}>
              <input name="fee" required inputMode="decimal" defaultValue={modal.transfer.fee} />
            </Field>
            <Field label={tr('记录时间（UTC+8）')}>
              <input
                name="date"
                type="datetime-local"
                required
                max={nowMinute()}
                defaultValue={modal.transfer.date}
              />
            </Field>
            <Field label={tr('备注')}>
              <textarea name="notes" maxLength={2000} defaultValue={modal.transfer.notes} />
            </Field>
            {error && (
              <p role="alert" className="notice error">
                {error}
              </p>
            )}
            <button className="primary" disabled={busy}>
              {tr(busy ? '正在保存…' : '保存')}
            </button>
          </form>
        </Modal>
      )}
      {modal && !['transfer-edit', 'delete-record', 'group-order'].includes(modal.kind) && (
        <Modal
          title={
            modal.kind === 'debt-payment'
              ? modal.p?.kind === 'debt'
                ? operationLabel(modal.p.side === 'asset' ? 'collect' : 'repay')
                : tr('收款 / 还款')
              : modal.kind === 'transfer'
                ? tr('账户间转账')
                : modal.kind === 'reveal'
                  ? tr('验证密码以显示隐藏资产')
                  : modal.kind === 'edit'
                    ? tr('编辑项目')
                    : modal.kind === 'revision'
                      ? tr('更新余额 / 估值')
                      : modal.kind === 'correction'
                        ? tr('更正历史记录')
                        : modal.kind === 'links'
                          ? tr('管理债务关联')
                          : tr('新增') + tr(labels[modal.kind])
          }
          close={() => {
            if (!busy) setModal(null);
          }}
        >
          {['transfer', 'debt-payment'].includes(modal.kind) ? (
            movementLoading ? (
              <p>{tr('正在刷新数据…')}</p>
            ) : modal.kind === 'transfer' ? (
              <TransferForm
                accounts={movementPositions.filter(
                  (p) => p.kind === 'account' && p.side === 'asset' && !p.archived,
                )}
                initialSourceId={modal.p?.kind === 'account' ? modal.p.id : undefined}
                busy={busy}
                submit={(v) =>
                  void act(() => api('/transfers', 'POST', v), tr('转账已保存，双方余额已更新'))
                }
              />
            ) : (
              <DebtPaymentForm
                accounts={movementPositions.filter(
                  (p) => p.kind === 'account' && p.side === 'asset' && !p.archived,
                )}
                debts={movementPositions.filter((p) => p.kind === 'debt' && !p.archived)}
                initialAccount={
                  modal.p?.kind === 'account'
                    ? modal.p.id
                    : modal.p?.outgoing.find((link) =>
                        movementPositions.some(
                          (p) =>
                            p.id === link.targetId &&
                            p.kind === 'account' &&
                            p.side === 'asset' &&
                            !p.archived,
                        ),
                      )?.targetId
                }
                initialDebt={modal.p?.kind === 'debt' ? modal.p.id : undefined}
                initialOperation={modal.operation}
                busy={busy}
                submit={(v) =>
                  void act(() => api('/transfers', 'POST', v), tr('账户与债务已同步更新'))
                }
              />
            )
          ) : (
            <form
              onSubmit={(e) => {
                e.preventDefault();
                const f = new FormData(e.currentTarget),
                  v = Object.fromEntries(f.entries()),
                  kind = modal.kind,
                  mp = modal.p;
                if (kind === 'reveal') {
                  void act(
                    () => api('/auth/reveal', 'POST', { password: f.get('password') }),
                    tr('隐藏项目已解锁 5 分钟'),
                  );
                } else if (kind === 'links') {
                  void act(
                    () =>
                      api('/positions/' + mp!.id + '/links', 'PUT', {
                        targetIds: f.getAll('targetIds'),
                      }),
                    tr('关联已更新'),
                  );
                } else if (kind === 'revision' || kind === 'correction') {
                  void act(
                    () =>
                      api(
                        '/positions/' + mp!.id + '/revisions' + (modal.h ? '/' + modal.h.id : ''),
                        modal.h ? 'PUT' : 'POST',
                        { ...v, amount: accountInputAmount(mp!, String(v.amount)) },
                      ),
                    tr('金额历史已保存，总览已重新计算'),
                  );
                } else if (kind === 'edit') {
                  void act(
                    () =>
                      api('/positions/' + mp!.id, 'PATCH', {
                        ...v,
                        ...(f.has('iconId') ? { iconId: f.get('iconId') || null } : {}),
                        archived: mp!.archived,
                        hidden: f.get('hidden') === 'on',
                      }),
                    tr('项目资料已保存'),
                  );
                } else {
                  const category = String(v.category),
                    side =
                      kind === 'account' && ['credit_card', 'loan'].includes(category)
                        ? 'liability'
                        : kind === 'debt'
                          ? String(v.side)
                          : 'asset';
                  void act(
                    () =>
                      api('/positions', 'POST', {
                        ...v,
                        ...(f.has('iconId') ? { iconId: f.get('iconId') || null } : {}),
                        kind,
                        side,
                        amount: accountInputAmount({ kind, side }, String(v.amount)),
                        hidden: f.get('hidden') === 'on',
                      }),
                    tr('项目已添加'),
                  );
                }
              }}
            >
              {modal.kind === 'reveal' && (
                <Field label={tr('登录密码')}>
                  <input
                    name="password"
                    type="password"
                    autoComplete="current-password"
                    required
                    maxLength={72}
                  />
                </Field>
              )}
              {['account', 'asset', 'debt', 'edit'].includes(modal.kind) && (
                <>
                  <label className="check-line">
                    <input name="hidden" type="checkbox" defaultChecked={modal.p?.hidden} />
                    {tr('隐藏此项目（密码验证后可查看和编辑）')}
                  </label>
                  {(modal.kind === 'account' || modal.p?.kind === 'account') && (
                    <>
                      <IconPicker key={modal.p?.id || 'new-account'} initialId={modal.p?.iconId} />
                      <Field label={tr('账户分组')}>
                        <input
                          name="groupName"
                          maxLength={60}
                          defaultValue={modal.p?.groupName || ''}
                          list="account-groups"
                          placeholder={tr('例如：日常、消费、理财')}
                        />
                        <datalist id="account-groups">
                          {groups.filter(Boolean).map((g) => (
                            <option key={g} value={g} />
                          ))}
                        </datalist>
                      </Field>
                    </>
                  )}
                  <Field label={tr('名称')}>
                    <input
                      name="name"
                      defaultValue={modal.p?.name}
                      required
                      maxLength={100}
                      autoFocus
                    />
                  </Field>
                  <Field label={tr('类别')}>
                    <select
                      name="category"
                      defaultValue={modal.p?.category || categories[modal.kind]?.[0][0]}
                    >
                      {categories[modal.p?.kind || modal.kind].map(([v, label]) => (
                        <option key={v} value={v}>
                          {tr(label)}
                        </option>
                      ))}
                    </select>
                  </Field>
                  {modal.kind === 'account' && (
                    <p className="muted">
                      {tr('信用卡、贷款账户：负数为欠款，正数为溢缴存款；其余账户按实际余额填写。')}
                    </p>
                  )}
                </>
              )}
              {modal.kind === 'debt' && (
                <>
                  <Field label={tr('债务方向')}>
                    <select name="side" defaultValue="liability">
                      <option value="liability">{tr('欠款（待还）')}</option>
                      <option value="asset">{tr('借款（待收）')}</option>
                    </select>
                  </Field>
                  <p className="muted">
                    {tr(
                      '已有债务填写剩余本金；新借入或借出可先填0，保存后通过账户联动操作记录资金。',
                    )}
                  </p>
                </>
              )}
              {['account', 'asset', 'debt'].includes(modal.kind) && (
                <Field label={tr('原币币种')}>
                  <select name="currency" defaultValue={user.baseCurrency}>
                    {currencies.map((c) => (
                      <option key={c}>{c}</option>
                    ))}
                  </select>
                </Field>
              )}
              {['account', 'asset', 'debt', 'revision', 'correction'].includes(modal.kind) && (
                <Field
                  label={
                    tr(
                      modal.p?.kind === 'debt'
                        ? '剩余本金'
                        : modal.p?.kind === 'asset'
                          ? '当前估值'
                          : '当前余额',
                    ) + (modal.p ? '（' + modal.p.currency + '）' : '')
                  }
                >
                  <input
                    name="amount"
                    inputMode="decimal"
                    required
                    pattern={
                      modal.p?.kind === 'account' || modal.kind === 'account'
                        ? '-?(0|[1-9][0-9]{0,15})(\\.[0-9]{1,8})?'
                        : '(0|[1-9][0-9]{0,15})(\\.[0-9]{1,8})?'
                    }
                    defaultValue={
                      modal.p
                        ? accountInputAmount(modal.p, modal.h?.after || modal.p.amount)
                        : modal.kind === 'debt'
                          ? '0'
                          : ''
                    }
                    placeholder="0.00"
                  />
                </Field>
              )}
              {['account', 'asset', 'debt', 'revision', 'correction'].includes(modal.kind) && (
                <Field label={tr('记录时间（UTC+8）')}>
                  <input
                    type={'datetime-local'}
                    name="date"
                    required
                    min={'1900-01-01T00:00'}
                    max={nowMinute()}
                    defaultValue={modal.h?.time || nowMinute()}
                  />
                </Field>
              )}
              {['revision', 'correction'].includes(modal.kind) &&
                modal.p?.kind === 'account' &&
                modal.p.side === 'liability' && (
                  <p className="muted">
                    {tr('负数表示欠款，正数表示溢缴存款；溢缴部分计入总资产。')}
                  </p>
                )}
              {modal.kind === 'revision' && (
                <>
                  <Field label={tr('变更原因')}>
                    <select
                      name="reason"
                      defaultValue={modal.p?.kind === 'asset' ? 'valuation' : 'balance'}
                    >
                      <option value="balance">{tr('余额更新')}</option>
                      <option value="valuation">{tr('估值更新')}</option>
                      {modal.p?.side === 'liability' && (
                        <option value="repayment">{tr('还款（填写还款后欠款）')}</option>
                      )}
                    </select>
                  </Field>
                  <p className="muted">
                    {tr(
                      '填写更新后的余额或剩余欠款，每次保存会新增历史。已有错误记录请在历史中更正。',
                    )}
                  </p>
                </>
              )}
              {modal.kind === 'correction' && (
                <p className="notice warning">
                  {tr('这将修改选中的历史金额并重算后续变化，请确认日期和余额。')}
                </p>
              )}
              {modal.kind === 'links' ? (
                <div className="link-options">
                  {linkOptions.length ? (
                    linkOptions.map((p) => (
                      <label key={p.id}>
                        <input
                          type="checkbox"
                          name="targetIds"
                          value={p.id}
                          defaultChecked={modal.p!.outgoing.some((l) => l.targetId === p.id)}
                        />
                        {p.name} · {tr(labels[p.kind])}
                      </label>
                    ))
                  ) : (
                    <p>{tr('请先创建账户或独立资产。')}</p>
                  )}
                </div>
              ) : (
                modal.kind !== 'reveal' && (
                  <Field label={tr('备注')}>
                    <textarea
                      name="notes"
                      maxLength={2000}
                      rows={3}
                      defaultValue={modal.h?.notes || modal.p?.notes || ''}
                    />
                  </Field>
                )
              )}
              {error && (
                <div role="alert" className="notice error">
                  {error}
                </div>
              )}
              <div className="modal-actions">
                <button
                  className="secondary"
                  type="button"
                  disabled={busy}
                  onClick={() => setModal(null)}
                >
                  {tr('取消')}
                </button>
                <button className="primary" disabled={busy}>
                  {busy
                    ? tr('正在保存…')
                    : modal.kind === 'correction'
                      ? tr('确认更正')
                      : tr('保存')}
                </button>
              </div>
            </form>
          )}
        </Modal>
      )}
    </div>,
  );
}
function HistoryTable({
  rows,
  open,
  correct,
  remove,
  busy = false,
}: {
  rows: History[];
  open?: (id: string) => void;
  correct?: (h: History) => void;
  remove?: (h: History) => void;
  busy?: boolean;
}) {
  return rows.length ? (
    <div className="table-wrap">
      <table>
        <thead>
          <tr>
            <th>{tr('项目 / 日期')}</th>
            <th>{tr('变更前')}</th>
            <th>{tr('变更后')}</th>
            <th>{tr('变化额')}</th>
            <th className="notes-cell">{tr('备注')}</th>
            {correct && <th>{tr('操作')}</th>}
          </tr>
        </thead>
        <tbody>
          {rows.map((h) => (
            <tr key={h.id}>
              <td>
                {open ? (
                  <button className="text" onClick={() => open(h.positionId)}>
                    {h.name}
                  </button>
                ) : (
                  h.name
                )}
                <small>
                  {displayTime(h.time)} ·{' '}
                  {
                    (
                      {
                        initial: tr('初始记录'),
                        scheduled_expense: tr('计划支出'),
                        balance: tr('余额更新'),
                        valuation: tr('估值更新'),
                        repayment: tr('还款'),
                        correction: tr('更正'),
                        transfer_out: tr('转账转出'),
                        transfer_in: tr('转账到账'),
                        loan_borrow: tr('借入到账'),
                        loan_lend: tr('借出付款'),
                        loan_collect: tr('收回借款'),
                        loan_repay: tr('偿还债务'),
                      } as Record<string, string>
                    )[h.reason]
                  }
                </small>
              </td>
              <td
                className={positionAmount(h, h.before).startsWith('-') ? 'danger-text' : undefined}
              >
                {money(positionAmount(h, h.before), h.currency)}
              </td>
              <td
                className={positionAmount(h, h.after).startsWith('-') ? 'danger-text' : undefined}
              >
                {money(positionAmount(h, h.after), h.currency)}
              </td>
              <td
                className={positionAmount(h, h.delta).startsWith('-') ? 'danger-text' : undefined}
              >
                {money(positionAmount(h, h.delta), h.currency)}
              </td>
              <td className="notes-cell">{h.notes || '—'}</td>
              {correct && (
                <td className="record-actions">
                  <button className="text" disabled={busy} onClick={() => correct(h)}>
                    {tr(
                      h.reason.startsWith('transfer_') || h.reason.startsWith('loan_')
                        ? '修改资金往来'
                        : '更正',
                    )}
                  </button>
                  {remove && (
                    <button className="text danger-text" disabled={busy} onClick={() => remove(h)}>
                      {tr('删除')}
                    </button>
                  )}
                </td>
              )}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  ) : (
    <Empty title={tr('暂无变化记录')} body={tr('添加项目或更新金额后，历史会自动保存在这里。')} />
  );
}