// editor.jsx — Buffet Manual CMS Sidebar
const { useState: useEdState } = React;

function deepClone(o) { return JSON.parse(JSON.stringify(o)); }

function downloadDataJs(content) {
  const src = `// data.js — Buffet Breakfast deck content (bilingual)\n// Generated by Manual Editor — ${new Date().toISOString()}\n\nwindow.DECK_CONTENT = ${JSON.stringify(content, null, 2)};\n`;
  const a = Object.assign(document.createElement('a'), {
    href: URL.createObjectURL(new Blob([src], { type: 'text/javascript' })),
    download: 'data.js',
  });
  a.click();
}

// ── Field components ───────────────────────────────────────────
function EField({ label, value, onChange, multiline }) {
  return (
    <label className="ef-field">
      {label && <span className="ef-label">{label}</span>}
      {multiline
        ? <textarea className="ef-input" rows={2} value={value || ''} onChange={e => onChange(e.target.value)} />
        : <input className="ef-input" type="text" value={value || ''} onChange={e => onChange(e.target.value)} />
      }
    </label>
  );
}

function EBilingual({ field, obj, onChange }) {
  return (
    <div className="ef-bilingual">
      <EField label={`${field} ES`} value={obj?.es} onChange={v => onChange({ ...obj, es: v })} />
      <EField label={`${field} EN`} value={obj?.en} onChange={v => onChange({ ...obj, en: v })} />
    </div>
  );
}

// ── Cover meta panel ───────────────────────────────────────────
function PanelCover({ meta, onMeta }) {
  return (
    <div className="ef-panel">
      <div className="ef-panel-title">Portada</div>
      <EBilingual field="Título" obj={meta.title} onChange={v => onMeta('title', v)} />
      <EBilingual field="Subtítulo" obj={meta.subtitle} onChange={v => onMeta('subtitle', v)} />
      <EField label="Imagen de fondo (ruta)" value={meta.coverImage} onChange={v => onMeta('coverImage', v)} />
    </div>
  );
}

// ── Menu panel — categories collapsed by default ───────────────
const TAGS = ['vegan','vegetarian','glutenFree','nueces','lacteos','huevos','picante','sustentable','alcohol','noAlcohol'];

function PanelMenu({ menuId, menus, onMenus }) {
  const menu = menus[menuId];
  if (!menu) return null;

  // Each category is collapsed by default (false)
  const [expanded, setExpanded] = useEdState({});
  const toggle = (ci) => setExpanded(e => ({ ...e, [ci]: !e[ci] }));

  const upMenu   = (patch) => onMenus({ ...menus, [menuId]: { ...menu, ...patch } });
  const upCat    = (ci, patch) => { const c = deepClone(menu.categories); c[ci] = {...c[ci],...patch}; upMenu({ categories: c }); };
  const upItem   = (ci, ii, val) => { const c = deepClone(menu.categories); c[ci].items[ii] = val; upMenu({ categories: c }); };
  const addItem  = (ci) => { const c = deepClone(menu.categories); c[ci].items.push({es:'Nuevo ítem',en:'New item'}); upMenu({categories:c}); };
  const delItem  = (ci, ii) => { const c = deepClone(menu.categories); c[ci].items.splice(ii,1); upMenu({categories:c}); };
  const addCat   = () => { const c = deepClone(menu.categories); const ni = c.length; c.push({title:{es:'Nueva sección',en:'New section'},tags:[],items:[]}); upMenu({categories:c}); setExpanded(e=>({...e,[ni]:true})); };
  const delCat   = (ci) => { const c = deepClone(menu.categories); c.splice(ci,1); upMenu({categories:c}); };

  return (
    <div className="ef-panel">
      <div className="ef-panel-title">{menuId}</div>
      <EBilingual field="Nombre" obj={menu.title} onChange={v => upMenu({ title: v })} />
      <EBilingual field="Subtítulo" obj={menu.subtitle} onChange={v => upMenu({ subtitle: v })} />
      <EField label="Imagen hero (ruta o URL)" value={menu.hero} onChange={v => upMenu({ hero: v })} />
      <label className="ef-checkbox">
        <input type="checkbox" checked={!!menu.hasNuts} onChange={e => upMenu({ hasNuts: e.target.checked })} />
        Contiene alérgenos
      </label>

      <div className="ef-sub-title">Categorías <em>(clic para expandir)</em></div>

      {menu.categories.map((cat, ci) => (
        <div key={ci} className="ef-category">
          {/* Header — always visible, click to expand */}
          <div className="ef-category-head" onClick={() => toggle(ci)}>
            <span>
              {expanded[ci] ? '▾' : '▸'} {cat.title?.es || `Sección ${ci + 1}`}
            </span>
            <button className="ef-icon-btn ef-danger"
              onClick={e => { e.stopPropagation(); delCat(ci); }}
              title="Eliminar sección">✕</button>
          </div>

          {/* Body — only visible when expanded */}
          {expanded[ci] && (
            <div className="ef-category-body">
              <EBilingual field="Título" obj={cat.title} onChange={v => upCat(ci, { title: v })} />

              <div className="ef-tag-row">
                {TAGS.map(tag => (
                  <label key={tag} className="ef-tag-check">
                    <input type="checkbox"
                      checked={(cat.tags||[]).includes(tag)}
                      onChange={e => {
                        const t = new Set(cat.tags||[]);
                        e.target.checked ? t.add(tag) : t.delete(tag);
                        upCat(ci, { tags: [...t] });
                      }}
                    />
                    {tag}
                  </label>
                ))}
              </div>

              <div className="ef-items-list">
                {cat.items.map((item, ii) => (
                  <div key={ii} className="ef-item-row">
                    <EField label="" value={item.es} onChange={v => upItem(ci, ii, {...item, es: v})} />
                    <EField label="" value={item.en} onChange={v => upItem(ci, ii, {...item, en: v})} />
                    <button className="ef-icon-btn ef-danger" onClick={() => delItem(ci, ii)}>✕</button>
                  </div>
                ))}
              </div>
              <button className="ef-add-btn" onClick={() => addItem(ci)}>+ Añadir ítem</button>
            </div>
          )}
        </div>
      ))}
      <button className="ef-add-btn ef-add-section" onClick={addCat}>+ Añadir sección</button>
    </div>
  );
}

// ── Slide type labels ──────────────────────────────────────────
const SLIDE_LABELS = { cover:'Portada', section:'Separador', selector:'Selector', menuHeader:'Cabecera menú', menuDetail:'Detalle menú' };

// ── Main Editor Shell ──────────────────────────────────────────
function EditorShell({ deckState, setDeckState, activeIdx, setActiveIdx, onClose, children }) {
  const [panel, setPanel]           = useEdState('slides');
  const [activeMenu, setActiveMenu] = useEdState(null);
  const { deck, meta, menus }       = deckState;

  const upState = (next) => { setDeckState(next); window.DECK_CONTENT = next; };

  const onMeta  = (key, val) => { const n = deepClone(deckState); n.meta[key] = val; upState(n); };
  const onMenus = (newMenus) => { const n = deepClone(deckState); n.menus = newMenus; upState(n); };

  const moveSlide = (from, dir) => {
    const to = from + dir;
    if (to < 0 || to >= deck.length) return;
    const n = deepClone(deckState);
    const [s] = n.deck.splice(from, 1);
    n.deck.splice(to, 0, s);
    upState(n);
    setActiveIdx(to);
  };

  const deleteSlide = (i) => {
    if (deck.length <= 1) return;
    const n = deepClone(deckState);
    n.deck.splice(i, 1);
    upState(n);
    setActiveIdx(Math.min(i, n.deck.length - 1));
  };

  return (
    <div className="editor-root">
      {/* ── Sidebar ── */}
      <aside className="editor-sidebar">

        {/* Header */}
        <div className="editor-logo">
          <span>Manual CMS</span>
          <button className="editor-close-btn" onClick={onClose} title="Cerrar editor">✕</button>
        </div>

        {/* Tabs */}
        <div className="editor-tabs">
          <button className={`editor-tab ${panel==='slides'?'is-active':''}`} onClick={() => setPanel('slides')}>Slides</button>
          <button className={`editor-tab ${panel==='meta'?'is-active':''}`}   onClick={() => setPanel('meta')}>Portada</button>
          <button className={`editor-tab ${panel==='menus'?'is-active':''}`}  onClick={() => setPanel('menus')}>Menús</button>
        </div>

        {/* Content */}
        <div className="editor-content">

          {/* Slides panel */}
          {panel === 'slides' && (
            <div>
              <div className="ef-sub-title">Lista de slides</div>
              {deck.map((slide, i) => (
                <div key={i}
                  className={`editor-slide-row ${i === activeIdx ? 'is-active' : ''}`}
                  onClick={() => setActiveIdx(i)}
                >
                  <div className="editor-slide-info">
                    <span className="slide-num">{String(i+1).padStart(2,'0')}</span>
                    <span className="slide-type">{SLIDE_LABELS[slide.type] || slide.type}</span>
                    <span className="slide-id">{slide.id}</span>
                  </div>
                  <div className="editor-slide-actions">
                    <button onClick={e => { e.stopPropagation(); moveSlide(i,-1); }} disabled={i===0} title="Subir">↑</button>
                    <button onClick={e => { e.stopPropagation(); moveSlide(i, 1); }} disabled={i===deck.length-1} title="Bajar">↓</button>
                    <button className="ef-danger" onClick={e => { e.stopPropagation(); deleteSlide(i); }} title="Eliminar">✕</button>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Meta panel */}
          {panel === 'meta' && <PanelCover meta={meta} onMeta={onMeta} />}

          {/* Menus panel */}
          {panel === 'menus' && (
            <div>
              <div className="ef-sub-title">Selecciona un menú</div>
              <div className="editor-menu-tabs">
                {Object.keys(menus).map(id => (
                  <button key={id}
                    className={`editor-menu-tab ${activeMenu===id?'is-active':''}`}
                    onClick={() => setActiveMenu(activeMenu===id ? null : id)}
                  >{id}</button>
                ))}
              </div>
              {activeMenu && <PanelMenu menuId={activeMenu} menus={menus} onMenus={onMenus} />}
            </div>
          )}
        </div>

        {/* Export */}
        <button className="editor-export" onClick={() => downloadDataJs(deckState)}>
          ↓ Exportar data.js
        </button>
      </aside>

      {/* Preview */}
      <div className="editor-preview">{children}</div>
    </div>
  );
}

Object.assign(window, { EditorShell });