// Viewer Analytics — per-group live viewer counts, daily totals, and history.
// Group-scoped: a Group Owner sees only their own groups' analytics.
const { useState: useState_va, useEffect: useEffect_va, useMemo: useMemo_va } = React;

function uaShort(ua) {
  if (!ua) return "ไม่ทราบอุปกรณ์";
  const os =
    /iPhone/.test(ua) ? "iPhone" :
    /iPad/.test(ua) ? "iPad" :
    /Android/.test(ua) ? "Android" :
    /Macintosh|Mac OS/.test(ua) ? "Mac" :
    /Windows/.test(ua) ? "Windows" : "อื่นๆ";
  const br =
    /Edg/.test(ua) ? "Edge" :
    /Chrome/.test(ua) ? "Chrome" :
    /Safari/.test(ua) ? "Safari" :
    /Firefox/.test(ua) ? "Firefox" : "เบราว์เซอร์";
  return `${os} · ${br}`;
}
const _dateStr = (t) => new Date(t).toISOString().slice(0, 10);

function ViewerAnalyticsScreen({ store }) {
  const { visibleViewerSessions: sessions, visibleGroups: groups,
          isSuper, scope: globalScope, setScope: setGlobalScope } = store;

  // Realtime tick — recompute "online now" every few seconds
  const [, setTick] = useState_va(0);
  useEffect_va(() => {
    const id = setInterval(() => setTick(t => t + 1), 5000);
    return () => clearInterval(id);
  }, []);

  const today = _dateStr(Date.now());
  const [date, setDate] = useState_va(today);
  const [groupFilter, setGroupFilter] = useState_va("all");

  const groupById = useMemo_va(() => Object.fromEntries(groups.map(g => [g.id, g])), [groups]);

  const availableDates = useMemo_va(() => {
    const days = new Set(sessions.map(s => _dateStr(s.firstAt)));
    return Array.from(days).sort().reverse();
  }, [sessions]);

  const activeNow = sessions.filter(isViewerActive);
  const onSelectedDate = sessions.filter(s => _dateStr(s.firstAt) === date);
  const noDataOnDate = onSelectedDate.length === 0;
  const latestDate = availableDates[0];

  // Per-group breakdown (only groups owned/visible)
  const perGroup = groups.map(g => {
    const gs = sessions.filter(s => s.groupId === g.id);
    return {
      group: g,
      active: gs.filter(isViewerActive).length,
      today: gs.filter(s => _dateStr(s.firstAt) === date).length,
      total: gs.length,
    };
  }).sort((a, b) => b.active - a.active || b.today - a.today);

  // History (selected date + optional group filter), newest first
  const history = onSelectedDate
    .filter(s => groupFilter === "all" || s.groupId === groupFilter)
    .slice()
    .sort((a, b) => b.firstAt - a.firstAt);

  const totalActiveGroups = new Set(activeNow.map(s => s.groupId)).size;

  return (
    <div className="page" data-screen-label="Viewer Analytics">
      <div className="sec-head">
        <div>
          <h2 className="sec-title">วิเคราะห์ผู้ชม</h2>
          <div className="sec-sub">
            ผู้ชมที่เปิดดูหน้าแชร์สดของก๊วนคุณ · ขอบเขต: {date === today ? "วันนี้" : date}
          </div>
        </div>
        <div className="row gap-2" style={{flexWrap:"wrap"}}>
          {isSuper && (
            <Segmented value={globalScope} onChange={setGlobalScope}
              options={[{value:"mine", label:"ของฉัน"}, {value:"all", label:"ทั้งระบบ"}]} />
          )}
          <input type="date" value={date} onChange={e => setDate(e.target.value)} style={{width: 160}} />
        </div>
      </div>

      {noDataOnDate && (
        <div className="card card-pad mb-2" style={{background:"var(--orange-soft)", border:"1px solid rgba(255,159,10,0.3)"}}>
          <div className="row gap-2">
            <Icon name="history" size={16} />
            <div className="grow">
              <div style={{fontWeight: 600}}>วันที่ {date} ยังไม่มีผู้ชม</div>
              <div className="small muted">
                {latestDate ? <>ข้อมูลล่าสุดอยู่ที่ <b>{latestDate}</b></> : "ยังไม่มีบันทึกผู้ชม"}
              </div>
            </div>
            {latestDate && <button className="btn sm" onClick={() => setDate(latestDate)}>ไปยังวันล่าสุด</button>}
          </div>
        </div>
      )}

      <section>
        <div className="tile-grid">
          <div className="tile">
            <div className="tile-label">
              <InfoTip text="จำนวนผู้ชมที่กำลังเปิดดูหน้าแชร์สดอยู่ตอนนี้ — นับจาก session ที่ยังส่งสัญญาณภายใน 60 วินาที">
                ออนไลน์ตอนนี้
              </InfoTip>
            </div>
            <div className="tile-num" style={{color:"var(--green)", display:"flex", alignItems:"center", gap:8}}>
              <span className="bench-dot" style={{background:"var(--green)", width:10, height:10}} />
              {activeNow.length}
            </div>
            <div className="tile-sub">ใน {totalActiveGroups} ก๊วน</div>
          </div>
          <Tile label="ผู้ชมวันนี้" num={onSelectedDate.length} sub={`session ในวันที่เลือก`} />
          <Tile label="ผู้ชมรวมทั้งหมด" num={sessions.length} sub="ทุกวันที่บันทึกไว้" />
          <Tile label="ก๊วนของฉัน" num={groups.length} sub="ที่เก็บสถิติผู้ชม" />
        </div>
      </section>

      {/* Per-group live + daily */}
      <section>
        <h3 className="mb-1" style={{fontSize:15, fontWeight:600, color:"var(--text-3)", letterSpacing:"0.04em", textTransform:"uppercase"}}>
          ผู้ชมแยกตามก๊วน
        </h3>
        {perGroup.length ? (
          <div className="group-grid">
            {perGroup.map(({ group, active, today: td, total }) => (
              <div key={group.id} className="group-card" style={{cursor:"default", "--cg": group.color}}>
                <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>
                  {active > 0
                    ? <span className="chip green"><span className="bench-dot" style={{background:"var(--green)"}} /> {active} ออนไลน์</span>
                    : <span className="chip">— ออฟไลน์</span>}
                </div>
                <div className="group-meta">{group.venue}</div>
                <div className="group-stats">
                  <div><b>{active}</b> ตอนนี้</div>
                  <div><b>{td}</b> วันที่เลือก</div>
                  <div><b>{total}</b> รวม</div>
                </div>
                {group.shareEnabled === false && (
                  <div className="small muted mt-1"><Icon name="door" size={11} /> ปิดแชร์อยู่</div>
                )}
              </div>
            ))}
          </div>
        ) : (
          <div className="card empty"><div className="em">👀</div><div>ยังไม่มีก๊วนที่เก็บสถิติผู้ชม</div></div>
        )}
      </section>

      {/* Historical viewer log */}
      <section>
        <div className="sec-head">
          <h3 style={{margin:0, fontSize:15, fontWeight:600, color:"var(--text-3)", letterSpacing:"0.04em", textTransform:"uppercase"}}>
            <InfoTip text={isSuper ? "บันทึกการเข้าชมแต่ละครั้ง — เก็บก๊วน, เวลาเข้าชม, IP, Session ID และอุปกรณ์/เบราว์เซอร์" : "บันทึกการเข้าชมแต่ละครั้ง — เก็บก๊วน, เวลาเข้าชม และอุปกรณ์/เบราว์เซอร์ (IP และ Session แสดงเฉพาะ Super User)"}>
              บันทึกผู้ชม (วันที่ {date})
            </InfoTip>
          </h3>
          <select value={groupFilter} onChange={e => setGroupFilter(e.target.value)} style={{maxWidth: 220}}>
            <option value="all">ทุกก๊วน</option>
            {groups.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}
          </select>
        </div>

        <div className="card dtable">
          <div className="dhead card-row" style={{background:"var(--bg-elev-2)", fontSize:11, fontWeight:600, color:"var(--text-3)", textTransform:"uppercase", letterSpacing:"0.05em"}}>
            <div className="dcol dc-vtime">เวลา</div>
            <div className="dcol-main">ก๊วน</div>
            {isSuper && <div className="dcol dc-vip">IP Address</div>}
            {isSuper && <div className="dcol dc-vsession">Session</div>}
            <div className="dcol dc-vua">อุปกรณ์</div>
          </div>
          {history.length ? history.map(s => {
            const g = groupById[s.groupId];
            const live = isViewerActive(s);
            return (
              <div key={s.id} className="drow card-row">
                <div className="dcol dc-vtime mono small" style={{color:"var(--text-3)"}}>{fmtTime(s.firstAt)}</div>
                <div className="dcol-main">
                  <div style={{fontWeight:500, display:"flex", gap:6, alignItems:"center", flexWrap:"wrap"}}>
                    <span className="dot" style={{background: g?.color || "var(--text-4)", width:8, height:8}} />
                    {g?.name || "—"}
                    {live && <span className="chip green" style={{fontSize:10}}><span className="bench-dot" style={{background:"var(--green)"}} /> Live</span>}
                  </div>
                </div>
                <div className="dmeta">
                  {isSuper && <div className="dcol dc-vip mono small"><span className="dmeta-label">IP Address</span>{s.ip}</div>}
                  {isSuper && <div className="dcol dc-vsession mono small"><span className="dmeta-label">Session</span>{s.id}</div>}
                  <div className="dcol dc-vua small muted"><span className="dmeta-label">อุปกรณ์</span>{uaShort(s.userAgent)}</div>
                </div>
              </div>
            );
          }) : (
            <div className="empty"><div>ไม่มีบันทึกผู้ชมในวันที่เลือก</div></div>
          )}
        </div>
        <div className="small muted mt-1">
          <Icon name="shield" size={11} /> ข้อมูลผู้ชมเป็นแบบ group-scoped — แสดงเฉพาะก๊วนที่คุณเป็นเจ้าของ
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ViewerAnalyticsScreen, uaShort });