const CATEGORY_OPTIONS = [
  { value: 'pathway', label: 'Pathway' }, { value: 'imc', label: 'IMC' }, { value: 'hybrid', label: 'Hybrid' },
];
const CAT_PALETTE = ['var(--rose-500)', 'var(--gold-500)', 'var(--teal-500)', 'var(--violet-500)', 'var(--amber-500)', 'var(--orange-500)'];
const catColorMap = { pathway: 'var(--orange-600)', imc: 'var(--violet-500)', hybrid: 'var(--teal-500)' };

function registerCategory(opt) {
  if (!CATEGORY_OPTIONS.some((o) => o.value === opt.value)) {
    CATEGORY_OPTIONS.push(opt);
    if (!catColorMap[opt.value]) catColorMap[opt.value] = CAT_PALETTE[CATEGORY_OPTIONS.length % CAT_PALETTE.length];
  }
}

function emptyEvent() {
  return {
    id: 'new-' + Date.now(), title: '', status: 'draft', venue: 'The Upper Deck Sports Event Center', photo: null,
    description: '', scheduledLaunch: { enabled: false, datetime: '' }, faqs: [{ q: '', a: '' }], subEvents: [],
  };
}

function FaqsEditor({ faqs, onChange }) {
  const { Input, Button } = window.TheUpperDeckDesignSystem_4d3294;
  function update(i, key, val) { onChange(faqs.map((f, idx) => (idx === i ? { ...f, [key]: val } : f))); }
  function add() { onChange([...faqs, { q: '', a: '' }]); }
  function remove(i) { onChange(faqs.filter((_, idx) => idx !== i)); }
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {faqs.map((f, i) => (
        <div key={i} style={{ border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', padding: 12, display: 'flex', flexDirection: 'column', gap: 8, position: 'relative' }}>
          {faqs.length > 1 && <button type="button" onClick={() => remove(i)} style={{ position: 'absolute', top: 6, right: 6, border: 'none', background: 'none', color: 'var(--text-muted)', cursor: 'pointer', fontSize: 16, lineHeight: 1 }}>×</button>}
          <Input label={'Question ' + (i + 1)} value={f.q} onChange={(v) => update(i, 'q', v)} required />
          <div>
            <div style={{ fontSize: 'var(--text-sm)', fontWeight: 600, marginBottom: 6 }}>Answer <span style={{ color: 'var(--brand-primary)' }}>*</span></div>
            <textarea value={f.a} onChange={(e) => update(i, 'a', e.target.value)} rows={2} required style={{ width: '100%', boxSizing: 'border-box', padding: 10, borderRadius: 'var(--radius-md)', border: '1px solid var(--border-default)', fontFamily: 'var(--font-body)', fontSize: 'var(--text-sm)', resize: 'vertical' }} />
          </div>
        </div>
      ))}
      <Button type="button" variant="secondary" onClick={add}>+ Add FAQ</Button>
    </div>
  );
}

function EventFormDialog({ open, initial, onClose, onSave }) {
  const { Button, Input, Switch } = window.TheUpperDeckDesignSystem_4d3294;
  const { CustomDatePicker, WideUploadBox, FormPanel } = window.UdUI;
  const [f, setF] = React.useState(initial || emptyEvent());
  const [saving, setSaving] = React.useState(false);
  React.useEffect(() => { if (open) setF(initial || emptyEvent()); }, [open, initial]);
  if (!open) return null;
  function set(k, v) { setF((s) => ({ ...s, [k]: v })); }
  async function submit() { setSaving(true); await onSave(f); setSaving(false); }

  return ReactDOM.createPortal(
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(8,21,27,0.6)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000, padding: 24 }}>
      <div className="ud-modal" onClick={(e) => e.stopPropagation()} style={{ width: 'min(760px, 94vw)', maxHeight: '90vh', overflowY: 'auto', position: 'relative', background: 'white', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)', animation: 'udScaleIn 200ms var(--ease-standard) both' }}>
        <button onClick={onClose} style={{ position: 'absolute', top: 20, right: 24, width: 32, height: 32, borderRadius: '50%', border: 'none', background: 'var(--bg-sunken)', color: 'var(--text-primary)', fontSize: 18, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>×</button>
        <div style={{ padding: '28px 32px 20px', borderBottom: '1px solid var(--border-default)' }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-2xl)', margin: '0 0 4px' }}>{initial ? 'Update event' : 'Create event'}</h2>
          <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-wide)' }}>Event details</div>
        </div>

        <div style={{ padding: '24px 32px 0' }}>
          <WideUploadBox label="Cover image" hint="Recommended 1280×720 · click to upload" value={f.photo} onChange={(v) => set('photo', v)} />
        </div>

        <div style={{ padding: '24px 32px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <FormPanel title="Primary details">
              <Input label="Event title" value={f.title} onChange={(v) => set('title', v)} required />
              <div>
                <div style={{ fontSize: 'var(--text-sm)', fontWeight: 600, marginBottom: 6 }}>Description</div>
                <textarea value={f.description} onChange={(e) => set('description', e.target.value)} rows={4} style={{ width: '100%', boxSizing: 'border-box', padding: 10, borderRadius: 'var(--radius-md)', border: '1px solid var(--border-default)', fontFamily: 'var(--font-body)', fontSize: 'var(--text-sm)', resize: 'vertical' }} />
              </div>
              <Input label="Venue (default for sub-events)" value={f.venue} onChange={(v) => set('venue', v)} />
              <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>Dates, coaches, capacity, pricing, and refund policy are set per sub-event, on the event details page.</div>
            </FormPanel>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <FormPanel title="Status" toggle={<Switch checked={f.status === 'published'} onChange={(c) => set('status', c ? 'published' : 'draft')} label={f.status === 'published' ? 'Published' : 'Draft'} />}>
              <div style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>Controls whether this event is visible to attendees.</div>
            </FormPanel>

            <FormPanel title="Scheduled launch" toggle={<Switch checked={f.scheduledLaunch.enabled} onChange={(c) => set('scheduledLaunch', { ...f.scheduledLaunch, enabled: c })} label="On" />}>
              <div style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>Auto-publish this event at:</div>
              <CustomDatePicker value={f.scheduledLaunch.datetime} onChange={(v) => set('scheduledLaunch', { ...f.scheduledLaunch, datetime: v })} placeholder="Pick launch date" />
            </FormPanel>

            <FormPanel title="Frequently asked questions">
              <FaqsEditor faqs={f.faqs} onChange={(v) => set('faqs', v)} />
            </FormPanel>
          </div>
        </div>

        <div style={{ padding: '16px 32px 28px', display: 'flex', justifyContent: 'flex-end', gap: 12, borderTop: '1px solid var(--border-default)' }}>
          <Button variant="secondary" onClick={onClose}>Cancel</Button>
          <Button onClick={submit} disabled={saving}>{saving ? 'Saving…' : (initial ? 'Update event' : 'Save event')}</Button>
        </div>
      </div>
    </div>, document.body
  );
}

function EventsScreen({ onOpenEvent, adminId }) {
  const { Badge, Button, Tag } = window.TheUpperDeckDesignSystem_4d3294;
  const [events, setEvents] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [expanded, setExpanded] = React.useState({});
  const [dialog, setDialog] = React.useState(null);

  function reload() {
    setLoading(true);
    window.fetchMainEventsLive().then((data) => { setEvents(data); setLoading(false); });
  }
  React.useEffect(() => { reload(); }, []);

  async function save(f) {
    await window.saveMainEventLive(f, adminId);
    setDialog(null);
    reload();
  }
  async function deleteEvent(id) {
    if (!window.confirm('Delete this event and all its sub-events? This cannot be undone.')) return;
    await window.deleteMainEventLive(id);
    reload();
  }
  async function duplicateEvent(id) {
    try {
      await window.duplicateMainEventLive(id, adminId);
    } catch (e) {
      window.alert('Could not duplicate event: ' + e.message);
    } finally {
      reload();
    }
  }

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
        <div style={{ color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>{events.length} main events · {events.reduce((s, e) => s + e.subEvents.length, 0)} sub-events</div>
        <Button onClick={() => setDialog({ editing: null })}>+ Create event</Button>
      </div>
      <div style={{ background: 'white', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', overflowX: 'auto' }}>
        {loading && <div style={{ padding: 32, textAlign: 'center', color: 'var(--text-muted)' }}>Loading…</div>}
        {!loading && <table style={{ width: '100%', minWidth: 680, borderCollapse: 'collapse', fontSize: 'var(--text-sm)' }}>
          <thead><tr style={{ textAlign: 'left', background: 'var(--bg-sunken)', color: 'var(--text-muted)', fontSize: 'var(--text-xs)', textTransform: 'uppercase' }}>
            <th style={{ padding: '12px 16px' }}>Event</th><th>Date</th><th>Venue</th><th>Status</th><th></th>
          </tr></thead>
          <tbody>
            {events.map((e) => (
              <React.Fragment key={e.id}>
                <tr className="ud-row" style={{ borderTop: '1px solid var(--border-default)', cursor: e.subEvents.length > 0 ? 'pointer' : 'default' }} onClick={() => e.subEvents.length > 0 && setExpanded((x) => ({ ...x, [e.id]: !x[e.id] }))}>
                  <td style={{ padding: '14px 16px', fontWeight: 600 }}>
                    {e.subEvents.length > 0 && <span style={{ marginRight: 8, display: 'inline-block', width: 14, color: 'var(--text-muted)' }}>{expanded[e.id] ? '▾' : '▸'}</span>}
                    {e.title}
                  </td>
                  <td>{e.dateRange || 'No sub-events scheduled'}</td>
                  <td style={{ color: 'var(--text-secondary)' }}>{e.venue}</td>
                  <td><Badge tone={e.status === 'published' ? 'success' : e.status === 'draft' ? 'warning' : 'default'}>{e.status}</Badge></td>
                  <td style={{ textAlign: 'right', paddingRight: 16, whiteSpace: 'nowrap' }}>
                    <div style={{ display: 'inline-flex', gap: 8 }}>
                      <window.UdUI.Btn size="sm" variant="secondary" onClick={(ev) => { ev.stopPropagation(); onOpenEvent(e.id); }}>View</window.UdUI.Btn>
                      <window.UdUI.Btn size="sm" variant="secondary" onClick={(ev) => { ev.stopPropagation(); setDialog({ editing: e }); }}>Edit</window.UdUI.Btn>
                      <window.UdUI.Btn size="sm" variant="secondary" onClick={(ev) => { ev.stopPropagation(); duplicateEvent(e.id); }}>Duplicate</window.UdUI.Btn>
                      <window.UdUI.Btn size="sm" variant="danger" onClick={(ev) => { ev.stopPropagation(); deleteEvent(e.id); }}>Delete</window.UdUI.Btn>
                    </div>
                  </td>
                </tr>
                {expanded[e.id] && e.subEvents.map((s) => (
                  <tr key={s.id} style={{ borderTop: '1px solid var(--border-default)', background: 'var(--bg-sunken)' }}>
                    <td style={{ padding: '10px 16px 10px 42px', color: 'var(--text-secondary)' }}>{s.num} · {s.title} <Tag>{s.category}</Tag></td>
                    <td style={{ color: 'var(--text-secondary)' }}>{s.date}</td>
                    <td style={{ color: 'var(--text-muted)' }}>{e.venue}</td>
                    <td><Badge tone={s.status === 'published' ? 'success' : 'warning'}>{s.status}</Badge></td>
                    <td style={{ textAlign: 'right', paddingRight: 16 }}><window.UdUI.Btn size="sm" variant="secondary" onClick={(ev) => { ev.stopPropagation(); onOpenEvent(e.id); }}>Open</window.UdUI.Btn></td>
                  </tr>
                ))}
              </React.Fragment>
            ))}
            {events.length === 0 && <tr><td colSpan={5} style={{ padding: 16, color: 'var(--text-muted)' }}>No events yet.</td></tr>}
          </tbody>
        </table>}
      </div>
      <EventFormDialog open={!!dialog} initial={dialog ? dialog.editing : null} onClose={() => setDialog(null)} onSave={save} />
    </div>
  );
}

window.EventsScreen = EventsScreen;
window.emptyEvent = emptyEvent;
window.CATEGORY_OPTIONS = CATEGORY_OPTIONS;
window.registerCategory = registerCategory;
window.catColorMap = catColorMap;
window.EventFormDialog = EventFormDialog;