// Admin & Logs screen
const { useState: useState_ad, useMemo: useMemo_ad } = React;

function AdminScreen({ store }) {
  const [tab, setTab] = useState_ad("logs");

  return (
    <div className="page" data-screen-label="Admin">
      <div className="sec-head">
        <div>
          <h2 className="sec-title">ระบบหลังบ้าน</h2>
          <div className="sec-sub">จัดการข้อมูล ตรวจสอบประวัติ และดูบันทึกกิจกรรม</div>
        </div>
        <span className="chip purple"><Icon name="shield" size={12} stroke={2} /> Admin</span>
      </div>

      <div className="tabs">
        <button className={tab==="logs" ? "active" : ""} onClick={() => setTab("logs")}>บันทึกกิจกรรม</button>
        <button className={tab==="groups" ? "active" : ""} onClick={() => setTab("groups")}>จัดการก๊วน</button>
        <button className={tab==="courts" ? "active" : ""} onClick={() => setTab("courts")}>จัดการสนาม</button>
        <button className={tab==="data" ? "active" : ""} onClick={() => setTab("data")}>ข้อมูลและฐานข้อมูล</button>
      </div>

      {tab === "logs" && <LogsTab store={store} />}
      {tab === "groups" && <GroupsAdminTab store={store} />}
      {tab === "courts" && <CourtsAdminTab store={store} />}
      {tab === "data" && <DataTab store={store} />}
    </div>
  );
}

const PAGE_SIZE = 50;

function LogsTab({ store }) {
  const { visibleLogs: logs, isSuper, scope: globalScope, setScope: setGlobalScope, userById } = store;
  const [search, setSearch] = useState_ad("");
  const [type, setType] = useState_ad("all");
  const [expanded, setExpanded] = useState_ad(null);
  const [page, setPage] = useState_ad(0);

  const filtered = useMemo_ad(() => {
    let l = logs;
    if (type !== "all") l = l.filter(x => x.type.startsWith(type));
    if (search) l = l.filter(x => x.desc.toLowerCase().includes(search.toLowerCase()));
    return l;
  }, [logs, search, type]);

  // Reset page and expanded when filter changes
  React.useEffect(() => { setPage(0); setExpanded(null); }, [search, type, globalScope]);

  const totalPages = Math.ceil(filtered.length / PAGE_SIZE) || 1;
  const paginated = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);

  return (
    <>
      <div className="row gap-3 mb-2" style={{flexWrap:"wrap"}}>
        <div style={{position:"relative", flex:"1 1 240px", minWidth:200}}>
          <input placeholder="ค้นหาในบันทึก…" value={search} onChange={e=>setSearch(e.target.value)} style={{paddingLeft:36}} />
          <div style={{position:"absolute", left:12, top:"50%", transform:"translateY(-50%)", color:"var(--text-3)", pointerEvents:"none"}}>
            <Icon name="search" size={16} />
          </div>
        </div>
        {isSuper && (
          <Segmented value={globalScope} onChange={setGlobalScope}
            options={[{value:"mine", label:"ของฉัน"}, {value:"all", label:"ทั้งระบบ"}]} />
        )}
        <Segmented value={type} onChange={setType} options={[
          {value:"all", label:"ทั้งหมด"},
          {value:"match", label:"แมตช์"},
          {value:"shuffle", label:"จัดคู่"},
          {value:"player", label:"ผู้เล่น"},
          {value:"group", label:"ก๊วน"},
          {value:"court", label:"สนาม"},
          {value:"queue", label:"คิว"},
          {value:"share", label:"แชร์"},
          {value:"user", label:"ผู้ใช้"},
          {value:"auth", label:"ระบบ"},
        ]} />
      </div>

      <div className="card">
        <div className="log-row log-head" style={{fontWeight:600, fontSize:11, color:"var(--text-3)", textTransform:"uppercase", letterSpacing:"0.05em", background:"var(--bg-elev-2)"}}>
          <div>เวลา</div><div>ประเภท</div><div>ผู้กระทำ</div><div>รายละเอียด</div>
        </div>
        {paginated.length ? paginated.map((l, i) => {
          const globalIdx = page * PAGE_SIZE + i;
          const hasDetail = !!(l.oldValue || l.newValue || l.entityId || logHasExtra(l));
          const isOpen = expanded === globalIdx;
          return (
          <React.Fragment key={globalIdx}>
            <div className="log-row log-row-clickable" onClick={() => setExpanded(isOpen ? null : globalIdx)}>
              <div className="log-time">{relTime(l.at)}</div>
              <div><span className="chip" style={{background: logSoft(l.type), color: logColor(l.type), fontSize: 11}}>{logLabel(l.type)}</span></div>
              <div className="log-actor">
                {(() => { const u = userById?.[l.actorId]; return u ? u.name : (l.actor || "system"); })()}
              </div>
              <div className="log-desc-cell">
                <span>{logSummary(l.desc)}</span>
                {hasDetail && (
                  <span className="small muted log-expand-hint">
                    <Icon name={isOpen ? "chevU" : "chevD"} size={11} stroke={2} />
                  </span>
                )}
              </div>
            </div>
            {isOpen && (
              <div className="log-detail">
                {logHasExtra(l) && (
                  <div className="log-detail-full">{l.desc}</div>
                )}
                <div className="row gap-3 mt-1" style={{flexWrap:"wrap"}}>
                  {l.entityType && <span><b>Entity:</b> <code>{l.entityType}</code></span>}
                  {l.entityId && <span><b>ID:</b> <code>{l.entityId}</code></span>}
                  {l.ip && <span><b>IP:</b> <code>{l.ip}</code></span>}
                  <span><b>Time:</b> <code>{new Date(l.at).toISOString().slice(0,19).replace("T"," ")}</code></span>
                </div>
                {l.oldValue && <div className="mt-1"><b>Old:</b> <code>{JSON.stringify(l.oldValue, null, 0)}</code></div>}
                {l.newValue && <div className="mt-1"><b>New:</b> <code>{JSON.stringify(l.newValue, null, 0)}</code></div>}
              </div>
            )}
          </React.Fragment>
          );
        }) : <div className="empty"><div>ไม่มีบันทึกที่ตรงตามเงื่อนไข</div></div>}

        {totalPages > 1 && (
          <div className="row gap-2 log-pagination">
            <button className="btn sm" onClick={() => { setPage(0); setExpanded(null); }} disabled={page === 0} style={{minWidth:32, padding:"0 8px"}}>«</button>
            <button className="btn sm icon" onClick={() => { setPage(p => p - 1); setExpanded(null); }} disabled={page === 0}>
              <Icon name="chevL" size={13} stroke={2} />
            </button>
            <span className="small muted" style={{padding:"0 4px", lineHeight:"30px", whiteSpace:"nowrap"}}>
              หน้า {page + 1} / {totalPages} · {filtered.length} รายการ
            </span>
            <button className="btn sm icon" onClick={() => { setPage(p => p + 1); setExpanded(null); }} disabled={page >= totalPages - 1}>
              <Icon name="chevR" size={13} stroke={2} />
            </button>
            <button className="btn sm" onClick={() => { setPage(totalPages - 1); setExpanded(null); }} disabled={page >= totalPages - 1} style={{minWidth:32, padding:"0 8px"}}>»</button>
          </div>
        )}
      </div>
    </>
  );
}

function GroupsAdminTab({ store }) {
  const { visibleGroups: groups, deleteGroup, updateGroup, players, userById, isSuper, scope } = store;
  const toast = useToast();
  return (
    <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-main">ชื่อก๊วน</div>
        <div className="dcol dc-count">ผู้เล่น</div>
        <div className="dcol dc-count">สนาม</div>
        <div className="dcol dc-type">ประเภท</div>
        <div className="dcol dc-date">วันที่</div>
        <div className="dcol dc-act"></div>
      </div>
      {groups.map(g => {
        const owner = userById?.[g.ownerId];
        return (
        <div key={g.id} className="drow card-row">
          <div className="dcol-main row gap-2">
            <span className="dot" style={{background: g.color, width: 8, height: 8}} />
            <div>
              <div style={{fontWeight:500}}>{g.name}</div>
              <div className="small muted">
                {g.venue}
                {isSuper && scope === "all" && owner && <> · เจ้าของ: <b>{owner.name}</b></>}
              </div>
            </div>
          </div>
          <div className="dmeta">
            <div className="dcol dc-count"><span className="dmeta-label">ผู้เล่น</span>{g.playerIds.length}</div>
            <div className="dcol dc-count"><span className="dmeta-label">สนาม</span>{g.courts.length}</div>
            <div className="dcol dc-type">
              <span className="dmeta-label">ประเภท</span>
              <span className="chip" style={{fontSize:11}}>{g.mode === "double" ? "คู่" : "เดี่ยว"}</span>
            </div>
            <div className="dcol dc-date small muted"><span className="dmeta-label">วันที่</span>{fmtDate(g.date)}</div>
          </div>
          <div className="dcol dc-act dcol-actions">
            <button className="btn icon" onClick={() => { const n = prompt("ชื่อใหม่:", g.name); if (n) { updateGroup(g.id, { name: n.trim() }); toast("เปลี่ยนชื่อแล้ว"); } }}>
              <Icon name="edit" size={13} />
            </button>
            <button className="btn icon" onClick={() => { if (confirm(`ลบ ${g.name}?`)) { deleteGroup(g.id); toast("ลบก๊วนแล้ว"); } }}>
              <Icon name="trash" size={13} />
            </button>
          </div>
        </div>
      );})}
    </div>
  );
}

function CourtsAdminTab({ store }) {
  const { visibleGroups: groups, updateGroup } = store;
  const toast = useToast();
  return (
    <div className="col gap-3">
      {groups.map(g => (
        <div key={g.id} className="card card-pad">
          <div className="spread mb-1">
            <div>
              <div style={{fontWeight:600}}>{g.name}</div>
              <div className="small muted">{g.courts.length} สนาม · {g.venue}</div>
            </div>
            <button className="btn sm" onClick={() => {
              const name = prompt("ชื่อ/เลขสนามใหม่:", String(g.courts.length + 1));
              if (name) {
                updateGroup(g.id, { courts: [...g.courts, { id: "c" + Math.random().toString(36).slice(2,6), name }],
                                    active: { ...g.active, [Math.random()]: null } });
                toast("เพิ่มสนามแล้ว");
              }
            }}>
              <Icon name="plus" size={12} stroke={2.4} /> เพิ่มสนาม
            </button>
          </div>
          <div className="row gap-2" style={{flexWrap:"wrap"}}>
            {g.courts.map(c => (
              <div key={c.id} className="chip" style={{padding:"8px 12px", fontSize: 13, gap: 8}}>
                <div className="court-num" style={{width:26, height:26, fontSize:13, borderRadius:8}}>{c.name}</div>
                สนาม {c.name}
                <button className="btn icon" style={{width: 22, height: 22}}
                  onClick={() => { if (confirm(`ลบสนาม ${c.name}?`)) {
                    updateGroup(g.id, { courts: g.courts.filter(x => x.id !== c.id),
                                        active: Object.fromEntries(Object.entries(g.active).filter(([k]) => k !== c.id)) });
                    toast("ลบสนามแล้ว");
                  } }}>
                  <Icon name="x" size={11} />
                </button>
              </div>
            ))}
            {!g.courts.length && <div className="muted small">ยังไม่มีสนาม</div>}
          </div>
        </div>
      ))}
    </div>
  );
}

function DataTab({ store }) {
  const { visiblePlayers: players, visibleGroups: groups, visibleLogs: logs, isSuper, scope } = store;
  return (
    <div className="col gap-3">
      <div className="card card-pad">
        <div style={{fontWeight:600}}>สรุปข้อมูลในระบบ {isSuper && scope === "all" ? "(ทั้งระบบ)" : "(ของฉัน)"}</div>
        <div className="small muted">ฐานข้อมูลปัจจุบัน (mock storage)</div>
        <div className="tile-grid mt-2">
          <Tile label="Players" num={players.length} sub="แถวในตาราง players" />
          <Tile label="Groups" num={groups.length} sub="แถวในตาราง groups" />
          <Tile label="Matches" num={groups.reduce((s,g)=>s+(g.history?.length||0),0)} sub="แถวในตาราง matches" />
          <Tile label="Logs" num={logs.length} sub="แถวในตาราง audit_log" />
        </div>
      </div>
      <div className="card card-pad">
        <div style={{fontWeight:600}}>การส่งออก / สำรอง</div>
        <div className="small muted mb-2">ในระบบจริง: ดาวน์โหลด JSON / CSV หรือ sync ขึ้น cloud</div>
        <div className="row gap-2">
          <button className="btn">📥 ดาวน์โหลด JSON</button>
          <button className="btn">📊 Export CSV</button>
          <button className="btn">☁️ Sync ทันที</button>
          <button className="btn danger">⚠️ รีเซ็ตข้อมูลทั้งหมด</button>
        </div>
      </div>
      <div className="card card-pad">
        <div style={{fontWeight:600}}>ผู้ใช้ในระบบ</div>
        <div className="small muted mb-2">การควบคุมการเข้าถึง — ผู้ใช้แต่ละคนเห็นเฉพาะข้อมูลของตน</div>
        <div className="card">
          {[{name:"โค้ชเอก", email:"coach@badmatch.app", role:"Admin"},
            {name:"คุณ B", email:"b@example.com", role:"User"}].map((u, i) => (
            <div key={i} className="card-row">
              <div className="avatar" style={{marginRight: 10, width: 30, height: 30, fontSize: 11}}>{initials(u.name)}</div>
              <div className="grow">
                <div style={{fontWeight:500}}>{u.name}</div>
                <div className="small muted">{u.email}</div>
              </div>
              <span className={`chip ${u.role==="Admin" ? "purple" : ""}`}>{u.role}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function logSummary(desc) {
  if (!desc) return "—";
  return desc.split(" • ")[0].split(" — ")[0];
}
function logHasExtra(l) {
  return l.desc && l.desc.includes(" • ");
}

function logLabel(t) {
  if (t.startsWith("match.end")) return "บันทึกผล";
  if (t.startsWith("match.start")) return "เริ่มแมตช์";
  if (t.startsWith("shuffle")) return "จัดคู่";
  if (t.startsWith("swap")) return "เปลี่ยนตัว";
  if (t.startsWith("court.add")) return "เพิ่มสนาม";
  if (t.startsWith("court.remove")) return "ลบสนาม";
  if (t.startsWith("queue.randomize")) return "สุ่มคิว";
  if (t.startsWith("queue.add")) return "เพิ่มคิว";
  if (t.startsWith("queue.delete")) return "ลบคิว";
  if (t.startsWith("queue.move")) return "ย้ายคิว";
  if (t.startsWith("player.add")) return "เพิ่มผู้เล่น";
  if (t.startsWith("player.edit")) return "แก้ไข";
  if (t.startsWith("player.delete")) return "ลบผู้เล่น";
  if (t.startsWith("group.create")) return "สร้างก๊วน";
  if (t.startsWith("group.delete")) return "ลบก๊วน";
  if (t.startsWith("auth")) return "เข้าระบบ";
  return t;
}
function logSoft(t) {
  if (t.startsWith("match")) return "var(--green-soft)";
  if (t.startsWith("shuffle")) return "var(--tint-soft)";
  if (t.startsWith("swap")) return "var(--tint-soft)";
  if (t.startsWith("player")) return "var(--purple-soft)";
  if (t.startsWith("group")) return "var(--orange-soft)";
  if (t.startsWith("court")) return "var(--orange-soft)";
  if (t.startsWith("queue")) return "var(--tint-soft)";
  return "var(--bg-inset)";
}

Object.assign(window, { AdminScreen });