/* global React */
const { useState: useStateAdmin } = React;

/* Admin Console mock, browser window chrome + sidebar + content */

function AdminChrome({ url = 'admin.verveli.org/approvals', children }) {
  return (
    <div className="admin-window lift">
      <div className="admin-titlebar">
        <div className="lights"><span></span><span></span><span></span></div>
        <div className="url">{url}</div>
        <div style={{ width: 32 }} />
      </div>
      {children}
    </div>
  );
}

function AdminSidebar({ active = 'approvals' }) {
  const items = [
    { id: 'home',       label: 'Home',          group: null,            ic: 'home',     badge: null },
    { id: 'approvals',  label: 'Approvals',     group: 'People',        ic: 'check',    badge: '24' },
    { id: 'members',    label: 'Members',       group: null,            ic: 'users',    badge: null },
    { id: 'programs',   label: 'Programs',      group: null,            ic: 'layers',   badge: null },
    { id: 'chapters',   label: 'Chapters',      group: null,            ic: 'grid',     badge: null },
    { id: 'contacts',   label: 'Contacts',      group: null,            ic: 'card',     badge: null },
    { id: 'opps',       label: 'Opportunities', group: 'Content',       ic: 'briefcase',badge: null },
    { id: 'updates',    label: 'Updates',       group: null,            ic: 'mega',     badge: null },
    { id: 'today',      label: 'Daily content', group: null,            ic: 'sun',      badge: null },
    { id: 'world',      label: 'World settings',group: 'Institute',     ic: 'sliders',  badge: null },
    { id: 'audit',      label: 'Audit log',     group: null,            ic: 'history',  badge: null },
  ];
  const icons = {
    home:      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M3 11l9-7 9 7v9a1 1 0 01-1 1h-5v-6h-6v6H4a1 1 0 01-1-1z"/></svg>,
    check:     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M4 12l5 5L20 6"/></svg>,
    users:     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><circle cx="9" cy="9" r="3.2"/><path d="M3 19c.7-3 3.3-5 6-5s5.3 2 6 5"/><circle cx="17" cy="10" r="2.4"/></svg>,
    layers:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M12 3l9 5-9 5-9-5z"/><path d="M3 13l9 5 9-5"/></svg>,
    grid:      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>,
    card:      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18"/></svg>,
    briefcase: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M9 7V5a2 2 0 012-2h2a2 2 0 012 2v2"/></svg>,
    mega:      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M3 11v2l13 5V6L3 11z"/><path d="M16 9v6a3 3 0 010-6z"/></svg>,
    sun:       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>,
    sliders:   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M4 6h10M18 6h2M4 12h2M10 12h10M4 18h12M20 18h0"/><circle cx="16" cy="6" r="2"/><circle cx="8" cy="12" r="2"/><circle cx="18" cy="18" r="2"/></svg>,
    history:   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M3 12a9 9 0 109-9 9 9 0 00-7 3.3"/><path d="M3 4v5h5"/><path d="M12 7v5l3 2"/></svg>,
  };

  // Group by group header
  const out = [];
  let currentGroup = null;
  items.forEach((it) => {
    if (it.group && it.group !== currentGroup) {
      out.push(<div key={`g-${it.group}`} className="group">{it.group}</div>);
      currentGroup = it.group;
    }
    out.push(
      <div key={it.id} className="item" data-active={String(active === it.id)}>
        <span className="ic">{icons[it.ic]}</span>
        <span>{it.label}</span>
        {it.badge && <span className="badge">{it.badge}</span>}
      </div>
    );
  });

  return (
    <div className="admin-side">
      <div className="brand">
        <Logo size={18} motion="off" animateIn={false} />
        <span>Northbridge · Admin</span>
      </div>
      {out}
    </div>
  );
}

/* ---------- Approvals view ---------- */
function AdminApprovals() {
  const rows = [
    { name: 'Ananya Bose',   meta: 'Batch ’17 · Postdoc · MIT',           status: 'Pending verify', color: '' },
    { name: 'Karan Mehta',   meta: 'Batch ’08 · Partner · Mumbai',         status: 'Email matched', color: 'green' },
    { name: 'R. Subramanian',meta: 'Batch ’96 · Civil Service · Chennai',  status: 'Phone verified', color: 'blue' },
    { name: 'P. Krishnan',   meta: 'Batch ’21 · Junior eng · Pune',        status: 'Awaiting referral', color: 'pink' },
    { name: 'Vinay Iyer',    meta: 'Batch ’14 · Founder · Bengaluru',      status: 'Email matched', color: 'green' },
    { name: 'Meera Joseph',  meta: 'Batch ’03 · Faculty · institute',      status: 'Pending verify', color: '' },
  ];
  return (
    <AdminChrome url="admin.verveli.org/approvals">
      <div className="admin-body">
        <AdminSidebar active="approvals" />
        <div className="admin-main">
          <div className="page-head">
            <div>
              <h3>Approvals</h3>
              <div className="sub">24 awaiting review · queue resets daily</div>
            </div>
            <div className="filters">
              <button className="filter" data-active="true">All</button>
              <button className="filter">Pending</button>
              <button className="filter">Verified</button>
              <button className="filter">Flagged</button>
            </div>
          </div>

          <div className="admin-table">
            <div className="admin-row">
              <span></span>
              <span>Member</span>
              <span>Identity check</span>
              <span>Source</span>
              <span>Batch</span>
              <span style={{ textAlign: 'right' }}>Action</span>
            </div>
            {rows.map((r, i) => (
              <div className="admin-row" key={i}>
                <div className="avi" style={{ background: `color-mix(in oklab, ${['var(--c-orange)','var(--c-pink)','var(--c-blue)','var(--c-green)'][i%4]} 30%, var(--paper-3))` }}></div>
                <div>
                  <div className="name">{r.name}</div>
                  <div className="meta">{r.meta}</div>
                </div>
                <div className={`status ${r.color}`}><span className="dot"></span>{r.status}</div>
                <div className="meta" style={{ color: 'var(--ink-3)' }}>{i % 2 === 0 ? 'Code · NB-A14' : 'Coordinator'}</div>
                <div>{r.meta.split('·')[0].trim()}</div>
                <div className="actions">
                  <button className="btn-sm">Hold</button>
                  <button className="btn-sm primary">Approve</button>
                </div>
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, fontSize: 11.5, color: 'var(--ink-3)' }}>
            <span>Showing 6 of 24</span>
            <span>Auto-approve disabled by World Setting</span>
          </div>
        </div>
      </div>
    </AdminChrome>
  );
}

/* ---------- Audit log view ---------- */
function AdminAudit() {
  const rows = [
    { t: '11:42', kind: 'approve', who: 'M. Pillai',  what: <>Approved <strong>Ananya Bose ’17</strong> · joined via institute code <strong>NB-A14</strong></> },
    { t: '11:31', kind: 'update',  who: 'R. Menon',   what: <>Published update <strong>“Convocation 2026 dates”</strong> to all members</> },
    { t: '10:58', kind: 'setting', who: 'S. Hari',    what: <>Changed world setting <strong>auto-approve</strong> from <strong>on</strong> to <strong>off</strong></> },
    { t: '10:14', kind: 'signal',  who: 'A. Iyer',    what: <>Posted a hiring signal in <strong>Founders &amp; Operators</strong></> },
    { t: '09:46', kind: 'approve', who: 'M. Pillai',  what: <>Verified <strong>Karan Mehta ’08</strong> by email domain match</> },
    { t: '09:12', kind: 'update',  who: 'EC chair',   what: <>Created chapter <strong>SF Bay Area</strong>, assigned lead <strong>S. Krishnan</strong></> },
    { t: '08:55', kind: 'setting', who: 'S. Hari',    what: <>Updated privacy default to <strong>phone hidden from non-batch</strong></> },
  ];
  return (
    <AdminChrome url="admin.verveli.org/audit-log">
      <div className="admin-body">
        <AdminSidebar active="audit" />
        <div className="admin-main">
          <div className="page-head">
            <div>
              <h3>Audit log</h3>
              <div className="sub">Today · Mon 18 Nov</div>
            </div>
            <div className="filters">
              <button className="filter" data-active="true">Today</button>
              <button className="filter">7d</button>
              <button className="filter">30d</button>
              <button className="filter">Export</button>
            </div>
          </div>

          <div className="audit-list">
            {rows.map((r, i) => (
              <div className="audit-row" key={i}>
                <div className="time">{r.t}</div>
                <div className="what">
                  <span className={`badge ${r.kind}`}>{r.kind}</span>
                  {r.what}
                </div>
                <div className="who">{r.who}</div>
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, fontSize: 11.5, color: 'var(--ink-3)' }}>
            <span>Every action is logged. Logs are retained per institute policy.</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--c-green)' }}></span>
              Live · 7 events today
            </span>
          </div>
        </div>
      </div>
    </AdminChrome>
  );
}

Object.assign(window, { AdminApprovals, AdminAudit });