// E-invoice creation + ZATCA clearance animation
function EInvoice() {
  const { t, en, lang } = useT();
  const [stage, setStage] = useState("idle"); // idle | signing | sending | cleared
  const [tick, setTick] = useState(0);

  useEffect(() => {
    if (stage === "idle") return;
    const stages = ["signing", "sending", "cleared"];
    const idx = stages.indexOf(stage);
    if (idx < 0 || idx === stages.length - 1) return;
    const to = setTimeout(() => setStage(stages[idx + 1]), stage === "signing" ? 1200 : 1400);
    return () => clearTimeout(to);
  }, [stage]);

  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 50);
    return () => clearInterval(id);
  }, []);

  const runClearance = () => setStage("signing");

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="page-title">{lang === "cn" ? "电子发票清算" : "E-Invoice Clearance"}<span className="en">{lang === "cn" ? "FATOORA · Phase 2" : "法图拉 · 第二阶段"}</span></h1>
          <div className="page-sub">{lang === "cn" ? "实时 B2B 发票清算 · 与 ZATCA 集成" : "Real-time B2B invoice clearance · ZATCA integrated"}</div>
        </div>
        <div className="flex gap-2">
          <button className="btn btn-ghost"><Icon.Download /> XML</button>
          <button className="btn btn-gold" onClick={runClearance}><Icon.Broadcast size={14} /> {lang === "cn" ? "清算发票" : "Clear invoice"}</button>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1.2fr .8fr", gap: 20 }}>
        <div>
          <div className="clearance-stage mb-4">
            <div className="flex justify-between items-center mb-2">
              <div>
                <div className="eyebrow">{lang === "cn" ? "正在清算" : "Clearance pipeline"}</div>
                <div className="serif" style={{ fontSize: 18, fontWeight: 500, marginTop: 4 }}>INV-2026-0419</div>
              </div>
              <Pill kind={stage === "cleared" ? "ok" : stage === "idle" ? "soft" : "gold"} dot>
                {stage === "idle" && (lang === "cn" ? "就绪" : "Ready")}
                {stage === "signing" && (lang === "cn" ? "签名中" : "Signing…")}
                {stage === "sending" && (lang === "cn" ? "传输中" : "Transmitting…")}
                {stage === "cleared" && (lang === "cn" ? "已清算" : "Cleared")}
              </Pill>
            </div>

            <div className="clearance-track">
              <div className="clearance-node">
                <div className="clearance-node-box">
                  <Icon.Building size={28} />
                </div>
                <div style={{ fontSize: 12, fontWeight: 500 }}>{lang === "cn" ? "您的系统" : "Your system"}</div>
                <div className="text-xs muted">{lang === "cn" ? "XML · UBL 2.1" : "XML · UBL 2.1"}</div>
              </div>
              <div style={{ position: "relative", padding: "0 12px" }}>
                <div className="clearance-line" />
                {stage !== "idle" && stage !== "cleared" && <div className="clearance-packet" />}
                <div style={{ textAlign: "center", marginTop: 10, fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--ink-muted)" }}>
                  {stage === "signing" && "XAdES-BES · SHA-256"}
                  {stage === "sending" && "POST /invoices/clearance"}
                  {stage === "cleared" && "200 OK · 412ms"}
                  {stage === "idle" && (lang === "cn" ? "加密传输" : "Encrypted transport")}
                </div>
              </div>
              <div className="clearance-node zatca">
                <div className="clearance-node-box">
                  <Icon.Shield size={28} />
                </div>
                <div style={{ fontSize: 12, fontWeight: 500 }}>ZATCA</div>
                <div className="text-xs muted">{lang === "cn" ? "政府税务门户" : "Gov't portal"}</div>
              </div>
            </div>

            {stage === "cleared" && (
              <div style={{ background: "rgba(46,125,91,.08)", border: "1px solid rgba(46,125,91,.25)", padding: 14, borderRadius: 10, marginTop: 16, display: "flex", gap: 14, alignItems: "center" }}>
                <div style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--ok)", display: "grid", placeItems: "center", color: "#FFF" }}>
                  <Icon.Check size={18} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 500 }}>{lang === "cn" ? "发票已被 ZATCA 清算" : "Invoice cleared by ZATCA"}</div>
                  <div className="text-xs muted num">UUID: 9c3d-4e5f-2a1b-8c7d · {lang === "cn" ? "清算时间" : "Cleared"} 2026-04-17 14:38:22</div>
                </div>
                <button className="btn btn-ghost" style={{ padding: "6px 10px" }}>{lang === "cn" ? "查看 XML" : "View XML"}</button>
              </div>
            )}
          </div>

          <Card title={lang === "cn" ? "发票详情" : "Invoice details"} titleEn={"UBL 2.1"}>
            <div className="grid g2" style={{ gap: 20 }}>
              <div>
                <div className="eyebrow mb-2">{lang === "cn" ? "开票方" : "Seller"}</div>
                <div style={{ fontWeight: 500 }}>{lang === "cn" ? "塔米米贸易有限公司" : "Tamimi Trading Co. LLC"}</div>
                <div className="text-xs muted num">VAT: 310122334400003</div>
                <div className="text-xs muted">{lang === "cn" ? "利雅得，奥拉亚区" : "Riyadh, Al Olaya"}</div>
              </div>
              <div>
                <div className="eyebrow mb-2">{lang === "cn" ? "买方" : "Buyer"}</div>
                <div style={{ fontWeight: 500 }}>Aramco Services Co.</div>
                <div className="text-xs muted num">VAT: 310888999000003</div>
                <div className="text-xs muted">{lang === "cn" ? "达兰" : "Dhahran"}</div>
              </div>
            </div>
            <div className="divider" />
            <table className="table" style={{ marginBottom: 0 }}>
              <thead>
                <tr>
                  <th>{lang === "cn" ? "项目" : "Item"}</th>
                  <th className="num">{lang === "cn" ? "数量" : "Qty"}</th>
                  <th className="num">{lang === "cn" ? "单价" : "Unit"}</th>
                  <th className="num">{lang === "cn" ? "VAT 15%" : "VAT 15%"}</th>
                  <th className="num">{lang === "cn" ? "合计" : "Total"}</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{lang === "cn" ? "咨询服务 · 4 月" : "Consulting · Apr"}</td>
                  <td className="num">120 hrs</td>
                  <td className="num">1,200.00</td>
                  <td className="num">21,600.00</td>
                  <td className="num" style={{ fontWeight: 600 }}>165,600.00</td>
                </tr>
                <tr>
                  <td>{lang === "cn" ? "软件许可" : "Software licence"}</td>
                  <td className="num">1</td>
                  <td className="num">18,000.00</td>
                  <td className="num">2,700.00</td>
                  <td className="num" style={{ fontWeight: 600 }}>20,700.00</td>
                </tr>
                <tr style={{ background: "var(--surface-2)" }}>
                  <td colSpan="3" style={{ fontWeight: 600 }}>{lang === "cn" ? "总计" : "Grand total"}</td>
                  <td className="num" style={{ fontWeight: 600 }}>24,300.00</td>
                  <td className="num" style={{ fontWeight: 600, fontFamily: "var(--font-serif)", fontSize: 15 }}>186,300.00</td>
                </tr>
              </tbody>
            </table>
          </Card>
        </div>

        <div className="grid" style={{ gap: 16, alignContent: "start" }}>
          <Card title={lang === "cn" ? "二维码" : "QR Code"} titleEn="TLV Base64">
            <div className="flex gap-3 items-center">
              <div className="qr-box">
                <FauxQR seed="INV-2026-0419" />
              </div>
              <div style={{ flex: 1 }}>
                <div className="text-xs muted mb-2">{lang === "cn" ? "TLV 字段" : "TLV fields"}</div>
                <div className="num text-xs" style={{ lineHeight: 1.7 }}>
                  <div><span className="muted">01·</span> Tamimi Trading</div>
                  <div><span className="muted">02·</span> 310122334400003</div>
                  <div><span className="muted">03·</span> 2026-04-17T14:38:22Z</div>
                  <div><span className="muted">04·</span> 186,300.00</div>
                  <div><span className="muted">05·</span> 24,300.00</div>
                </div>
              </div>
            </div>
          </Card>

          <Card title={lang === "cn" ? "本月清算" : "This month's clearance"}>
            <div className="flex gap-4">
              <div className="donut" style={{ width: 90, height: 90 }}>
                <svg width="90" height="90" viewBox="0 0 90 90">
                  <circle cx="45" cy="45" r="36" fill="none" stroke="var(--line-soft)" strokeWidth="10" />
                  <circle cx="45" cy="45" r="36" fill="none" stroke="var(--ok)" strokeWidth="10" strokeDasharray={`${.994 * 226} 226`} strokeLinecap="round" />
                </svg>
                <div className="donut-center">
                  <div>
                    <div className="serif" style={{ fontSize: 18, fontWeight: 500 }}>99.4</div>
                    <div className="text-xs muted">%</div>
                  </div>
                </div>
              </div>
              <div>
                <div className="text-xs muted" style={{ marginBottom: 6 }}>{lang === "cn" ? "共处理" : "Processed"}</div>
                <div style={{ fontFamily: "var(--font-serif)", fontSize: 24, fontWeight: 500 }}>1,292</div>
                <div className="text-xs" style={{ color: "var(--ok)" }}>1,284 {lang === "cn" ? "成功" : "cleared"}</div>
                <div className="text-xs" style={{ color: "var(--danger)" }}>8 {lang === "cn" ? "失败" : "failed"}</div>
              </div>
            </div>
          </Card>

          <Card title={lang === "cn" ? "最近清算" : "Recent clearances"}>
            {window.MOCK.INVOICES.slice(0, 4).map(inv => (
              <div key={inv.no} className="flex justify-between" style={{ padding: "8px 0", borderBottom: "1px solid var(--line-soft)", fontSize: 12 }}>
                <div>
                  <div className="num" style={{ fontWeight: 500 }}>{inv.no}</div>
                  <div className="muted text-xs">{lang === "cn" ? inv.customer_cn : inv.customer_en}</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div className="num">{fmt(inv.amount, 2)}</div>
                  <Pill kind={inv.status === "cleared" ? "ok" : inv.status === "clearing" ? "gold" : "danger"} dot>
                    {inv.status === "cleared" ? t("cleared") : inv.status === "clearing" ? t("clearing") : t("failed")}
                  </Pill>
                </div>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </div>
  );
}
window.EInvoice = EInvoice;