// Dashboard: overview + groups list
const { useState: useState_dash, useMemo: useMemo_dash } = React;

function Dashboard({ store, onOpenGroup, onCreateGroup }) {
  const { visibleGroups: groups, visiblePlayers: players, visibleLogs: logs,
          isSuper, scope, setScope, userById } = store;
  const totalMatches = useMemo_dash(
    () => groups.reduce((s, g) => s + (g.history?.length || 0), 0),
    [groups]
  );
  const activeCourts = useMemo_dash(
    () => groups.reduce((s, g) => s + Object.values(g.active || {}).filter(Boolean).length, 0),
    [groups]
  );

  return (
    <div className="page" data-screen-label="Dashboard">
      <div className="sec-head">
        <div>
          <h2 className="sec-title">สวัสดี, {store.currentUser?.name || "โค้ช"} 👋</h2>
          <div className="sec-sub">
            {isSuper && scope === "all"
              ? `ภาพรวมของทุกก๊วนในระบบ (${groups.length} ก๊วน)`
              : "ภาพรวมของก๊วนคุณวันนี้"}
          </div>
        </div>
        <div className="row gap-2">
          {isSuper && (
            <Segmented value={scope} onChange={setScope}
              options={[{value:"mine", label:"ของฉัน"}, {value:"all", label:"ทั้งระบบ"}]} />
          )}
          <button className="btn primary" data-tour="create-group" onClick={onCreateGroup}>
            <Icon name="plus" size={15} stroke={2.2} /> สร้างก๊วนใหม่
          </button>
        </div>
      </div>

      <section>
        <div className="tile-grid">
          <Tile label="ก๊วนทั้งหมด" num={groups.length} sub="กิจกรรมที่กำลังจัดอยู่" />
          <Tile label="ผู้เล่นในระบบ" num={players.length} sub={`เฉลี่ย Lv ${avgLevel(players)}`} />
          <Tile label="สนามที่กำลังเล่น" num={activeCourts} sub="ในก๊วนทั้งหมด" accent="green" />
          <Tile label="แมตช์ที่บันทึกไว้" num={totalMatches} sub="ย้อนหลังวันนี้" />
        </div>
      </section>

      <section>
        <div className="sec-head">
          <div><h3 style={{margin:0, fontSize: 17, fontWeight:600}}>ก๊วนของฉัน</h3></div>
          <div className="muted small">{groups.length} ก๊วน</div>
        </div>
        <div className="group-grid">
          {groups.map(g => (
            <GroupCard key={g.id} group={g} players={players} userById={userById}
              showOwner={isSuper && scope === "all"}
              onOpen={() => onOpenGroup(g.id)} />
          ))}
          <button className="group-card" onClick={onCreateGroup}
            style={{display:"grid", placeItems:"center", color:"var(--text-3)", border:"1.5px dashed var(--sep)", background:"transparent", boxShadow:"none"}}>
            <div style={{textAlign:"center"}}>
              <Icon name="plus" size={28} stroke={1.6} />
              <div style={{marginTop:6, fontWeight:500}}>สร้างก๊วนใหม่</div>
            </div>
          </button>
        </div>
      </section>

      <section>
        <div className="sec-head">
          <h3 style={{margin:0, fontSize: 17, fontWeight:600}}>กิจกรรมล่าสุด</h3>
        </div>
        <div className="card">
          {logs.slice(0, 5).map((l, i) => (
            <div key={i} className="card-row">
              <div className="dot" style={{background: logColor(l.type), marginRight: 12}} />
              <div className="grow">
                <div style={{fontSize: 14}}>{l.desc ? l.desc.split(" • ")[0].split(" — ")[0] : "—"}</div>
                <div className="small muted">{relTime(l.at)}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function Tile({ label, num, sub, accent }) {
  const color = accent === "green" ? "var(--green)" : "var(--tint)";
  return (
    <div className="tile">
      <div className="tile-label">{label}</div>
      <div className="tile-num" style={{color: accent === "green" ? color : "inherit"}}>{num}</div>
      <div className="tile-sub">{sub}</div>
    </div>
  );
}

function GroupCard({ group, players, userById, showOwner, onOpen }) {
  const playerCount = group.playerIds?.length || 0;
  const courtCount = group.courts?.length || 0;
  const activeCount = Object.values(group.active || {}).filter(Boolean).length;
  const owner = userById?.[group.ownerId];
  return (
    <div className="group-card" style={{"--cg": group.color}} onClick={onOpen}>
      <div className="spread">
        <div className="row gap-2">
          <span className="dot" style={{background: group.color, width:10, height:10}} />
          <div className="group-name">{group.name}</div>
        </div>
        <span className="chip">{group.mode === "double" ? "คู่" : "เดี่ยว"}</span>
      </div>
      <div className="group-meta">{group.venue} · {fmtDate(group.date)}</div>
      <div className="group-stats">
        <div><b>{playerCount}</b> ผู้เล่น</div>
        <div><b>{courtCount}</b> สนาม</div>
        <div><b>{activeCount}</b> กำลังเล่น</div>
      </div>
      {showOwner && owner && (
        <div className="owner-tag mt-1">
          <Icon name="user" size={11} />
          <span>เจ้าของ: <b>{owner.name}</b></span>
        </div>
      )}
    </div>
  );
}

function avgLevel(players) {
  if (!players.length) return "—";
  const a = players.reduce((s, p) => s + p.level, 0) / players.length;
  return a.toFixed(1);
}
function logColor(type) {
  if (type.startsWith("match")) return "var(--green)";
  if (type.startsWith("shuffle")) return "var(--tint)";
  if (type.startsWith("swap")) return "var(--tint)";
  if (type.startsWith("player")) return "var(--purple)";
  if (type.startsWith("group")) return "var(--orange)";
  if (type.startsWith("court")) return "var(--orange)";
  if (type.startsWith("queue")) return "var(--tint)";
  if (type.startsWith("auth")) return "var(--text-3)";
  return "var(--text-3)";
}
function relTime(at) {
  const diff = Date.now() - at;
  const m = Math.floor(diff / 60000);
  if (m < 1) return "เมื่อกี้";
  if (m < 60) return `${m} นาทีที่แล้ว`;
  const h = Math.floor(m / 60);
  if (h < 24) return `${h} ชม. ที่แล้ว`;
  const d = Math.floor(h / 24);
  return `${d} วันที่แล้ว`;
}

Object.assign(window, { Dashboard, relTime, logColor });