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 / 12' }}>
                    {children}
                </div>
            </div>
        </div>
    </div>
);

function TdotPage() {
    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">TDoT - Schere Stein Papier AI</h1>
                    <p className="text-xl text-slate-600 max-w-3xl mx-auto mb-6">
                        Eine interaktive KI-Demo für den Tag der offenen Tür, die Computer Vision greifbar macht.
                    </p>
                    <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">Abgeschlossen</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">Typ</span>
                            <span className="text-sm font-medium text-slate-600">Live Demo / Showcase</span>
                        </div>
                    </div>
                    <div className="mt-8">
                        <a href="https://github.com/simon-266/tdot_programm" target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:text-indigo-800 font-bold inline-flex items-center bg-white px-4 py-2 rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-all">
                            <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd"></path></svg>
                            GitHub Repository
                        </a>
                    </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. Projektübersicht</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">
                            Dieses Projekt wurde speziell für den Tag der offenen Tür der EDV-Schule Plattling entwickelt.
                            Ziel war es, Besuchern auf spielerische Weise zu zeigen, wie moderne <strong>Computer Vision</strong> funktioniert.
                        </p>
                        <p className="text-lg leading-relaxed text-slate-700">
                            Die Anwendung nutzt eine Webcam, um Handgesten (Schere, Stein, Papier) in Echtzeit zu erkennen und ermöglicht es,
                            gegen eine KI oder einen anderen Spieler anzutreten.
                        </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. Features & Modi</h2>
                    <div className="grid grid-cols-1 md:grid-cols-3 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">Singleplayer</h3>
                                <p className="text-slate-700">
                                    Der Spieler tritt gegen den Computer an. Nach einem Countdown erkennt die KI die Geste des Spielers
                                    und w&auml;hlt zuf&auml;llig eine eigene Geste. Der Gewinner wird sofort angezeigt.
                                </p>
                            </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">Multiplayer</h3>
                                <p className="text-slate-700">
                                    Zwei Personen halten ihre Hände gleichzeitig in die Kamera. Die KI erkennt beide Gesten, ordnet sie
                                    den Spielern (Links/Rechts) zu und ermittelt den Gewinner.
                                </p>
                            </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">Scan All (Debug)</h3>
                                <p className="text-slate-700">
                                    Ein offener Modus, der alle erkannten Objekte und die Konfidenz (Sicherheit) der KI visualisiert.
                                    Ideal, um die Grenzen des Modells zu testen.
                                </p>
                            </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. Technische Architektur</h2>
                    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm overflow-x-auto">
                        <div className="mermaid flex justify-center">
                            {`graph LR
    Webcam[Webcam Video] --> OpenCV
    OpenCV -- "Frames" --> YOLO[YOLO AI Model]
    YOLO -- "Detections (Box & Label)" --> Logic[Game Logic]
    Logic -- "Overlay (Winner/Graphics)" --> Streamlit
    Streamlit -- "UI Display" --> User((User))`}
                        </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">4. KI Training & Performance</h2>
                    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <h3 className="text-lg font-bold text-slate-800 mb-2">Training & Daten</h3>
                                <ul className="list-disc pl-5 space-y-2 text-slate-700">
                                    <li><strong>Datensatz:</strong> Trainiert mit Bildern von <a href="https://roboflow.com/" target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:underline">Roboflow</a>.</li>
                                    <li><strong>Mixed Precision:</strong> Nutzung von 16-bit Precision (<code>amp=True</code>) um das Training auf der GPU zu beschleunigen.</li>
                                </ul>
                            </div>
                            <div>
                                <h3 className="text-lg font-bold text-slate-800 mb-2">Inferenz Optimierung</h3>
                                <ul className="list-disc pl-5 space-y-2 text-slate-700">
                                    <li><strong>Hardware-Anpassung:</strong> Optimiert für Schul-PCs mittels ONNX und OpenVINO.</li>
                                    <li><strong>Half-Precision:</strong> Export mit <code>half=True</code> (FP16) für maximale Performance.</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">5. Tech Stack</h2>
                    <div className="bg-slate-50 p-6 rounded-xl border border-slate-200">
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                            <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Python 3.9+</div>
                            <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Ultralytics YOLO</div>
                            <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">OpenCV</div>
                            <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Streamlit</div>
                            <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">NumPy</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">6. UI Konzept</h2>
                    <div className="flex flex-wrap -mx-2 justify-center">
                        <Wireframe title="Game Overlay">
                            <div className="relative w-full h-full bg-slate-800 rounded flex flex-col items-center justify-center text-white overflow-hidden">
                                <div className="absolute top-4 left-4 text-xs font-mono text-green-400">FPS: 30</div>
                                <div className="text-4xl font-bold mb-2">SCHERE...</div>
                                <div className="w-32 h-32 border-4 border-dashed border-white/30 rounded-lg flex items-center justify-center mb-4">
                                    <span className="text-xs text-white/50">Hand hier</span>
                                </div>
                                <div className="absolute bottom-10 left-0 right-0 text-center">
                                    <div className="inline-block px-4 py-2 bg-black/50 rounded text-sm">
                                        Warte auf Geste...
                                    </div>
                                </div>
                            </div>
                        </Wireframe>
                        <Wireframe title="Settings Sidebar">
                            <div className="p-4 flex flex-col space-y-4">
                                <div className="space-y-1">
                                    <div className="text-xs font-bold text-slate-500 uppercase">Kamera</div>
                                    <div className="h-8 bg-white border rounded px-2 flex items-center text-xs text-slate-700 shadow-sm">Integrated Webcam</div>
                                </div>
                                <div className="space-y-1">
                                    <div className="text-xs font-bold text-slate-500 uppercase">Modus</div>
                                    <div className="flex space-x-2">
                                        <div className="flex-1 h-8 bg-indigo-100 border border-indigo-300 rounded flex items-center justify-center text-xs font-bold text-indigo-700">Single</div>
                                        <div className="flex-1 h-8 bg-white border rounded flex items-center justify-center text-xs text-slate-600">Multi</div>
                                    </div>
                                </div>
                                <div className="pt-4 border-t">
                                    <button className="w-full py-2 bg-red-500 text-white rounded font-bold text-xs shadow hover:bg-red-600">SPIEL STARTEN</button>
                                </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">7. KI im Entwicklungsprozess</h2>
                    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
                        <p className="text-lg leading-relaxed text-slate-700">
                            Um den knappen Zeitplan für den Tag der offenen Tür einzuhalten, habe ich für einige Code-Passagen sogenanntes "Vibe Coding" mit KI-Unterstützung angewendet. Die grundlegende Software-Architektur sowie die gezielte Auswahl der verwendeten KI-Modelle stammen jedoch vollständig von mir.
                        </p>
                    </div>
                </section>

            </div>
        </div>
    );
}

export default TdotPage;
