// RosterSection.jsx — CRUD for team roster. Backed by apps-script/roster.

const MASCOT_OPTIONS = [
  'pig.svg',
  'pig-aiming-to-the-right.svg',
  'flame.svg',
  'fire-scared.svg',
  'ufo.svg',
  'ufo-tractorbeam.svg',
  'robot-monkey.svg',
  'robot-cat-fish.svg',
];

const COLOR_OPTIONS = [
  ['var(--wbbq-flame)', 'Flame'],
  ['var(--wbbq-blue)',  'Blue'],
  ['var(--wbbq-slime)', 'Slime'],
  ['var(--wbbq-blood)', 'Blood'],
  ['var(--wbbq-bone)',  'Bone'],
];

const RosterSection = ({ onBanner }) => {
  const store = useRosterStore();
  const [editing, setEditing] = useState(null);

  return (
    <>
      <PageHero eyebrow="Admin · Roster" title={<>The <span style={{ color: 'var(--wbbq-flame)' }}>Crew.</span></>} subtitle="Edits land on the Team page after refresh." mascot="pig.svg" />
      <div style={{ marginTop: 28 }}>
        <StoreStatusBar
          store={store}
          label="Roster"
          onRefresh={() => window.RosterStore.refresh()}
        />
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20, flexWrap: 'wrap', gap: 12 }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 28, color: 'var(--wbbq-bone)', margin: 0, letterSpacing: '0.02em' }}>Members ({store.roster.length})</h2>
        <button onClick={() => setEditing({ _new: true, id: '', name: '', role: '', mascot: 'pig.svg', blurb: '', stats: [], color: 'var(--wbbq-flame)' })} className="btn btn-primary" disabled={!store.connected} style={{ fontSize: 13, padding: '12px 20px', opacity: store.connected ? 1 : 0.4 }}>
          + Add Member
        </button>
      </div>

      <div style={{ display: 'grid', gap: 12 }}>
        {store.roster.length === 0 && <div style={{ color: 'var(--fg3)', fontSize: 14 }}>No members yet.</div>}
        {store.roster.map(m => (
          <MemberRow key={m.id} m={m} onEdit={() => setEditing({ ...m })} connected={store.connected} />
        ))}
      </div>

      {editing && (
        <MemberEditor
          m={editing}
          isNew={editing._new}
          onClose={() => setEditing(null)}
          onSaved={(msg) => { setEditing(null); onBanner({ kind: 'ok', msg }); }}
          onError={(msg) => onBanner({ kind: 'err', msg })}
        />
      )}
    </>
  );
};
window.RosterSection = RosterSection;

const MemberRow = ({ m, onEdit, connected }) => (
  <div onClick={connected ? onEdit : undefined} style={{
    display: 'grid', gridTemplateColumns: '80px 1fr auto', gap: 16, alignItems: 'center',
    padding: '12px 18px',
    background: 'var(--wbbq-ink)', border: '2px solid var(--border)',
    cursor: connected ? 'pointer' : 'default',
  }}>
    <div style={{ width: 56, height: 56, display: 'grid', placeItems: 'center', background: 'var(--wbbq-black)', border: '2px solid ' + (m.color || 'var(--border)') }}>
      <img src={`${window.ASSETS}mascots/${m.mascot}`} alt="" style={{ maxHeight: '80%' }} />
    </div>
    <div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, color: 'var(--wbbq-bone)' }}>{m.name || '(unnamed)'}</div>
      <div style={{ fontSize: 12, color: 'var(--fg3)' }}>{m.role}</div>
    </div>
    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg3)' }}>{m.id}</div>
  </div>
);

const MemberEditor = ({ m, isNew, onClose, onSaved, onError }) => {
  const [form, setForm] = useState({ ...m, stats: m.stats || [] });
  const [saving, setSaving] = useState(false);
  const set = (k, v) => setForm({ ...form, [k]: v });

  const save = async () => {
    setSaving(true);
    try {
      const payload = { ...form };
      delete payload._new;
      if (isNew) {
        await window.RosterStore.add(payload);
        onSaved('Member added.');
      } else {
        await window.RosterStore.update(payload);
        onSaved('Member saved.');
      }
    } catch (e) {
      onError(String(e.message || e));
    } finally {
      setSaving(false);
    }
  };
  const remove = async () => {
    if (!confirm('Delete this member?')) return;
    setSaving(true);
    try {
      await window.RosterStore.remove(form.id);
      onSaved('Member deleted.');
    } catch (e) {
      onError(String(e.message || e));
    } finally {
      setSaving(false);
    }
  };

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 150,
      background: 'rgba(11,11,12,0.85)',
      display: 'grid', placeItems: 'center', padding: 20, overflowY: 'auto',
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: 'var(--wbbq-ink)', border: '3px solid var(--wbbq-flame)',
        boxShadow: '10px 10px 0 var(--wbbq-blue)',
        padding: 28, width: '100%', maxWidth: 640, maxHeight: '90vh', overflowY: 'auto',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--wbbq-flame)', margin: 0 }}>
            {isNew ? 'NEW MEMBER' : 'EDIT MEMBER'}
          </h3>
          <button onClick={onClose} style={{ background: 'transparent', border: 0, color: 'var(--fg1)', fontSize: 24, cursor: 'pointer' }}>✕</button>
        </div>

        <div style={{ display: 'grid', gap: 14 }}>
          <div className="editor-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <AdminInput label="ID (short, stable)" value={form.id} onChange={(v) => set('id', v)} placeholder="adam" />
            <AdminInput label="Name" value={form.name} onChange={(v) => set('name', v)} placeholder="ADAM SULIK" />
          </div>
          <AdminInput label="Role" value={form.role} onChange={(v) => set('role', v)} placeholder="Pitmaster / Team Founder" />
          <div>
            <AdminLabel>Mascot</AdminLabel>
            <select value={form.mascot} onChange={(e) => set('mascot', e.target.value)} style={editorInputStyle()}>
              {MASCOT_OPTIONS.map(opt => (
                <option key={opt} value={opt}>{opt}</option>
              ))}
            </select>
          </div>
          <div>
            <AdminLabel>Color</AdminLabel>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {COLOR_OPTIONS.map(([val, label]) => (
                <button type="button" key={val} onClick={() => set('color', val)} style={{
                  padding: '8px 12px',
                  background: form.color === val ? val : 'transparent',
                  color: form.color === val ? 'var(--wbbq-black)' : val,
                  border: '2px solid ' + val,
                  fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: '0.08em',
                  cursor: 'pointer',
                }}>{label}</button>
              ))}
            </div>
          </div>
          <div>
            <AdminLabel>Blurb</AdminLabel>
            <textarea rows={3} value={form.blurb} onChange={(e) => set('blurb', e.target.value)} style={editorInputStyle()} />
          </div>

          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
              <AdminLabel>Stats (key / value pairs)</AdminLabel>
              <button type="button" onClick={() => set('stats', [...(form.stats || []), ['', '']])} style={{
                background: 'transparent', border: '2px solid var(--wbbq-slime)', color: 'var(--wbbq-slime)',
                fontFamily: 'var(--font-display)', fontSize: 10, padding: '4px 10px', letterSpacing: '0.1em', cursor: 'pointer',
              }}>+ ADD</button>
            </div>
            {(form.stats || []).map((s, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr auto', gap: 8, marginBottom: 6 }}>
                <input value={s[0] || ''} placeholder="Signature" onChange={(e) => {
                  const next = [...form.stats]; next[i] = [e.target.value, s[1]]; set('stats', next);
                }} style={editorInputStyle()} />
                <input value={s[1] || ''} placeholder="Pork Butt" onChange={(e) => {
                  const next = [...form.stats]; next[i] = [s[0], e.target.value]; set('stats', next);
                }} style={editorInputStyle()} />
                <button type="button" onClick={() => {
                  const next = [...form.stats]; next.splice(i, 1); set('stats', next);
                }} style={{ background: 'transparent', border: 0, color: 'var(--wbbq-blood)', cursor: 'pointer', fontSize: 18 }}>✕</button>
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', gap: 10, marginTop: 14, flexWrap: 'wrap' }}>
            <button onClick={save} disabled={saving} className="btn btn-primary" style={{ fontSize: 13, opacity: saving ? 0.6 : 1 }}>
              {saving ? 'Saving…' : (isNew ? 'Add Member →' : 'Save Changes →')}
            </button>
            {!isNew && <button onClick={remove} disabled={saving} className="btn" style={{ fontSize: 13, background: 'transparent', color: 'var(--wbbq-blood)', border: '2px solid var(--wbbq-blood)' }}>Delete</button>}
            <button onClick={onClose} className="btn btn-ghost" style={{ fontSize: 13 }}>Cancel</button>
          </div>
        </div>
      </div>
    </div>
  );
};
window.MemberEditor = MemberEditor;