// Reports & analytics
function Reports() {
  const { lang } = useT();
  const months = lang === "cn" ? ["9月","10月","11月","12月","1月","2月","3月","4月"] : ["Sep","Oct","Nov","Dec","Jan","Feb","Mar","Apr"];
  const output = [68, 72, 81, 78, 95, 101, 108, 120];
  const input = [42, 45, 48, 46, 52, 58, 62, 68];

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="page-title">{lang === "cn" ? "报告分析" : "Reports"}<span className="en">{lang === "cn" ? "Analytics" : "分析"}</span></h1>
          <div className="page-sub">{lang === "cn" ? "跨税种 · 跨期间 · 实时" : "Cross-tax · cross-period · real-time"}</div>
        </div>
        <div className="flex gap-2">
          <SegControl value="ytd" onChange={() => {}} options={[
            { value: "mtd", label: "MTD" }, { value: "ytd", label: "YTD" }, { value: "custom", label: lang === "cn" ? "自定义" : "Custom" },
          ]} />
          <button className="btn btn-ghost"><Icon.Download /> PDF</button>
        </div>
      </div>

      <div className="grid g3 mb-4">
        {[
          { k_cn: "VAT 缴款", k_en: "VAT paid", v: 1142, unit: "K SAR", trend: [89,92,103,98,118,124,132,143] },
          { k_cn: "天课", k_en: "Zakat accrued", v: 186, unit: "K SAR", trend: [140,148,155,162,171,178,186] },
          { k_cn: "预提税", k_en: "WHT remitted", v: 84, unit: "K SAR", trend: [12,9,11,8,10,8.4,11,12] },
        ].map((s, i) => (
          <Card key={i}>
            <div className="stat">
              <div className="stat-label">{lang === "cn" ? s.k_cn : s.k_en} · YTD</div>
              <div className="flex justify-between items-end">
                <div className="stat-value">{s.v}<span className="unit">{s.unit}</span></div>
                <Sparkline data={s.trend} w={90} h={36} color="var(--ink)" />
              </div>
            </div>
          </Card>
        ))}
      </div>

      <div className="grid g-dash mb-4">
        <Card title={lang === "cn" ? "月度 VAT 趋势" : "Monthly VAT trend"} titleEn={lang === "cn" ? "Output vs Input" : "销项 vs 进项"}>
          <div className="bars" style={{ height: 220, alignItems: "flex-end" }}>
            {output.map((v, i) => (
              <div key={i} style={{ flex: 1, display: "flex", alignItems: "flex-end", gap: 3, height: "100%" }}>
                <div className="bar gold" style={{ height: `${(v/130)*100}%`, flex: 1 }} title={`Output ${v}K`} />
                <div className="bar" style={{ height: `${(input[i]/130)*100}%`, flex: 1 }} title={`Input ${input[i]}K`} />
              </div>
            ))}
          </div>
          <div className="flex justify-between mt-2">
            {months.map((m, i) => <div key={i} className="bar-label" style={{ flex: 1 }}>{m}</div>)}
          </div>
          <div className="flex gap-4 mt-4 text-xs">
            <span className="flex items-center gap-2"><span style={{ width: 10, height: 10, background: "var(--gold)", borderRadius: 2 }} />{lang === "cn" ? "销项 VAT" : "Output VAT"}</span>
            <span className="flex items-center gap-2"><span style={{ width: 10, height: 10, background: "var(--ink)", borderRadius: 2 }} />{lang === "cn" ? "进项 VAT" : "Input VAT"}</span>
          </div>
        </Card>

        <Card title={lang === "cn" ? "按税种分布" : "By tax type"}>
          {[
            { k_cn: "VAT", k_en: "VAT", v: 1142, pct: 75, tone: "ink" },
            { k_cn: "天课", k_en: "Zakat", v: 186, pct: 12, tone: "gold" },
            { k_cn: "预提税", k_en: "WHT", v: 84, pct: 5, tone: "ok" },
            { k_cn: "企业所得税", k_en: "CIT", v: 72, pct: 5, tone: "danger" },
            { k_cn: "消费税", k_en: "Excise", v: 42, pct: 3, tone: "ink" },
          ].map((s, i) => (
            <div key={i} className="mb-4">
              <div className="flex justify-between items-baseline text-sm mb-2" style={{ gap: 8 }}>
                <span>{lang === "cn" ? s.k_cn : s.k_en}</span>
                <span className="num muted" style={{ whiteSpace: "nowrap" }}>{s.v}K&nbsp;·&nbsp;{s.pct}%</span>
              </div>
              <ProgressBar value={s.pct} tone={s.tone} />
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}
window.Reports = Reports;