import React, { useState } from 'react';
import { Lock, CheckCircle, XCircle, MapPin, FileText, Newspaper, MessageCircle, Eye } from 'lucide-react';

const BuckauCrimesGame = () => {
  const [gameState, setGameState] = useState({
    isPaid: false,
    currentLocation: 0,
    locationProgress: [
      { revealed: true, riddlesSolved: 0, qrScanned: false },
      { revealed: false, riddlesSolved: 0, qrScanned: false },
      { revealed: false, riddlesSolved: 0, qrScanned: false },
      { revealed: false, riddlesSolved: 0, qrScanned: false },
      { revealed: false, riddlesSolved: 0, qrScanned: false }
    ],
    collectedClues: [],
    gameCompleted: false,
    finalAnswers: { suspect: '', weapon: '', motive: '' }
  });

  const locations = [
    {
      id: 0,
      name: "Thiemplatz",
      qrCode: "QR-THIEM-2025",
      icon: "🎆",
      description: "Der Tatort. Silvester 2024.",
      storyInfo: "Du stehst am Thiemplatz. Hier wurde Basti tot aufgefunden.",
      newspaper: {
        title: "SILVESTERFEIER AM THIEMPLATZ",
        date: "31. Dezember 2024",
        content: "Buckau feiert ins neue Jahr! Heute Abend größte Silvesterparty des Stadtteils."
      },
      riddles: [
        {
          question: "Zettel mit Zahlen: '2-18-5-23-3-11-1-21'. Alphabet-Positionen. Welches Wort?",
          answer: "BREWCKAU",
          hint: "B=2, R=18, E=5...",
          clue: "Basti hatte 'BREWCKAU' bei sich - sein zweites Zuhause."
        },
        {
          question: "Feuerzeug mit: 'Für die besten Bohnen'. Buchstaben R-E-P-P-I sortieren?",
          answer: "PIPPER",
          hint: "Café in Buckau",
          clue: "Feuerzeug vom Pipper Café."
        },
        {
          question: "Fußspuren zu Ort ohne Stillstand. Tagsüber Menschen, Wochenende Tanzende?",
          answer: "BAHNHOF",
          hint: "Früher für Reisende, heute Kulturzentrum",
          clue: "Jemand floh Richtung Bahnhof."
        }
      ],
      nextLocationId: 1
    },
    {
      id: 1,
      name: "Buckauer Bahnhof",
      qrCode: "QR-BAHNHOF-2025",
      icon: "🚉",
      description: "Kulturzentrum. Verlassen.",
      storyInfo: "Am Bahnhof. Kalt und verlassen.",
      whatsapp: {
        title: "Maren ↔ Basti",
        messages: [
          { sender: "Maren", time: "23:30", text: "Treffen 23:45 am Bahnhof?" },
          { sender: "Basti", time: "23:32", text: "Warum nicht im Brewckau?" },
          { sender: "Maren", time: "23:33", text: "Muss dir erst was zeigen." }
        ]
      },
      riddles: [
        {
          question: "Kreide: 'TREFFEN 23:45'. Zahlen '16-9-16-16-5-18'. Welches Wort?",
          answer: "PIPPER",
          hint: "P=16, I=9...",
          clue: "23:45 Uhr, Treffen mit Person aus Pipper."
        },
        {
          question: "Fahrkarte: '13-1-18-5-14'. Alphabet. Welcher Name?",
          answer: "MAREN",
          hint: "M=13, A=1...",
          clue: "Maren war hier."
        },
        {
          question: "Zeitung: 'K-L-O-S-T-E-R-B-E-R-G-S-T-R'. Welche Straße?",
          answer: "KLOSTERBERGSTRASSE",
          hint: "Buchstaben zusammen",
          clue: "Treffen an Klosterbergstraße geplant."
        }
      ],
      nextLocationId: 2
    },
    {
      id: 2,
      name: "Pipper Café",
      qrCode: "QR-PIPPER-2025",
      icon: "☕",
      description: "Café. Nervöse Stimmung.",
      storyInfo: "Im Pipper. Maren wirkt nervös.",
      newspaper: {
        title: "TRAGISCHER VERLUST",
        date: "15. März 2022",
        content: "Lucas Koslowski (28) verstorben. Schwester Maren tief getroffen."
      },
      whatsapp: {
        title: "Marens Status",
        messages: [
          { sender: "Maren", time: "15. März 2022", text: "Lucas ist tot. Niemand war für ihn da." }
        ]
      },
      riddles: [
        {
          question: "Apothekenrezept: 'As₂O₃'. Welches Element?",
          answer: "ARSEN",
          hint: "As = Arsen",
          clue: "Jemand hatte Zugang zu Arsen!"
        },
        {
          question: "Foto 'Für Lucas, 2022'. Chefin-Initialen M.K. Welcher Vorname?",
          answer: "MAREN",
          hint: "M = weiblicher Vorname",
          clue: "Maren Koslowski, Lucas' Schwester."
        },
        {
          question: "Gästebuch: 'ITÄPS'. Rückwärts?",
          answer: "SPÄTI",
          hint: "Von hinten lesen",
          clue: "Maren war beim Späti."
        }
      ],
      nextLocationId: 3
    },
    {
      id: 3,
      name: "Späti",
      qrCode: "QR-SPAETI-2025",
      icon: "🏪",
      description: "Späti an der Ecke.",
      storyInfo: "Beim Späti. Besitzer erzählt von vermummter Person.",
      whatsapp: {
        title: "Maren ↔ ???",
        messages: [
          { sender: "Maren", time: "23:28", text: "Beim Späti. Gleich vorbei." },
          { sender: "???", time: "23:29", text: "Bist du sicher?" },
          { sender: "Maren", time: "23:30", text: "Er hat Lucas im Stich gelassen." }
        ]
      },
      riddles: [
        {
          question: "Kassenbon 23:30: Wodka, Zitrone. Person murmelte 'Rache'. Wie viele Buchstaben?",
          answer: "5",
          hint: "R-A-C-H-E zählen",
          clue: "Maren sprach von Rache."
        },
        {
          question: "Kamera: Jacke mit 'B-R-A-U-H-A-U-S'. Welches Wort?",
          answer: "BRAUHAUS",
          hint: "Buchstaben zusammen",
          clue: "Person ging Richtung Brauhaus."
        },
        {
          question: "Flyer: 'Live-Musik im Brewckau!'. Vollständiger Name?",
          answer: "BREWCKAU",
          hint: "Schon am Thiemplatz gefunden",
          clue: "Im Brewckau sollte Wahrheit erzählt werden."
        }
      ],
      nextLocationId: 4
    },
    {
      id: 4,
      name: "Brewckau",
      qrCode: "QR-BREWCKAU-2025",
      icon: "🍺",
      description: "Bastis Lieblingsort.",
      storyInfo: "Im Brewckau. Bastis zweites Zuhause.",
      newspaper: {
        title: "HOFFNUNG FÜR LUCAS",
        date: "Dezember 2021",
        content: "Lucas K. hat Kampf gegen Sucht gewonnen. 'Ein Freund war immer da', sagt Lucas."
      },
      whatsapp: {
        title: "Bastis Notiz",
        messages: [
          { sender: "Basti", time: "30. Dez 2024", text: "Maren Wahrheit sagen. Ich half Lucas. Silvester 23:50." }
        ]
      },
      riddles: [
        {
          question: "Notizbuch: '23:50 M.K. treffen. Die ___ über L. erzählen'. 8 Buchstaben?",
          answer: "WAHRHEIT",
          hint: "Was wollte er sagen?",
          clue: "Basti wollte Wahrheit über Lucas erzählen."
        },
        {
          question: "Bier: 'Für L.K., der es geschafft hat - 2021'. Was bedeutet 'geschafft'?",
          answer: "ENTZUG",
          hint: "Lucas überwand Problem",
          clue: "Lucas schaffte Drogenentzug - dank Basti."
        },
        {
          question: "Bierdeckel: 'Wer hat L. wirklich gerettet?' 5 Buchstaben, beginnt mit B.",
          answer: "BASTI",
          hint: "Wer half Lucas?",
          clue: "Basti rettete Lucas - Maren wusste es nie."
        }
      ],
      nextLocationId: null
    }
  ];

  const suspects = ["Maren Koslowski", "Späti-Besitzer", "Unbekannter"];
  const weapons = ["Gift (Arsen)", "Schlag", "Erstickung"];
  const motives = ["Rache für Lucas' Tod", "Geld", "Eifersucht"];

  const totalRiddles = 15;
  const progress = Math.round((gameState.collectedClues.length / totalRiddles) * 100);

  const handlePayment = () => {
    setGameState(prev => ({ ...prev, isPaid: true }));
  };

  const handleQRScan = (locationId) => {
    const newProgress = [...gameState.locationProgress];
    newProgress[locationId].qrScanned = true;
    setGameState(prev => ({ ...prev, locationProgress: newProgress }));
  };

  const handleAnswerSubmit = (locationId, riddleIndex, answer) => {
    const location = locations[locationId];
    const riddle = location.riddles[riddleIndex];
    
    if (answer.toUpperCase().trim() === riddle.answer.toUpperCase()) {
      const newProgress = [...gameState.locationProgress];
      newProgress[locationId].riddlesSolved += 1;
      
      const newClues = [...gameState.collectedClues, riddle.clue];
      
      setGameState(prev => ({
        ...prev,
        locationProgress: newProgress,
        collectedClues: newClues
      }));
      
      if (newProgress[locationId].riddlesSolved === location.riddles.length) {
        if (location.nextLocationId !== null) {
          newProgress[location.nextLocationId].revealed = true;
          setGameState(prev => ({ ...prev, locationProgress: newProgress }));
          alert(`✓ Richtig!\n\n${riddle.clue}\n\nAlle Rätsel gelöst! Nächster Ort: ${locations[location.nextLocationId].name}`);
        } else {
          setGameState(prev => ({ ...prev, gameCompleted: true }));
          alert(`✓ Richtig!\n\n${riddle.clue}\n\nAlle Orte besucht! Löse jetzt den Fall!`);
        }
      } else {
        alert(`✓ Richtig!\n\n${riddle.clue}`);
      }
      return true;
    }
    return false;
  };

  const handleFinalSubmit = () => {
    const correct = 
      gameState.finalAnswers.suspect === "Maren Koslowski" &&
      gameState.finalAnswers.weapon === "Gift (Arsen)" &&
      gameState.finalAnswers.motive === "Rache für Lucas' Tod";
    
    if (correct) {
      alert("🎉 FALL GELÖST!\n\nMaren vergiftete Basti mit Arsen aus Rache. Sie glaubte, Basti ließ Lucas im Stich. Die Wahrheit: Basti half Lucas aus der Sucht. Maren wusste es nie.");
    } else {
      alert("❌ Falsch. Prüfe deine Hinweise!");
    }
  };

  if (!gameState.isPaid) {
    return (
      <div className="min-h-screen bg-black text-white p-4">
        <div className="max-w-2xl mx-auto mt-20">
          <div className="bg-gradient-to-b from-red-950 to-black p-8 rounded-lg border-2 border-red-600">
            <h1 className="text-5xl font-bold mb-2 text-red-500 text-center">🔍 BUCKAU CRIMES</h1>
            <p className="text-xl text-red-300 text-center mb-6">Fall 1: Mord am Silvesterabend</p>
            
            <div className="bg-black bg-opacity-50 p-6 rounded-lg mb-6">
              <p className="mb-4">Silvester 2024. Basti wurde tot am Thiemplatz gefunden. Die Polizei tappt im Dunkeln. Du bist die einzige Hoffnung.</p>
              <p className="text-sm text-gray-400"⚠️ Fiktive Geschichte</p>
            </div>

            <div className="bg-gray-900 p-6 rounded-lg mb-6">
              <p className="text-2xl font-bold text-green-400">14,99 €</p>
            </div>

            <button
              onClick={handlePayment}
              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-lg"
            >
              Mit PayPal bezahlen
            </button>
          </div>
        </div>
      </div>
    );
  }

  if (gameState.gameCompleted) {
    return (
      <div className="min-h-screen bg-black text-white p-4">
        <div className="max-w-2xl mx-auto mt-10">
          <div className="bg-gradient-to-b from-red-950 to-black p-8 rounded-lg border-2 border-red-600">
            <h2 className="text-3xl font-bold mb-6 text-red-500 text-center">🔍 LÖSE DEN FALL</h2>
            
            <div className="bg-gray-900 p-4 rounded-lg mb-6 max-h-96 overflow-y-auto">
              <h3 className="font-bold mb-3 text-red-400">Hinweise:</h3>
              {gameState.collectedClues.map((clue, idx) => (
                <div key={idx} className="text-sm mb-2 text-gray-300">• {clue}</div>
              ))}
            </div>

            <div className="space-y-4">
              <div>
                <label className="block mb-2 font-bold">Täter?</label>
                <select
                  className="w-full bg-gray-900 p-3 rounded text-white"
                  value={gameState.finalAnswers.suspect}
                  onChange={(e) => setGameState(prev => ({
                    ...prev,
                    finalAnswers: { ...prev.finalAnswers, suspect: e.target.value }
                  }))}
                >
                  <option value="">-- Wählen --</option>
                  {suspects.map(s => <option key={s} value={s}>{s}</option>)}
                </select>
              </div>

              <div>
                <label className="block mb-2 font-bold">Tatwaffe?</label>
                <select
                  className="w-full bg-gray-900 p-3 rounded text-white"
                  value={gameState.finalAnswers.weapon}
                  onChange={(e) => setGameState(prev => ({
                    ...prev,
                    finalAnswers: { ...prev.finalAnswers, weapon: e.target.value }
                  }))}
                >
                  <option value="">-- Wählen --</option>
                  {weapons.map(w => <option key={w} value={w}>{w}</option>)}
                </select>
              </div>

              <div>
                <label className="block mb-2 font-bold">Motiv?</label>
                <select
                  className="w-full bg-gray-900 p-3 rounded text-white"
                  value={gameState.finalAnswers.motive}
                  onChange={(e) => setGameState(prev => ({
                    ...prev,
                    finalAnswers: { ...prev.finalAnswers, motive: e.target.value }
                  }))}
                >
                  <option value="">-- Wählen --</option>
                  {motives.map(m => <option key={m} value={m}>{m}</option>)}
                </select>
              </div>

              <button
                onClick={handleFinalSubmit}
                className="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-4 rounded-lg"
              >
                Fall abschließen
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  const currentLoc = locations[gameState.currentLocation];
  const currentProgress = gameState.locationProgress[gameState.currentLocation];

  return (
    <div className="min-h-screen bg-gradient-to-b from-black to-gray-900 text-white p-4">
      <div className="max-w-4xl mx-auto">
        
        {/* Header */}
        <div className="bg-gradient-to-r from-red-950 to-black p-4 rounded-lg border-2 border-red-600 mb-6">
          <h1 className="text-3xl font-bold text-center text-red-500">🔍 DER MORDFALL IN BUCKAU</h1>
        </div>

        {/* Karte */}
        <div className="bg-black bg-opacity-80 p-6 rounded-lg border-2 border-red-800 mb-6">
          <h2 className="text-xl font-bold mb-4 text-red-400 flex items-center gap-2">
            <MapPin className="w-5 h-5" />
            Karte von Buckau
          </h2>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
            {locations.map((loc, idx) => {
              const prog = gameState.locationProgress[idx];
              const isLocked = !prog.revealed;
              const isDone = prog.riddlesSolved === loc.riddles.length;
              
              return (
                <button
                  key={loc.id}
                  onClick={() => prog.revealed && setGameState(prev => ({ ...prev, currentLocation: idx }))}
                  className={`p-4 rounded-lg border-2 ${
                    isLocked
                      ? 'bg-gray-900 border-gray-700 opacity-40'
                      : gameState.currentLocation === idx
                      ? 'bg-red-900 border-red-500'
                      : isDone
                      ? 'bg-green-900 border-green-600'
                      : 'bg-gray-800 border-red-700'
                  }`}
                  disabled={isLocked}
                >
                  <div className="text-3xl mb-2">{isLocked ? '🔒' : loc.icon}</div>
                  <div className="text-xs font-bold">{prog.revealed ? loc.name : `Ort ${idx + 1}`}</div>
                  {isDone && <CheckCircle className="w-4 h-4 text-green-400 mx-auto mt-1" />}
                </button>
              );
            })}
          </div>
        </div>

        {/* Fortschritt */}
        <div className="bg-gray-900 p-4 rounded-lg border border-red-800 mb-6">
          <div className="flex justify-between mb-2">
            <span className="text-sm text-red-400">Hinweise: {gameState.collectedClues.length}/{totalRiddles}</span>
            <span className="text-sm text-red-400">{progress}%</span>
          </div>
          <div className="w-full bg-gray-800 rounded-full h-3">
            <div className="bg-red-600 h-full rounded-full" style={{ width: `${progress}%` }} />
          </div>
        </div>

        {/* Hauptinhalt */}
        <div className="bg-black bg-opacity-90 p-6 rounded-lg border-2 border-red-800">
          <div className="flex items-center gap-3 mb-4">
            <span className="text-4xl">{currentLoc.icon}</span>
            <div>
              <h2 className="text-2xl font-bold text-red-400">{currentLoc.name}</h2>
              <p className="text-sm text-gray-400">{currentLoc.description}</p>
            </div>
          </div>

          {!currentProgress.qrScanned ? (
            <div className="bg-yellow-900 p-6 rounded-lg border-2 border-yellow-600">
              <div className="text-center mb-4">
                <div className="text-6xl mb-3">📱</div>
                <h3 className="text-xl font-bold text-yellow-300 mb-2">QR-Code scannen</h3>
                <p className="text-sm">Code: {currentLoc.qrCode}</p>
              </div>
              <button
                onClick={() => handleQRScan(gameState.currentLocation)}
                className="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 rounded-lg"
              >
                QR-Code gescannt
              </button>
            </div>
          ) : (
            <>
              <div className="bg-red-950 bg-opacity-50 p-4 rounded-lg mb-6">
                <p className="text-gray-300 italic">{currentLoc.storyInfo}</p>
              </div>

              {currentLoc.newspaper && (
                <div className="bg-yellow-50 border-4 border-yellow-900 p-6 rounded-lg mb-6">
                  <div className="flex items-center justify-between mb-2">
                    <Newspaper className="w-6 h-6 text-yellow-900" />
                    <span className="text-sm text-yellow-800 font-bold">BUCKAUER KÄSEBLATT</span>
                  </div>
                  <h3 className="text-2xl font-bold text-yellow-900 mb-1">{currentLoc.newspaper.title}</h3>
                  <p className="text-xs text-yellow-700 mb-3">{currentLoc.newspaper.date}</p>
                  <p className="text-sm text-gray-900">{currentLoc.newspaper.content}</p>
                </div>
              )}
              
              {currentLoc.whatsapp && (
                <div className="bg-teal-900 border-2 border-teal-600 p-4 rounded-lg mb-6">
                  <div className="flex items-center gap-2 mb-4 pb-2 border-b border-teal-700">
                    <MessageCircle className="w-5 h-5 text-teal-400" />
                    <span className="font-bold text-teal-300">{currentLoc.whatsapp.title}</span>
                  </div>
                  <div className="space-y-3">
                    {currentLoc.whatsapp.messages.map((msg, idx) => (
                      <div key={idx} className={`flex ${msg.sender === "Basti" ? 'justify-end' : 'justify-start'}`}>
                        <div className={`max-w-xs rounded-lg p-3 ${
                          msg.sender === "Basti" ? 'bg-green-600' : msg.sender === "???" ? 'bg-gray-700' : 'bg-white text-gray-900'
                        }`}>
                          {msg.sender !== "Basti" && <p className="text-xs font-bold mb-1 opacity-75">{msg.sender}</p>}
                          <p className="text-sm">{msg.text}</p>
                          <p className="text-xs mt-1 opacity-75">{msg.time}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              <div className="bg-amber-950 p-6 rounded-lg border-2 border-amber-700">
                <div className="flex items-center gap-2 mb-4">
                  <FileText className="w-6 h-6 text-amber-400" />
                  <h3 className="text-xl font-bold text-amber-300">Polizeiakte - Rätsel</h3>
                </div>
                
                <div className="space-y-4">
                  {currentLoc.riddles.map((riddle, idx) => {
                    const isSolved = currentProgress.riddlesSolved > idx;
                    return (
                      <RiddleComponent
                        key={idx}
                        riddle={riddle}
                        riddleNumber={idx + 1}
                        isSolved={isSolved}
                        onSubmit={(answer) => handleAnswerSubmit(gameState.currentLocation, idx, answer)}
                      />
                    );
                  })}
                </div>
              </div>
            </>
          )}
        </div>

        {gameState.collectedClues.length > 0 && (
          <div className="mt-6 bg-gray-900 p-4 rounded-lg border border-red-800">
            <h3 className="font-bold mb-3 text-red-400 flex items-center gap-2">
              <Eye className="w-5 h-5" />
              Hinweise ({gameState.collectedClues.length}/{totalRiddles})
            </h3>
            <div className="space-y-2">
              {gameState.collectedClues.slice(-3).map((clue, idx) => (
                <div key={idx} className="text-sm text-green-400">✓ {clue}</div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

const RiddleComponent = ({ riddle, riddleNumber, isSolved, onSubmit }) => {
  const [answer, setAnswer] = useState('');
  const [showHint, setShowHint] = useState(false);
  const [showError, setShowError] = useState(false);

  const handleSubmit = () => {
    const correct = onSubmit(answer);
    if (!correct) {
      setShowError(true);
      setTimeout(() => setShowError(false), 2000);
    } else {
      setAnswer('');
      setShowHint(false);
    }
  };

  if (isSolved) {
    return (
      <div className="bg-green-900 bg-opacity-40 p-4 rounded-lg border-2 border-green-700">
        <div className="flex items-center gap-2">
          <CheckCircle className="text-green-400" />
          <span className="font-bold text-green-300">Rätsel {riddleNumber} gelöst!</span>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-black bg-opacity-40 p-4 rounded-lg border-2 border-amber-800">
      <h4 className="font-bold mb-3 text-amber-300">📋 Rätsel {riddleNumber}</h4>
      <p className="mb-4 text-gray-200">{riddle.question}</p>
      
      {showHint && (
        <div className="bg-yellow-900 p-3 rounded-lg mb-4 border-2 border-yellow-700">
          <p className="text-sm text-yellow-200">💡 {riddle.hint}</p>
        </div>
      )}
      
      <div className="flex gap-2 mb-3">
        <input
          type="text"
          value={answer}
          onChange={(e) => setAnswer(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && handleSubmit()}
          placeholder="Deine Antwort..."
          className="flex-1 bg-gray-900 border-2 border-amber-700 p-3 rounded-lg text-white"
        />
        <button
          onClick={handleSubmit}
          className="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-lg font-bold"
        >
          Prüfen
        </button>
      </div>
      
      <button
        onClick={() => setShowHint(!showHint)}
        className="text-sm text-yellow-400 hover:text-yellow-300"
      >
        {showHint ? '− Tipp verbergen' : '💡 Tipp anzeigen'}
      </button>

      {showError && (
        <div className="mt-3 flex items-center gap-2 text-red-400">
          <XCircle className="w-4 h-4" />
          <span className="text-sm">Falsch. Nochmal versuchen!</span>
        </div>
      )}
    </div>
  );
};

export default BuckauCrimesGame;