// Transactions reconciliation with AI categorization
function Transactions() {
  const { lang } = useT();
  const txs = window.MOCK.TRANSACTIONS;

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="page-title">{lang === "cn" ? "交易对账" : "Transactions"}<span className="en">{lang === "cn" ? "Reconciliation" : "对账"}</span></h1>
          <div className="page-sub">{lang === "cn" ? "1,248 笔已匹配 · 3 笔异常 · AI 置信度平均 94%" : "1,248 matched · 3 exceptions · Avg AI confidence 94%"}</div>
        </div>
        <div className="flex gap-2">
          <button className="btn btn-ghost"><Icon.Plug size={14} /> {lang === "cn" ? "连接银行" : "Connect bank"}</button>
          <button className="btn btn-primary"><Icon.Sparkle size={14} /> {lang === "cn" ? "AI 再分类" : "Re-run AI"}</button>
        </div>
      </div>

      <div className="grid g4 mb-4">
        <Card>
          <div className="stat">
            <div className="stat-label">{lang === "cn" ? "本月流入" : "Inflow MTD"}</div>
            <div className="stat-value">684,921<span className="unit">SAR</span></div>
          </div>
        </Card>
        <Card>
          <div className="stat">
            <div className="stat-label">{lang === "cn" ? "本月流出" : "Outflow MTD"}</div>
            <div className="stat-value" style={{ color: "var(--danger)" }}>−421,480<span className="unit">SAR</span></div>
          </div>
        </Card>
        <Card>
          <div className="stat">
            <div className="stat-label">{lang === "cn" ? "待复核" : "Needs review"}</div>
            <div className="stat-value">3<span className="unit">{lang === "cn" ? "笔" : "items"}</span></div>
            <Pill kind="warn" dot>{lang === "cn" ? "低置信度" : "Low confidence"}</Pill>
          </div>
        </Card>
        <Card>
          <div className="stat">
            <div className="stat-label">{lang === "cn" ? "自动匹配" : "Auto-matched"}</div>
            <div className="stat-value">97.2<span className="unit">%</span></div>
            <div className="text-xs muted">{lang === "cn" ? "超过目标 85%" : "Above 85% target"}</div>
          </div>
        </Card>
      </div>

      <Card>
        <table className="table">
          <thead>
            <tr>
              <th>{lang === "cn" ? "日期" : "Date"}</th>
              <th>{lang === "cn" ? "描述" : "Description"}</th>
              <th>{lang === "cn" ? "账户" : "Account"}</th>
              <th>{lang === "cn" ? "类别 (AI)" : "Category (AI)"}</th>
              <th>{lang === "cn" ? "VAT 分类" : "VAT code"}</th>
              <th className="num">{lang === "cn" ? "金额" : "Amount"}</th>
              <th>{lang === "cn" ? "置信度" : "Confidence"}</th>
            </tr>
          </thead>
          <tbody>
            {txs.map(tx => (
              <tr key={tx.id} style={{ background: tx.needsReview ? "rgba(199,122,28,.05)" : undefined }}>
                <td className="num muted">{tx.date}</td>
                <td>
                  <div style={{ fontWeight: 500 }}>{lang === "cn" ? tx.desc_cn : tx.desc_en}</div>
                  <div className="text-xs muted" style={{ textTransform: "uppercase", letterSpacing: ".08em" }}>{tx.source}</div>
                </td>
                <td className="text-sm muted">{tx.account}</td>
                <td>
                  {tx.category === "?" ? (
                    <Pill kind="warn" dot>{lang === "cn" ? "未分类" : "Unknown"}</Pill>
                  ) : (
                    <>
                      {tx.ai && <Icon.Sparkle size={11} style={{ display: "inline-block", color: "var(--gold)", marginRight: 4 }} />}
                      {tx.category}
                    </>
                  )}
                </td>
                <td className="text-xs muted">{tx.vat_cat === "?" ? "—" : tx.vat_cat}</td>
                <td className="num" style={{ color: tx.amount < 0 ? "var(--danger)" : "var(--ok)", fontWeight: 600 }}>
                  {tx.amount < 0 ? "−" : "+"}{fmt(Math.abs(tx.amount), 2)}
                </td>
                <td>
                  <div className="flex items-center gap-2" style={{ minWidth: 100 }}>
                    <div className="progress" style={{ flex: 1, height: 4 }}>
                      <div className={`progress-bar ${tx.confidence >= .9 ? "ok" : tx.confidence >= .7 ? "gold" : "danger"}`}
                           style={{ width: `${tx.confidence * 100}%` }} />
                    </div>
                    <span className="num text-xs muted">{Math.round(tx.confidence * 100)}%</span>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
}
window.Transactions = Transactions;