// Settings
function Settings() {
  const { lang } = useT();
  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="page-title">{lang === "cn" ? "设置" : "Settings"}<span className="en">{lang === "cn" ? "Business profile" : "企业资料"}</span></h1>
          <div className="page-sub">{lang === "cn" ? "业务信息 · ZATCA 凭证 · 团队 · 集成" : "Business info · ZATCA credentials · Team · Integrations"}</div>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "220px 1fr", gap: 20 }}>
        <div>
          {[
            { k: lang === "cn" ? "企业资料" : "Business profile", active: true },
            { k: lang === "cn" ? "税务登记" : "Tax registration" },
            { k: "ZATCA " + (lang === "cn" ? "集成" : "integration") },
            { k: lang === "cn" ? "银行 & POS" : "Bank & POS" },
            { k: lang === "cn" ? "团队" : "Team" },
            { k: lang === "cn" ? "审计日志" : "Audit logs" },
            { k: lang === "cn" ? "计费" : "Billing" },
          ].map((i, idx) => (
            <button key={idx} className="nav-item" style={{ color: i.active ? "var(--ink)" : "var(--ink-muted)", background: i.active ? "var(--surface)" : "transparent", border: i.active ? "1px solid var(--line-soft)" : "1px solid transparent" }}>
              {i.k}
            </button>
          ))}
        </div>

        <div className="grid" style={{ gap: 16 }}>
          <Card title={lang === "cn" ? "基本信息" : "Basic information"}>
            <div className="grid g2" style={{ gap: 20 }}>
              <div className="field">
                <label>{lang === "cn" ? "公司名称（中文）" : "Company name (CN)"}</label>
                <input className="input" defaultValue="塔米米贸易有限公司" />
              </div>
              <div className="field">
                <label>{lang === "cn" ? "公司名称（英文）" : "Company name (EN)"}</label>
                <input className="input" defaultValue="Tamimi Trading Co. LLC" />
              </div>
              <div className="field">
                <label>{lang === "cn" ? "商业登记号 (CR)" : "Commercial Registration"}</label>
                <input className="input num" defaultValue="1010228847" />
              </div>
              <div className="field">
                <label>VAT {lang === "cn" ? "号码" : "number"}</label>
                <input className="input num" defaultValue="310122334400003" />
              </div>
              <div className="field">
                <label>{lang === "cn" ? "申报频率" : "Filing frequency"}</label>
                <select className="select">
                  <option>{lang === "cn" ? "月度 (营业额 > 40M SAR)" : "Monthly (> SAR 40M turnover)"}</option>
                  <option>{lang === "cn" ? "季度" : "Quarterly"}</option>
                </select>
              </div>
              <div className="field">
                <label>{lang === "cn" ? "财年结束日" : "Fiscal year end"}</label>
                <input className="input" defaultValue="12/31" />
              </div>
            </div>
          </Card>

          <Card title={lang === "cn" ? "ZATCA 集成" : "ZATCA integration"} action={<Pill kind="ok" dot>{lang === "cn" ? "已连接" : "Connected"}</Pill>}>
            <div className="flex justify-between items-center mb-4" style={{ padding: 14, background: "var(--surface-2)", borderRadius: 10, border: "1px solid var(--line-soft)" }}>
              <div>
                <div style={{ fontWeight: 500 }}>{lang === "cn" ? "加密签章标识 (CSID)" : "Cryptographic Stamp ID"}</div>
                <div className="text-xs muted num">CSID-310122334400003 · {lang === "cn" ? "有效期至" : "Valid until"} 2027-01-12</div>
              </div>
              <button className="btn btn-ghost">{lang === "cn" ? "轮换" : "Rotate"}</button>
            </div>
            <div className="flex justify-between items-center" style={{ padding: 14, background: "var(--surface-2)", borderRadius: 10, border: "1px solid var(--line-soft)" }}>
              <div>
                <div style={{ fontWeight: 500 }}>{lang === "cn" ? "生产环境端点" : "Production endpoint"}</div>
                <div className="text-xs muted num">gw-fatoora.zatca.gov.sa/e-invoicing/core</div>
              </div>
              <Pill kind="ok" dot>200 OK</Pill>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}
window.Settings = Settings;