// Tax calendar
function Calendar() {
  const { lang } = useT();
  const daysOfWeek = lang === "cn" ? ["日","一","二","三","四","五","六"] : ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
  // April 2026: starts Wed, 30 days
  const startOffset = 3;
  const daysInMonth = 30;

  const events = {
    10: [{ label_cn: "WHT 申报", label_en: "WHT due", kind: "gold" }],
    15: [{ label_cn: "消费税", label_en: "Excise", kind: "gold" }],
    19: [{ label_cn: "发票批量清算", label_en: "Batch clearance", kind: "danger" }],
    22: [{ label_cn: "季度末复核", label_en: "Q-end review", kind: "ink" }],
    28: [{ label_cn: "VAT 申报截止", label_en: "VAT return due", kind: "danger" }],
  };

  const cells = [];
  for (let i = 0; i < startOffset; i++) cells.push({ muted: true, d: 31 - startOffset + i + 1 });
  for (let i = 1; i <= daysInMonth; i++) cells.push({ d: i, today: i === 17, events: events[i] || [] });
  while (cells.length < 42) cells.push({ muted: true, d: cells.length - startOffset - daysInMonth + 1 });

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="page-title">{lang === "cn" ? "税务日历" : "Tax Calendar"}<span className="en">{lang === "cn" ? "2026 年 4 月" : "April 2026"}</span></h1>
          <div className="page-sub">{lang === "cn" ? "5 个活动 · 2 个截止期 · 1 个批量任务" : "5 events · 2 deadlines · 1 batch task"}</div>
        </div>
        <div className="flex gap-2">
          <button className="btn btn-ghost">← {lang === "cn" ? "三月" : "Mar"}</button>
          <button className="btn btn-ghost">{lang === "cn" ? "五月" : "May"} →</button>
          <button className="btn btn-primary"><Icon.Plus /> {lang === "cn" ? "新建事件" : "New event"}</button>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "2.5fr 1fr", gap: 20 }}>
        <Card>
          <div className="cal-grid">
            {daysOfWeek.map(d => <div key={d} className="cal-head">{d}</div>)}
            {cells.map((c, i) => (
              <div key={i} className={`cal-cell ${c.muted ? "muted" : ""} ${c.today ? "today" : ""}`}>
                <span className="d">{c.d}</span>
                {c.events && c.events.map((e, j) => (
                  <div key={j} className={`cal-event ${e.kind}`}>{lang === "cn" ? e.label_cn : e.label_en}</div>
                ))}
              </div>
            ))}
          </div>
        </Card>

        <Card title={lang === "cn" ? "本月重点" : "This month"}>
          {window.MOCK.DEADLINES.filter(d => d.date.getMonth() === 3 || d.date.getMonth() === 4).slice(0, 5).map(d => {
            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">{d.date.getDate()}</span>
                  <span className="mo">{lang === "cn" ? months_cn[d.date.getMonth()] : months_en[d.date.getMonth()]}</span>
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{lang === "cn" ? d.title_cn : d.title_en}</div>
                  <div className="text-xs muted">{d.daysLeft} {lang === "cn" ? "天" : "days"}</div>
                </div>
                <Pill kind={d.priority === "urgent" ? "danger" : d.priority === "high" ? "warn" : "soft"} dot>
                  {d.priority === "urgent" ? (lang === "cn" ? "急" : "Urgent") : d.priority === "high" ? (lang === "cn" ? "紧" : "Soon") : (lang === "cn" ? "常" : "OK")}
                </Pill>
              </div>
            );
          })}
        </Card>
      </div>
    </div>
  );
}
window.Calendar = Calendar;