// ════════════════════════════════════════════════════════════════
//  Augmented Engineering — Tool UI kit components
// ════════════════════════════════════════════════════════════════
const { useState, useEffect } = React;

// ── Header ──
function AppHeader({ mode, onMode, theme, onTheme }) {
  return (
    <header>
      <div className="mode-toggle">
        <button className={'mode-btn' + (mode === 'verdieping' ? ' active' : '')} onClick={() => onMode('verdieping')}>📖 Verdieping</button>
        <button className={'mode-btn' + (mode === 'presentatie' ? ' active' : '')} onClick={() => onMode('presentatie')}>🎬 Presentatie</button>
      </div>
      <h1>Augmented Engineering<span className="app-version">v0.0.1</span>
        <button className="hdr-icon-btn" title="Uitleg">💡</button>
        <button className="hdr-icon-btn" title="Thema wisselen" onClick={() => onTheme(theme === 'dark' ? 'light' : 'dark')}>
          {theme === 'dark' ? '☀️' : '🌙'}
        </button>
      </h1>
      <a className="header-logo" href="https://sogyo.nl" target="_blank" rel="noopener noreferrer"><img src="assets/logo-sogyo.jpg" alt="Sogyo" /></a>
    </header>
  );
}

// ── Toolbox ──
function Toolbox({ persona, onPersona, onTool, activeTool }) {
  return (
    <div className="toolbox-section">
      <div className="vn-strip">
        <span className="vn-label">🧭 Pad</span>
        {window.PERSONAS.map(p => (
          <button key={p.id}
            className={'vn-btn' + (persona === p.id ? ' active' : '')}
            onClick={() => onPersona(persona === p.id ? null : p.id)}>
            {p.label}
          </button>
        ))}
      </div>
      <div className="toolbox-header">🧰 Toolbox</div>
      {window.TOOLBOX.map(g => (
        <React.Fragment key={g.group}>
          <div className="toolbox-group-label">{g.group}</div>
          {g.tools.map(t => (
            <button key={t.id}
              className={'tool-card' + (activeTool === t.id ? ' active' : '')}
              style={{ '--tc': t.c }}
              onClick={() => onTool(t)}>
              <div className="tool-card-icon">{t.icon}</div>
              <div className="tool-card-body">
                <div className="tool-card-name">{t.name}</div>
                <div className="tool-card-desc">{t.desc}</div>
                <div className="tool-card-tag">{t.tag}</div>
              </div>
            </button>
          ))}
        </React.Fragment>
      ))}
    </div>
  );
}

// ── Markdown detail panel ──
function MarkdownPanel({ tool }) {
  const [html, setHtml] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    if (!tool || !tool.contentFile) return;
    setLoading(true);
    setError(false);
    fetch(tool.contentFile)
      .then(r => {
        if (!r.ok) throw new Error('Not found');
        return r.text();
      })
      .then(md => {
        setHtml(window.marked.parse(md));
        setLoading(false);
      })
      .catch(() => {
        setError(true);
        setLoading(false);
      });
  }, [tool && tool.id]);

  if (loading) {
    return (
      <div className="verdieping-panel">
        <div className="vd-loading">Laden…</div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="verdieping-panel">
        <div className="vd-error">
          <strong>Bestand niet gevonden:</strong> {tool.contentFile}<br />
          <span>Maak het bestand aan om inhoud toe te voegen.</span>
        </div>
      </div>
    );
  }

  return (
    <div className="verdieping-panel">
      <div className="vd-md" style={{ '--zc': tool.c }}
        dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
}

// ── Zone detail panel ──
function ZonePanel({ zoneId }) {
  const z = window.ZONES[zoneId];
  const [html, setHtml] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    if (!z || !z.contentFile) { setLoading(false); return; }
    setLoading(true);
    setError(false);
    fetch(z.contentFile)
      .then(r => { if (!r.ok) throw new Error('Not found'); return r.text(); })
      .then(md => { setHtml(window.marked.parse(md)); setLoading(false); })
      .catch(() => { setError(true); setLoading(false); });
  }, [zoneId]);

  if (!z) return <div className="verdieping-panel"></div>;
  return (
    <div className="verdieping-panel">
      <div className="vd-text" key={zoneId} style={{ '--zc': z.color }}>
        <div className="vd-header">
          <h2>{z.title}</h2>
          <p>{z.sub}</p>
        </div>
        {loading && <div className="vd-loading">Laden…</div>}
        {error && <div className="vd-error"><strong>Bestand niet gevonden:</strong> {z.contentFile}</div>}
        {!loading && !error && (
          <React.Fragment>
            {z.images && z.images.map((src, i) => <img key={i} src={src} alt={`${z.title} ${i + 1}`} className="vd-image" />)}
            <div className="vd-md" dangerouslySetInnerHTML={{ __html: html }} />
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

// ── Combined detail panel ──
function DetailPanel({ zoneId, toolId }) {
  if (!zoneId && !toolId) {
    return (
      <div className="verdieping-panel">
        <div className="vd-empty">
          <span className="vd-empty-arrow">←</span>
          <span>Klik een element in het diagram<br />of een tool in de Toolbox<br />om de verdieping te lezen</span>
        </div>
      </div>
    );
  }

  if (toolId) {
    let tool = null;
    for (const g of window.TOOLBOX) {
      const found = g.tools.find(t => t.id === toolId);
      if (found) { tool = found; break; }
    }
    if (!tool) return <div className="verdieping-panel"></div>;
    return <MarkdownPanel tool={tool} />;
  }

  return <ZonePanel zoneId={zoneId} />;
}

// ── Presentation modal ──
function ZoneModal({ zoneId, onClose }) {
  const z = window.ZONES[zoneId];
  const [html, setHtml] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    if (!z || !z.contentFile) { setLoading(false); return; }
    setLoading(true);
    setError(false);
    fetch(z.contentFile)
      .then(r => { if (!r.ok) throw new Error('Not found'); return r.text(); })
      .then(md => { setHtml(window.marked.parse(md)); setLoading(false); })
      .catch(() => { setError(true); setLoading(false); });
  }, [zoneId]);

  if (!z) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-box" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div className="modal-head-left">
            <div className="modal-dot" style={{ background: z.color }}></div>
            <div>
              <h2>{z.title}</h2>
              <p>{z.sub}</p>
            </div>
          </div>
          <button className="modal-close" onClick={onClose}>✕</button>
        </div>
        <div className="modal-body">
          {loading && <div className="vd-loading">Laden…</div>}
          {error && <div className="vd-error"><strong>Bestand niet gevonden:</strong> {z.contentFile}</div>}
          {!loading && !error && (
            <React.Fragment>
              {z.images && z.images.map((src, i) => <img key={i} src={src} alt={`${z.title} ${i + 1}`} className="vd-image" />)}
              <div className="vd-md" dangerouslySetInnerHTML={{ __html: html }} />
            </React.Fragment>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AppHeader, Toolbox, DetailPanel, ZoneModal });