/**
 * Installatie.jsx - Installatie-instructies voor workshop deelnemers
 *
 * Rendert content uit content/installatie.md via een custom Markdown parser.
 * Bevat OS-tabs (Mac/Windows), accordions en andere interactieve elementen.
 *
 * Editor modus: bereikbaar via /installatie?editor=<secret>
 * De secret wordt geconfigureerd in src/config/editor.js
 */

import { useState, lazy, Suspense } from 'react';
import { Link, useSearchParams } from 'react-router-dom';
import { parseDocument } from '../lib/markdown/directives';
import { renderBlocks } from '../lib/markdown/render';
import { EDITOR_CONFIG } from '../config/editor';
import installatieContent from '../../content/installatie.md?raw';

// Editor lazy-loaded zodat het niet in de productie bundle zit
const MarkdownEditor = lazy(() => import('../components/editor/MarkdownEditor'));

function Installatie() {
  const [activeOS, setActiveOS] = useState('mac');
  const [searchParams] = useSearchParams();
  const [content, setContent] = useState(installatieContent);

  // Editor alleen beschikbaar in dev mode (niet op productie)
  const showEditor =
    import.meta.env.DEV &&
    EDITOR_CONFIG.enabled &&
    searchParams.get('editor') === EDITOR_CONFIG.secret;

  // Parse de Markdown content
  const { frontmatter, blocks } = parseDocument(content);

  // Context die gedeeld wordt met de renderer (voor OS-tabs etc.)
  const context = { activeOS, setActiveOS };

  return (
    <div className="min-h-screen bg-warm-50">
      {/* Header */}
      <header className="bg-white border-b border-warm-200 py-6">
        <div className="container-page">
          <Link
            to="/"
            className="text-coral-500 hover:text-coral-600 transition-colors inline-flex items-center gap-2"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            Terug naar workshop
          </Link>
        </div>
      </header>

      {/* Content */}
      <main className="container-page py-12">
        <div className="max-w-3xl mx-auto">
          {/* Titel en subtitel uit frontmatter */}
          {frontmatter.title && (
            <h1 className="heading-hero mb-4">{frontmatter.title}</h1>
          )}
          {frontmatter.subtitle && (
            <p className="text-xl text-warm-600 mb-10">{frontmatter.subtitle}</p>
          )}

          {/* Gerenderde Markdown blocks */}
          {renderBlocks(blocks, context)}
        </div>
      </main>

      {/* Contact */}
      <div className="text-center py-6">
        <p className="text-warm-500">
          Kom je er niet uit? Mail naar{' '}
          <a href="mailto:frank@frankmeeuwsen.com" className="text-coral-500 hover:text-coral-600">
            frank@frankmeeuwsen.com
          </a>
        </p>
      </div>

      {/* Editor overlay (alleen zichtbaar met juiste URL parameter) */}
      {showEditor && (
        <Suspense fallback={
          <div className="fixed inset-0 bg-warm-900/50 flex items-center justify-center z-50">
            <div className="bg-white rounded-xl p-8 text-warm-600">Editor laden...</div>
          </div>
        }>
          <MarkdownEditor
            content={content}
            onContentChange={setContent}
          />
        </Suspense>
      )}

      {/* Footer */}
      <footer className="bg-warm-900 text-warm-400 py-6">
        <div className="container-page text-center text-sm">
          &copy; {new Date().getFullYear()} Frank Meeuwsen. Alle rechten voorbehouden.
        </div>
      </footer>
    </div>
  );
}

export default Installatie;
