const { useState, useEffect } = React;

// Saniteert HTML voor gebruik in dangerouslySetInnerHTML. DOMPurify wordt via
// CDN geladen (zie legal.html). Zonder DOMPurify vallen we terug op escapen.
function sanitizeHtml(html) {
  if (html == null) return '';
  if (typeof window !== 'undefined' && window.DOMPurify) {
    return window.DOMPurify.sanitize(String(html));
  }
  return String(html)
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}

// Render markdown (en HTML) naar nette HTML. Gebruikt marked indien geladen,
// anders een eenvoudige fallback. Output wordt altijd gesaniteerd.
function renderContent(text) {
  if (!text) return '';
  if (window.marked && typeof window.marked.parse === 'function') {
    try {
      window.marked.setOptions({ breaks: true, gfm: true });
      return sanitizeHtml(window.marked.parse(text));
    } catch (e) { /* val terug op simpel */ }
  }
  const simple = text
    .replace(/^# (.+)$/gm, '<h1>$1</h1>')
    .replace(/^## (.+)$/gm, '<h2>$1</h2>')
    .replace(/^### (.+)$/gm, '<h3>$1</h3>')
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
    .replace(/\n\n/g, '</p><p>')
    .replace(/^(?!<)/gm, '');
  return sanitizeHtml(simple);
}

function LegalPage() {
  const hash = window.location.hash.replace('#', '') || 'terms';
  const [active, setActive] = useState(hash);
  const [content, setContent] = useState('');
  const [siteName, setSiteName] = useState('WNM-Host');

  useEffect(() => {
    fetch('/api/public/site-config').then(r => r.json()).then(c => setSiteName(c['site.name'] || 'WNM-Host')).catch(() => {});
  }, []);

  useEffect(() => {
    fetch(`/api/public/legal/${active}`)
      .then(r => r.json())
      .then(d => setContent(d.content || ''))
      .catch(() => setContent('_Deze tekst kon niet worden geladen. Probeer het later opnieuw._'));
  }, [active]);

  const tabs = [
    { id: 'terms', label: 'Algemene voorwaarden' },
    { id: 'privacy', label: 'Privacyverklaring' },
    { id: 'cookies', label: 'Cookieverklaring' },
  ];

  return (
    <>
      <header className="site-header">
        <div className="site-header-inner">
          <a href="/" className="brand" style={{textDecoration:'none'}}>{siteName}</a>
          <nav>
            <a href="/">Terug naar home</a>
            <a href="/klant" className="btn btn-sm">Klantenpaneel</a>
          </nav>
        </div>
      </header>
      <div className="section" style={{maxWidth: 900, paddingTop: 40}}>
        <div className="tabs">
          {tabs.map(t => (
            <div key={t.id} className={`tab ${active === t.id ? 'active' : ''}`} onClick={() => { setActive(t.id); window.location.hash = t.id; }}>
              {t.label}
            </div>
          ))}
        </div>
        <div className="card">
          <div className="legal-content" dangerouslySetInnerHTML={{ __html: renderContent(content) }} />
        </div>
      </div>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<LegalPage />);