/* ============================================================
   Secondary module screens
   ============================================================ */

function PageHead({ title, sub, children }) {
  return (
    <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 20, gap: 16 }}>
      <div>
        <div style={{ fontSize: 16, fontWeight: 800 }}>{title}</div>
        {sub && <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 3, fontWeight: 500 }}>{sub}</div>}
      </div>
      <div style={{ display: "flex", gap: 10 }}>{children}</div>
    </div>
  );
}

function Toolbar() {
  return (
    <div style={{ display: "flex", gap: 10 }}>
      <button className="btn sm"><Icon.filter size={14} /> Lọc</button>
      <button className="btn sm"><Icon.download size={14} /> Xuất</button>
    </div>
  );
}

/* ---------------- Documents / Models ---------------- */
const FILES = [
  { name: "INF-Drainage-L3", disc: "inf", type: "IFC4", ver: "v42", size: "84 MB", by: "Nguyễn Minh", time: "2 ph", st: "ok" },
  { name: "STR-Frame-Station-C", disc: "str", type: "NWC", ver: "v40", size: "126 MB", by: "Lê Hồng", time: "38 ph", st: "ok" },
  { name: "ARC-Facade-GaC", disc: "arc", type: "RVT", ver: "v37", size: "212 MB", by: "Vũ Lan", time: "1 giờ", st: "ok" },
  { name: "MEP-HVAC-B2", disc: "mep", type: "DWG", ver: "v18", size: "44 MB", by: "Trần Đức", time: "14 ph", st: "warn" },
  { name: "INF-Tunnel-TBM-L3", disc: "inf", type: "IFC4", ver: "v29", size: "168 MB", by: "Đỗ Hải", time: "3 giờ", st: "ok" },
  { name: "STR-Platform-Slab", disc: "str", type: "NWC", ver: "v22", size: "97 MB", by: "Lê Hồng", time: "5 giờ", st: "ok" },
  { name: "MEP-Electrical-L2", disc: "mep", type: "DWG", ver: "v11", size: "31 MB", by: "Bùi An", time: "Hôm qua", st: "sync" },
];
const DISC_NAME = { inf: "Hạ tầng", str: "Kết cấu", arc: "Kiến trúc", mep: "MEP" };

function Documents({ kind = "docs" }) {
  return (
    <div className="content">
      <PageHead title={kind === "models" ? "Thư viện mô hình" : "Quản lý tài liệu"}
        sub="DWG · NWC · IFC · RVT · gắn cặp & kiểm soát phiên bản">
        <button className="btn sm"><Icon.filter size={14} /> Lọc</button>
        <button className="btn sm primary"><Icon.upload size={14} /> Nạp tệp</button>
      </PageHead>

      <div style={{ display: "flex", gap: 10, marginBottom: 18, flexWrap: "wrap" }}>
        {["Tất cả","Hạ tầng","Kết cấu","Kiến trúc","MEP","Thiếu cặp"].map((f,i) => (
          <span key={f} className={`chip ${i===0?"":"idle"}`}
            style={i===0?{ background: "var(--accent)", color: "#fff", height: 30, padding: "0 14px" }:{ height: 30, padding: "0 14px", cursor: "pointer" }}>{f}</span>
        ))}
      </div>

      <div className="card" style={{ padding: "8px 10px" }}>
        <table className="tbl">
          <thead><tr>
            <th style={{ paddingLeft: 14 }}>Tên mô hình</th><th>Bộ môn</th><th>Định dạng</th>
            <th>Phiên bản</th><th>Dung lượng</th><th>Người sửa</th><th>Trạng thái</th><th></th>
          </tr></thead>
          <tbody>
            {FILES.map((f,i) => (
              <tr key={i}>
                <td className="t-strong" style={{ display: "flex", alignItems: "center", gap: 11 }}>
                  <span style={{ width: 30, height: 30, borderRadius: 8, flex: "none", display: "grid", placeItems: "center",
                    background: `${DISC_COL[f.disc]}22`, color: DISC_COL[f.disc] }}><Icon.cube size={16} /></span>
                  <span className="mono" style={{ fontSize: 12.5 }}>{f.name}</span>
                </td>
                <td><span className={`chip ${f.disc}`}>{DISC_NAME[f.disc]}</span></td>
                <td><span className="tag-mono">{f.type}</span></td>
                <td className="mono" style={{ fontSize: 12.5 }}>{f.ver}</td>
                <td className="tnum">{f.size}</td>
                <td>{f.by} · {f.time}</td>
                <td>{f.st === "ok" ? <span className="chip ok"><Icon.check size={12} /> Đồng bộ</span>
                  : f.st === "warn" ? <span className="chip warn"><Icon.clock size={12} /> Thiếu NWC</span>
                  : <span className="chip idle"><Icon.sync size={12} /> Đang xử lý</span>}</td>
                <td style={{ width: 40 }}><button className="icon-btn" style={{ width: 32, height: 32, borderRadius: 8 }}><Icon.dots size={16} /></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ---------------- RFI / Workflow ---------------- */
const RFI_COLS = [
  { key: "open", title: "Mới tạo", color: "var(--info)", items: [
    { id: "RFI-208", t: "Xung đột cột STR vs ống MEP trục B", who: "Trần Đức", disc: "mep", pri: "Cao" },
    { id: "RFI-209", t: "Cao độ ke ga L3 chưa khớp bản vẽ", who: "Nguyễn Minh", disc: "inf", pri: "TB" },
  ]},
  { key: "review", title: "Đang xem xét", color: "var(--warn)", items: [
    { id: "RFI-204", t: "Vật liệu mặt đứng ga C cần duyệt mẫu", who: "Vũ Lan", disc: "arc", pri: "TB" },
    { id: "RFI-205", t: "Kiểm tra tải trọng dầm B-04", who: "Lê Hồng", disc: "str", pri: "Cao" },
    { id: "RFI-206", t: "Định tuyến HVAC khu kỹ thuật", who: "Bùi An", disc: "mep", pri: "Thấp" },
  ]},
  { key: "approved", title: "Đã duyệt", color: "var(--ok)", items: [
    { id: "RFI-198", t: "Vỏ hầm TBM đoạn L3 — chốt thiết kế", who: "Đỗ Hải", disc: "inf", pri: "Cao" },
    { id: "RFI-201", t: "Lưới cột tầng B1 cập nhật", who: "Lê Hồng", disc: "str", pri: "TB" },
  ]},
];

function Workflow() {
  return (
    <div className="content">
      <PageHead title="RFI & Phê duyệt" sub="Quy trình xử lý yêu cầu thông tin liên ngành">
        <button className="btn sm"><Icon.filter size={14} /> Lọc</button>
        <button className="btn sm primary"><Icon.plus size={14} /> Tạo RFI</button>
      </PageHead>
      <div className="grid" style={{ gridTemplateColumns: "repeat(3,1fr)", alignItems: "start" }}>
        {RFI_COLS.map((col) => (
          <div key={col.key}>
            <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 12, padding: "0 4px" }}>
              <span style={{ width: 8, height: 8, borderRadius: 99, background: col.color }} />
              <span style={{ fontWeight: 800, fontSize: 14 }}>{col.title}</span>
              <span style={{ fontSize: 12, fontWeight: 700, color: "var(--ink-4)" }}>{col.items.length}</span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {col.items.map((it) => (
                <div key={it.id} className="card card-pad" style={{ padding: 16, cursor: "pointer" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
                    <span className="tag-mono">{it.id}</span>
                    <span className={`chip ${it.pri==="Cao"?"danger":it.pri==="TB"?"warn":"idle"}`} style={{ height: 22, fontSize: 11 }}>{it.pri}</span>
                  </div>
                  <div style={{ fontSize: 13.5, fontWeight: 600, lineHeight: 1.45, color: "var(--ink)" }}>{it.t}</div>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 14 }}>
                    <span className={`chip ${it.disc}`} style={{ height: 22, fontSize: 11 }}>{DISC_NAME[it.disc]}</span>
                    <div style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 12, color: "var(--ink-3)", fontWeight: 600 }}>
                      <span style={{ width: 22, height: 22, borderRadius: 6, background: "var(--sunken)", display: "grid", placeItems: "center", fontSize: 10, fontWeight: 800, color: "var(--ink-2)" }}>
                        {it.who.split(" ").pop()[0]}</span>
                      {it.who}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- Alerts / Issues ---------------- */
const ALERTS = [
  { sev: "danger", t: "Thiếu liên kết NWC", code: "MEP-HVAC-B2", desc: "Mô hình DWG chưa có bản xuất Navisworks tương ứng", who: "Trần Đức", time: "14 ph" },
  { sev: "danger", t: "Xung đột hình học", code: "STR-COL ↔ MEP-DUCT", desc: "6 va chạm tại trục B, cao độ +18.4m", who: "Hệ thống", time: "1 giờ" },
  { sev: "warn", t: "Phiên bản lỗi thời", code: "ARC-Facade-GaC", desc: "Bản gốc RVT cập nhật 3 ngày, chưa xuất lại IFC", who: "Hệ thống", time: "3 giờ" },
  { sev: "warn", t: "Toạ độ chưa khớp", code: "INF-Drainage-L3", desc: "Lệch gốc toạ độ 0.4m so với điểm cơ sở dự án", who: "Nguyễn Minh", time: "5 giờ" },
  { sev: "info", t: "Chờ phê duyệt nạp", code: "STR-Platform-Slab", desc: "22 đối tượng mới chờ duyệt vào tổ hợp", who: "Lê Hồng", time: "Hôm qua" },
];

function Alerts() {
  return (
    <div className="content">
      <PageHead title="Cảnh báo & Va chạm" sub="37 vấn đề đang mở · 12 đã xử lý hôm nay"><Toolbar /></PageHead>
      <div className="grid g-4" style={{ marginBottom: 20 }}>
        {[["Nghiêm trọng","8","var(--danger)","alert"],["Cảnh báo","19","var(--warn)","clock"],["Thông tin","10","var(--info)","bell"],["Đã xử lý / 7N","64","var(--ok)","checkCircle"]].map(([l,v,c,ic],i)=>{
          const Ico = Icon[ic];
          return <div key={i} className="card stat" style={{ flexDirection: "row", alignItems: "center", gap: 14 }}>
            <div className="stat-ico" style={{ background: `${c}1f`, color: c }}><Ico size={20} /></div>
            <div><div className="tnum" style={{ fontSize: 26, fontWeight: 800 }}>{v}</div>
            <div style={{ fontSize: 12.5, color: "var(--ink-3)", fontWeight: 600 }}>{l}</div></div>
          </div>;
        })}
      </div>
      <div className="card">
        {ALERTS.map((a,i) => {
          const c = a.sev === "danger" ? "var(--danger)" : a.sev === "warn" ? "var(--warn)" : "var(--info)";
          return (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 16, padding: "16px 22px",
              borderTop: i ? "1px solid var(--line-soft)" : "none" }}>
              <span style={{ width: 38, height: 38, borderRadius: 11, flex: "none", display: "grid", placeItems: "center",
                background: `${c}1c`, color: c }}><Icon.alert size={19} /></span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ fontWeight: 800, fontSize: 14, whiteSpace: "nowrap" }}>{a.t}</span>
                  <span className="tag-mono" style={{ flexShrink: 0 }}>{a.code}</span>
                </div>
                <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 3, fontWeight: 500 }}>{a.desc}</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div style={{ fontSize: 12.5, color: "var(--ink-2)", fontWeight: 600 }}>{a.who}</div>
                <div style={{ fontSize: 11.5, color: "var(--ink-4)", fontWeight: 600 }}>{a.time}</div>
              </div>
              <button className="btn sm">Xử lý</button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ---------------- Users ---------------- */
const USERS = [
  { n: "Trần Đức", r: "BIM Coordinator", disc: "Điều phối", role: "Quản trị", st: 1, init: "TĐ" },
  { n: "Nguyễn Minh", r: "Kỹ sư hạ tầng", disc: "Hạ tầng", role: "Biên tập", st: 1, init: "NM" },
  { n: "Lê Hồng", r: "Kỹ sư kết cấu", disc: "Kết cấu", role: "Biên tập", st: 1, init: "LH" },
  { n: "Vũ Lan", r: "Kiến trúc sư", disc: "Kiến trúc", role: "Biên tập", st: 0, init: "VL" },
  { n: "Bùi An", r: "Kỹ sư MEP", disc: "MEP", role: "Biên tập", st: 1, init: "BA" },
  { n: "Đỗ Hải", r: "Tư vấn giám sát", disc: "Hạ tầng", role: "Xem", st: 0, init: "ĐH" },
  { n: "Phạm Tuấn", r: "Quản lý dự án", disc: "Ban QLDA", role: "Quản trị", st: 1, init: "PT" },
];

function Users() {
  return (
    <div className="content">
      <PageHead title="Người dùng & Thành viên" sub="7 thành viên · 3 vai trò trong hợp đồng CP-02">
        <button className="btn sm"><Icon.shield size={14} /> Vai trò</button>
        <button className="btn sm primary"><Icon.plus size={14} /> Mời thành viên</button>
      </PageHead>
      <div className="card" style={{ padding: "8px 10px" }}>
        <table className="tbl">
          <thead><tr><th style={{ paddingLeft: 14 }}>Thành viên</th><th>Bộ môn</th><th>Vai trò</th><th>Trạng thái</th><th>Đóng góp / 7N</th><th></th></tr></thead>
          <tbody>
            {USERS.map((u,i) => (
              <tr key={i}>
                <td>
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <span className="avatar" style={{ width: 36, height: 36, background: "linear-gradient(150deg,#1ec7b6,#0d9488)" }}>{u.init}</span>
                    <div><div className="t-strong">{u.n}</div><div style={{ fontSize: 12, color: "var(--ink-3)", fontWeight: 500 }}>{u.r}</div></div>
                  </div>
                </td>
                <td>{u.disc}</td>
                <td><span className={`chip ${u.role==="Quản trị"?"inf":u.role==="Biên tập"?"str":"idle"}`}>{u.role}</span></td>
                <td><span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 13, fontWeight: 600, color: "var(--ink-2)" }}>
                  <span style={{ width: 7, height: 7, borderRadius: 99, background: u.st ? "var(--ok)" : "var(--ink-4)" }} />
                  {u.st ? "Đang hoạt động" : "Ngoại tuyến"}</span></td>
                <td className="tnum t-strong">{[42,28,35,12,19,4,8][i]}</td>
                <td style={{ width: 40 }}><button className="icon-btn" style={{ width: 32, height: 32, borderRadius: 8 }}><Icon.dots size={16} /></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.Documents = Documents;
window.Workflow = Workflow;
window.Alerts = Alerts;
window.Users = Users;
window.PageHead = PageHead;
window.Toolbar = Toolbar;
window.DISC_NAME = DISC_NAME;