// VAT Return multi-step flow
function VATReturn() {
  const { t, en, lang } = useT();
  const [step, setStep] = useState(2);
  const b = window.MOCK.VAT_BREAKDOWN;

  const steps = [
    { k: "step_period" },
    { k: "step_sales" },
    { k: "step_purchases" },
    { k: "step_adjustments" },
    { k: "step_review" },
    { k: "step_submit" },
  ];

  const payable = b.outputVat.standard - b.inputVat.standard;

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="page-title">{t("vat_return")}<span className="en">{en("vat_return")}</span></h1>
          <div className="page-sub">{lang === "cn" ? "期间：2026 年 4 月 · 月度申报 · ZATCA Form VAT-01" : "Period: Apr 2026 · Monthly · ZATCA Form VAT-01"}</div>
        </div>
        <div className="flex gap-2">
          <Pill kind="gold" dot>{lang === "cn" ? "AI 已预填" : "AI pre-filled"}</Pill>
          <button className="btn btn-ghost">{t("save_draft")}</button>
        </div>
      </div>

      <div className="card mb-4" style={{ padding: "18px 24px" }}>
        <div className="stepper">
          {steps.map((s, i) => (
            <div key={s.k} className={`stepper-item ${i < step ? "done" : ""} ${i === step ? "active" : ""}`} onClick={() => setStep(i)} style={{ cursor: "pointer" }}>
              <div className="stepper-dot">{i < step ? <Icon.Check size={12} /> : i + 1}</div>
              <div className="stepper-label">{t(s.k)}<span className="en">{en(s.k)}</span></div>
            </div>
          ))}
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1.4fr .8fr", gap: 20 }}>
        <Card title={lang === "cn" ? `第 ${step+1} 步 · ${t(steps[step].k)}` : `Step ${step+1} · ${t(steps[step].k)}`} titleEn={en(steps[step].k)}>
          {step === 2 && (
            <div>
              <div className="eyebrow mb-2">{lang === "cn" ? "进项 · 可抵扣" : "Purchases · deductible"}</div>
              <table className="table mb-4">
                <thead>
                  <tr>
                    <th>{lang === "cn" ? "类别" : "Category"}</th>
                    <th className="num">{lang === "cn" ? "采购净额" : "Net (SAR)"}</th>
                    <th className="num">{lang === "cn" ? "VAT 进项" : "Input VAT"}</th>
                    <th>{lang === "cn" ? "匹配" : "Matched"}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>{lang === "cn" ? "标准税率 15%" : "Standard 15%"}<div className="text-xs muted">{lang==="cn"?"142 张发票":"142 invoices"}</div></td>
                    <td className="num">268,400.00</td>
                    <td className="num" style={{ color: "var(--ink)", fontWeight: 600 }}>40,260.00</td>
                    <td><Pill kind="ok" dot>{lang === "cn" ? "已对账" : "Reconciled"}</Pill></td>
                  </tr>
                  <tr>
                    <td>{lang === "cn" ? "零税率 · 进口" : "Zero-rated · imports"}<div className="text-xs muted">{lang==="cn"?"8 张发票":"8 invoices"}</div></td>
                    <td className="num">12,400.00</td>
                    <td className="num">0.00</td>
                    <td><Pill kind="ok" dot>{lang === "cn" ? "已对账" : "Reconciled"}</Pill></td>
                  </tr>
                  <tr>
                    <td>{lang === "cn" ? "禁止抵扣" : "Blocked credit"}<div className="text-xs muted">{lang==="cn"?"招待费 · 礼品":"Entertainment · gifts"}</div></td>
                    <td className="num muted">8,200.00</td>
                    <td className="num muted">—</td>
                    <td><Pill kind="soft">{lang === "cn" ? "不可抵" : "Blocked"}</Pill></td>
                  </tr>
                  <tr>
                    <td>{lang === "cn" ? "反向征收 · 进口服务" : "Reverse charge · services"}<div className="text-xs muted">AWS, Google, etc.</div></td>
                    <td className="num">14,800.00</td>
                    <td className="num">2,220.00</td>
                    <td><Pill kind="warn" dot>{lang === "cn" ? "待确认" : "Confirm"}</Pill></td>
                  </tr>
                  <tr style={{ background: "var(--surface-2)" }}>
                    <td style={{ fontWeight: 600 }}>{lang === "cn" ? "合计" : "Total"}</td>
                    <td className="num" style={{ fontWeight: 600 }}>303,800.00</td>
                    <td className="num" style={{ fontWeight: 600, color: "var(--ink)" }}>42,480.00</td>
                    <td></td>
                  </tr>
                </tbody>
              </table>

              <div className="eyebrow mb-2">{lang === "cn" ? "AI 建议" : "AI suggestions"}</div>
              <div className="ai-suggestion" style={{ background: "rgba(212,175,55,.08)", borderLeftColor: "var(--gold)" }}>
                <Icon.Sparkle size={14} />
                <div style={{ color: "var(--ink)" }}>
                  <div style={{ fontWeight: 500 }}>{lang === "cn" ? "发现 2 笔进口服务未申报反向征收" : "2 import service entries missing reverse-charge"}</div>
                  <div className="text-xs muted">{lang === "cn" ? "AWS (SAR 1,840), Figma (SAR 680) · 点击应用" : "AWS (SAR 1,840), Figma (SAR 680) · click to apply"}</div>
                </div>
                <button className="btn btn-gold" style={{ padding: "4px 10px", fontSize: 11 }}>{lang === "cn" ? "应用" : "Apply"}</button>
              </div>
            </div>
          )}

          <div className="flex justify-between mt-6">
            <button className="btn btn-ghost" onClick={() => setStep(Math.max(0, step-1))}><Icon.ArrowDown style={{ transform: "rotate(90deg)" }} size={14} /> {t("back")}</button>
            <div className="flex gap-2">
              <button className="btn btn-ghost">{t("save_draft")}</button>
              <button className="btn btn-primary" onClick={() => setStep(Math.min(5, step+1))}>{t("next")} <Icon.Arrow size={14} /></button>
            </div>
          </div>
        </Card>

        <div className="grid" style={{ gap: 16, alignContent: "start" }}>
          <Card title={lang === "cn" ? "申报摘要" : "Return summary"}>
            <div className="flex justify-between mb-2">
              <span className="muted text-sm">{lang === "cn" ? "销项 VAT" : "Output VAT"}</span>
              <span className="num">72,930.00</span>
            </div>
            <div className="flex justify-between mb-2">
              <span className="muted text-sm">{lang === "cn" ? "进项 VAT" : "Input VAT"}</span>
              <span className="num">−40,260.00</span>
            </div>
            <div className="flex justify-between mb-2">
              <span className="muted text-sm">{lang === "cn" ? "反向征收" : "Reverse charge"}</span>
              <span className="num">+2,220.00</span>
            </div>
            <div className="divider" />
            <div className="flex justify-between">
              <span style={{ fontWeight: 600 }}>{lang === "cn" ? "应缴" : "Payable"}</span>
              <span className="num" style={{ fontFamily: "var(--font-serif)", fontSize: 22, fontWeight: 600 }}>34,890.00</span>
            </div>
            <div className="text-xs muted" style={{ textAlign: "right" }}>SAR</div>
          </Card>

          <Card title={lang === "cn" ? "截止期" : "Deadline"}>
            <div className="flex items-center gap-3">
              <div className="deadline-date" style={{ width: 52 }}>
                <span className="day">28</span>
                <span className="mo">{lang === "cn" ? "五月" : "MAY"}</span>
              </div>
              <div>
                <div style={{ fontWeight: 500 }}>11 {t("days")}</div>
                <div className="text-xs muted">{lang === "cn" ? "申报 + 缴款截止" : "File + pay by"}</div>
              </div>
            </div>
          </Card>

          <Card title={lang === "cn" ? "ZATCA 连接" : "ZATCA connection"}>
            <div className="flex items-center gap-2 mb-2">
              <Pill kind="ok" dot>{lang === "cn" ? "已认证" : "Authenticated"}</Pill>
            </div>
            <div className="text-xs muted num">{lang === "cn" ? "证书：" : "Cert: "}CSID-310122334400003</div>
            <div className="text-xs muted num">{lang === "cn" ? "有效期至" : "Valid until"} 2027-01-12</div>
          </Card>
        </div>
      </div>
    </div>
  );
}
window.VATReturn = VATReturn;