import React, { useEffect } from "react";
import mermaid from "mermaid";

const Wireframe = ({ title, children }) => (
    <div className="w-full md:w-1/2 lg:w-1/3 px-2 mb-4">
        <div className="h-full bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden flex flex-col">
            <div className="bg-slate-50 px-4 py-2 border-b border-slate-200">
                <h5 className="text-center font-semibold text-slate-700 m-0 text-sm md:text-base">{title}</h5>
            </div>
            <div className="p-2 flex-grow flex justify-center items-center overflow-hidden bg-slate-100">
                <div className="bg-white w-full h-full border border-slate-200 rounded-lg shadow-inner p-3 flex flex-col overflow-hidden relative" style={{ aspectRatio: '9 / 19.5' }}>
                    {children}
                </div>
            </div>
        </div>
    </div>
);

function LanguageRoleplay() {
    useEffect(() => {
        const initMermaid = async () => {
            try {
                mermaid.initialize({ startOnLoad: false, theme: 'neutral' });
                const mermaidEls = document.querySelectorAll('.mermaid');
                if (mermaidEls.length > 0) {
                    await mermaid.run();
                }
            } catch (err) {
                console.error("Mermaid initialization or run error:", err);
            }
        };

        // Slight delay to ensure DOM is ready
        const timer = setTimeout(() => {
            initMermaid();
        }, 100);

        return () => clearTimeout(timer);
    }, []);

    return (
        <div className="bg-slate-50 min-h-screen py-8 font-sans text-slate-800">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <header className="text-center border-b border-slate-200 pb-8 mb-12">
                    <h1 className="text-3xl md:text-5xl font-extrabold text-slate-900 mb-6 tracking-tight">KI Sprachenlern Roleplay</h1>
                    <div className="mt-6 flex flex-wrap justify-center gap-4">
                        <div className="bg-white px-4 py-2 rounded-full border border-slate-200 shadow-sm flex items-center space-x-2">
                            <span className="bg-slate-200 text-slate-700 text-xs font-bold px-2 py-0.5 rounded uppercase tracking-wide">Status</span>
                            <span className="text-sm font-medium text-slate-600">In Arbeit</span>
                        </div>
                        <div className="bg-white px-4 py-2 rounded-full border border-slate-200 shadow-sm flex items-center space-x-2">
                            <span className="bg-slate-200 text-slate-700 text-xs font-bold px-2 py-0.5 rounded uppercase tracking-wide">Autor</span>
                            <span className="text-sm font-medium text-slate-600">Simon Altschäffl</span>
                        </div>
                    </div>
                </header>

                <section className="mb-16">
                    <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">1. Philosophie: Learning by Doing</h2>
                    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
                        <p className="text-lg leading-relaxed text-slate-700">
                            Der Fokus dieses Projekts liegt nicht auf grammatikalischer Perfektion, sondern auf der
                            Anwendung der Sprache in realistischen Situationen. Es geht darum, die Angst vor dem Sprechen
                            zu verlieren und durch "Learning by Doing" Sicherheit zu gewinnen.
                        </p>
                        <p className="text-lg leading-relaxed text-slate-700">
                            Die KI agiert dabei als geduldiger, nat&uuml;rlich wirkender Gespr&auml;chspartner, der ermutigt
                            statt nur zu korrigieren. Ziel ist ein fl&uuml;ssiger Dialog, bei dem der Nutzer spielerisch lernt.
                        </p>
                    </div>
                </section>

                <section className="mb-16">
                    <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">2. Geplante Features & Gamification</h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                        <div className="h-full">
                            <div className="h-full bg-white rounded-xl border border-slate-200 shadow-sm p-6 hover:shadow-md transition-shadow">
                                <h3 className="text-xl font-bold text-slate-800 mb-4 pb-2 border-b border-slate-100">Spielerisches Lernen</h3>
                                <ul className="list-disc pl-5 space-y-2 text-slate-700">
                                    <li><strong>Lern-Level:</strong> Progression von einfachen Anf&auml;nger-Szenarien zu komplexen Diskussionen.</li>
                                    <li><strong>Szenario-Ziele:</strong> Klare Aufgaben pro Chat (z.B. "Bestelle einen Kaffee", "Handle einen Rabatt aus"), die das Gef&uuml;hl eines Spiels vermitteln.</li>
                                    <li><strong>Dynamische Handlung:</strong> Die KI reagiert spontan auf Nutzerentscheidungen.</li>
                                </ul>
                            </div>
                        </div>
                        <div className="h-full">
                            <div className="h-full bg-white rounded-xl border border-slate-200 shadow-sm p-6 hover:shadow-md transition-shadow">
                                <h3 className="text-xl font-bold text-slate-800 mb-4 pb-2 border-b border-slate-100">Unterstützende KI</h3>
                                <ul className="list-disc pl-5 space-y-2 text-slate-700">
                                    <li>Natürliche, ermutigende Reaktionen.</li>
                                    <li>Kontextbezogene Hilfestellungen statt stumpfer Korrekturen.</li>
                                    <li>Adaptive Schwierigkeit basierend auf dem Nutzerverhalten.</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

                <section className="mb-16">
                    <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">3. Aktueller technischer Status</h2>
                    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
                        <div className="flex items-start space-x-3 text-slate-700">
                            <span className="text-amber-500 text-xl">⚠</span>
                            <p><strong>Work in Progress:</strong> Das Projekt befindet sich in der aktiven Entwicklung.</p>
                        </div>
                        <ul className="list-disc pl-5 space-y-2 text-slate-700">
                            <li><strong>Authentifizierung:</strong> Derzeit noch nicht implementiert. Jeder kann sofort loslegen.</li>
                            <li><strong>Datenhaltung:</strong> Speicherung des Fortschritts erfolgt aktuell ausschließlich lokal im Browser (LocalStorage). Es gibt noch keine persistente Datenbank.</li>
                        </ul>
                    </div>
                </section>

                <section className="mb-16">
                    <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">4. UI Konzept (Work in Progress)</h2>
                    <p className="text-lg text-slate-700 mb-8">Erste Entwürfe für die Benutzeroberfläche.</p>

                    <div className="flex flex-wrap -mx-2 justify-center">
                        <Wireframe title="Szenario-Auswahl">
                            <div className="text-center pt-4 pb-3">
                                <h4 className="font-bold text-lg text-slate-800">Wähle ein Abenteuer</h4>
                            </div>
                            <div className="px-3 flex-grow flex flex-col space-y-3 overflow-y-auto">
                                <div className="p-3 border rounded-lg bg-blue-50 border-blue-200 cursor-pointer hover:bg-blue-100">
                                    <h5 className="font-bold text-sm text-blue-800">Im Café in Paris</h5>
                                    <p className="text-xs text-blue-600">Bestelle Kaffee und Croissants auf Französisch.</p>
                                </div>
                                <div className="p-3 border rounded-lg bg-green-50 border-green-200 cursor-pointer hover:bg-green-100">
                                    <h5 className="font-bold text-sm text-green-800">Markt in Madrid</h5>
                                    <p className="text-xs text-green-600">Kaufe frisches Obst und Gemüse auf Spanisch.</p>
                                </div>
                                <div className="p-3 border rounded-lg bg-gray-50 border-gray-200 cursor-pointer hover:bg-gray-100 opacity-70">
                                    <h5 className="font-bold text-sm text-gray-800">Bahnhof in Berlin</h5>
                                    <p className="text-xs text-gray-600">Kaufe ein Ticket und finde das richtige Gleis.</p>
                                </div>
                            </div>
                        </Wireframe>

                        <Wireframe title="Chat-Interface">
                            <div className="flex flex-col h-full">
                                <div className="bg-slate-100 p-2 border-b text-center text-xs font-bold">
                                    Café-Besitzer (KI)
                                </div>
                                <div className="flex-grow p-2 overflow-y-auto space-y-2">
                                    <div className="bg-white p-2 rounded-lg rounded-tl-none border border-slate-200 text-xs self-start max-w-[80%]">
                                        Bonjour! Was möchten Sie bestellen?
                                    </div>
                                    <div className="bg-blue-100 p-2 rounded-lg rounded-tr-none text-xs self-end max-w-[80%] ml-auto">
                                        Je voudrais un croissant, s'il vous plaît.
                                    </div>
                                    <div className="bg-white p-2 rounded-lg rounded-tl-none border border-slate-200 text-xs self-start max-w-[80%]">
                                        Sehr gerne. Möchten Sie auch einen Kaffee dazu?
                                    </div>
                                </div>
                                <div className="p-2 border-t bg-white">
                                    <div className="flex gap-1">
                                        <input type="text" className="w-full border rounded px-2 py-1 text-xs" placeholder="Antwort eingeben..." />
                                        <button className="bg-blue-500 text-white rounded px-2 py-1 text-xs">→</button>
                                    </div>
                                </div>
                            </div>
                        </Wireframe>
                    </div>
                </section>

                <section className="mb-16">
                    <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">5. Entwicklungsprozess & KI</h2>
                    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
                        <p className="text-lg leading-relaxed text-slate-700">
                            Für diesen ersten Prototypen nutze ich starkes "Vibe Coding" mithilfe von KI. So kann ich unglaublich schnell testen, ob meine Idee eines interaktiven Sprach-Rollenspiels überhaupt so funktioniert, wie ich es mir vorstelle.
                        </p>
                        <p className="text-lg leading-relaxed text-slate-700">
                            Sobald das Konzept validiert ist, werde ich das gesamte Projekt auf Basis dieses Prototypens von Grund auf sauber planen und stabil neu entwickeln.
                        </p>
                    </div>
                </section>

            </div>
        </div>
    );
}

export default LanguageRoleplay;
