// Zakat calculation screen
function Zakat() {
  const { lang } = useT();
  const items = [
    { k_cn: "现金及银行存款", k_en: "Cash & bank", amt: 2400000, include: true },
    { k_cn: "应收账款", k_en: "Accounts receivable", amt: 1820000, include: true },
    { k_cn: "存货", k_en: "Inventory", amt: 3240000, include: true },
    { k_cn: "投资 · 股权", k_en: "Investments · equity", amt: 1100000, include: true },
    { k_cn: "固定资产", k_en: "Fixed assets", amt: 4200000, include: false },
    { k_cn: "应付账款", k_en: "Accounts payable", amt: -1240000, include: true },
    { k_cn: "长期借款", k_en: "Long-term loans", amt: -980000, include: true },
  ];
  const base = items.filter(i => i.include).reduce((s, i) => s + i.amt, 0);
  const zakat = base * 0.025;

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="page-title">{lang === "cn" ? "天课计算" : "Zakat Calculation"}<span className="en">{lang === "cn" ? "Zakat · الزكاة" : "天课 · الزكاة"}</span></h1>
          <div className="page-sub">{lang === "cn" ? "希吉拉历年 1446 · 2.5% 计征基数" : "Hijri year 1446 · 2.5% of Zakat base"}</div>
        </div>
        <div className="flex gap-2">
          <button className="btn btn-ghost">{lang === "cn" ? "保存草稿" : "Save"}</button>
          <button className="btn btn-gold">{lang === "cn" ? "提交 ZATCA" : "Submit to ZATCA"}</button>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1.3fr .7fr", gap: 20 }}>
        <Card title={lang === "cn" ? "计征基数构成" : "Zakat base components"}>
          <table className="table">
            <thead>
              <tr>
                <th>{lang === "cn" ? "项目" : "Item"}</th>
                <th>{lang === "cn" ? "计入基数" : "Included"}</th>
                <th className="num">SAR</th>
              </tr>
            </thead>
            <tbody>
              {items.map((i, idx) => (
                <tr key={idx}>
                  <td>{lang === "cn" ? i.k_cn : i.k_en}</td>
                  <td>
                    {i.include ? <Pill kind="ok" dot>{lang === "cn" ? "是" : "Yes"}</Pill> : <Pill kind="soft">{lang === "cn" ? "否" : "No"}</Pill>}
                  </td>
                  <td className="num" style={{ color: i.amt < 0 ? "var(--danger)" : undefined }}>
                    {i.amt < 0 ? "−" : ""}{fmt(Math.abs(i.amt))}
                  </td>
                </tr>
              ))}
              <tr style={{ background: "var(--surface-2)" }}>
                <td colSpan="2" style={{ fontWeight: 600 }}>{lang === "cn" ? "计征基数" : "Zakat base"}</td>
                <td className="num" style={{ fontWeight: 600, fontFamily: "var(--font-serif)", fontSize: 16 }}>{fmt(base)}</td>
              </tr>
            </tbody>
          </table>
        </Card>

        <div className="grid" style={{ gap: 16, alignContent: "start" }}>
          <Card>
            <div className="eyebrow mb-2">{lang === "cn" ? "年度天课" : "Annual Zakat"}</div>
            <div className="tax-big mb-4">
              <span className="val num">{fmt(zakat)}</span>
              <span className="cur">SAR</span>
            </div>
            <div className="text-xs muted">{lang === "cn" ? "基数 × 2.5% =" : "Base × 2.5% ="} {fmt(zakat)}</div>
            <div className="divider" />
            <div className="text-xs muted mb-2">{lang === "cn" ? "与去年对比" : "vs last year"}</div>
            <div className="flex justify-between items-center">
              <div className="num serif" style={{ fontSize: 18 }}>+12.4%</div>
              <Sparkline data={[140, 148, 155, 162, 171, 178, 186]} w={80} h={24} color="var(--gold-deep)" />
            </div>
          </Card>

          <Card title={lang === "cn" ? "截止期" : "Deadline"}>
            <div className="flex items-center gap-3">
              <div className="deadline-date" style={{ width: 52 }}>
                <span className="day">30</span>
                <span className="mo">{lang === "cn" ? "十月" : "OCT"}</span>
              </div>
              <div>
                <div style={{ fontWeight: 500 }}>196 {lang === "cn" ? "天" : "days"}</div>
                <div className="text-xs muted">{lang === "cn" ? "财年结束后 120 天内" : "120 days after year-end"}</div>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}
window.Zakat = Zakat;