// ─── Hot Seat Module ──────────────────────────────────────
var HS_CATEGORIES = ['movies', 'tv', 'music', 'internet', 'viral', 'meme'];
var HB_DIFFICULTY_PRESETS = [
  { label: '70 / 30', easy: 70, medium: 30 },
  { label: '50 / 50', easy: 50, medium: 50 },
  { label: '30 / 70', easy: 30, medium: 70 }
];

function hbMakeAcronym(line) {
  if (!line) return '';
  return line.trim().split(/\s+/).map(function(w) { return w[0] ? w[0].toUpperCase() : ''; }).join('');
}

function HotSeatModule(props) {
  var db = props.db, showToast = props.showToast, user = props.user;
  var hotseatCards = props.hotseatCards || {};
  var hotseatEditions = props.hotseatEditions || {};
  var tasteProfile = props.tasteProfile;
  var creators = props.creators || {};

  // Sub-mode: 'cards' or 'editions'
  var [subMode, setSubMode] = useState('cards');

  // ═══ CARDS SUB-MODE STATE ═══
  var [search, setSearch] = useState('');
  var [edFilter, setEdFilter] = useState(null);

  // ═══ EDITIONS SUB-MODE STATE ═══
  var [edSelSlug, setEdSelSlug] = useState(null);
  var [edEdit, setEdEdit] = useState(null);
  var [edSaving, setEdSaving] = useState(false);
  var [edDeleteConfirm, setEdDeleteConfirm] = useState(false);
  // Edition AI state
  var [edAiLoading, setEdAiLoading] = useState(false);
  var [edAiPlan, setEdAiPlan] = useState(null);
  var [edAiError, setEdAiError] = useState(null);
  var [edAiRefineText, setEdAiRefineText] = useState('');
  var [edAiRefining, setEdAiRefining] = useState(false);

  var [isMobile, setIsMobile] = useState(window.innerWidth < 768);
  useEffect(function(){
    function onResize(){setIsMobile(window.innerWidth < 768)}
    window.addEventListener('resize', onResize);
    return function(){window.removeEventListener('resize', onResize)};
  },[]);

  // ═══════════════════════════════════════════════════════
  // CARDS SUB-MODE LOGIC (cross-edition browser)
  // ═══════════════════════════════════════════════════════

  var allCards = useMemo(function() {
    if (!hotseatEditions) return [];
    var result = [];
    Object.keys(hotseatEditions).forEach(function(slug) {
      var ed = hotseatEditions[slug];
      var cards = ed.cards || [];
      if (!Array.isArray(cards)) cards = Object.values(cards);
      cards.forEach(function(card) {
        result.push(Object.assign({}, card, {
          _edition: (ed.meta && ed.meta.name) || slug,
          _editionSlug: slug,
          _published: !!(ed.meta && ed.meta.published)
        }));
      });
    });
    return result;
  }, [hotseatEditions]);

  var stats = useMemo(function() {
    var total = allCards.length;
    var editions = {};
    var difficulties = { easy: 0, medium: 0 };
    allCards.forEach(function(c) {
      var ed = c._edition;
      editions[ed] = (editions[ed] || 0) + 1;
      if (c.difficulty === 'medium') difficulties.medium++;
      else difficulties.easy++;
    });
    return { total: total, editions: editions, difficulties: difficulties };
  }, [allCards]);

  var cardList = useMemo(function() {
    var arr = allCards.slice();
    if (edFilter) {
      arr = arr.filter(function(c) { return c._editionSlug === edFilter; });
    }
    if (search) {
      var q = search.toLowerCase();
      arr = arr.filter(function(c) {
        return (c.line || '').toLowerCase().indexOf(q) > -1 ||
               (c.source || '').toLowerCase().indexOf(q) > -1 ||
               (c._edition || '').toLowerCase().indexOf(q) > -1;
      });
    }
    return arr;
  }, [allCards, search, edFilter]);

  function getToken() { return firebase.auth().currentUser.getIdToken(); }

  // ═══════════════════════════════════════════════════════
  // EDITIONS SUB-MODE LOGIC
  // ═══════════════════════════════════════════════════════

  var editionsList = useMemo(function() {
    return Object.keys(hotseatEditions).map(function(slug) {
      var ed = hotseatEditions[slug];
      var cards = ed.cards ? (Array.isArray(ed.cards) ? ed.cards : Object.values(ed.cards)) : [];
      return { slug: slug, meta: ed.meta || {}, cards: cards };
    });
  }, [hotseatEditions]);

  function edSelectEdition(slug) {
    var ed = hotseatEditions[slug];
    if (!ed) return;
    var cards = ed.cards ? (Array.isArray(ed.cards) ? ed.cards.slice() : Object.values(ed.cards)) : [];
    cards.sort(function(a, b) { return (a.order || 0) - (b.order || 0); });
    setEdSelSlug(slug);
    setEdEdit({
      meta: Object.assign({
        name: '', slug: '', theme: '', display_mode: 'line',
        card_count: 15, difficulty_split: { easy: 50, medium: 50 },
        landing: { title: '', instructions: 'ONE PERSON CAN\'T SEE THE ANSWER\nEVERYONE ELSE CAN SHOUT CLUES\nDON\'T SAY THE WORDS\nTAP WHEN THEY GET IT', cta: 'PLAY' },
        published: false
      }, ed.meta || {}),
      cards: cards
    });
    setEdDeleteConfirm(false);
    setEdAiPlan(null);
    setEdAiError(null);
    setEdAiRefineText('');
  }

  function edNewEdition() {
    setEdSelSlug('__new__');
    setEdEdit({
      meta: {
        name: '', slug: '', theme: '', display_mode: 'line',
        card_count: 15, difficulty_split: { easy: 50, medium: 50 },
        landing: { title: '', instructions: 'ONE PERSON CAN\'T SEE THE ANSWER\nEVERYONE ELSE CAN SHOUT CLUES\nDON\'T SAY THE WORDS\nTAP WHEN THEY GET IT', cta: 'PLAY' },
        published: false
      },
      cards: []
    });
    setEdDeleteConfirm(false);
    setEdAiPlan(null);
  }

  function edUpdateMeta(field, value) {
    setEdEdit(function(prev) {
      if (!prev) return prev;
      var newMeta = Object.assign({}, prev.meta);
      if (field === 'name') {
        newMeta.name = value;
        // Auto-generate slug if creating new
        if (edSelSlug === '__new__' || !newMeta.slug) {
          newMeta.slug = generateId(value);
        }
        // Auto-fill landing title
        if (!newMeta.landing.title || newMeta.landing.title === 'THE HOTSEAT ' + (prev.meta.name || '').toUpperCase() + ' EDITION') {
          newMeta.landing = Object.assign({}, newMeta.landing, { title: 'THE HOTSEAT ' + value.toUpperCase() + ' EDITION' });
        }
      } else if (field.indexOf('landing.') === 0) {
        var lf = field.split('.')[1];
        newMeta.landing = Object.assign({}, newMeta.landing || {});
        newMeta.landing[lf] = value;
      } else {
        newMeta[field] = value;
      }
      return { meta: newMeta, cards: prev.cards };
    });
  }

  function edUpdateCard(index, field, value) {
    setEdEdit(function(prev) {
      if (!prev) return prev;
      var newCards = prev.cards.slice();
      newCards[index] = Object.assign({}, newCards[index]);
      newCards[index][field] = value;
      if (field === 'line') {
        newCards[index].acronym = hbMakeAcronym(value);
      }
      return { meta: prev.meta, cards: newCards };
    });
  }

  function edAddCard() {
    setEdEdit(function(prev) {
      if (!prev) return prev;
      var newCards = prev.cards.slice();
      newCards.push({ line: '', source: '', source_detail: '', difficulty: 'easy', acronym: '', order: newCards.length });
      return { meta: prev.meta, cards: newCards };
    });
  }

  function edRemoveCard(index) {
    setEdEdit(function(prev) {
      if (!prev) return prev;
      var newCards = prev.cards.slice();
      newCards.splice(index, 1);
      newCards.forEach(function(c, i) { c.order = i; });
      return { meta: prev.meta, cards: newCards };
    });
  }

  function edMoveCard(index, dir) {
    setEdEdit(function(prev) {
      if (!prev) return prev;
      var newCards = prev.cards.slice();
      var target = index + dir;
      if (target < 0 || target >= newCards.length) return prev;
      var tmp = newCards[index];
      newCards[index] = newCards[target];
      newCards[target] = tmp;
      newCards.forEach(function(c, i) { c.order = i; });
      return { meta: prev.meta, cards: newCards };
    });
  }

  function edToggleDifficulty(index) {
    setEdEdit(function(prev) {
      if (!prev) return prev;
      var newCards = prev.cards.slice();
      newCards[index] = Object.assign({}, newCards[index]);
      newCards[index].difficulty = newCards[index].difficulty === 'easy' ? 'medium' : 'easy';
      return { meta: prev.meta, cards: newCards };
    });
  }

  function edToggleHidden(index) {
    setEdEdit(function(prev) {
      if (!prev) return prev;
      var newCards = prev.cards.slice();
      newCards[index] = Object.assign({}, newCards[index]);
      newCards[index].hidden = !newCards[index].hidden;
      return { meta: prev.meta, cards: newCards };
    });
  }

  function edSave(publish) {
    if (!edEdit) return;
    var meta = Object.assign({}, edEdit.meta);
    var slug = meta.slug;

    if (!slug) { showToast('SLUG REQUIRED'); return; }
    if (!meta.name) { showToast('NAME REQUIRED'); return; }

    // Check slug uniqueness for new editions
    if (edSelSlug === '__new__' && hotseatEditions[slug]) {
      showToast('SLUG ALREADY EXISTS'); return;
    }

    if (publish) {
      var visibleCards = edEdit.cards.filter(function(c) { return !c.hidden; });
      if (visibleCards.length < 8) { showToast('NEED AT LEAST 8 VISIBLE CARDS'); return; }
      var invalid = visibleCards.some(function(c) { return !c.line || !c.source; });
      if (invalid) { showToast('ALL VISIBLE CARDS NEED LINE + SOURCE'); return; }
      if (!meta.landing || !meta.landing.title) { showToast('LANDING TITLE REQUIRED'); return; }
      meta.published = true;
      meta.published_at = new Date().toISOString();
    }

    if (!meta.created_at) {
      meta.created_at = new Date().toISOString();
      meta.created_by = user.uid;
    }

    meta.card_count = edEdit.cards.length;

    setEdSaving(true);
    var data = { meta: meta, cards: edEdit.cards };

    db.ref('hotseat_editions/' + slug).set(data).then(function() {
      setEdSaving(false);
      setEdSelSlug(slug);
      showToast(publish ? 'PUBLISHED' : 'SAVED');
    }).catch(function(err) {
      setEdSaving(false);
      showToast('SAVE FAILED: ' + err.message);
    });
  }

  function edUnpublish() {
    if (!edEdit || !edEdit.meta.slug) return;
    var slug = edEdit.meta.slug;
    setEdSaving(true);
    var updates = {};
    updates['hotseat_editions/' + slug + '/meta/published'] = false;
    updates['hotseat_editions/' + slug + '/meta/published_at'] = null;
    db.ref().update(updates).then(function() {
      setEdSaving(false);
      setEdEdit(function(prev) {
        var next = Object.assign({}, prev);
        next.meta = Object.assign({}, next.meta, { published: false, published_at: null });
        return next;
      });
      showToast('UNPUBLISHED');
    }).catch(function(err) {
      setEdSaving(false);
      showToast('UNPUBLISH FAILED: ' + err.message);
    });
  }

  function edDelete() {
    if (!edSelSlug || edSelSlug === '__new__') return;
    db.ref('hotseat_editions/' + edSelSlug).remove().then(function() {
      setEdSelSlug(null);
      setEdEdit(null);
      setEdDeleteConfirm(false);
      showToast('EDITION DELETED');
    });
  }

  function edCopyLink() {
    if (!edEdit || !edEdit.meta.slug) return;
    navigator.clipboard.writeText('https://lineconic.live/' + edEdit.meta.slug).then(function() {
      showToast('LINK COPIED');
    });
  }

  // ─── Edition AI Generation ────────────────────────────
  function edAiGenerate() {
    if (!edEdit || !edEdit.meta.theme) { showToast('THEME REQUIRED FOR AI'); return; }
    setEdAiLoading(true); setEdAiError(null); setEdAiPlan(null); setEdAiRefineText('');

    getToken().then(function(token) {
      return aiFetch('/api/ai/generate-hotseat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        body: JSON.stringify({
          brief: edEdit.meta.theme,
          count: edEdit.meta.card_count || 15,
          edition_mode: true,
          theme: edEdit.meta.theme,
          display_mode: edEdit.meta.display_mode,
          difficulty_split: edEdit.meta.difficulty_split
        })
      }, 55000);
    }).then(function(res) {
      return res.json();
    }).then(function(data) {
      if (!data.ok || !data.plan) throw new Error('Invalid response');
      setEdAiPlan(data.plan);
      setEdAiLoading(false);
    }).catch(function(err) {
      setEdAiError(formatAiError(err));
      setEdAiLoading(false);
    });
  }

  function edAiRefine() {
    if (!edAiRefineText.trim() || !edAiPlan) return;
    setEdAiRefining(true); setEdAiError(null);

    getToken().then(function(token) {
      return aiFetch('/api/ai/generate-hotseat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        body: JSON.stringify({
          brief: edEdit.meta.theme,
          count: edEdit.meta.card_count || 15,
          edition_mode: true,
          theme: edEdit.meta.theme,
          display_mode: edEdit.meta.display_mode,
          difficulty_split: edEdit.meta.difficulty_split,
          currentPlan: edAiPlan,
          instruction: edAiRefineText
        })
      }, 55000);
    }).then(function(res) {
      return res.json();
    }).then(function(data) {
      if (!data.ok || !data.plan) throw new Error('Invalid response');
      setEdAiPlan(data.plan);
      setEdAiRefining(false);
      setEdAiRefineText('');
    }).catch(function(err) {
      setEdAiError(formatAiError(err));
      setEdAiRefining(false);
    });
  }

  function edAiAcceptCard(item) {
    setEdEdit(function(prev) {
      if (!prev) return prev;
      var newCards = prev.cards.slice();
      newCards.push({
        line: (item.line || '').toUpperCase(),
        source: (item.source || '').toUpperCase(),
        source_detail: (item.source_detail || '').toUpperCase(),
        difficulty: item.difficulty || 'easy',
        acronym: item.acronym || hbMakeAcronym(item.line),
        order: newCards.length
      });
      return { meta: prev.meta, cards: newCards };
    });
    showToast('ADDED: ' + (item.line || '').substring(0, 30));
  }

  function edAiAcceptAll() {
    if (!edAiPlan || !edAiPlan.length) return;
    setEdEdit(function(prev) {
      if (!prev) return prev;
      var newCards = prev.cards.slice();
      edAiPlan.forEach(function(item) {
        newCards.push({
          line: (item.line || '').toUpperCase(),
          source: (item.source || '').toUpperCase(),
          source_detail: (item.source_detail || '').toUpperCase(),
          difficulty: item.difficulty || 'easy',
          acronym: item.acronym || hbMakeAcronym(item.line),
          order: newCards.length
        });
      });
      return { meta: prev.meta, cards: newCards };
    });
    showToast('ADDED ' + edAiPlan.length + ' CARDS');
    setEdAiPlan(null);
  }

  function edAiRejectCard(index) {
    setEdAiPlan(function(prev) {
      var next = prev.slice();
      next.splice(index, 1);
      return next;
    });
  }

  // ─── Edition stats bar ────────────────────────────────
  var edStats = useMemo(function() {
    if (!edEdit) return null;
    var easy = 0, medium = 0, hidden = 0;
    edEdit.cards.forEach(function(c) {
      if (c.hidden) hidden++;
      if (c.difficulty === 'medium') medium++;
      else easy++;
    });
    var total = edEdit.cards.length;
    var visible = total - hidden;
    var vc = edEdit.meta.visible_count || 0;
    var dealt = vc > 0 ? Math.min(vc, visible) : visible;
    return { easy: easy, medium: medium, total: total, hidden: hidden, visible: visible, dealt: dealt };
  }, [edEdit]);

  // ═══════════════════════════════════════════════════════
  // RENDER
  // ═══════════════════════════════════════════════════════

  return (
    <div className="HS">
      {/* Sub-mode toggle */}
      <div className="HB-mode-toggle">
        <div className={'HB-mode-btn' + (subMode === 'cards' ? ' on' : '')} onClick={function(){setSubMode('cards')}}>CARDS</div>
        <div className={'HB-mode-btn' + (subMode === 'editions' ? ' on' : '')} onClick={function(){setSubMode('editions')}}>EDITIONS</div>
      </div>

      {subMode === 'cards' ? (
        /* ═══ CARDS MODE (cross-edition browser) ═══ */
        <div className="HS-panels" style={{display:'block'}}>
          <div className="HS-left" style={{maxWidth:'none',height:'100%',borderBottom:'none',borderRight:'none'}}>
            <div className="HS-list-head">
              <div className="HS-stats">
                <div className="HS-stat"><div className="HS-stat-val">{stats.total}</div><div className="HS-stat-label">TOTAL</div></div>
                {Object.keys(stats.editions).map(function(ed) {
                  return <div key={ed} className="HS-stat"><div className="HS-stat-val" style={{color:'var(--cyan)'}}>{stats.editions[ed]}</div><div className="HS-stat-label">{ed.toUpperCase()}</div></div>;
                })}
              </div>

              <input className="A-input" placeholder="SEARCH CARDS..." value={search} onChange={function(e){setSearch(e.target.value)}} style={{fontSize:11,textTransform:'uppercase',letterSpacing:1}} />

              <div className="SL-chips">
                <div className={'A-chip' + (!edFilter ? ' on' : '')} onClick={function(){setEdFilter(null)}}>ALL</div>
                {Object.keys(hotseatEditions).map(function(slug) {
                  var ed = hotseatEditions[slug];
                  var name = (ed.meta && ed.meta.name) || slug;
                  var count = stats.editions[name] || 0;
                  return <div key={slug} className={'A-chip' + (edFilter === slug ? ' on' : '')} onClick={function(){setEdFilter(edFilter === slug ? null : slug)}}>{name.toUpperCase()} ({count})</div>;
                })}
              </div>
            </div>

            <div className="HS-list-items">
              {cardList.map(function(card, i) {
                return (
                  <div key={card._editionSlug + '-' + i} className="HS-list-item" style={{cursor:'pointer'}} onClick={function(){setSubMode('editions');edSelectEdition(card._editionSlug)}}>
                    <div className="line">{card.line || '—'}</div>
                    <div className="meta">
                      <span>{card.source || ''}</span>
                      <span className="cat">{card._edition}</span>
                      {card.difficulty && <span style={{fontSize:8,padding:'1px 4px',border:'1px solid ' + (card.difficulty === 'medium' ? 'var(--gold)' : 'var(--cyan)'),color:card.difficulty === 'medium' ? 'var(--gold)' : 'var(--cyan)'}}>{card.difficulty.toUpperCase()}</span>}
                    </div>
                  </div>
                );
              })}
              {cardList.length === 0 && (
                <div style={{padding:20,textAlign:'center',color:'var(--text-dim)',fontSize:10,letterSpacing:1}}>NO CARDS</div>
              )}
            </div>
          </div>
        </div>
      ) : (
        /* ═══ EDITIONS MODE ═══ */
        <div className="HS-panels">
          {/* Left: Edition list */}
          <div className="HS-left" style={isMobile ? (edEdit ? {display:'none'} : {maxHeight:'none',borderBottom:'none'}) : undefined}>
            <div className="HS-list-head">
              <div className="HS-stats">
                <div className="HS-stat"><div className="HS-stat-val">{editionsList.length}</div><div className="HS-stat-label">EDITIONS</div></div>
                <div className="HS-stat"><div className="HS-stat-val" style={{color:'var(--cyan)'}}>{editionsList.filter(function(e){return e.meta.published}).length}</div><div className="HS-stat-label">PUBLISHED</div></div>
              </div>
              <div className="HS-list-actions">
                <button className="A-btn signal" style={{flex:1,fontSize:10,padding:'5px 8px'}} onClick={edNewEdition}>+ NEW EDITION</button>
              </div>
            </div>

            <div className="HS-list-items">
              {editionsList.map(function(ed) {
                return (
                  <div key={ed.slug} className={'HS-list-item' + (edSelSlug === ed.slug ? ' on' : '')} onClick={function(){edSelectEdition(ed.slug)}}>
                    <div className="line">{ed.meta.name || ed.slug}</div>
                    <div className="meta">
                      <span>/{ed.slug}</span>
                      <span className="cat">{ed.cards.length} cards</span>
                      <span style={{fontSize:8,padding:'1px 4px',border:'1px solid ' + (ed.meta.display_mode === 'acronym' ? 'var(--gold)' : 'var(--cyan)'),color:ed.meta.display_mode === 'acronym' ? 'var(--gold)' : 'var(--cyan)'}}>{(ed.meta.display_mode || 'line').toUpperCase()}</span>
                      {ed.meta.published ? <span style={{color:'var(--cyan)',fontSize:8}}>LIVE</span> : <span style={{color:'var(--text-dim)',fontSize:8}}>DRAFT</span>}
                    </div>
                  </div>
                );
              })}
              {editionsList.length === 0 && (
                <div style={{padding:20,textAlign:'center',color:'var(--text-dim)',fontSize:10,letterSpacing:1}}>NO EDITIONS YET</div>
              )}
            </div>
          </div>

          {/* Right: Edition editor */}
          <div className="HS-right" style={isMobile ? (edEdit ? {position:'fixed',inset:0,zIndex:200,background:'#000',overflow:'auto',padding:16} : {display:'none'}) : undefined}>
            {!edEdit ? (
              <div className="A-empty">
                <div className="icon">E</div>
                <div className="msg">SELECT OR CREATE AN EDITION</div>
              </div>
            ) : (
              <div>
                {isMobile && <button className="A-btn" style={{marginBottom:12}} onClick={function(){setEdEdit(null);setEdSelSlug(null)}}>← BACK</button>}

                {/* Stats bar */}
                {edStats && <div className="HB-stats-bar">
                  <span style={{color:'var(--cyan)'}}>{edStats.easy} EASY</span>
                  <span style={{color:'var(--gold)'}}>{edStats.medium} MEDIUM</span>
                  <span style={{color:'var(--text-dim)'}}>— {edStats.visible} VISIBLE / {edStats.total} TOTAL</span>
                  {edEdit.meta.visible_count > 0 && <span style={{color:'var(--signal)'}}>· DEALING {edStats.dealt}</span>}
                </div>}

                {/* Config section */}
                <div className="A-section">
                  <div className="A-section-head">CONFIG</div>
                  <div className="HB-config">
                    <div>
                      <label className="A-label">EDITION NAME</label>
                      <input className="A-input" value={edEdit.meta.name || ''} onChange={function(e){edUpdateMeta('name', e.target.value)}} placeholder="DRAG RACE" style={{textTransform:'uppercase'}} />
                    </div>
                    <div>
                      <label className="A-label">SLUG</label>
                      <input className="A-input" value={edEdit.meta.slug || ''} onChange={function(e){edUpdateMeta('slug', e.target.value.toLowerCase().replace(/[^a-z0-9-]/g,''))}} placeholder="drag-race" style={{fontFamily:'var(--mono)'}} />
                    </div>
                    <div style={{gridColumn:'1/-1'}}>
                      <label className="A-label">THEME (AI BRIEF)</label>
                      <textarea className="A-textarea" rows={2} value={edEdit.meta.theme || ''} onChange={function(e){edUpdateMeta('theme', e.target.value)}} placeholder="Iconic quotes from RuPaul's Drag Race" style={{fontSize:11}} />
                    </div>
                    <div>
                      <label className="A-label">DISPLAY MODE</label>
                      <div className="SL-chips">
                        <div className={'A-chip' + (edEdit.meta.display_mode === 'line' ? ' on' : '')} onClick={function(){edUpdateMeta('display_mode', 'line')}}>LINE</div>
                        <div className={'A-chip' + (edEdit.meta.display_mode === 'acronym' ? ' on' : '')} onClick={function(){edUpdateMeta('display_mode', 'acronym')}}>ACRONYM</div>
                      </div>
                    </div>
                    <div>
                      <label className="A-label">CARD COUNT</label>
                      <input className="A-input" type="number" min={10} max={30} value={edEdit.meta.card_count || 15} onChange={function(e){edUpdateMeta('card_count', Math.max(10, Math.min(30, parseInt(e.target.value) || 15)))}} style={{fontSize:11}} />
                    </div>
                    <div>
                      <label className="A-label">VISIBLE COUNT</label>
                      <input className="A-input" type="number" min={0} value={edEdit.meta.visible_count || ''} onChange={function(e){edUpdateMeta('visible_count', parseInt(e.target.value) || 0)}} placeholder="ALL" style={{fontSize:11}} />
                    </div>
                    <div style={{gridColumn:'1/-1'}}>
                      <label className="A-label">DIFFICULTY SPLIT (EASY / MEDIUM)</label>
                      <div className="SL-chips">
                        {HB_DIFFICULTY_PRESETS.map(function(p) {
                          var isOn = edEdit.meta.difficulty_split && edEdit.meta.difficulty_split.easy === p.easy;
                          return <div key={p.label} className={'A-chip' + (isOn ? ' on' : '')} onClick={function(){edUpdateMeta('difficulty_split', {easy: p.easy, medium: p.medium})}}>{p.label}</div>;
                        })}
                      </div>
                    </div>
                  </div>
                </div>

                {/* Cards section */}
                <div className="A-section">
                  <div className="A-section-head" style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                    <span>CARDS ({edEdit.cards.length})</span>
                    <div style={{display:'flex',gap:6}}>
                      <button className="A-btn" style={{fontSize:9,padding:'3px 8px'}} onClick={edAddCard}>+ ADD</button>
                      <button className="A-btn" style={{fontSize:9,padding:'3px 8px',background:'var(--gold)',color:'#000',fontWeight:700}} onClick={edAiGenerate} disabled={edAiLoading}>{edAiLoading ? 'GENERATING...' : 'AI GENERATE'}</button>
                    </div>
                  </div>

                  {edEdit.cards.map(function(card, i) {
                    return (
                      <div key={i} className={'HB-card-row' + (card.hidden ? ' HB-card-hidden' : '')}>
                        <div className="HB-card-num">{i + 1}</div>
                        <div className="HB-card-fields">
                          <input className="A-input" value={card.line || ''} onChange={function(e){edUpdateCard(i, 'line', e.target.value.toUpperCase())}} placeholder="LINE" style={{textTransform:'uppercase',fontSize:11,fontWeight:700}} />
                          <input className="A-input" value={card.source || ''} onChange={function(e){edUpdateCard(i, 'source', e.target.value.toUpperCase())}} placeholder="SOURCE" style={{textTransform:'uppercase',fontSize:10}} />
                          {edEdit.meta.display_mode === 'acronym' && card.acronym && (
                            <div style={{fontSize:9,color:'var(--gold)',letterSpacing:'.1em'}}>{card.acronym}</div>
                          )}
                        </div>
                        <div className="HB-card-actions">
                          <button className={'HB-hide-btn' + (card.hidden ? ' on' : '')} onClick={function(){edToggleHidden(i)}}>{card.hidden ? '○' : '●'}</button>
                          <div className={'HB-diff-badge' + (card.difficulty === 'medium' ? ' medium' : '')} onClick={function(){edToggleDifficulty(i)}}>{card.difficulty === 'medium' ? 'M' : 'E'}</div>
                          <button className="HB-move-btn" onClick={function(){edMoveCard(i, -1)}} disabled={i === 0}>↑</button>
                          <button className="HB-move-btn" onClick={function(){edMoveCard(i, 1)}} disabled={i === edEdit.cards.length - 1}>↓</button>
                          <button className="HB-del-btn" onClick={function(){edRemoveCard(i)}}>×</button>
                        </div>
                      </div>
                    );
                  })}

                  {edAiError && <div style={{color:'var(--signal)',fontSize:11,marginTop:8}}>ERROR: {edAiError}</div>}

                  {edAiPlan && edAiPlan.length > 0 && (
                    <div style={{marginTop:16,borderTop:'1px solid var(--border)',paddingTop:12}}>
                      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
                        <span className="A-label" style={{margin:0}}>AI RESULTS ({edAiPlan.length})</span>
                        <button className="A-btn signal" style={{fontSize:9,padding:'3px 10px'}} onClick={edAiAcceptAll}>ACCEPT ALL</button>
                      </div>
                      {edAiPlan.map(function(item, i) {
                        return (
                          <div key={i} className="HS-ai-result">
                            <div className="line">{item.line}</div>
                            <div className="meta">{item.source} · {item.difficulty}{item.acronym ? ' · ' + item.acronym : ''}</div>
                            <div style={{display:'flex',gap:6,marginTop:6}}>
                              <button className="A-btn signal" style={{fontSize:9,padding:'3px 10px'}} onClick={function(){edAiAcceptCard(item)}}>ACCEPT</button>
                              <button className="A-btn danger" style={{fontSize:9,padding:'3px 10px'}} onClick={function(){edAiRejectCard(i)}}>REJECT</button>
                            </div>
                          </div>
                        );
                      })}
                      <div style={{marginTop:12}}>
                        <div style={{display:'flex',gap:8}}>
                          <textarea className="A-textarea" rows={2} value={edAiRefineText} onChange={function(e){setEdAiRefineText(e.target.value)}} placeholder="Refine instructions..." style={{flex:1,fontSize:11}} />
                          <button className="A-btn cyan" style={{fontSize:10,padding:'6px 16px',alignSelf:'flex-end'}} onClick={edAiRefine} disabled={edAiRefining}>{edAiRefining ? 'REFINING...' : 'REFINE'}</button>
                        </div>
                      </div>
                    </div>
                  )}
                </div>

                {/* Landing copy section */}
                <div className="A-section">
                  <div className="A-section-head">LANDING COPY</div>
                  <div className="HB-config">
                    <div style={{gridColumn:'1/-1'}}>
                      <label className="A-label">TITLE</label>
                      <input className="A-input" value={(edEdit.meta.landing || {}).title || ''} onChange={function(e){edUpdateMeta('landing.title', e.target.value.toUpperCase())}} placeholder="THE HOTSEAT {NAME} EDITION" style={{textTransform:'uppercase',fontWeight:700}} />
                    </div>
                    <div style={{gridColumn:'1/-1'}}>
                      <label className="A-label">INSTRUCTIONS</label>
                      <textarea className="A-input" rows={4} value={(edEdit.meta.landing || {}).instructions || ''} onChange={function(e){edUpdateMeta('landing.instructions', e.target.value.toUpperCase())}} style={{textTransform:'uppercase',fontSize:10,resize:'vertical'}} />
                    </div>
                    <div>
                      <label className="A-label">CTA BUTTON TEXT</label>
                      <input className="A-input" value={(edEdit.meta.landing || {}).cta || ''} onChange={function(e){edUpdateMeta('landing.cta', e.target.value.toUpperCase())}} placeholder="PLAY" style={{textTransform:'uppercase'}} />
                    </div>
                  </div>
                </div>

                {/* Actions */}
                <div style={{display:'flex',gap:8,flexWrap:'wrap',marginTop:8}}>
                  <button className="A-btn signal" onClick={function(){edSave(false)}} disabled={edSaving}>{edSaving ? 'SAVING...' : (edEdit.meta.published ? 'SAVE' : 'SAVE DRAFT')}</button>
                  {edEdit.meta.published
                    ? <button className="A-btn danger" onClick={edUnpublish} disabled={edSaving}>UNPUBLISH</button>
                    : <button className="A-btn cyan" onClick={function(){edSave(true)}} disabled={edSaving}>PUBLISH</button>}
                  {edEdit.meta.slug && <button className="A-btn" onClick={edCopyLink}>COPY LINK</button>}
                  {edSelSlug && edSelSlug !== '__new__' && (
                    !edDeleteConfirm ? (
                      <button className="A-btn danger" onClick={function(){setEdDeleteConfirm(true)}}>DELETE</button>
                    ) : (
                      <button className="A-btn danger" onClick={edDelete} style={{fontWeight:700}}>CONFIRM DELETE</button>
                    )
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}