// Static legal/info pages (Impressum, Datenschutz, Lizenz, Über uns).
// Content is editable in the admin (Einstellungen → Unterseiten) and stored in
// settings.staticPages. These components just render the stored blocks.

// --- Inline text renderer: **fett**, [label](url), Zeilenumbrüche, {platzhalter} ---
const _staticVars = (text, vars) =>
  vars ? text.replace(/\{(\w+)\}/g, (m, k) => (vars[k] != null ? String(vars[k]) : m)) : text;

const _tokenizeStatic = (line) => {
  const nodes = []; let rest = line; let i = 0;
  const re = /(\*\*([^*]+)\*\*)|(\[([^\]]+)\]\(([^)]+)\))/;
  let m;
  while ((m = re.exec(rest)) !== null) {
    if (m.index > 0) nodes.push(<React.Fragment key={i++}>{rest.slice(0, m.index)}</React.Fragment>);
    if (m[1]) {
      nodes.push(<strong key={i++}>{m[2]}</strong>);
    } else {
      const url = m[5];
      const ext = /^https?:\/\//.test(url);
      nodes.push(<a key={i++} href={url} {...(ext ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>{m[4]}</a>);
    }
    rest = rest.slice(m.index + m[0].length);
  }
  if (rest) nodes.push(<React.Fragment key={i++}>{rest}</React.Fragment>);
  return nodes;
};

const renderStaticInline = (text, vars) =>
  _staticVars(text || '', vars).split('\n').map((line, li) => (
    <React.Fragment key={li}>{li > 0 && <br/>}{_tokenizeStatic(line)}</React.Fragment>
  ));

const StaticBlocks = ({ blocks, vars }) => (
  <>
    {(blocks || []).map((b) => {
      if (b.type === 'h2') return <h2 key={b.id}>{renderStaticInline(b.text, vars)}</h2>;
      if (b.type === 'h3') return <h3 key={b.id}>{renderStaticInline(b.text, vars)}</h3>;
      if (b.type === 'ul') return (
        <ul key={b.id}>
          {(b.text || '').split('\n').filter(x => x.trim()).map((li, i) => <li key={i}>{_tokenizeStatic(_staticVars(li, vars))}</li>)}
        </ul>
      );
      if (b.type === 'note') return <div key={b.id} className="note">{renderStaticInline(b.text, vars)}</div>;
      return <p key={b.id}>{renderStaticInline(b.text, vars)}</p>;
    })}
  </>
);

const StaticPageShell = ({ pageId, fallbackTitle, fallbackKicker, vars, navigate }) => {
  const [settings] = useSettings();
  const page = (settings.staticPages && settings.staticPages[pageId]) || {};
  const title = page.title || fallbackTitle || '';
  const kicker = page.kicker != null ? page.kicker : (fallbackKicker || '');
  return (
  <main className="max-w-7xl mx-auto px-5 sm:px-8 pt-10 pb-16">
    <Crumbs items={[{label:'Start', target:{view:'home'}}, {label: title}]} navigate={navigate}/>
    <header className="mt-4 mb-8">
      {kicker && <div className="inline-flex items-center gap-1.5 text-[12px] font-bold uppercase tracking-[0.12em] text-coralDeep mb-2">{kicker}</div>}
      <h1 className="font-display text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight" style={{textWrap:'balance'}}>{title}</h1>
    </header>
    <article className="bg-paper rounded-3xl ring-2 ring-line p-5 sm:p-8 prose-static max-w-3xl">
      <StaticBlocks blocks={page.blocks} vars={vars}/>
    </article>
    <style>{`
      .prose-static h2 { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; font-size: 1.5rem; margin-top: 1.75rem; margin-bottom: 0.6rem; letter-spacing: -0.01em; }
      .prose-static h2:first-child { margin-top: 0; }
      .prose-static h3 { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; margin-top: 1.25rem; margin-bottom: 0.4rem; }
      .prose-static p { color: #465069; line-height: 1.7; margin-bottom: 0.9rem; }
      .prose-static strong { color: #1F2A44; }
      .prose-static ul { margin: 0.5rem 0 1rem 1.25rem; }
      .prose-static li { color: #465069; line-height: 1.65; margin-bottom: 0.3rem; list-style: disc; }
      .prose-static a { color: #F26A56; font-weight: 700; }
      .prose-static a:hover { text-decoration: underline; }
      .prose-static .note { background:#F2F4F9; border-radius: 12px; padding: 12px 16px; font-size: 13px; color: #465069; margin: 1rem 0; }
    `}</style>
  </main>
  );
};

const ImpressumPage = ({ navigate }) => (
  <StaticPageShell pageId="impressum" fallbackTitle="Impressum" navigate={navigate}/>
);

const DatenschutzPage = ({ navigate }) => (
  <StaticPageShell pageId="datenschutz" fallbackTitle="Datenschutzerklärung" navigate={navigate}/>
);

const LizenzPage = ({ navigate }) => (
  <StaticPageShell pageId="lizenz" fallbackTitle="Lizenz & Nutzung" navigate={navigate}/>
);

const AboutPage = ({ navigate }) => {
  let profilesCount = 0;
  try { profilesCount = Object.keys(JSON.parse(localStorage.getItem('aw.creds') || '{}')).length; } catch {}
  const vars = {
    bilder: (typeof COLORINGS !== 'undefined' ? COLORINGS.length : 0),
    kategorien: (typeof CATEGORIES !== 'undefined' ? CATEGORIES.length : 0),
    profile: profilesCount,
    auszeichnungen: (typeof ACHIEVEMENTS !== 'undefined' ? ACHIEVEMENTS.length : 0),
  };
  return <StaticPageShell pageId="about" fallbackTitle="Über Malfino.de" vars={vars} navigate={navigate}/>;
};

Object.assign(window, {
  ImpressumPage, DatenschutzPage, LizenzPage, AboutPage, StaticPageShell,
  StaticBlocks, renderStaticInline,
});