/* ============================================================
   ADMIN PANELS - Dashboard, Create, Schedule, Review, Live, Stats
   Reuses project primitives: CountUp, card, btn, stamp, light-pool.
   ============================================================ */

/* ---------- Shared bits ---------- */
function StagePill({ stage }) {
  const s = stageOf(stage);
  return (
    <span className="adm-stage-pill" style={{ '--sc': s.color }}>
      <span className="adm-stage-dot"></span>{s.label}
    </span>
  );
}

function LifecycleTrack({ stage, onAdvance }) {
  const idx = stageIndex(stage);
  const s = stageOf(stage);
  return (
    <div className="adm-lifecycle">
      <div className="adm-lc-rail">
        {LIFECYCLE.map((st, i) => (
          <div key={st.key} className={`adm-lc-node ${i <= idx ? 'done' : ''} ${i === idx ? 'now' : ''}`} title={st.label}>
            <span style={{ '--sc': st.color }}></span>
          </div>
        ))}
      </div>
      {s.next.length > 0 && (
        <button className="btn btn-ghost adm-advance" onClick={() => onAdvance(stageOf(s.next[0]).key)}>
          Advance → {stageOf(s.next[0]).label} <Arrow />
        </button>
      )}
    </div>
  );
}

/* ============================================================ DASHBOARD */
function AdminDashboard({ data, go }) {
  const { events, subs } = data;
  const live = events.filter(e => e.stage === 'live');
  const pending = subs.filter(s => s.status === 'pending');
  const upcoming = events.filter(e => ['scheduled','open','review','confirmed'].includes(e.stage));
  const approved = subs.filter(s => s.status === 'approved').length;
  const ratio = subs.length ? Math.round((approved / subs.length) * 100) : 0;

  return (
    <div className="adm-grid-fade">
      <div className="adm-stat-row">
        <StatCard label="Live now" value={live.length} accent="var(--danger)" sub="events on stage" />
        <StatCard label="Upcoming" value={upcoming.length} accent="var(--purple)" sub="in the pipeline" />
        <StatCard label="Pending review" value={pending.length} accent="var(--warning)" sub="builders waiting" />
        <StatCard label="Approval rate" value={ratio} suffix="%" accent="var(--green)" sub="submission → lineup" />
      </div>

      <div className="adm-two-col">
        <div className="card adm-panel">
          <div className="adm-panel-head">
            <h3>Event pipeline</h3>
            <button className="adm-link" onClick={() => go('schedule')}>Schedule ↗</button>
          </div>
          {events.slice(0, 5).map(e => (
            <div key={e.id} className="adm-pipe-row">
              <div>
                <div className="adm-pipe-title">{e.title}</div>
                <div className="adm-pipe-meta">{e.date} · {e.time} {e.tz}</div>
              </div>
              <StagePill stage={e.stage} />
            </div>
          ))}
        </div>

        <div className="card adm-panel">
          <div className="adm-panel-head">
            <h3>Needs your call</h3>
            <button className="adm-link" onClick={() => go('review')}>Review all ↗</button>
          </div>
          {pending.length === 0 && <div className="adm-empty">All caught up. <span className="stamp green">clean desk</span></div>}
          {pending.map(s => (
            <div key={s.id} className="adm-pipe-row">
              <div>
                <div className="adm-pipe-title">{s.name}</div>
                <div className="adm-pipe-meta">{s.project} · {s.region}</div>
              </div>
              <span className={`adm-q adm-q-${s.quality}`}>{s.quality}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="adm-cta-strip">
        <div>
          <div className="adm-cta-title">Ready to put something in motion?</div>
          <div className="adm-cta-sub">Spin up a Builders Hub, Shark Tank, or special drop.</div>
        </div>
        <button className="btn btn-spark" onClick={() => go('create')}>Create event <Arrow /></button>
      </div>
    </div>
  );
}

function StatCard({ label, value, suffix, accent, sub }) {
  return (
    <div className="card adm-stat" style={{ '--ac': accent }}>
      <div className="adm-stat-label">{label}</div>
      <div className="adm-stat-value"><CountUp to={value} duration={1200} suffix={suffix || ''} /></div>
      <div className="adm-stat-sub">{sub}</div>
    </div>
  );
}

/* ============================================================ CREATE */
function AdminCreate({ data, go }) {
  const [f, setF] = useState({
    title: '', type: 'builders', desc: '', date: '', time: '19:00', tz: 'UTC+1',
    discord: true, recurring: 'weekly', slots: 5,
  });
  const [done, setDone] = useState(null);
  const set = (k, v) => setF(prev => ({ ...prev, [k]: v }));
  const typeMeta = EVENT_TYPES.find(t => t.key === f.type);

  const save = (publishNow) => {
    if (!f.title.trim() || !f.date) return;
    const id = data.createEvent({ ...f, recurring: typeMeta.recurring ? f.recurring : null, publishNow });
    setDone({ id, publishNow });
  };

  if (done) {
    return (
      <div className="adm-grid-fade adm-done">
        <div className="card adm-panel adm-done-card">
          <GNGLogo size={48} />
          <h3>{done.publishNow ? 'Scheduled & in motion' : 'Saved as draft'}</h3>
          <p>{f.title} is {done.publishNow ? 'on the calendar' : 'tucked away as a draft'}.</p>
          <div className="adm-done-actions">
            <button className="btn btn-spark" onClick={() => go('schedule')}>See schedule <Arrow /></button>
            <button className="btn btn-ghost" onClick={() => { setDone(null); setF({ ...f, title: '', desc: '', date: '' }); }}>Create another</button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="adm-grid-fade adm-create">
      <div className="card adm-panel">
        <h3>Event details</h3>
        <label className="adm-field">
          <span>Title</span>
          <input className="adm-input" placeholder="Builders Hub #15" value={f.title} onChange={e => set('title', e.target.value)} />
        </label>

        <div className="adm-field">
          <span>Type</span>
          <div className="adm-type-row">
            {EVENT_TYPES.map(t => (
              <button key={t.key} className={`adm-type ${f.type === t.key ? 'on' : ''}`} onClick={() => set('type', t.key)}>
                <div className="adm-type-label">{t.label}</div>
                <div className="adm-type-hint">{t.hint}</div>
              </button>
            ))}
          </div>
        </div>

        <label className="adm-field">
          <span>Description</span>
          <textarea className="adm-input" rows={3} placeholder="What goes down, how many slots, the vibe…" value={f.desc} onChange={e => set('desc', e.target.value)} />
        </label>

        <div className="adm-field-row">
          <label className="adm-field">
            <span>Date</span>
            <input className="adm-input" type="date" value={f.date} onChange={e => set('date', e.target.value)} />
          </label>
          <label className="adm-field">
            <span>Time</span>
            <input className="adm-input" type="time" value={f.time} onChange={e => set('time', e.target.value)} />
          </label>
          <label className="adm-field">
            <span>Time zone</span>
            <select className="adm-input" value={f.tz} onChange={e => set('tz', e.target.value)}>
              <option>UTC+1</option><option>UTC</option><option>UTC+2</option><option>UTC-5</option><option>UTC-8</option>
            </select>
          </label>
        </div>
      </div>

      <div className="card adm-panel adm-create-side">
        <h3>Setup</h3>
        <div className="adm-toggle-row" onClick={() => set('discord', !f.discord)}>
          <div>
            <div className="adm-toggle-label">Discord integration</div>
            <div className="adm-toggle-hint">Auto-link a stage channel</div>
          </div>
          <span className={`adm-switch ${f.discord ? 'on' : ''}`}><span></span></span>
        </div>

        {typeMeta.recurring && (
          <div className="adm-toggle-row" onClick={() => set('recurring', f.recurring ? null : 'weekly')}>
            <div>
              <div className="adm-toggle-label">Weekly recurrence</div>
              <div className="adm-toggle-hint">Builders Hub pattern</div>
            </div>
            <span className={`adm-switch ${f.recurring ? 'on' : ''}`}><span></span></span>
          </div>
        )}

        <label className="adm-field" style={{ marginTop: 8 }}>
          <span>Builder slots</span>
          <input className="adm-input" type="number" min="0" max="20" value={f.slots} onChange={e => set('slots', +e.target.value)} />
        </label>

        <div className="adm-publish">
          <button className="btn btn-spark" style={{ width: '100%', justifyContent: 'center' }} onClick={() => save(true)}>Publish & schedule <Arrow /></button>
          <button className="btn btn-ghost" style={{ width: '100%', justifyContent: 'center' }} onClick={() => save(false)}>Save as draft</button>
        </div>
      </div>
    </div>
  );
}

/* ============================================================ SCHEDULE */
function AdminSchedule({ data }) {
  const { events, advanceEvent } = data;
  const [sel, setSel] = useState(events[0]?.id);
  // simple month grid for the seed month (June 2026 anchor; falls back gracefully)
  const monthDays = Array.from({ length: 30 }, (_, i) => i + 1);
  const evByDay = {};
  events.forEach(e => {
    const d = +(e.date.split('-')[2] || 0);
    (evByDay[d] = evByDay[d] || []).push(e);
  });
  const current = events.find(e => e.id === sel) || events[0];

  return (
    <div className="adm-grid-fade adm-two-col adm-sched">
      <div className="card adm-panel">
        <div className="adm-panel-head"><h3>June 2026</h3><span className="adm-tz-chip">UTC+1 default</span></div>
        <div className="adm-cal">
          {['M','T','W','T','F','S','S'].map((d,i) => <div key={i} className="adm-cal-dow">{d}</div>)}
          {monthDays.map(d => (
            <div key={d} className={`adm-cal-cell ${evByDay[d] ? 'has' : ''}`}>
              <span className="adm-cal-num">{d}</span>
              {(evByDay[d] || []).map(e => (
                <button key={e.id} className="adm-cal-ev" style={{ '--sc': stageOf(e.stage).color }} onClick={() => setSel(e.id)}>
                  {e.title}
                </button>
              ))}
            </div>
          ))}
        </div>
      </div>

      <div className="card adm-panel">
        {current && <>
          <div className="adm-panel-head"><h3>{current.title}</h3><StagePill stage={current.stage} /></div>
          <p className="adm-pipe-meta" style={{ marginBottom: 16 }}>{current.desc}</p>
          <div className="adm-detail-grid">
            <Detail k="When" v={`${current.date} · ${current.time} ${current.tz}`} />
            <Detail k="Type" v={EVENT_TYPES.find(t => t.key === current.type)?.label} />
            <Detail k="Recurrence" v={current.recurring ? 'Weekly' : 'One-off'} />
            <Detail k="Discord" v={current.discord ? 'Linked' : 'Off'} />
            <Detail k="Slots" v={`${current.assigned.length}/${current.slots} filled`} />
          </div>
          <LifecycleTrack stage={current.stage} onAdvance={(to) => advanceEvent(current.id, to)} />
        </>}
      </div>
    </div>
  );
}
function Detail({ k, v }) {
  return <div className="adm-detail"><span>{k}</span><strong>{v}</strong></div>;
}

/* ============================================================ REVIEW */
function AdminReview({ data }) {
  const { subs, events, setSubStatus, assignToEvent } = data;
  const [region, setRegion] = useState('all');
  const [quality, setQuality] = useState('all');
  const [status, setStatus] = useState('all');
  const [assignFor, setAssignFor] = useState(null);

  const regions = ['all', ...Array.from(new Set(subs.map(s => s.region)))];
  const filtered = subs.filter(s =>
    (region === 'all' || s.region === region) &&
    (quality === 'all' || s.quality === quality) &&
    (status === 'all' || s.status === status)
  );
  const openEvents = events.filter(e => ['scheduled','open','review','confirmed'].includes(e.stage));

  return (
    <div className="adm-grid-fade">
      <div className="adm-filters">
        <Filter label="Region" value={region} set={setRegion} opts={regions} />
        <Filter label="Quality" value={quality} set={setQuality} opts={['all','high','mid','low']} />
        <Filter label="Status" value={status} set={setStatus} opts={['all','pending','approved','hold','rejected']} />
        <span className="adm-filter-count">{filtered.length} builders</span>
      </div>

      <div className="adm-sub-grid">
        {filtered.map(s => (
          <div key={s.id} className="card adm-sub">
            <div className="adm-sub-top">
              <div className="adm-sub-avatar">{s.name[0].toUpperCase()}</div>
              <div className="adm-sub-id">
                <div className="adm-sub-name">{s.name}</div>
                <div className="adm-sub-handle">{s.handle} · {s.region}</div>
              </div>
              <span className={`adm-q adm-q-${s.quality}`}>{s.quality}</span>
            </div>
            <div className="adm-sub-project">{s.project}</div>
            <div className="adm-sub-stack">{s.stack}</div>
            {s.note && <div className="adm-sub-note">“{s.note}”</div>}

            <div className="adm-sub-foot">
              <span className={`adm-status adm-status-${s.status}`}>{s.status}</span>
              <span className="adm-sub-when">{s.when}</span>
            </div>

            <div className="adm-sub-actions">
              <button className="adm-act approve" onClick={() => setSubStatus(s.id, 'approved')}>Approve</button>
              <button className="adm-act hold" onClick={() => setSubStatus(s.id, 'hold')}>Hold</button>
              <button className="adm-act reject" onClick={() => setSubStatus(s.id, 'rejected')}>Reject</button>
            </div>
            {s.status === 'approved' && (
              <button className="adm-assign-btn" onClick={() => setAssignFor(assignFor === s.id ? null : s.id)}>
                {assignFor === s.id ? 'Close' : 'Assign to event ↓'}
              </button>
            )}
            {assignFor === s.id && (
              <div className="adm-assign-list">
                {openEvents.map(e => {
                  const on = e.assigned.includes(s.id);
                  return (
                    <button key={e.id} className={`adm-assign-row ${on ? 'on' : ''}`} onClick={() => assignToEvent(e.id, s.id)}>
                      <span>{e.title}</span>
                      <span>{on ? '✓ assigned' : `${e.assigned.length}/${e.slots}`}</span>
                    </button>
                  );
                })}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}
function Filter({ label, value, set, opts }) {
  return (
    <div className="adm-filter">
      <span>{label}</span>
      <select className="adm-input adm-input-sm" value={value} onChange={e => set(e.target.value)}>
        {opts.map(o => <option key={o} value={o}>{o}</option>)}
      </select>
    </div>
  );
}

/* ============================================================ LIVE */
function AdminLive({ data }) {
  const { events, advanceEvent, updateEvent } = data;
  const liveCandidates = events.filter(e => ['confirmed','live'].includes(e.stage));
  const [tick, setTick] = useState(0);

  // simulate participant drift for any live event
  useEffect(() => {
    const id = setInterval(() => {
      setTick(t => t + 1);
      events.filter(e => e.stage === 'live').forEach(e => {
        const drift = Math.round((Math.random() - 0.4) * 4);
        const next = Math.max(0, e.attendance + drift);
        updateEvent(e.id, { attendance: next, peak: Math.max(e.peak, next) });
      });
    }, 2500);
    return () => clearInterval(id);
  }, [events]);

  if (liveCandidates.length === 0)
    return <div className="adm-grid-fade"><div className="card adm-panel adm-empty-big">No confirmed or live events right now. <span className="stamp">quiet on set</span></div></div>;

  return (
    <div className="adm-grid-fade adm-live-grid">
      {liveCandidates.map(e => {
        const isLive = e.stage === 'live';
        return (
          <div key={e.id} className={`card adm-panel adm-live-card ${isLive ? 'is-live' : ''}`}>
            <div className="adm-live-head">
              <div>
                <div className="adm-live-title">{e.title}</div>
                <div className="adm-pipe-meta">{e.date} · {e.time} {e.tz}</div>
              </div>
              {isLive
                ? <span className="adm-live-tag"><span className="adm-live-blip"></span>LIVE</span>
                : <StagePill stage={e.stage} />}
            </div>

            <div className="adm-live-stats">
              <div><div className="adm-live-num">{isLive ? e.attendance : '-'}</div><span>in stage</span></div>
              <div><div className="adm-live-num">{e.peak || '-'}</div><span>peak</span></div>
              <div><div className="adm-live-num">{e.assigned.length}/{e.slots}</div><span>builders</span></div>
            </div>

            <div className="adm-live-actions">
              {e.discord && <a className="btn btn-ghost" href="https://discord.com/invite/NG5jGQTEM" target="_blank" rel="noopener noreferrer">Open Discord stage ↗</a>}
              {!isLive && <button className="btn btn-spark" onClick={() => advanceEvent(e.id, 'live')}>Go live <Arrow /></button>}
              {isLive && <button className="btn btn-ghost adm-end" onClick={() => advanceEvent(e.id, 'completed')}>End event</button>}
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ============================================================ STATS */
function AdminStats({ data }) {
  const { events, subs } = data;
  const done = events.filter(e => ['completed','archived'].includes(e.stage));
  const totalAttend = done.reduce((a, e) => a + (e.attendance || 0), 0);
  const approved = subs.filter(s => s.status === 'approved').length;
  const ratio = subs.length ? Math.round((approved / subs.length) * 100) : 0;
  // weekly engagement trend (seed)
  const weeks = [
    { w: 'W1', v: 62 }, { w: 'W2', v: 78 }, { w: 'W3', v: 71 },
    { w: 'W4', v: 94 }, { w: 'W5', v: 86 }, { w: 'W6', v: 112 },
  ];
  const max = Math.max(...weeks.map(w => w.v));

  return (
    <div className="adm-grid-fade">
      <div className="adm-stat-row">
        <StatCard label="Total attendance" value={totalAttend} accent="var(--green)" sub="across completed" />
        <StatCard label="Events run" value={done.length} accent="var(--purple)" sub="completed + archived" />
        <StatCard label="Approval rate" value={ratio} suffix="%" accent="var(--warning)" sub="submission → lineup" />
        <StatCard label="Avg / event" value={done.length ? Math.round(totalAttend / done.length) : 0} accent="#2CC7A8" sub="attendance" />
      </div>

      <div className="adm-two-col">
        <div className="card adm-panel">
          <div className="adm-panel-head"><h3>Weekly engagement</h3><span className="stamp green">motionorr</span></div>
          <div className="adm-bars">
            {weeks.map(w => (
              <div key={w.w} className="adm-bar-col">
                <div className="adm-bar" style={{ height: `${(w.v / max) * 100}%` }}><span>{w.v}</span></div>
                <div className="adm-bar-label">{w.w}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card adm-panel">
          <div className="adm-panel-head"><h3>Submission funnel</h3></div>
          {[
            { k: 'Submitted', n: subs.length, c: 'var(--purple)' },
            { k: 'Approved', n: approved, c: 'var(--green)' },
            { k: 'On hold', n: subs.filter(s => s.status==='hold').length, c: 'var(--warning)' },
            { k: 'Rejected', n: subs.filter(s => s.status==='rejected').length, c: 'var(--danger)' },
          ].map(row => (
            <div key={row.k} className="adm-funnel-row">
              <span className="adm-funnel-k">{row.k}</span>
              <div className="adm-funnel-bar"><div style={{ width: `${(row.n / subs.length) * 100}%`, background: row.c }}></div></div>
              <strong>{row.n}</strong>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* Panels are consumed by AdminApp (defined in AdminShell.jsx). */