/* global React, AdmIcons, AdmTags, AdmAvatar, AdminHeader, AdminStatStrip, AdminToolbar, UserDetailPanel, NewMemberDialog, AdminContent, admFmtWatch, admFmtRel, admDaysSince, admDisplayName, admInitials */

const { useState: useScreenState, useMemo: useScreenMemo, useEffect: useScreenEffect, useCallback: useScreenCallback } = React;

// Members come from the list-members Edge Function (BUILD_PLAN.md 4.4) -- every
// profile with pre-computed engagement/access figures. `reload()` is handed to the
// detail panel and the New Member dialog so any mutation refreshes the list.
function AdminScreen() {
  const [users, setUsers]       = useScreenState([]);
  const [modules, setModules]   = useScreenState([]);
  const [loading, setLoading]   = useScreenState(true);
  const [loadError, setLoadError] = useScreenState('');

  const [section, setSection]   = useScreenState('members');
  const [q, setQ]               = useScreenState('');
  const [filter, setFilter]     = useScreenState('all');
  const [role, setRole]         = useScreenState('all');
  const [selectedId, setSelectedId] = useScreenState(null);
  const [dialogOpen, setDialogOpen] = useScreenState(false);

  const reload = useScreenCallback(async () => {
    const { data, error } = await window.supabaseClient.functions.invoke('list-members', { body: {} });
    if (error) {
      let msg = error.message || 'Could not load members.';
      try { const b = await error.context?.json(); if (b?.error) msg = b.error; } catch (_) {}
      setLoadError(msg);
    } else {
      setLoadError('');
      setUsers(data.members || []);
      setModules(data.modules || []);
    }
    setLoading(false);
  }, []);

  useScreenEffect(() => { reload(); }, [reload]);

  const filtered = useScreenMemo(() => {
    const ql = q.toLowerCase();
    return users.filter(u => {
      if (filter !== 'all' && u.status !== filter) return false;
      if (role !== 'all' && u.role !== role) return false;
      if (!ql) return true;
      return (u.username || '').toLowerCase().includes(ql)
          || u.email.toLowerCase().includes(ql)
          || u.id.toLowerCase().includes(ql);
    });
  }, [users, q, filter, role]);

  const selected = users.find(u => u.id === selectedId);

  return (
    <div className="adm adm-surface">
      <div className="adm-flare" />

      <AdminHeader onInvite={() => setDialogOpen(true)} totalUsers={users.length} section={section} onSection={setSection} />

      {section === 'content' ? (
        <AdminContent />
      ) : (
        <React.Fragment>
          <AdminStatStrip users={users} />
          <AdminToolbar q={q} setQ={setQ} filter={filter} setFilter={setFilter} role={role} setRole={setRole} />

          <div className="adm-list-head">
            <div>Member</div>
            <div>Role</div>
            <div>Status</div>
            <div>Current Module</div>
            <div>Watch</div>
            <div>Last seen</div>
            <div></div>
          </div>

          <div className="adm-list">
            {filtered.map(u => (
              <button
                key={u.id}
                className={`adm-row ${u.id === selectedId ? 'is-active' : ''}`}
                onClick={() => setSelectedId(prev => prev === u.id ? null : u.id)}
              >
                <div className="adm-user-cell">
                  <AdmAvatar initials={admInitials(u)} />
                  <div className="adm-user-text">
                    <div className="adm-user-name">{admDisplayName(u)}</div>
                    <div className="adm-user-meta">{u.username ? `${u.email} · ` : ''}{u.id.slice(0, 8)}</div>
                  </div>
                </div>
                <div><AdmTags.Role role={u.role} /></div>
                <div><AdmTags.Status status={u.status} /></div>
                <div className="adm-progress-cell">
                  <div className="label">
                    <span>{u.current_module_code ? `${u.current_module_title} – ${u.current_module_code}` : 'No access yet'}</span>
                    <span className="pct">{u.current_module_code ? `${u.current_module_pct}%` : '—'}</span>
                  </div>
                  <div className="adm-bar">
                    <div className="adm-bar-fill" style={{ width: `${u.current_module_pct || 0}%` }} />
                  </div>
                </div>
                <div className="adm-cell-num">
                  {admFmtWatch(u.watch_seconds / 60)}
                  <span className="sub">{u.lessons_completed} lessons</span>
                </div>
                <div className="adm-cell-num">
                  {admFmtRel(admDaysSince(u.last_seen_at))}
                  <span className="sub">{u.total_logins} logins</span>
                </div>
                <div className="arrow"><AdmIcons.Arrow /></div>
              </button>
            ))}
            {(loading || loadError || filtered.length === 0) && (
              <div className={`adm-list-empty ${loadError ? 'err' : ''}`}>
                {loading ? 'Loading members…' : loadError || 'No members match'}
              </div>
            )}
          </div>

          {selected && (
            <UserDetailPanel
              key={selected.id}
              user={selected}
              onClose={() => setSelectedId(null)}
              onChanged={reload}
            />
          )}

          <NewMemberDialog open={dialogOpen} onClose={() => setDialogOpen(false)} onCreated={reload} modules={modules} />
        </React.Fragment>
      )}
    </div>
  );
}
window.AdminScreen = AdminScreen;