/* ============================================================
   export.jsx — stage 4: print preview + print button
   ============================================================ */

function ExportScreen() {
  const { doc, setStage } = useApp();
  const openIssues = doc.comments.filter(c => !c.resolved).length
                    + doc.suggestions.filter(s => s.status === 'pending').length;

  const doPrint = () => window.print();

  return (
    <div className="export-wrap">
      <div className="export-head">
        <div>
          <div style={{fontSize: 11, color:'var(--ink-4)', letterSpacing:'0.08em', textTransform:'uppercase'}}>Stap 4</div>
          <h2>Export als PDF</h2>
          <p className="hint">
            Hieronder zie je de print-preview. De pagina-indeling, marges en typografie matchen straks exact het PDF-document. Druk op <strong>Exporteren</strong> om het printvenster te openen — kies daar <em>"Opslaan als PDF"</em>.
          </p>
        </div>
        <div className="export-actions">
          <button className="btn" onClick={() => setStage('review')}>← Review</button>
          <button className="btn btn-primary" onClick={doPrint}>
            <I.download/> Exporteren als PDF
          </button>
        </div>
      </div>

      {openIssues > 0 && (
        <div style={{maxWidth: 820, margin: '0 auto 18px',
                     padding: '10px 14px', background: 'oklch(96% 0.06 80)',
                     border: '1px solid oklch(82% 0.10 80)', borderRadius: 8,
                     fontSize: 12.5, color: 'var(--ink-2)'}}>
          ⚠︎ Er staan nog <strong>{openIssues}</strong> openstaande feedback-items. Deze worden niet meegenomen in de PDF-export.
        </div>
      )}

      {/* render canvas in print mode */}
      <ExportPreview/>
    </div>
  );
}

function ExportPreview() {
  const { doc } = useApp();
  const pageStyle = {
    '--doc-font-size': doc.meta.fontSize + 'px',
    '--doc-body-font': `"${doc.meta.bodyFont}", sans-serif`,
    '--doc-head-font': `"${doc.meta.headFont}", sans-serif`,
    '--accent': doc.meta.accent,
    '--doc-columns': doc.meta.columns || 1,
    padding: doc.meta.margin + 'px',
  };
  const isLandscape = doc.meta.orientation === 'landscape';

  return (
    <div className={'page print-page' + (isLandscape ? ' landscape' : '')}
         data-columns={doc.meta.columns || 1}
         style={pageStyle}>
      {doc.meta.showHeader && (
        <div className="page-header">
          <div className="logo-slot">
            {doc.meta.logoUrl
              ? <img className="logo-img" src={doc.meta.logoUrl} alt=""/>
              : <span className="logo-placeholder">LOGO</span>}
            <span>{doc.meta.orgName}</span>
          </div>
          <div>{doc.meta.headerText}</div>
        </div>
      )}
      <div className="page-columns">
        {doc.blocks.map((b) => <StaticBlock key={b.id} block={b} />)}
      </div>
      {doc.meta.showFooter && (
        <div style={{marginTop: 60, paddingTop: 14, borderTop: '1px solid var(--rule)',
                      fontSize: 10.5, color: 'var(--ink-4)',
                      display:'flex', justifyContent:'space-between'}}>
          <span>{doc.meta.footerText.replace('{page}', '1')}</span>
          <span>{doc.meta.orgName}</span>
        </div>
      )}
    </div>
  );
}

/** Non-interactive block renderer for print preview (no drop zones, no handles) */
function StaticBlock({ block }) {
  switch (block.type) {
    case 'h1': return <h1 className="doc-h1">{block.text}</h1>;
    case 'h2': return <h2 className="doc-h2">{block.text}</h2>;
    case 'h3': return <h3 className="doc-h3">{block.text}</h3>;
    case 'p':  return <p className="doc-p">{block.text}</p>;
    case 'numlist': return <ol className={'doc-numlist level-' + (block.level||1)}>{block.items.map((it,i)=><li key={i}>{it}</li>)}</ol>;
    case 'ul': return <ul className="doc-ul">{block.items.map((it,i)=><li key={i}>{it}</li>)}</ul>;
    case 'callout': return (
      <div className="doc-callout" data-tone={block.tone}>
        <div className="callout-label">
          <svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="currentColor"/></svg>
          {block.label}
        </div>
        <div className="callout-title">{block.title}</div>
        <p className="callout-body">{block.body}</p>
      </div>
    );
    case 'quote': return (
      <div className="doc-quote">
        <blockquote>{block.text}</blockquote>
        <cite>{block.cite}</cite>
      </div>
    );
    case 'photos': return (
      <div className="doc-photos" data-cols={block.cols}>
        {Array.from({length: block.cols}).map((_,i) =>
          <div key={i} className="photo-cell" data-label={block.labels?.[i]||`Foto ${i+1}`}></div>)}
      </div>
    );
    case 'diagram': return <div className="doc-diagram"><DiagramPlaceholder title={block.title}/></div>;
    case 'table': return (
      <table className="doc-table">
        <thead><tr>{block.headers.map((h,i)=><th key={i}>{h}</th>)}</tr></thead>
        <tbody>{block.rows.map((r,i)=><tr key={i}>{r.map((c,j)=><td key={j}>{c}</td>)}</tr>)}</tbody>
      </table>
    );
    case 'kpis': return (
      <div className="doc-kpis">
        {block.items.map((k,i) => (
          <div className="kpi" key={i}>
            <div><span className="kpi-n">{k.n}</span><span className="kpi-unit">{k.unit}</span></div>
            <div className="kpi-label">{k.label}</div>
          </div>
        ))}
      </div>
    );
    case 'pagebreak': return <div style={{pageBreakAfter:'always', height: 1}}/>;
    default: return null;
  }
}

Object.assign(window, { ExportScreen });