/* ============================================================
   Dashboard — Tổng quan (matches the Ventus reference)
   ============================================================ */

const COVER_30D = [78,79,79.5,80.5,80,81.5,82.5,82,83.5,84,83.5,85,85.5,86.5,86,87,88,87.5,88.5,89,88.5,89.5,90,90.5,90,91,91.5,92,92.5,92.4];

const DISC = [
  { key: "inf", name: "Hạ tầng (INF)", short: "Hạ tầng", v: 512, pct: 41, cov: 96, color: "var(--inf)" },
  { key: "str", name: "Kết cấu (STR)", short: "Kết cấu", v: 348, pct: 28, cov: 94, color: "var(--str)" },
  { key: "arc", name: "Kiến trúc (ARC)", short: "Kiến trúc", v: 236, pct: 19, cov: 88, color: "var(--arc)" },
  { key: "mep", name: "MEP", short: "MEP", v: 152, pct: 12, cov: 79, color: "var(--mep)" },
];

const FEED = [
  { ico: "check", tint: "var(--ok)", who: "Nguyễn Minh", act: "xuất bản IFC cho", code: "INF-Drainage-L3", sub: "Khớp DWG + NWC · độ phủ +0.3%", time: "2 ph" },
  { ico: "clock", tint: "var(--warn)", who: "Trần Đức", act: "đánh dấu thiếu NWC tại", code: "MEP-HVAC-B2", sub: "Chờ xuất từ Navisworks", time: "14 ph" },
  { ico: "layers", tint: "var(--str)", who: "Lê Hồng", act: "nạp 24 mô hình STR mới", code: null, sub: "Civil 3D → tự động gắn cặp", time: "38 ph" },
  { ico: "link", tint: "var(--inf)", who: "Phạm Tuấn", act: "giải quyết 6 liên kết thiếu ở", code: "ARC-Station-C", sub: "Đồng bộ lại toàn bộ tổ hợp", time: "1 giờ" },
  { ico: "cube", tint: "var(--arc)", who: "Vũ Lan", act: "phát hành phiên bản tổ hợp", code: "FED-Metro-L3-v42", sub: "Federated model · 1,248 đối tượng", time: "2 giờ" },
];

function Dashboard() {
  const [range, setRange] = useState("30N");
  const auth = (typeof useAuthCtx === "function") ? useAuthCtx() : null;
  const live = !!(auth && auth.user && window.CDE_READY);
  const [stats, setStats] = useState(null);
  const [feed, setFeed] = useState(null);
  React.useEffect(() => {
    let alive = true;
    if (live) {
      cdeData.dashboard().then(d => { if (alive) setStats(d); }).catch(e => console.warn("dash:", e.message));
      cdeData.audit(6).then(a => { if (alive) setFeed(a); }).catch(() => {});
    } else { setStats(null); setFeed(null); }
    return () => { alive = false; };
  }, [live]);

  const order = ["inf", "str", "arc", "mep"];
  const DNAME = { inf: "Hạ tầng (INF)", str: "Kết cấu (STR)", arc: "Kiến trúc (ARC)", mep: "MEP" };
  let D = DISC, totalModels = "1,248", published = null, openIssues = null, trCount = null;
  if (stats) {
    const byD = {}; stats.containers.forEach(c => byD[c.disc] = (byD[c.disc] || 0) + 1);
    totalModels = stats.containers.length;
    D = order.map(k => ({ key: k, name: DNAME[k], short: DISC_NAME[k], v: byD[k] || 0,
      pct: totalModels ? Math.round((byD[k] || 0) / totalModels * 100) : 0,
      cov: Math.round((byD[k] || 0) / Math.max(1, ...order.map(o => byD[o] || 0)) * 100),
      color: DISC_COL[k] }));
    published = stats.containers.filter(c => c.status === "published").length;
    openIssues = stats.issues.filter(i => i.status !== "closed").length;
    trCount = stats.transmittals;
  }
  const donutTotal = stats ? totalModels : 1248;

  const feedItems = (feed && feed.length)
    ? feed.map(a => { const m = (typeof auditMeta === "function") ? auditMeta(a.action) : { color: "var(--accent)", icon: "clock" };
        return { ico: m.icon, tint: m.color, who: a.actor || "—",
          act: (typeof actionLabel === "function") ? actionLabel(a.action) : a.action,
          code: a.target_id, sub: a.target_type, time: (typeof fmtAuditTime === "function") ? fmtAuditTime(a.created_at) : "" }; })
    : FEED;

  return (
    <div className="content">
      <div className="grid g-4" style={{ marginBottom: 18 }}>
        {live ? (
          <>
            <Stat icon="layers" tint="var(--accent)" label="Mô hình đang quản lý" value={totalModels} foot="dữ liệu thật" />
            <Stat icon="check" tint="var(--ok)" label="Đã phát hành" value={published} unit={`/${totalModels}`} />
            <Stat icon="flag" tint="var(--warn)" label="Issue đang mở" value={openIssues} />
            <Stat icon="send" tint="var(--str)" label="Transmittals" value={trCount} />
          </>
        ) : (
          <>
            <Stat icon="layers" tint="var(--accent)" label="Mô hình đang quản lý" value="1,248" trend="+38 tuần này" trendDir="up" />
            <Stat icon="sync" tint="var(--accent)" label="Độ phủ đồng bộ" value="92.4" unit="%" trend="+4.1%" trendDir="up" spark={<Spark data={COVER_30D.slice(-14)} />} />
            <Stat icon="alert" tint="var(--danger)" label="Liên kết thiếu" value="37" trend="−12 đã xử lý" trendDir="down" />
            <Stat icon="bolt" tint="var(--mep)" label="Cập nhật hôm nay" value="156" foot="23 người đóng góp" />
          </>
        )}
      </div>

      <div className="grid g-2u" style={{ marginBottom: 18 }}>
        {/* Coverage over time */}
        <div className="card card-pad fade-up">
          <div className="card-head" style={{ marginBottom: 18 }}>
            <div>
              <div className="card-title">Độ phủ đồng bộ theo thời gian</div>
              <div className="card-sub">DWG đã có cặp NWC + IFC tương ứng · 30 ngày</div>
            </div>
            <div className="seg">
              {["7N","30N","QÝ"].map((r) => (
                <button key={r} className={range === r ? "on" : ""} onClick={() => setRange(r)}>{r}</button>
              ))}
            </div>
          </div>
          <AreaChart data={range === "7N" ? COVER_30D.slice(-7) : range === "QÝ" ? COVER_30D : COVER_30D} />
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 4,
            fontSize: 11.5, color: "var(--ink-4)", fontWeight: 600 }}>
            <span>9 Th5</span><span>16 Th5</span><span>23 Th5</span><span>30 Th5</span><span>Hôm nay</span>
          </div>
        </div>

        {/* Distribution donut */}
        <div className="card card-pad fade-up">
          <div className="card-head" style={{ marginBottom: 6 }}>
            <div>
              <div className="card-title">Phân bố theo bộ môn</div>
              <div className="card-sub">{totalModels} mô hình</div>
            </div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 22, marginTop: 8 }}>
            <div style={{ position: "relative", flex: "none" }}>
              <Donut segments={D.map(d => ({ v: d.v, color: d.color }))} total={donutTotal} />
              <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", textAlign: "center" }}>
                <div>
                  <div className="tnum" style={{ fontSize: 26, fontWeight: 800, letterSpacing: "-.03em" }}>{totalModels}</div>
                  <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: ".1em", color: "var(--ink-4)" }}>MÔ HÌNH</div>
                </div>
              </div>
            </div>
            <div className="legend" style={{ flex: 1 }}>
              {D.map((d) => (
                <div className="legend-row" key={d.key}>
                  <span className="sw" style={{ background: d.color }} />
                  <span className="ln">{d.name}</span>
                  <span className="v tnum">{d.v}</span>
                  <span className="pct tnum">{d.pct}%</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="grid g-2v">
        {/* Coverage by discipline */}
        <div className="card card-pad fade-up">
          <div className="card-head" style={{ marginBottom: 20 }}>
            <div>
              <div className="card-title">{stats ? "Phân bố mô hình theo bộ môn" : "Độ phủ theo bộ môn"}</div>
              <div className="card-sub">{stats ? "Số container theo bộ môn" : "DWG ↔ NWC ↔ IFC"}</div>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            {D.map((d) => (
              <div className="bar-row" key={d.key}>
                <span className="nm"><span className="sw" style={{ background: d.color }} />{d.short}</span>
                <span className="bar"><span style={{ width: `${d.cov}%`, background: d.color }} /></span>
                <span className="pc tnum">{stats ? d.v : d.cov + "%"}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Activity feed */}
        <div className="card card-pad fade-up">
          <div className="card-head" style={{ marginBottom: 6 }}>
            <div>
              <div className="card-title">Hoạt động gần đây</div>
              <div className="card-sub">Luồng xuất bản & đồng bộ trực tiếp</div>
            </div>
            <span className="chip ok"><span className="dot live" style={{ width: 6, height: 6, boxShadow: "none" }} /> Trực tiếp</span>
          </div>
          <div className="feed">
            {feedItems.map((f, i) => {
              const Ico = Icon[f.ico] || Icon.clock;
              return (
                <div className="feed-item" key={i}>
                  <div className="feed-ico" style={{ background: `${f.tint}1f`, color: f.tint }}><Ico size={15} /></div>
                  <div className="feed-main">
                    <div className="feed-t">
                      <b>{f.who}</b> {f.act} {f.code && <span className="tag-mono">{f.code}</span>}
                    </div>
                    <div className="feed-s">{f.sub}</div>
                  </div>
                  <div className="feed-time">{f.time}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;