// LegalPage — standalone legal content page
// i18() is the global helper from utils/i18.js (loaded in legal.html before this file)

const LANGS = [
  { id: 'en',  label: 'EN'  },
  { id: 'fr',  label: 'FR'  },
  { id: 'dar', label: 'DAR' },
];

const LegalPage = () => {
  const [lang,    setLang]    = React.useState('en');
  const [page,    setPage]    = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error,   setError]   = React.useState(false);

  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const slug   = params.get('slug');

    if (!slug) { setError(true); setLoading(false); return; }

    db.from('legal_pages')
      .select('slug, content_json')
      .eq('slug', slug)
      .single()
      .then(({ data, error }) => {
        if (error || !data) setError(true);
        else setPage(data);
        setLoading(false);
      });
  }, []);

  // Update document.title when page or lang changes
  React.useEffect(() => {
    if (page?.content_json?.title) {
      const title = i18(page.content_json.title, lang);
      if (title) document.title = `${title} — Blan Studio`;
    }
  }, [page, lang]);

  if (loading) {
    return (
      <div className="legal-page">
        <div className="legal-loading">Loading…</div>
      </div>
    );
  }

  if (error || !page) {
    return (
      <div className="legal-page">
        <div className="legal-error">
          <h1>{t('legal.notFound', lang)}</h1>
          <a href="index.html">{t('legal.backToSite', lang)}</a>
        </div>
      </div>
    );
  }

  const title   = i18(page.content_json?.title,   lang);
  const content = i18(page.content_json?.content, lang);

  return (
    <div className="legal-page">
      <header className="legal-header">
        <a href="index.html" className="legal-logo">
          <img src="assets/logo-mark.png" alt="Blan Studio"/>
          Blan Studio
        </a>
        <a href="index.html" className="legal-back">
          <svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <polyline points="10,3 4,8 10,13"/>
          </svg>
          {t('legal.back', lang)}
        </a>
      </header>

      <main className="legal-main">
        {/* Language toggle */}
        <div className="legal-langs">
          {LANGS.map(l => (
            <button
              key={l.id}
              type="button"
              className={'ag-time-opt' + (lang === l.id ? ' is-on' : '')}
              onClick={() => setLang(l.id)}
              aria-pressed={lang === l.id}
            >
              {l.label}
            </button>
          ))}
        </div>

        <h1 className="legal-title">{title || page.slug}</h1>

        {content ? (
          <div className="legal-content">
            {content.split('\n').map((line, i) => (
              line.trim() ? <p key={i}>{line}</p> : <br key={i}/>
            ))}
          </div>
        ) : (
          <p className="legal-empty">{t('legal.noContent', lang)}</p>
        )}
      </main>

      <footer className="legal-footer">
        <span>© {new Date().getFullYear()} Blan Studio. All rights reserved.</span>
        <a href="index.html">blan.studio</a>
      </footer>
    </div>
  );
};

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