// Dashboard screen — the hero. Deadline radar + tax health + AI + audit timeline.

function RadarWidget({ deadlines, onPick }) {
  // Map deadlines to polar coordinates — days left → radius
  const cx = 170, cy = 170, rMax = 140;
  const maxDays = 200;
  return (
    <div className="radar">
      <svg viewBox="0 0 340 340" className="radar-svg">
        <defs>
          <radialGradient id="sweepGrad">
            <stop offset="0%" stopColor="rgba(212,175,55,.3)" />
            <stop offset="100%" stopColor="rgba(212,175,55,0)" />
          </radialGradient>
        </defs>
        {/* rings */}
        {[30, 60, 100, 140].map((r, i) => (
          <circle key={r} cx={cx} cy={cy} r={r} className={`radar-ring ${i === 3 ? "" : i === 2 ? "bold" : ""}`} />
        ))}
        {/* axes */}
        <line x1={cx} y1={30} x2={cx} y2={310} className="radar-axis" />
        <line x1={30} y1={cy} x2={310} y2={cy} className="radar-axis" />
        {/* labels for rings */}
        <text x={cx + 4} y={cy - 28} fontSize="9" fontFamily="JetBrains Mono" fill="var(--ink-muted)">7d</text>
        <text x={cx + 4} y={cy - 58} fontSize="9" fontFamily="JetBrains Mono" fill="var(--ink-muted)">30d</text>
        <text x={cx + 4} y={cy - 98} fontSize="9" fontFamily="JetBrains Mono" fill="var(--ink-muted)">90d</text>
        <text x={cx + 4} y={cy - 138} fontSize="9" fontFamily="JetBrains Mono" fill="var(--ink-muted)">200d</text>

        {/* center */}
        <circle cx={cx} cy={cy} r="3" fill="var(--ink)" />
        <text x={cx} y={cy + 20} textAnchor="middle" fontSize="10" fontFamily="Instrument Serif" fontStyle="italic" fill="var(--ink-muted)">today</text>

        {/* sweep */}
        <g style={{ transformOrigin: `${cx}px ${cy}px` }} className="radar-sweep">
          <path d={`M ${cx} ${cy} L ${cx + rMax} ${cy} A ${rMax} ${rMax} 0 0 0 ${cx + rMax * Math.cos(-Math.PI/4)} ${cy + rMax * Math.sin(-Math.PI/4)} Z`} fill="url(#sweepGrad)" />
        </g>

        {/* blips */}
        {deadlines.map((d, i) => {
          const r = Math.min(rMax, (d.daysLeft / maxDays) * rMax * 1.2 + 20);
          const angle = (i * 137.5) * Math.PI / 180;
          const x = cx + r * Math.cos(angle);
          const y = cy + r * Math.sin(angle);
          const color = d.priority === "urgent" ? "#B8321A" : d.priority === "high" ? "#D4AF37" : d.priority === "med" ? "#2E7D5B" : "#6E8578";
          return (
            <g key={d.id} className="radar-blip" onClick={() => onPick?.(d)}>
              {d.priority === "urgent" && <circle cx={x} cy={y} r="6" fill={color} opacity="0.4" className="pulse" />}
              <circle cx={x} cy={y} r="5" fill={color} />
              <circle cx={x} cy={y} r="5" fill="none" stroke="var(--surface)" strokeWidth="1.5" />
              <text x={x} y={y - 10} className="radar-blip-label">{d.daysLeft}d</text>
            </g>
          );
        })}
      </svg>
    </div>
  );
}

function Dashboard() {
  const { t, en, lang } = useT();
  const deadlines = window.MOCK.DEADLINES;
  const events = window.MOCK.AUDIT_EVENTS;

  const upcoming = [...deadlines].sort((a, b) => a.daysLeft - b.daysLeft).slice(0, 5);

  const greeting = lang === "cn" ? "下午好，雨晴。今天有 2 项任务需要关注。" : "Good afternoon, Yuqing. 2 items need your attention today.";
  const greetSub = lang === "cn" ? "上次登录：今天 09:12 · 从 利雅得 OFFICE-MAIN" : "Last sign-in: today 09:12 · Riyadh OFFICE-MAIN";

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="page-title">{greeting}</h1>
          <div className="page-sub">{greetSub}</div>
        </div>
        <div className="flex gap-2">
          <button className="btn btn-ghost"><Icon.Download /> {t("export")}</button>
          <button className="btn btn-gold"><Icon.Plus /> {t("file_return")}</button>
        </div>
      </div>

      {/* Top KPI row */}
      <div className="grid g4 mb-4">
        <Card>
          <div className="stat">
            <div className="stat-label"><Icon.Wallet size={14} /> {t("vat_payable")} <span className="display">· VAT</span></div>
            <div className="stat-value">142,850<span className="unit">SAR</span></div>
            <div className="flex justify-between items-center mt-2">
              <div className="stat-delta up">↑ 8.2% vs Mar</div>
              <Sparkline data={[89, 92, 103, 98, 118, 124, 132, 143]} w={84} h={26} color="var(--ink)" />
            </div>
            <div className="text-xs muted mt-2">{t("vat_period")}</div>
          </div>
        </Card>
        <Card>
          <div className="stat">
            <div className="stat-label"><Icon.Mosque size={14} /> {t("zakat_estimate")} <span className="display">· Zakat</span></div>
            <div className="stat-value">186,400<span className="unit">SAR</span></div>
            <div className="flex justify-between items-center mt-2">
              <div className="stat-delta up">2.5% × Zakat base</div>
              <Sparkline data={[140, 148, 155, 162, 171, 178, 186]} w={84} h={26} color="var(--gold-deep)" />
            </div>
            <div className="text-xs muted mt-2">{t("zakat_period")}</div>
          </div>
        </Card>
        <Card>
          <div className="stat">
            <div className="stat-label"><Icon.Hash size={14} /> {t("wht_withheld")} <span className="display">· WHT</span></div>
            <div className="stat-value">8,400<span className="unit">SAR</span></div>
            <div className="flex justify-between items-center mt-2">
              <div className="stat-delta down">↓ 3 vendors</div>
              <Sparkline data={[12, 9, 11, 8, 10, 8.4]} w={84} h={26} color="var(--ink-muted)" />
            </div>
            <div className="text-xs muted mt-2">{t("wht_period")}</div>
          </div>
        </Card>
        <Card>
          <div className="stat">
            <div className="stat-label"><Icon.Broadcast size={14} /> {t("einvoice_cleared")} <span className="display">· e-Inv</span></div>
            <div className="stat-value">1,284<span className="unit">{lang === "cn" ? "张" : "inv"}</span></div>
            <div className="flex justify-between items-center mt-2">
              <Pill kind="ok" dot>99.4% {lang === "cn" ? "成功率" : "success"}</Pill>
              <span className="text-xs muted num">8 failed</span>
            </div>
            <div className="text-xs muted mt-2">{t("einvoice_period")}</div>
          </div>
        </Card>
      </div>

      {/* Main grid: radar + deadlines, health + AI */}
      <div className="grid g-dash mb-4">
        <Card title={t("deadline_radar")} titleEn={en("deadline_radar")} action={
          <div className="flex gap-2 items-center text-xs muted">
            <span className="flex items-center gap-2"><span style={{ width: 8, height: 8, borderRadius: "50%", background: "#B8321A", display: "inline-block" }} />{lang==="cn"?"紧急":"Urgent"}</span>
            <span className="flex items-center gap-2"><span style={{ width: 8, height: 8, borderRadius: "50%", background: "#D4AF37", display: "inline-block" }} />{lang==="cn"?"高":"High"}</span>
            <span className="flex items-center gap-2"><span style={{ width: 8, height: 8, borderRadius: "50%", background: "#2E7D5B", display: "inline-block" }} />{lang==="cn"?"正常":"Normal"}</span>
          </div>
        }>
          <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 20, alignItems: "center" }}>
            <RadarWidget deadlines={deadlines} />
            <div>
              <div className="eyebrow mb-2">{t("upcoming_deadlines")}</div>
              {upcoming.map(d => {
                const dt = d.date;
                const months_cn = ["一","二","三","四","五","六","七","八","九","十","十一","十二"];
                const months_en = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
                return (
                  <div key={d.id} className="deadline-item">
                    <div className={`deadline-date ${d.priority === "urgent" ? "hot" : ""}`}>
                      <span className="day">{dt.getDate()}</span>
                      <span className="mo">{lang === "cn" ? months_cn[dt.getMonth()] : months_en[dt.getMonth()]}</span>
                    </div>
                    <div>
                      <div style={{ fontSize: 13.5, fontWeight: 500 }}>{lang === "cn" ? d.title_cn : d.title_en}</div>
                      <div className="text-xs muted num mt-2">
                        {d.amount > 0 && `SAR ${fmt(d.amount)} · `}
                        {d.daysLeft} {t("days")}
                      </div>
                    </div>
                    <div>
                      {d.priority === "urgent" ? <Pill kind="danger" dot>{lang === "cn" ? "紧急" : "Urgent"}</Pill> :
                       d.priority === "high" ? <Pill kind="warn" dot>{lang === "cn" ? "临近" : "Due soon"}</Pill> :
                       <Pill kind="soft">{lang === "cn" ? "计划" : "Planned"}</Pill>}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </Card>

        <div className="grid" style={{ gap: 16 }}>
          {/* Tax health */}
          <Card title={t("tax_health")} titleEn={en("tax_health")} action={<Pill kind="ok" dot>{t("compliant")}</Pill>}>
            <div className="flex gap-4 items-center">
              <div className="health-meter">
                <div className="health-ring" style={{ "--pct": 92 }}>
                  <span>92<sup>/100</sup></span>
                </div>
              </div>
              <div style={{ flex: 1 }}>
                <div className="text-xs muted mb-2" style={{ textTransform: "uppercase", letterSpacing: ".1em" }}>{lang === "cn" ? "分项" : "Breakdown"}</div>
                {[
                  { k: lang === "cn" ? "按时申报" : "On-time filing", v: 100, tone: "ok" },
                  { k: lang === "cn" ? "发票清算率" : "Invoice clearance", v: 99, tone: "ok" },
                  { k: lang === "cn" ? "对账完成度" : "Reconciliation", v: 87, tone: "gold" },
                  { k: lang === "cn" ? "凭证完整度" : "Document integrity", v: 82, tone: "gold" },
                ].map(r => (
                  <div key={r.k} className="flex items-center gap-3 mb-2" style={{ fontSize: 12 }}>
                    <div style={{ width: 110 }} className="muted">{r.k}</div>
                    <div style={{ flex: 1 }}><ProgressBar value={r.v} tone={r.tone} /></div>
                    <div className="num" style={{ width: 30, textAlign: "right" }}>{r.v}</div>
                  </div>
                ))}
              </div>
            </div>
          </Card>

          {/* AI assistant */}
          <div className="ai-card">
            <div className="card-hd">
              <h3 className="card-title"><Icon.Sparkle size={16} /> {t("ai_assistant")}<span className="en">{en("ai_assistant")}</span></h3>
              <span className="eyebrow">Haiku 4.5</span>
            </div>
            <div className="ai-suggestion">
              <Icon.AlertTri size={16} />
              <div>
                <div style={{ color: "var(--bg)", fontWeight: 500, marginBottom: 2 }}>
                  {lang === "cn" ? "发现 3 笔交易可能被错分类" : "3 transactions may be mis-categorized"}
                </div>
                <div style={{ color: "rgba(245,241,232,.7)" }}>
                  {lang === "cn" ? <>STC Pay 支出 <span className="ai-amt">SAR 480</span> 未归类。AI 建议：办公杂项，标准税率。</> :
                    <>STC Pay expense <span className="ai-amt">SAR 480</span> uncategorized. Suggest: office misc, 15% std.</>}
                </div>
              </div>
            </div>
            <div className="ai-suggestion">
              <Icon.Sparkle size={16} />
              <div>
                <div style={{ color: "var(--bg)", fontWeight: 500, marginBottom: 2 }}>
                  {lang === "cn" ? "VAT 申报预填完成" : "VAT return pre-filled"}
                </div>
                <div style={{ color: "rgba(245,241,232,.7)" }}>
                  {lang === "cn" ? <>4 月申报表已预填。应缴 <span className="ai-amt">SAR 142,850</span>。可直接复核提交。</> :
                    <>April return pre-filled. Payable: <span className="ai-amt">SAR 142,850</span>. Ready to review.</>}
                </div>
              </div>
            </div>
            <button className="btn btn-gold mt-2" style={{ width: "100%", justifyContent: "center" }}>
              {lang === "cn" ? "打开 AI 工作台" : "Open AI workspace"} <Icon.Arrow size={14} />
            </button>
          </div>
        </div>
      </div>

      {/* Audit timeline + VAT mini */}
      <div className="grid g-dash">
        <Card title={t("timeline_title")} titleEn={en("timeline_title")} action={<button className="btn btn-text">{t("view_all")} <Icon.Arrow size={12} /></button>}>
          <div className="timeline">
            {events.map((e, i) => (
              <div key={i} className={`timeline-item ${e.type}`}>
                <div className="timeline-time">{e.time}</div>
                <div className="timeline-title">{lang === "cn" ? e.title_cn : e.title_en}</div>
                <div className="timeline-desc">{lang === "cn" ? e.desc_cn : e.desc_en}</div>
              </div>
            ))}
          </div>
        </Card>

        <Card title={lang === "cn" ? "本期 VAT 概览" : "Period VAT snapshot"} titleEn={lang === "cn" ? "Apr 2026" : "2026年4月"}>
          <div className="tax-big mb-4">
            <span className="val num">142,850</span>
            <span className="cur">SAR · payable</span>
          </div>
          <div className="grid g2 mb-4">
            <div>
              <div className="eyebrow mb-2">{lang === "cn" ? "销项 VAT" : "Output VAT"}</div>
              <div className="num" style={{ fontFamily: "var(--font-serif)", fontSize: 20, color: "var(--ink)" }}>72,930</div>
              <div className="text-xs muted">{lang === "cn" ? "销售 486,200" : "Sales 486,200"}</div>
            </div>
            <div>
              <div className="eyebrow mb-2">{lang === "cn" ? "进项 VAT" : "Input VAT"}</div>
              <div className="num" style={{ fontFamily: "var(--font-serif)", fontSize: 20, color: "var(--ink)" }}>40,260</div>
              <div className="text-xs muted">{lang === "cn" ? "采购 268,400" : "Purchases 268,400"}</div>
            </div>
          </div>
          <div className="divider" />
          <div className="bars">
            {[89, 92, 103, 98, 118, 124, 132, 143].map((v, i) => (
              <div key={i} className={`bar ${i === 7 ? "gold" : ""}`} style={{ height: `${(v/150)*100}%` }} title={`${v}k`} />
            ))}
          </div>
          <div className="flex justify-between mt-2">
            {["9月","10月","11月","12月","1月","2月","3月","4月"].map((m, i) => (
              <div key={i} className="bar-label" style={{ flex: 1 }}>{lang === "cn" ? m : ["Sep","Oct","Nov","Dec","Jan","Feb","Mar","Apr"][i]}</div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;