/* global React */
// Shared atoms for the admin page.

const { useState: useAdmState, useMemo: useAdmMemo } = React;

// --- Icons --------------------------------------------------------------

function AdmIcon({ d, size = 14, ...rest }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...rest}>
      {d}
    </svg>
  );
}
const AdmIconSearch = (p) => <AdmIcon {...p} d={<><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></>} />;
const AdmIconArrow  = (p) => <AdmIcon {...p} d={<><path d="M5 12h14" /><path d="m13 6 6 6-6 6" /></>} />;
const AdmIconClose  = (p) => <AdmIcon {...p} d={<><path d="M6 6l12 12" /><path d="M18 6L6 18" /></>} />;
const AdmIconPlus   = (p) => <AdmIcon {...p} d={<><path d="M12 5v14" /><path d="M5 12h14" /></>} />;
const AdmIconUp     = (p) => <AdmIcon {...p} d={<><path d="M12 19V5" /><path d="m6 11 6-6 6 6" /></>} />;
const AdmIconDown   = (p) => <AdmIcon {...p} d={<><path d="M12 5v14" /><path d="m6 13 6 6 6-6" /></>} />;
const AdmIconTrash  = (p) => <AdmIcon {...p} d={<><path d="M4 7h16" /><path d="M10 11v6" /><path d="M14 11v6" /><path d="M6 7l1 13h10l1-13" /><path d="M9 7V4h6v3" /></>} />;
const AdmIconFile   = (p) => <AdmIcon {...p} d={<><path d="M14 3H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8z" /><path d="M14 3v5h5" /></>} />;

window.AdmIcons = {
  Search: AdmIconSearch, Arrow: AdmIconArrow, Close: AdmIconClose, Plus: AdmIconPlus,
  Up: AdmIconUp, Down: AdmIconDown, Trash: AdmIconTrash, File: AdmIconFile,
};

// --- Tag ----------------------------------------------------------------

function AdmTag({ kind, children }) {
  return (
    <span className={`adm-tag is-${kind}`}>
      <span className="dot" />
      {children}
    </span>
  );
}
function AdmStatusTag({ status }) {
  const map = { active: 'Active', suspended: 'Suspended' };
  return <AdmTag kind={status}>{map[status]}</AdmTag>;
}
function AdmRoleTag({ role }) {
  const map = { member: 'Member', mentor: 'Mentor', admin: 'Admin' };
  return <AdmTag kind={role}>{map[role]}</AdmTag>;
}
window.AdmTags = { Tag: AdmTag, Status: AdmStatusTag, Role: AdmRoleTag };

// --- Avatar -------------------------------------------------------------

function AdmAvatar({ initials, size }) {
  const s = size || 36;
  return (
    <div
      className={s > 40 ? 'adm-avatar avatar-lg' : 'adm-avatar'}
      style={{ width: s, height: s, fontSize: s > 40 ? 16 : 11 }}
    >
      {initials}
    </div>
  );
}
window.AdmAvatar = AdmAvatar;

// --- Header -------------------------------------------------------------

function AdminHeader({ onInvite, totalUsers, section, onSection }) {
  return (
    <div className="adm-head">
      <div className="adm-head-mark">
        <img src="assets/ayani-mark-white.png" alt="Ayani" />
        <span className="sep">/</span>
        <span className="role">Administration</span>
      </div>
      <div className="adm-head-right">
        <div className="adm-nav-tabs">
          <button className={section === 'members' ? 'on' : ''} onClick={() => onSection('members')}>Members</button>
          <button className={section === 'content' ? 'on' : ''} onClick={() => onSection('content')}>Content</button>
        </div>
        {section === 'members' && <span className="adm-pill"><span className="dot" />{totalUsers} accounts</span>}
        {section === 'members' && <button className="adm-btn-glow" onClick={onInvite}>+ New Member</button>}
      </div>
    </div>
  );
}
window.AdminHeader = AdminHeader;

// --- Stat strip ---------------------------------------------------------

function AdminStatStrip({ users }) {
  const totals = useAdmMemo(() => {
    const active    = users.filter(u => u.status === 'active').length;
    const suspended = users.filter(u => u.status === 'suspended').length;
    const seenWeek  = users.filter(u => u.last_seen_at && window.admDaysSince(u.last_seen_at) < 7).length;
    const watchSec  = users.reduce((s, u) => s + (u.watch_seconds || 0), 0);
    const lessons   = users.reduce((s, u) => s + (u.lessons_completed || 0), 0);
    return { active, suspended, seenWeek, watchSec, lessons };
  }, [users]);
  const watchH = Math.round(totals.watchSec / 3600);
  return (
    <div className="adm-stats">
      <div className="adm-stat">
        <div className="lbl">Active</div>
        <div className="val">{totals.active}</div>
        <div className="delta">{totals.seenWeek} seen this week</div>
      </div>
      <div className="adm-stat">
        <div className="lbl">Watch hours</div>
        <div className="val">{watchH.toLocaleString()}</div>
        <div className="delta">across the cohort</div>
      </div>
      <div className="adm-stat">
        <div className="lbl">Lessons completed</div>
        <div className="val">{totals.lessons.toLocaleString()}</div>
        <div className="delta">all modules</div>
      </div>
      <div className="adm-stat">
        <div className="lbl">Suspended</div>
        <div className="val">{totals.suspended}</div>
        <div className="delta">access revoked</div>
      </div>
    </div>
  );
}
window.AdminStatStrip = AdminStatStrip;

// --- Toolbar ------------------------------------------------------------

function AdminToolbar({ q, setQ, filter, setFilter, role, setRole }) {
  return (
    <div className="adm-toolbar">
      <div className="adm-search">
        <AdmIconSearch />
        <input
          value={q}
          onChange={e => setQ(e.target.value)}
          placeholder="Search by name, email, ID…"
        />
      </div>
      <div className="adm-filter">
        {['all','active','suspended'].map(f => (
          <button key={f} className={filter === f ? 'is-active' : ''} onClick={() => setFilter(f)}>
            {f.charAt(0).toUpperCase() + f.slice(1)}
          </button>
        ))}
      </div>
      <div className="adm-filter">
        {['all','member','mentor','admin'].map(f => (
          <button key={f} className={role === f ? 'is-active' : ''} onClick={() => setRole(f)}>
            {f.charAt(0).toUpperCase() + f.slice(1)}
          </button>
        ))}
      </div>
    </div>
  );
}
window.AdminToolbar = AdminToolbar;