/* ============================================================
   sidebar.jsx — block palette + style panel
   ============================================================ */

const PALETTE = [
  { group: 'Tekst', items: [
    { type: 'h1', label: 'Kop 1', hint: 'Titel', icon: <I.h1/> },
    { type: 'h2', label: 'Kop 2', hint: 'Sectie', icon: <I.h2/> },
    { type: 'h3', label: 'Kop 3', hint: 'Subsectie', icon: <I.h3/>, wide: true },
    { type: 'p',  label: 'Paragraaf', hint: 'Body tekst', icon: <I.p/>, wide: true },
    { type: 'numlist', label: 'Genummerd', hint: '1, 1.1, 1.1.1', icon: <I.num/> },
    { type: 'ul', label: 'Bullets', hint: 'Lijst', icon: <I.ul/> },
  ]},
  { group: 'Accent', items: [
    { type: 'callout', label: 'Case blok', hint: 'Gekleurde achtergrond', icon: <I.callout/>, wide: true },
    { type: 'quote', label: 'Quote', hint: 'Citaat / pullquote', icon: <I.quote/>, wide: true },
    { type: 'kpis', label: 'Cijfers', hint: '3+ kerncijfers', icon: <I.kpi/>, wide: true },
  ]},
  { group: 'Visueel', items: [
    { type: 'photos', label: 'Fotokolom', hint: '1 / 2 / 3', icon: <I.photos/> },
    { type: 'diagram', label: 'Diagram', hint: 'Schema', icon: <I.diagram/> },
    { type: 'table', label: 'Tabel', hint: 'Rijen + kolommen', icon: <I.table/> },
    { type: 'pagebreak', label: 'Pagina-einde', hint: 'Forceer nieuwe pagina', icon: <I.brk/>, wide: true },
  ]},
];

function Sidebar() {
  const { addBlock, doc, selectedBlockId, updateBlock, updateHeadingStyle, updateMeta } = useApp();
  const selected = doc.blocks.find(b => b.id === selectedBlockId);

  const onDragStart = (e, type) => {
    e.dataTransfer.setData('text/block-new', type);
    e.dataTransfer.effectAllowed = 'copy';
    window.dispatchEvent(new CustomEvent('tender-drag-start', { detail: { kind: 'new' } }));
  };
  const onDragEnd = () => {
    window.dispatchEvent(new CustomEvent('tender-drag-end'));
  };

  return (
    <aside className="sidebar">
      <h4>Bouwblokken</h4>
      <p style={{margin: '0 6px 10px', fontSize: 11, color: 'var(--ink-4)', lineHeight: 1.4}}>
        Sleep een blok naar het document, of klik om toe te voegen.
      </p>

      {PALETTE.map(group => (
        <div key={group.group}>
          <h4>{group.group}</h4>
          <div className="block-grid">
            {group.items.map(item => (
              <button
                key={item.type}
                className={'block-card' + (item.wide ? ' wide' : '')}
                draggable
                onDragStart={(e) => onDragStart(e, item.type)}
                onDragEnd={onDragEnd}
                onClick={() => addBlock(item.type)}
                onDoubleClick={() => addBlock(item.type)}
                title={`Sleep, klik of dubbelklik om een "${item.label}" blok toe te voegen`}
              >
                <div style={{display:'flex', alignItems:'center', gap:8}}>
                  <span className="icon">{item.icon}</span>
                  <span className="name">{item.label}</span>
                </div>
                <span className="hint">{item.hint}</span>
              </button>
            ))}
          </div>
        </div>
      ))}

      {/* Selected block style editor */}
      {selected && <SelectedBlockPanel block={selected} />}

      {/* Global heading styles shortcut */}
      <h4 style={{marginTop: 18}}>Kopstijlen</h4>
      <div className="style-panel">
        <HeadingStyleRow level="h1" label="Kop 1" />
        <HeadingStyleRow level="h2" label="Kop 2" />
        <HeadingStyleRow level="h3" label="Kop 3" />
        <p style={{margin:'8px 0 0', fontSize:10.5, color:'var(--ink-4)', lineHeight:1.4}}>
          Aanpassingen werken meteen door in álle koppen van dit niveau.
        </p>
      </div>
    </aside>
  );
}

function SelectedBlockPanel({ block }) {
  const { updateBlock, removeBlock } = useApp();
  return (
    <div className="style-panel" style={{marginTop: 18}}>
      <h5>Geselecteerd: {block.type.toUpperCase()}</h5>
      {block.type === 'callout' && (
        <div className="field">
          <label>Toon</label>
          <select value={block.tone} onChange={e => updateBlock(block.id, { tone: e.target.value })}>
            <option value="green">Groen (accent)</option>
            <option value="cream">Creme (subtiel)</option>
            <option value="amber">Amber (waarschuwing)</option>
            <option value="ink">Donker (inverse)</option>
          </select>
        </div>
      )}
      {block.type === 'photos' && (
        <div className="field">
          <label>Kolommen</label>
          <select value={block.cols} onChange={e => updateBlock(block.id, { cols: Number(e.target.value) })}>
            <option value={1}>1 kolom</option>
            <option value={2}>2 kolommen</option>
            <option value={3}>3 kolommen</option>
          </select>
        </div>
      )}
      {block.type === 'numlist' && (
        <div className="field">
          <label>Niveau</label>
          <select value={block.level} onChange={e => updateBlock(block.id, { level: Number(e.target.value) })}>
            <option value={1}>1.</option>
            <option value={2}>1.1</option>
            <option value={3}>1.1.1</option>
          </select>
        </div>
      )}
      {(block.type === 'numlist' || block.type === 'ul') && (
        <button className="btn" style={{width:'100%', marginTop:6, justifyContent:'center'}}
          onClick={() => updateBlock(block.id, { items: [...block.items, 'Nieuw item'] })}>
          <I.plus/> Item toevoegen
        </button>
      )}
      <button
        onClick={() => removeBlock(block.id)}
        className="btn"
        style={{width:'100%', marginTop: 8, justifyContent:'center', color:'oklch(55% 0.15 25)'}}
      >
        Blok verwijderen
      </button>
    </div>
  );
}

function HeadingStyleRow({ level, label }) {
  const { doc, updateHeadingStyle } = useApp();
  const s = doc.headingStyles[level];
  return (
    <div style={{display:'flex', alignItems:'center', gap:8, padding: '6px 0', borderBottom: level==='h3'?'none':'1px solid var(--rule)'}}>
      <span style={{fontSize:11.5, fontWeight:500, width:46, color:'var(--ink-2)'}}>{label}</span>
      <div style={{display:'flex', gap:3, flex:1}}>
        <button className="btn-mini" title="Kleiner"
          onClick={() => updateHeadingStyle(level, { size: Math.max(0.8, +(s.size - 0.05).toFixed(2)) })}
          style={mini}>A-</button>
        <button className="btn-mini" title="Groter"
          onClick={() => updateHeadingStyle(level, { size: Math.min(1.4, +(s.size + 0.05).toFixed(2)) })}
          style={mini}>A+</button>
        <select value={s.color} onChange={e => updateHeadingStyle(level, { color: e.target.value })}
          style={{...mini, flex:1, padding:'2px 5px'}}>
          <option value="ink">Inkt</option>
          <option value="accent">Accent</option>
          <option value="muted">Gedempt</option>
        </select>
        <select value={s.case} onChange={e => updateHeadingStyle(level, { case: e.target.value })}
          style={{...mini, padding:'2px 5px'}}>
          <option value="none">Aa</option>
          <option value="upper">AA</option>
          <option value="small">Sm</option>
        </select>
      </div>
    </div>
  );
}
const mini = { fontSize:11, padding:'2px 7px', background:'var(--paper)', border:'1px solid var(--rule)', borderRadius:4, color:'var(--ink-2)' };

Object.assign(window, { Sidebar });