// Invoices list
function Invoices() {
  const { t, lang } = useT();
  const [filter, setFilter] = useState("all");
  const [sel, setSel] = useState(null);
  const invoices = window.MOCK.INVOICES;
  const filtered = filter === "all" ? invoices : invoices.filter(i => i.status === filter);

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="page-title">{lang === "cn" ? "发票管理" : "Invoices"}<span className="en">{lang === "cn" ? "Invoices · فواتير" : "发票 · فواتير"}</span></h1>
          <div className="page-sub">{lang === "cn" ? "1,284 张已清算 · 8 张失败 · 1 张处理中" : "1,284 cleared · 8 failed · 1 clearing"}</div>
        </div>
        <div className="flex gap-2">
          <button className="btn btn-ghost"><Icon.Download /> {t("export")}</button>
          <button className="btn btn-primary"><Icon.Plus /> {lang === "cn" ? "新建发票" : "New invoice"}</button>
        </div>
      </div>

      <Card>
        <div className="flex justify-between items-center mb-4">
          <div className="chip-row">
            {[
              { k: "all", label_cn: "全部", label_en: "All", count: invoices.length },
              { k: "cleared", label_cn: "已清算", label_en: "Cleared", count: invoices.filter(i => i.status === "cleared").length },
              { k: "clearing", label_cn: "清算中", label_en: "Clearing", count: invoices.filter(i => i.status === "clearing").length },
              { k: "failed", label_cn: "失败", label_en: "Failed", count: invoices.filter(i => i.status === "failed").length },
            ].map(c => (
              <button key={c.k} className={`chip ${filter === c.k ? "active" : ""}`} onClick={() => setFilter(c.k)}>
                {lang === "cn" ? c.label_cn : c.label_en} <span style={{ opacity: .6 }}>{c.count}</span>
              </button>
            ))}
          </div>
          <div className="flex gap-2">
            <button className="btn btn-ghost" style={{ padding: "6px 10px" }}><Icon.Filter size={14} /> {t("filter")}</button>
          </div>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th>{t("invoice_no")}</th>
              <th>{t("customer")}</th>
              <th>{t("date")}</th>
              <th className="num">{lang === "cn" ? "净额" : "Net"}</th>
              <th className="num">VAT</th>
              <th className="num">{lang === "cn" ? "总额" : "Total"}</th>
              <th>{t("status")}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(inv => (
              <tr key={inv.no} onClick={() => setSel(inv)} style={{ cursor: "pointer" }}>
                <td>
                  <div className="num" style={{ fontWeight: 500 }}>{inv.no}</div>
                  <div className="text-xs muted">{inv.type}</div>
                </td>
                <td>
                  <div style={{ fontWeight: 500 }}>{lang === "cn" ? inv.customer_cn : inv.customer_en}</div>
                  <div className="text-xs muted" dir="rtl" style={{ textAlign: "left" }}>{inv.customer_ar}</div>
                </td>
                <td className="num muted">{inv.date}</td>
                <td className="num">{fmt(inv.amount, 2)}</td>
                <td className="num">{fmt(inv.vat, 2)}</td>
                <td className="num" style={{ fontWeight: 600 }}>{fmt(inv.amount + inv.vat, 2)}</td>
                <td>
                  {inv.status === "cleared" && <Pill kind="ok" dot>{t("cleared")}</Pill>}
                  {inv.status === "clearing" && <Pill kind="gold" dot>{t("clearing")}</Pill>}
                  {inv.status === "failed" && <Pill kind="danger" dot>{t("failed")}</Pill>}
                </td>
                <td><button className="icon-btn"><Icon.More size={14} /></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
}
window.Invoices = Invoices;