/* ============================================================
   setup.jsx — stage 1: logo + huisstijl + basis
   ============================================================ */

const ACCENT_PRESETS = [
  { label: 'TenderGrowth',  hex: '#1f3a2e' },
  { label: 'Diep bos',      hex: '#254a37' },
  { label: 'Mos',           hex: '#3d5a3c' },
  { label: 'Diep blauw',    hex: '#1f3355' },
  { label: 'Inkt',          hex: '#1a1d24' },
  { label: 'Terracotta',    hex: '#8a4a2e' },
];

const FONT_CHOICES = [
  { name: 'Geist', subtitle: 'Strak, modern', sample: 'Aa' },
  { name: 'Newsreader', subtitle: 'Klassiek, warm', sample: 'Aa', serif: true },
  { name: 'JetBrains Mono', subtitle: 'Technisch', sample: 'Aa', mono: true },
  { name: 'Arial', subtitle: 'Systeem · universeel', sample: 'Aa', system: true },
  { name: 'Calibri', subtitle: 'Systeem · Office', sample: 'Aa', system: true },
  { name: 'Verdana', subtitle: 'Systeem · leesbaar', sample: 'Aa', system: true },
];

function SetupScreen() {
  const { doc, updateMeta, setStage, loadStarter } = useApp();
  const m = doc.meta;
  const [uploadErr, setUploadErr] = useState(null);
  const [uploading, setUploading] = useState(false);

  const onLogo = async (file) => {
    if (!file) return;
    setUploadErr(null);
    setUploading(true);
    try {
      const url = await window.uploadAsset(file, { docId: doc.id || 'misc', kind: 'logo' });
      updateMeta({ logoUrl: url });
    } catch (e) {
      setUploadErr(e.message || 'Upload mislukt');
    } finally {
      setUploading(false);
    }
  };

  return (
    <div className="setup">
      <div className="setup-inner">
        <h1>Stel je <em>aanbesteding</em> op.</h1>
        <p className="lede">
          Begin met het vastleggen van de huisstijl en het logo. Deze instellingen werken door in elke pagina van het document — en je kunt ze later altijd aanpassen.
        </p>

        {/* LOGO + doc meta */}
        <div className="setup-section">
          <h2>Document & logo</h2>
          <p className="section-hint">Verschijnt links bovenaan elke pagina, en op het voorblad.</p>

          <div className={'logo-drop' + (m.logoUrl ? ' has-logo' : '') + (uploading ? ' uploading' : '')}
               onDragOver={(e) => e.preventDefault()}
               onDrop={(e) => { e.preventDefault(); onLogo(e.dataTransfer.files?.[0]); }}>
            <div className="logo-preview">
              {m.logoUrl
                ? <img src={m.logoUrl} alt="logo"/>
                : <span className="placeholder">LOGO</span>}
            </div>
            <div className="logo-drop-body">
              <strong>{uploading ? 'Uploaden…' : 'Sleep een logo hierheen'}</strong>
              <span>PNG of SVG — minimaal 200px breed (max 5 MB)</span>
              <label className="btn" style={{cursor:'pointer', opacity: uploading ? 0.5 : 1}}>
                <I.upload/> Bestand kiezen
                <input type="file" accept="image/*" style={{display:'none'}} disabled={uploading}
                       onChange={(e) => onLogo(e.target.files?.[0])}/>
              </label>
              {m.logoUrl && !uploading && (
                <button className="btn btn-ghost" style={{marginLeft: 8}}
                        onClick={() => { window.deleteAsset?.(m.logoUrl); updateMeta({ logoUrl: null }); }}>
                  Verwijderen
                </button>
              )}
              {uploadErr && <div className="upload-err">{uploadErr}</div>}
            </div>
          </div>

          <div className="setup-grid-2" style={{marginTop: 18}}>
            <div className="input-group">
              <label>Documenttitel</label>
              <input value={m.title} onChange={e => updateMeta({ title: e.target.value })}/>
            </div>
            <div className="input-group">
              <label>Organisatienaam</label>
              <input value={m.orgName} onChange={e => updateMeta({ orgName: e.target.value })}/>
            </div>
            <div className="input-group">
              <label>Header-tekst (rechtsboven)</label>
              <input value={m.headerText} onChange={e => updateMeta({ headerText: e.target.value })}/>
            </div>
            <div className="input-group">
              <label>Footer-tekst ({'{page}'} = paginanr)</label>
              <input value={m.footerText} onChange={e => updateMeta({ footerText: e.target.value })}/>
            </div>
          </div>
        </div>

        {/* COLORS */}
        <div className="setup-section">
          <h2>Accentkleur</h2>
          <p className="section-hint">Gebruikt voor koppen, accenten en call-out-blokken.</p>
          <div className="color-swatches">
            {ACCENT_PRESETS.map(p => (
              <button key={p.hex}
                      className={'swatch' + (m.accent === p.hex ? ' selected':'')}
                      style={{background: p.hex}}
                      title={p.label}
                      onClick={() => updateMeta({ accent: p.hex })}/>
            ))}
          </div>
          <div className="setup-grid-2" style={{marginTop: 16}}>
            <div className="input-group">
              <label>Primaire accentkleur (hex)</label>
              <input value={m.accent} onChange={e => updateMeta({ accent: e.target.value })}/>
            </div>
            <div className="input-group">
              <label>Secundaire accentkleur</label>
              <input value={m.accentSecondary} onChange={e => updateMeta({ accentSecondary: e.target.value })}/>
            </div>
          </div>
        </div>

        {/* TYPE */}
        <div className="setup-section">
          <h2>Lettertypen</h2>
          <p className="section-hint">Koppen en body kunnen verschillen. Je kunt dit later nog fine-tunen in de editor.</p>

          <div className="input-group" style={{marginBottom: 10}}>
            <label>Lettertype voor koppen</label>
          </div>
          <div className="font-card-row" style={{marginBottom: 18}}>
            {FONT_CHOICES.map(f => (
              <button key={'h-'+f.name}
                      className={'font-card' + (m.headFont === f.name ? ' selected':'')}
                      onClick={() => updateMeta({ headFont: f.name })}>
                <div className="sample"
                     style={{fontFamily:`"${f.name}", ${f.serif?'serif':f.mono?'monospace':'sans-serif'}`,
                             fontWeight: 600, letterSpacing: '-0.02em'}}>
                  {f.sample} {f.name}
                </div>
                <div className="meta">{f.subtitle}</div>
              </button>
            ))}
          </div>

          <div className="input-group" style={{marginBottom: 10}}>
            <label>Lettertype voor body</label>
          </div>
          <div className="font-card-row" style={{marginBottom: 18}}>
            {FONT_CHOICES.map(f => (
              <button key={'b-'+f.name}
                      className={'font-card' + (m.bodyFont === f.name ? ' selected':'')}
                      onClick={() => updateMeta({ bodyFont: f.name })}>
                <div className="sample"
                     style={{fontFamily:`"${f.name}", ${f.serif?'serif':f.mono?'monospace':'sans-serif'}`, fontSize: 16}}>
                  Werken aan morgen.
                </div>
                <div className="meta">{f.subtitle}</div>
              </button>
            ))}
          </div>

          <div className="setup-grid-2">
            <div className="input-group">
              <label>Basis fontgrootte ({m.fontSize}px)</label>
              <input type="range" min="13" max="19" value={m.fontSize}
                     onChange={e => updateMeta({ fontSize: Number(e.target.value) })}/>
            </div>
            <div className="input-group">
              <label>Paginamarge ({m.margin}px)</label>
              <input type="range" min="48" max="112" step="4" value={m.margin}
                     onChange={e => updateMeta({ margin: Number(e.target.value) })}/>
            </div>
          </div>
        </div>

        {/* LAYOUT — orientation + columns */}
        <div className="setup-section">
          <h2>Layout</h2>
          <p className="section-hint">Oriëntatie en aantal tekstkolommen voor dit document.</p>

          <div className="input-group" style={{marginBottom: 12}}>
            <label>Oriëntatie</label>
          </div>
          <div className="font-card-row" style={{gridTemplateColumns: '1fr 1fr', marginBottom: 18}}>
            {[
              {k:'portrait',  w:32, h:44, label:'Portret',   hint:'A4 staand'},
              {k:'landscape', w:44, h:32, label:'Landschap', hint:'A4 liggend'},
            ].map(o => (
              <button key={o.k}
                      className={'font-card' + (m.orientation === o.k ? ' selected':'')}
                      onClick={() => updateMeta({ orientation: o.k })}
                      style={{display:'flex', alignItems:'center', gap:14}}>
                <div style={{
                  width: o.w, height: o.h,
                  border: '1.5px solid var(--ink-3)',
                  borderRadius: 2,
                  background: 'var(--paper)',
                  flexShrink: 0,
                  position: 'relative',
                }}>
                  <div style={{position:'absolute', inset: '4px 4px auto 4px', height: 2, background: 'var(--ink-4)', opacity: .5}}/>
                  <div style={{position:'absolute', inset: '9px 4px auto 4px', height: 1, background: 'var(--ink-4)', opacity: .35}}/>
                  <div style={{position:'absolute', inset: '12px 4px auto 4px', height: 1, background: 'var(--ink-4)', opacity: .35}}/>
                </div>
                <div style={{textAlign:'left'}}>
                  <div style={{fontSize: 13, fontWeight: 500, marginBottom: 2}}>{o.label}</div>
                  <div className="meta">{o.hint}</div>
                </div>
              </button>
            ))}
          </div>

          <div className="input-group" style={{marginBottom: 12}}>
            <label>Aantal kolommen</label>
          </div>
          <div className="font-card-row">
            {[1,2,3].map(c => (
              <button key={c}
                      className={'font-card' + (m.columns === c ? ' selected':'')}
                      onClick={() => updateMeta({ columns: c })}>
                <div style={{
                  display:'grid',
                  gridTemplateColumns: `repeat(${c}, 1fr)`,
                  gap: 4,
                  width: '100%',
                  height: 44,
                  marginBottom: 8,
                  padding: 4,
                  border: '1.5px solid var(--ink-3)',
                  borderRadius: 3,
                }}>
                  {Array.from({length:c}).map((_,i) => (
                    <div key={i} style={{
                      background: 'repeating-linear-gradient(to bottom, var(--ink-4) 0 1px, transparent 1px 4px)',
                      opacity: .45,
                    }}/>
                  ))}
                </div>
                <div className="meta">{c === 1 ? 'Enkelvoudig' : c === 2 ? 'Dubbele kolom' : 'Drie kolommen'}</div>
              </button>
            ))}
          </div>
        </div>

        {/* HEADER / FOOTER TOGGLES */}
        <div className="setup-section">
          <h2>Pagina-elementen</h2>
          <p className="section-hint">Toon of verberg de kop- en voettekst die op elke pagina verschijnt.</p>
          <div style={{display:'flex', gap: 12}}>
            <label className="btn" style={{cursor:'pointer'}}>
              <input type="checkbox" checked={m.showHeader}
                     onChange={e => updateMeta({ showHeader: e.target.checked })}
                     style={{marginRight: 6}}/>
              Kopregel (logo + titel)
            </label>
            <label className="btn" style={{cursor:'pointer'}}>
              <input type="checkbox" checked={m.showFooter}
                     onChange={e => updateMeta({ showFooter: e.target.checked })}
                     style={{marginRight: 6}}/>
              Voetregel (paginanummer)
            </label>
          </div>
        </div>

        <div className="setup-footer">
          <span className="hint">Wijzigingen worden automatisch bewaard.</span>
          <div style={{display:'flex', gap: 8}}>
            <button className="btn" onClick={loadStarter}>Voorbeeld-inhoud laden</button>
            <button className="btn btn-primary" onClick={() => setStage('editor')}>
              Door naar editor →
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SetupScreen });