// Contract Management
function ContractsPage({ lang }) {
  const [kindFilter, setKindFilter] = useState("all");
  const data = kindFilter === "all" ? CONTRACTS : CONTRACTS.filter(c => c.kind === kindFilter);

  return (
    <div className="anim-fadein">
      <PageHeader
        title={lang === "th" ? "ระบบจัดการสัญญา" : "Contract Management"}
        subtitle={lang === "th" ? "สัญญาลูกค้า (Owner) และผู้รับเหมาช่วง (Subcontract) — ติดตามอายุ ค่างวด เงินประกัน" : "Owner and subcontractor agreements — terms, milestones, retention"}
        actions={<>
          <button className="btn btn-sm"><I.upload /> {lang==="th"?"อัพโหลด PDF":"Upload PDF"}</button>
          <button className="btn btn-sm btn-primary"><I.plus /> {lang==="th"?"สร้างสัญญา":"New contract"}</button>
        </>}
      />

      <div style={{ display: "flex", gap: 8, marginBottom: 14, padding: 4, background: "var(--glass)", border: "1px solid var(--line)", borderRadius: 10, width: "fit-content" }}>
        {[
          { id: "all", th: "ทั้งหมด", en: "All" },
          { id: "Owner-Contractor", th: "ลูกค้า", en: "Owner" },
          { id: "Subcontract", th: "ผู้รับเหมาช่วง", en: "Subcontract" },
        ].map((t) => (
          <button key={t.id} onClick={() => setKindFilter(t.id)}
            style={{
              padding: "7px 12px", borderRadius: 7, border: 0, cursor: "pointer",
              background: kindFilter === t.id ? "var(--glass-3)" : "transparent",
              color: kindFilter === t.id ? "var(--ink)" : "var(--ink-soft)",
              fontSize: 12.5, fontWeight: 500,
            }}>{lang === "th" ? t.th : t.en}</button>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(360px, 1fr))", gap: 14 }}>
        {data.map((c, i) => {
          const isOwner = c.kind === "Owner-Contractor";
          const months = Math.ceil((new Date(c.end) - new Date(c.signed)) / (30 * 24 * 3600 * 1000));
          const elapsed = Math.max(0, Math.ceil((Date.now() - new Date(c.signed)) / (30 * 24 * 3600 * 1000)));
          const progress = Math.min(1, elapsed / months);
          return (
            <div key={c.id} className="card" style={{ padding: 18, position: "relative", overflow: "hidden", animation: `fadeUp .4s ${i*0.06}s both` }}>
              <div style={{ position: "absolute", top: 0, left: 0, width: 4, height: "100%", background: isOwner ? "linear-gradient(180deg, #6f86ff, #2848ff)" : "linear-gradient(180deg, #ffb84d, #f6c97c)" }} />

              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
                <div>
                  <span className={`chip ${isOwner ? "info" : "warn"}`}>{isOwner ? (lang==="th"?"สัญญาลูกค้า":"Owner contract") : (lang==="th"?"สัญญาช่วง":"Subcontract")}</span>
                  <div className="mono" style={{ fontSize: 13, fontWeight: 700, color: "var(--syk-blue-soft)", marginTop: 8 }}>{c.id}</div>
                </div>
                <StatusBadge status={c.status} />
              </div>

              <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>{c.party}</div>
              <div style={{ fontSize: 11.5, color: "var(--ink-mute)" }}>{lang==="th"?"ลงนาม":"Signed"} {c.signed} → {c.end}</div>

              <div style={{ marginTop: 14, padding: 12, background: "var(--glass-2)", borderRadius: 10 }}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
                  <span style={{ fontSize: 11, color: "var(--ink-mute)" }}>{lang==="th"?"มูลค่าสัญญา":"Contract value"}</span>
                  <span className="mono" style={{ fontWeight: 700, fontSize: 16 }}>{fmtTHB(c.value)}</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11.5, marginBottom: 8 }}>
                  <span className="ink-mute">{lang==="th"?"เงินประกัน":"Retention"}</span>
                  <span className="mono" style={{ color: "var(--gold)" }}>{fmtPct(c.retention)} · {fmtTHB(c.value * c.retention)}</span>
                </div>
                <div>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10.5, color: "var(--ink-mute)", marginBottom: 4 }}>
                    <span>{lang==="th"?"ระยะเวลา":"Duration"}</span>
                    <span className="mono">{elapsed}/{months} {lang==="th"?"เดือน":"months"}</span>
                  </div>
                  <div className="prog" style={{ height: 4 }}>
                    <span style={{ width: `${progress*100}%`, background: progress > 0.8 ? "linear-gradient(90deg, var(--amber), var(--rose))" : "linear-gradient(90deg, var(--syk-blue), var(--syk-blue-soft))" }} />
                  </div>
                </div>
              </div>

              <div style={{ display: "flex", gap: 6, marginTop: 14 }}>
                <button className="btn btn-sm" style={{ flex: 1, justifyContent: "center" }}><I.eye /> {lang==="th"?"ดู":"View"}</button>
                <button className="btn btn-sm" style={{ flex: 1, justifyContent: "center" }}><I.download /> PDF</button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.ContractsPage = ContractsPage;