shinkan-jinkendo/frontend/src/pages/LegalPage.jsx

import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import api from '../utils/api'

function escHtml(str) {
  return String(str ?? '')
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
}

function printPublishedDocument(doc) {
  const dateStr = doc.published_at
    ? new Date(doc.published_at).toLocaleDateString('de-DE')
    : new Date(doc.updated_at).toLocaleDateString('de-DE')
  const metaLine = `Version ${doc.version} | Gültig seit ${dateStr}`

  const sectionsHtml = (doc.content_sections || []).map(s => `
    <h2>${escHtml(s.heading)}</h2>
    <p>${escHtml(s.content).replace(/\n/g, '<br>')}</p>
  `).join('')

  const win = window.open('', '_blank')
  win.document.write(`<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>${escHtml(doc.title)}</title>
  <style>
    body { font-family: Georgia, serif; max-width: 760px; margin: 40px auto; color: #111; line-height: 1.65; font-size: 14px; }
    h1 { font-size: 1.7rem; margin: 0 0 0.25rem; }
    h2 { font-size: 1rem; font-family: Arial, sans-serif; margin: 1.6rem 0 0.3rem; }
    p { margin: 0; white-space: pre-wrap; }
    .meta { color: #555; font-size: 0.88rem; padding-bottom: 1rem; border-bottom: 2px solid #111; margin-bottom: 1.5rem; }
    .footer { margin-top: 3rem; padding-top: 0.75rem; border-top: 1px solid #ccc; font-size: 0.78rem; color: #777; text-align: center; }
    @media print {
      body { margin: 0; }
      @page { margin: 20mm 22mm; }
    }
  </style>
</head>
<body>
  <h1>${escHtml(doc.title)}</h1>
  <div class="meta">${escHtml(metaLine)}</div>
  ${sectionsHtml}
  <div class="footer">Shinkan Jinkendo &nbsp;|&nbsp; Exportiert am ${new Date().toLocaleDateString('de-DE')}</div>
  <script>window.onload = function () { window.print(); };<\/script>
</body>
</html>`)
  win.document.close()
}

// document_type values used in the DB / API
const TYPE_MAP = {
  impressum: 'impressum',
  datenschutz: 'privacy_policy',
  nutzungsbedingungen: 'terms_of_use',
  medienrichtlinie: 'media_policy',
}

const PAGES = {
  impressum: {
    title: 'Impressum',
    sections: [
      {
        heading: 'Betreiber / Verantwortlicher',
        placeholder: '[Name und Rechtsform des Betreibers — vom Betreiber einzutragen]',
      },
      {
        heading: 'Anschrift',
        placeholder: '[Straße, Hausnummer, PLZ, Ort — vom Betreiber einzutragen]',
      },
      {
        heading: 'Vertretungsberechtigte Person',
        placeholder: '[Name der vertretungsberechtigten Person — vom Betreiber einzutragen]',
      },
      {
        heading: 'Kontakt',
        placeholder: '[E-Mail-Adresse, ggf. Telefonnummer — vom Betreiber einzutragen]',
      },
      {
        heading: 'Registerangaben (falls relevant)',
        placeholder: '[Vereinsregister, Handelsregister o. ä. — vom Rechtsanwalt prüfen lassen]',
      },
    ],
  },
  datenschutz: {
    title: 'Datenschutzerklärung',
    sections: [
      {
        heading: 'Verantwortlicher',
        placeholder: '[Name, Anschrift und Kontakt des Verantwortlichen — vom Betreiber einzutragen]',
      },
      {
        heading: 'Zwecke der Verarbeitung',
        placeholder: '[Welche Daten werden zu welchem Zweck verarbeitet? — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Rechtsgrundlagen',
        placeholder: '[Art. 6 DSGVO: Einwilligung, Vertrag, berechtigtes Interesse — vom Rechtsanwalt zu bestimmen]',
      },
      {
        heading: 'Empfänger und Dienstleister',
        placeholder: '[SMTP-Anbieter, Hosting, ggf. weitere — vom Rechtsanwalt und Betreiber zu listen]',
      },
      {
        heading: 'Speicherdauern',
        placeholder: '[Wie lange werden welche Daten gespeichert? — vom Rechtsanwalt zu bestimmen]',
      },
      {
        heading: 'Betroffenenrechte',
        placeholder: '[Auskunft, Berichtigung, Löschung, Widerspruch, Datenübertragbarkeit — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Browser-Speicher (localStorage, sessionStorage)',
        placeholder: '[Technisch notwendige Speicherung des Auth-Tokens und Sitzungsdaten. Nach TDDDG §25 ggf. ohne Einwilligung zulässig — vom Rechtsanwalt zu prüfen]',
      },
      {
        heading: 'Kontakt für Datenschutzanfragen',
        placeholder: '[E-Mail oder Kontaktweg für Datenschutzanfragen — vom Betreiber einzutragen]',
      },
      {
        heading: 'Zuständige Aufsichtsbehörde',
        placeholder: '[Zuständige Datenschutzbehörde je nach Bundesland — vom Rechtsanwalt zu bestimmen]',
      },
    ],
  },
  nutzungsbedingungen: {
    title: 'Nutzungsbedingungen',
    sections: [
      {
        heading: 'Nutzungsumfang',
        placeholder: '[Für welche Nutzergruppen und Zwecke darf die Plattform genutzt werden? — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Registrierung',
        placeholder: '[Voraussetzungen für die Registrierung, Wahrheitspflicht der Angaben — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Zulässige und unzulässige Inhalte',
        placeholder: '[Was darf hochgeladen und veröffentlicht werden? Was ist verboten? — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Verantwortlichkeit der Nutzer',
        placeholder: '[Nutzer sind für ihre hochgeladenen Inhalte selbst verantwortlich — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Sperrung und Löschung',
        placeholder: '[Unter welchen Bedingungen können Konten oder Inhalte gesperrt oder gelöscht werden? — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Haftungshinweise',
        placeholder: '[Haftungsausschluss für Nutzerinhalte, externe Links, Systemausfälle — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Geltungsbereich und anwendbares Recht',
        placeholder: '[Welches Recht ist anwendbar? Welcher Gerichtsstand gilt? — vom Rechtsanwalt zu bestimmen]',
      },
    ],
  },
  medienrichtlinie: {
    title: 'Medienrichtlinie',
    sections: [
      {
        heading: 'Urheberrechte',
        placeholder: '[Nur eigene oder ausdrücklich lizenzierte Inhalte hochladen — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Rechte am eigenen Bild (§ 22 KUG)',
        placeholder: '[Erkennbare Personen müssen eingewilligt haben; besondere Regeln für Minderjährige — juristisch zu prüfen und zu formulieren]',
      },
      {
        heading: 'Minderjährige',
        placeholder: '[Besondere Schutzpflichten bei Aufnahmen von Minderjährigen — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Musik und sonstige Fremdinhalte',
        placeholder: '[Keine Hintergrundmusik oder andere Fremdinhalte ohne gültige Lizenz — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Sichtbarkeitsstufen',
        placeholder: '[Erläuterung der Stufen: privat, vereinsintern, öffentlich — vom Betreiber zu beschreiben]',
      },
      {
        heading: 'Meldewege für rechtsverletzende Inhalte',
        placeholder: '[Wie können Inhalte gemeldet werden? — wird nach Umsetzung von P-13 (Content-Melde-Backend) ergänzt]',
      },
      {
        heading: 'Lösch- und Sperrlogik',
        placeholder: '[Wann und wie werden gemeldete Inhalte entfernt oder gesperrt? — wird nach Umsetzung von P-11 und P-13 ergänzt]',
      },
    ],
  },
}

const LEGAL_LINKS = [
  { to: '/impressum', label: 'Impressum' },
  { to: '/datenschutz', label: 'Datenschutz' },
  { to: '/nutzungsbedingungen', label: 'Nutzungsbedingungen' },
  { to: '/medienrichtlinie', label: 'Medienrichtlinie' },
]

function LegalPage({ type }) {
  const fallback = PAGES[type]
  const [apiDoc, setApiDoc] = useState(undefined) // undefined = loading, null = not found
  const [loading, setLoading] = useState(true)

  const documentType = TYPE_MAP[type]

  useEffect(() => {
    if (!documentType) {
      setLoading(false)
      return
    }
    api.getPublishedLegalDocument(documentType)
      .then(doc => setApiDoc(doc))
      .catch(() => setApiDoc(null))
      .finally(() => setLoading(false))
  }, [documentType])

  if (!fallback) return null

  const isPlaceholder = !apiDoc

  const title = apiDoc ? apiDoc.title : fallback.title
  const sections = apiDoc
    ? (apiDoc.content_sections || [])
    : fallback.sections.map(s => ({ heading: s.heading, content: s.placeholder }))

  return (
    <div style={{ minHeight: '100vh', background: 'var(--bg)', padding: '2rem 1rem' }}>
      <div style={{ maxWidth: '720px', margin: '0 auto' }}>

        <div style={{ marginBottom: '1.5rem' }}>
          <Link to="/login" style={{ color: 'var(--accent)', textDecoration: 'none', fontSize: '0.9rem' }}>
            ← Zurück zur Anmeldung
          </Link>
        </div>

        {loading ? (
          <div className="spinner" />
        ) : (
          <>
            {isPlaceholder && (
              <div
                className="card"
                style={{
                  marginBottom: '1.5rem',
                  borderLeft: '4px solid var(--danger)',
                  background: 'var(--surface)',
                }}
              >
                <strong style={{ color: 'var(--danger)' }}>⚠ MUSTER / PLATZHALTER</strong>
                <p style={{ margin: '0.5rem 0 0', color: 'var(--text2)', fontSize: '0.9rem' }}>
                  Inhalt wird vor Produktivbetrieb juristisch geprüft und durch den Betreiber ergänzt.
                  Diese Seite hat keinen rechtlich verbindlichen Charakter.
                </p>
              </div>
            )}

            <div style={{ display: 'flex', alignItems: 'baseline', gap: '1rem', marginBottom: '2rem', flexWrap: 'wrap' }}>
              <h1 style={{ margin: 0, color: 'var(--text1)' }}>{title}</h1>
              {apiDoc && (
                <button
                  onClick={() => printPublishedDocument(apiDoc)}
                  className="btn btn-secondary"
                  style={{ fontSize: '0.82rem', padding: '4px 12px', flexShrink: 0 }}
                >
                  PDF / Drucken
                </button>
              )}
            </div>

            {sections.map((section, i) => (
              <div key={i} style={{ marginBottom: '1.75rem' }}>
                <h2 style={{ fontSize: '1.05rem', marginBottom: '0.4rem', color: 'var(--text1)' }}>
                  {section.heading}
                </h2>
                <p style={{ color: isPlaceholder ? 'var(--text3)' : 'var(--text1)', fontStyle: isPlaceholder ? 'italic' : 'normal', margin: 0, whiteSpace: 'pre-wrap' }}>
                  {section.content}
                </p>
              </div>
            ))}
          </>
        )}

        <div
          style={{
            marginTop: '3rem',
            paddingTop: '1rem',
            borderTop: '1px solid var(--border)',
            fontSize: '0.82rem',
            color: 'var(--text3)',
            textAlign: 'center',
            display: 'flex',
            gap: '1.25rem',
            justifyContent: 'center',
            flexWrap: 'wrap',
          }}
        >
          {LEGAL_LINKS.map((l) => (
            <Link key={l.to} to={l.to} style={{ color: 'var(--text3)' }}>
              {l.label}
            </Link>
          ))}
        </div>
      </div>
    </div>
  )
}

export default LegalPage