// Subcontractor Management
function SubcontractorPage({ lang }) {
  const [selected, setSelected] = useState(null);
  return (
    <div className="anim-fadein">
      <PageHeader
        title={lang === "th" ? "ผู้รับเหมาช่วง" : "Subcontractor Management"}
        subtitle={lang === "th" ? "ทะเบียนทีมงาน ค่าแรง สัญญาย่อย และเงินประกันผลงาน" : "Team registry, labor cost, subcontracts & retention"}
        actions={<><button className="btn btn-sm btn-primary"><I.plus /> {lang==="th"?"เพิ่มผู้รับเหมา":"Add subcontractor"}</button></>}
      />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 14 }}>
        {SUBCONTRACTORS.map((s, i) => {
          const paidPct = s.paid / s.contract;
          return (
            <div key={s.code} className="card-tight" style={{
              padding: 16, background: "var(--glass)", border: "1px solid var(--line)", borderRadius: 14,
              animation: `fadeUp .4s ${i*0.06}s both`,
              cursor: "pointer", transition: "all .2s",
            }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--line-strong)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.transform = "none"; }}
              onClick={() => setSelected(i)}
            >
              <div style={{ display: "flex", alignItems: "flex-start", gap: 12, marginBottom: 12 }}>
                <div style={{ width: 42, height: 42, borderRadius: 10, background: "linear-gradient(135deg, rgba(255,184,77,0.25), rgba(246,201,124,0.15))", border: "1px solid rgba(246,201,124,0.4)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--gold)", fontSize: 16, fontWeight: 700, fontFamily: "var(--font-mono)" }}>{s.name[0]}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>{s.name}</div>
                  <div style={{ fontSize: 11.5, color: "var(--ink-mute)" }}>{s.code} · {s.type}</div>
                </div>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11.5, marginBottom: 12 }}>
                <span style={{ color: "var(--gold)" }}>★ {s.rating}</span>
                <span className="ink-mute">·</span>
                <span className="ink-soft">{s.projects} {lang==="th"?"โครงการ":"projects"}</span>
                {s.open > 0 && <span className="chip info" style={{ marginLeft: "auto" }}>{s.open} {lang==="th"?"งานเปิด":"open"}</span>}
              </div>
              <div style={{ padding: 10, background: "var(--glass-2)", borderRadius: 8 }}>
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, marginBottom: 4 }}>
                  <span className="ink-mute">{lang==="th"?"จ่ายแล้ว":"Paid"}</span>
                  <span className="mono">{fmtTHB(s.paid)} <span className="ink-mute">/ {fmtTHB(s.contract)}</span></span>
                </div>
                <div className="prog" style={{ height: 5 }}><span style={{ width: `${paidPct*100}%`, background: "linear-gradient(90deg, var(--gold), #ffb84d)" }} /></div>
              </div>
            </div>
          );
        })}
      </div>

      {selected != null && (
        <div onClick={() => setSelected(null)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.55)", backdropFilter: "blur(8px)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 50, padding: 24 }}>
          <div onClick={(e) => e.stopPropagation()} className="anim-fadeup" style={{ background: "var(--bg-1)", border: "1px solid var(--line-strong)", borderRadius: 18, padding: 24, width: "100%", maxWidth: 580, maxHeight: "90vh", overflowY: "auto" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 18 }}>
              <div>
                <div className="micro">{SUBCONTRACTORS[selected].type}</div>
                <h2 className="h1" style={{ marginTop: 6, fontSize: 22 }}>{SUBCONTRACTORS[selected].name}</h2>
              </div>
              <button className="btn btn-sm btn-ghost" onClick={() => setSelected(null)} style={{ padding: 0, width: 32, justifyContent: "center" }}><I.x /></button>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12, marginBottom: 18 }}>
              <div className="card-tight" style={{ padding: 12, background: "var(--glass)", borderRadius: 10, border: "1px solid var(--line)" }}>
                <div className="micro">Rating</div>
                <div style={{ fontSize: 20, fontWeight: 700, marginTop: 4, color: "var(--gold)" }}>★ {SUBCONTRACTORS[selected].rating}</div>
              </div>
              <div className="card-tight" style={{ padding: 12, background: "var(--glass)", borderRadius: 10, border: "1px solid var(--line)" }}>
                <div className="micro">{lang==="th"?"จบงาน":"Done"}</div>
                <div style={{ fontSize: 20, fontWeight: 700, marginTop: 4 }} className="mono">{SUBCONTRACTORS[selected].projects}</div>
              </div>
              <div className="card-tight" style={{ padding: 12, background: "var(--glass)", borderRadius: 10, border: "1px solid var(--line)" }}>
                <div className="micro">{lang==="th"?"งานเปิด":"Open"}</div>
                <div style={{ fontSize: 20, fontWeight: 700, marginTop: 4, color: "var(--syk-blue-soft)" }} className="mono">{SUBCONTRACTORS[selected].open}</div>
              </div>
            </div>

            <div className="micro" style={{ marginBottom: 10 }}>{lang==="th"?"สัญญาย่อย":"Subcontracts"}</div>
            <div style={{ padding: 14, borderRadius: 12, background: "var(--glass)", border: "1px solid var(--line)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                <span style={{ fontSize: 12.5 }}>{lang==="th"?"มูลค่าสัญญา":"Contract"}</span>
                <span className="mono" style={{ fontWeight: 600 }}>{fmtTHB(SUBCONTRACTORS[selected].contract)}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                <span style={{ fontSize: 12.5 }}>{lang==="th"?"จ่ายค่าแรงแล้ว":"Paid"}</span>
                <span className="mono" style={{ fontWeight: 600, color: "var(--emerald)" }}>{fmtTHB(SUBCONTRACTORS[selected].paid)}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                <span style={{ fontSize: 12.5 }}>{lang==="th"?"เงินประกัน 10% ถือไว้":"Retention 10%"}</span>
                <span className="mono" style={{ fontWeight: 600, color: "var(--gold)" }}>{fmtTHB(SUBCONTRACTORS[selected].paid * 0.10)}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 8, borderTop: "1px solid var(--line)" }}>
                <span style={{ fontSize: 13, fontWeight: 600 }}>{lang==="th"?"คงเหลือจ่าย":"Remaining"}</span>
                <span className="mono" style={{ fontWeight: 700 }}>{fmtTHB(SUBCONTRACTORS[selected].contract - SUBCONTRACTORS[selected].paid)}</span>
              </div>
            </div>

            <div style={{ display: "flex", gap: 8, marginTop: 18 }}>
              <button className="btn" style={{ flex: 1, justifyContent: "center" }}><I.doc /> {lang==="th"?"ดูสัญญา":"View contract"}</button>
              <button className="btn btn-primary" style={{ flex: 1, justifyContent: "center" }}><I.cash /> {lang==="th"?"จ่ายงวด":"Pay milestone"}</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.SubcontractorPage = SubcontractorPage;