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



function OnlineCasino() {
  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">Online Casino (Abschlussprojekt)</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 Entwicklung</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">Team</span>
              <span className="text-sm font-medium text-slate-600">5 Personen</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">Rolle</span>
              <span className="text-sm font-medium text-slate-600">Lead Poker (Full Stack Vertical)</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. 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 fiktive Online-Casino entsteht als Abschlussprojekt in einem 5-köpfigen Team.
              Ziel ist die Entwicklung einer skalierbaren Plattform mit verschiedenen Glücksspielen (ohne Echtgeldeinsatz),
              einem Admin-Dashboard und simulierten Finanztransaktionen.
            </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. Mein Verantwortungsbereich: Der gesamte Poker-Stack</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 flex flex-col">
                <h3 className="text-xl font-bold text-slate-800 mb-4 pb-2 border-b border-slate-100">Backend, DB & Engine</h3>
                <ul className="list-disc pl-5 space-y-3 text-slate-700 flex-grow">
                  <li>
                    <strong>Poker Engine (Core):</strong> Hochgradig modulare und sicher aufgebaute Java-Library für die komplette Spiellogik (Runden, Pötte, Gewinner). Obwohl weite Teile durch Vibe Coding implementiert wurden, liegt der Engine eine strikte, selbst entworfene Architektur zugrunde, die Regelkonformität und Stabilität garantiert.
                  </li>
                  <div className="mt-2 mb-4 flex flex-wrap gap-3">
                    <a href="https://github.com/simon-266/poker-engine" target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:text-indigo-800 font-bold inline-flex items-center text-sm bg-indigo-50 px-3 py-1.5 rounded-full border border-indigo-100 transition-colors">
                      <svg className="w-4 h-4 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>
                    <a href="https://central.sonatype.com/artifact/de.simonaltschaeffl.poker/poker-engine" target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:text-indigo-800 font-bold inline-flex items-center text-sm bg-indigo-50 px-3 py-1.5 rounded-full border border-indigo-100 transition-colors">
                      <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
                      Maven Central
                    </a>
                  </div>
                  <li><strong>API Layer:</strong> Implementierung der WebSocket-Controller für Echtzeit-Kommunikation.</li>
                  <li><strong>Datenbank:</strong> Design und Implementierung der JPA-Entities und Repositories für alle Poker-bezogenen Daten.</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">Frontend & UI</h3>
                <ul className="list-disc pl-5 space-y-2 text-slate-700">
                  <li><strong>React Implementation:</strong> Entwicklung des kompletten Poker-Interfaces im Browser.</li>
                  <li><strong>Echtzeit-Updates:</strong> Verarbeitung der WebSocket-Events zur sofortigen Anzeige von Spielzügen.</li>
                  <li><strong>UX/UI:</strong> Design der Tische, Kartenanimationen und Bedienelemente.</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. 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 TD
    subgraph "Mein Verantwortungsbereich (Poker Vertical)"
        Frontend[React Poker UI]
        WS_Endpoint[WebSocket Controller]
        Service[Poker Service Layer]
        Engine["Poker Engine (Library)"]
        Repo[JPA Repository]
        DB[(Poker Database Tables)]
    end
    
    Other[Andere Casino Module]

    Frontend -- "WebSocket Messages" --> WS_Endpoint
    WS_Endpoint -- "Delegiert an" --> Service
    Service -- "Steuert" --> Engine
    Engine -- "Eventhandler" --> Service
    Service -- "Pusht Updates" --> Frontend
    Service -- "Persistiert" --> Repo
    Repo --> DB`}
            </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. 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">Java</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Spring Boot</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">JPA / Hibernate</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">WebSockets</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">React</div>
              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Maven</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. Entwicklung mit KI (Vibe Coding)</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">
              In diesem Projekt setze ich den Fokus ganz gezielt auf "Vibe Coding", da auch der professionelle Umgang mit KI Teil unserer Benotung ist. Ziel ist es, praktische Erfahrungen mit verschiedenen KI-Modellen zu sammeln und deren Stärken sowie Grenzen im Entwicklungsalltag kennenzulernen.
            </p>
            <p className="text-lg leading-relaxed text-slate-700">
              Während ich die Planung der Systemarchitektur, der APIs und der WebSockets komplett selbst übernehme, delegiere ich einen Großteil der eigentlichen Code-Implementierung an die KI. Dabei gehe ich nach einem klaren, strukturierten Prozess vor:
            </p>
            <ul className="list-disc pl-5 space-y-2 text-slate-700">
              <li>Brainstorming von Lösungsansätzen mit Tools wie Gemini oder ChatGPT</li>
              <li>Ausarbeitung eines detaillierten Bauplans anhand der Ideen</li>
              <li>Festlegung von präzisen Coding-Richtlinien für das jeweilige Modul</li>
              <li>Generierung des Codes durch die KI – strikt entlang dieser Vorgaben</li>
            </ul>
          </div>
        </section>

      </div>
    </div>
  );
}

export default OnlineCasino;
