import React, { useState, useEffect } from 'react';
import { 
  Shield, Users, Volume2, AlertTriangle, Briefcase, Plus, 
  Search, Megaphone, Banknote, Siren, X, CheckCircle,
  Radio, Fingerprint, Activity, Gavel, FileText, QrCode, Lock, Skull
} from 'lucide-react';

// --- SYSTEM NOTYFIKACJI ---
const Toast = ({ message, type, onClose }) => {
  useEffect(() => {
    const timer = setTimeout(() => {
      onClose();
    }, 3000);
    return () => clearTimeout(timer);
  }, [onClose]);

  const bgColor = 
    type === 'success' ? 'bg-green-500' : 
    type === 'error' ? 'bg-red-500' : 
    type === 'warning' ? 'bg-yellow-500' : 'bg-blue-500';

  return (
    <div className={`fixed bottom-4 right-4 ${bgColor} text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3 z-50 animate-bounce`}>
      {type === 'success' && <CheckCircle size={20} />}
      {type === 'error' && <AlertTriangle size={20} />}
      {type === 'warning' && <Shield size={20} />}
      <span className="font-bold">{message}</span>
    </div>
  );
};

export default function App() {
  const [activeTab, setActiveTab] = useState('kody');
  const [toasts, setToasts] = useState([]);
  
  // Stan miasta
  const [budget, setBudget] = useState(150000);
  
  // System Kodów
  const [activeCode, setActiveCode] = useState('ZIELONY'); // ZIELONY, ZOLTY, CZERWONY
  const [presidentInDanger, setPresidentInDanger] = useState(false); // KOD CZARNY
  const [announcementText, setAnnouncementText] = useState('');

  // Baza Obywateli
  const [citizens, setCitizens] = useState([
    { id: '001', name: 'Jan Kowalski', role: 'Policjant', money: 2500, status: 'Czysty' },
    { id: '002', name: 'Anna Nowak', role: 'Lekarz', money: 4200, status: 'Czysty' },
    { id: '003', name: 'Piotr Wiśniewski', role: 'Bezrobotny', money: 150, status: 'Poszukiwany' },
  ]);

  const addToast = (message, type = 'info') => {
    const id = Math.random().toString(36).substr(2, 9);
    setToasts((prev) => [...prev, { id, message, type }]);
  };

  const removeToast = (id) => {
    setToasts((prev) => prev.filter((t) => t.id !== id));
  };

  // --- SYSTEM MÓWIĄCY (TEXT TO SPEECH) ---
  const speakAnnouncement = (text) => {
    if ('speechSynthesis' in window) {
      window.speechSynthesis.cancel(); // Przerwij poprzednie mówienie
      const msg = new SpeechSynthesisUtterance(text);
      msg.lang = 'pl-PL';
      msg.rate = 0.9; // Troszkę wolniej, żeby brzmiało groźniej/wyraźniej
      msg.pitch = 0.8;
      window.speechSynthesis.speak(msg);
      addToast('Wysłano komunikat głosowy!', 'success');
    } else {
      addToast('Twoja przeglądarka nie obsługuje czytania na głos.', 'error');
    }
  };

  const handleCodeChange = (code) => {
    setActiveCode(code);
    let speechText = "";

    switch(code) {
      case 'ZIELONY':
        speechText = "Uwaga obywatele. Ogłaszam kod zielony. Powtarzam, kod zielony. Sytuacja jest w pełni bezpieczna. Można normalnie poruszać się po mieście i wrócić do swoich obowiązków.";
        break;
      case 'ZOLTY':
        speechText = "Uwaga! Ogłaszam kod żółty. Sytuacja jest niebezpieczna. Zachowajcie wzmożoną czujność, ale nie ma jeszcze potrzeby ucieczki do bunkra. Oczekujcie na dalsze polecenia służb.";
        break;
      case 'CZERWONY':
        speechText = "ALARM! ALARM! Ogłaszam kod czerwony! To nie jest ćwiczenie! Ekstremalne zagrożenie dla miasta! Natychmiastowa ewakuacja do bunkra! Bunkier został otwarty! Prezydent biegnie do strefy bezpiecznej!";
        break;
      default:
        break;
    }

    speakAnnouncement(speechText);
  };

  const toggleBlackCode = () => {
    const newState = !presidentInDanger;
    setPresidentInDanger(newState);
    
    if (newState) {
      speakAnnouncement("KOD CZARNY! KOD CZARNY! Prezydent jest w bezpośrednim niebezpieczeństwie! Wszystkie jednostki policji natychmiast do ochrony VIP-a! Użycie siły dozwolone!");
    } else {
      speakAnnouncement("Odwołuję kod czarny. Prezydent jest bezpieczny. Służby mogą wrócić do standardowych patroli.");
    }
  };

  const customAnnouncement = () => {
    if (announcementText.trim()) {
      speakAnnouncement(`Komunikat od Prezydenta: ${announcementText}`);
      setAnnouncementText('');
    }
  };

  // --- RENDEROWANIE INTERFEJSU ---

  const renderTopBar = () => (
    <div className={`p-4 border-b-4 flex justify-between items-center transition-all duration-500 ${
      activeCode === 'ZIELONY' ? 'bg-green-900 border-green-500' :
      activeCode === 'ZOLTY' ? 'bg-yellow-900 border-yellow-500' :
      'bg-red-900 border-red-500 animate-pulse'
    }`}>
      <div className="flex items-center gap-4">
        <Shield size={40} className={`
          ${activeCode === 'ZIELONY' ? 'text-green-400' : ''}
          ${activeCode === 'ZOLTY' ? 'text-yellow-400' : ''}
          ${activeCode === 'CZERWONY' ? 'text-red-400' : ''}
        `} />
        <div>
          <h1 className="text-2xl font-black text-white tracking-wider">M.I.A.S.T.O - SYSTEM PREZYDENCKI</h1>
          <p className="text-sm font-bold text-gray-300">
            STAN MIASTA: KOD {activeCode}
          </p>
        </div>
      </div>
      <div className="flex gap-6 items-center">
        {presidentInDanger && (
          <div className="bg-black text-red-500 px-4 py-2 rounded border border-red-500 font-bold flex items-center gap-2 animate-pulse">
            <Skull size={24} />
            KOD CZARNY - VIP W NIEBEZPIECZEŃSTWIE
          </div>
        )}
        <div className="text-right">
          <p className="text-xs text-gray-300">BUDŻET MIASTA</p>
          <p className="text-xl font-bold text-green-400 flex items-center gap-2 justify-end">
            <Banknote size={20} />
            {budget.toLocaleString()} PLN
          </p>
        </div>
      </div>
    </div>
  );

  const renderCodePanel = () => (
    <div className="space-y-6">
      <div className="bg-gray-800 p-6 rounded-xl border border-gray-700 shadow-2xl">
        <h2 className="text-2xl font-bold mb-6 flex items-center gap-3 border-b border-gray-700 pb-3">
          <Siren className="text-blue-500" /> System Ostrzegania i Głośników
        </h2>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
          {/* KOD ZIELONY */}
          <button 
            onClick={() => handleCodeChange('ZIELONY')}
            className={`p-6 rounded-xl flex flex-col items-center gap-3 transition-all ${
              activeCode === 'ZIELONY' ? 'bg-green-600 ring-4 ring-green-300 scale-105' : 'bg-gray-700 hover:bg-green-900'
            }`}
          >
            <CheckCircle size={48} className={activeCode === 'ZIELONY' ? 'text-white' : 'text-green-500'} />
            <span className="text-xl font-bold">KOD ZIELONY</span>
            <span className="text-xs text-center opacity-80">Bezpiecznie. Normalny ruch w mieście. Obywatele pracują.</span>
          </button>

          {/* KOD ZÓŁTY */}
          <button 
            onClick={() => handleCodeChange('ZOLTY')}
            className={`p-6 rounded-xl flex flex-col items-center gap-3 transition-all ${
              activeCode === 'ZOLTY' ? 'bg-yellow-600 ring-4 ring-yellow-300 scale-105' : 'bg-gray-700 hover:bg-yellow-900'
            }`}
          >
            <AlertTriangle size={48} className={activeCode === 'ZOLTY' ? 'text-white' : 'text-yellow-500'} />
            <span className="text-xl font-bold">KOD ŻÓŁTY</span>
            <span className="text-xs text-center opacity-80">Niebezpiecznie! Zwiększona czujność, ale bez bunkra.</span>
          </button>

          {/* KOD CZERWONY */}
          <button 
            onClick={() => handleCodeChange('CZERWONY')}
            className={`p-6 rounded-xl flex flex-col items-center gap-3 transition-all ${
              activeCode === 'CZERWONY' ? 'bg-red-600 ring-4 ring-red-300 scale-105 animate-pulse' : 'bg-gray-700 hover:bg-red-900'
            }`}
          >
            <Radio size={48} className={activeCode === 'CZERWONY' ? 'text-white' : 'text-red-500'} />
            <span className="text-xl font-bold">KOD CZERWONY</span>
            <span className="text-xs text-center opacity-80">GROŹNA SYMULACJA! Natychmiast do bunkra! Prezydent biegnie!</span>
          </button>
        </div>

        {/* KOD CZARNY - DODATEK */}
        <div className="mt-8 border-t border-gray-700 pt-6">
          <h3 className="text-lg font-bold mb-4 text-gray-300">MODYFIKATORY SPECJALNE</h3>
          <button 
            onClick={toggleBlackCode}
            className={`w-full p-4 rounded-xl flex items-center justify-center gap-4 text-xl font-black uppercase transition-all ${
              presidentInDanger 
                ? 'bg-black text-red-500 ring-4 ring-red-600 animate-pulse' 
                : 'bg-gray-700 text-gray-400 hover:bg-gray-600'
            }`}
          >
            <Lock size={32} />
            {presidentInDanger ? 'KOD CZARNY AKTYWNY - OCHRONA VIP!' : 'AKTYWUJ KOD CZARNY (Zagrożenie Prezydenta)'}
            <Lock size={32} />
          </button>
        </div>
      </div>

      {/* Ręczne Komunikaty */}
      <div className="bg-gray-800 p-6 rounded-xl border border-gray-700 shadow-2xl">
        <h3 className="text-xl font-bold mb-4 flex items-center gap-2">
          <Megaphone className="text-purple-500" /> Własny Komunikat Głosowy
        </h3>
        <div className="flex gap-2">
          <input 
            type="text" 
            value={announcementText}
            onChange={(e) => setAnnouncementText(e.target.value)}
            placeholder="Wpisz co ma powiedzieć głośnik..."
            className="flex-1 bg-gray-900 border border-gray-600 rounded-lg p-3 text-white focus:outline-none focus:border-purple-500"
            onKeyPress={(e) => e.key === 'Enter' && customAnnouncement()}
          />
          <button 
            onClick={customAnnouncement}
            className="bg-purple-600 hover:bg-purple-500 px-6 py-3 rounded-lg font-bold flex items-center gap-2"
          >
            <Volume2 size={20} /> MÓW!
          </button>
        </div>
      </div>
    </div>
  );

  const renderCitizensPanel = () => (
    <div className="bg-gray-800 p-6 rounded-xl border border-gray-700 shadow-2xl min-h-[600px]">
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-2xl font-bold flex items-center gap-3">
          <Users className="text-blue-500" /> Rejestr eDowodów
        </h2>
        <button 
          onClick={() => addToast('Otwarto formularz wyrabiania eDowodu', 'info')}
          className="bg-blue-600 hover:bg-blue-500 px-4 py-2 rounded-lg font-bold flex items-center gap-2"
        >
          <Plus size={20} /> Wyrób nowy eDowód
        </button>
      </div>

      <div className="grid gap-4">
        {citizens.map(citizen => (
          <div key={citizen.id} className="bg-gray-900 p-4 rounded-lg border border-gray-700 flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="bg-gray-800 p-3 rounded-lg">
                <QrCode size={32} className="text-blue-400" />
              </div>
              <div>
                <h3 className="font-bold text-lg">{citizen.name}</h3>
                <div className="flex gap-3 text-sm text-gray-400">
                  <span className="flex items-center gap-1"><Briefcase size={14}/> {citizen.role}</span>
                  <span className="flex items-center gap-1">ID: #{citizen.id}</span>
                </div>
              </div>
            </div>
            <div className="flex items-center gap-6">
              <div className="text-right">
                <p className="text-xs text-gray-500">Konto w banku</p>
                <p className="font-mono text-green-400 font-bold">{citizen.money} PLN</p>
              </div>
              <div className={`px-3 py-1 rounded-full text-sm font-bold border ${
                citizen.status === 'Czysty' ? 'bg-green-900/50 text-green-400 border-green-700' : 'bg-red-900/50 text-red-400 border-red-700'
              }`}>
                {citizen.status}
              </div>
              <button className="bg-gray-700 hover:bg-gray-600 p-2 rounded transition-colors">
                <FileText size={20} />
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-gray-950 text-white font-sans selection:bg-blue-500/30">
      {renderTopBar()}
      
      <div className="flex h-[calc(100vh-88px)]">
        {/* Pasek boczny nawigacji */}
        <div className="w-64 bg-gray-900 border-r border-gray-800 flex flex-col p-4 gap-2">
          <button 
            onClick={() => setActiveTab('kody')}
            className={`flex items-center gap-3 p-3 rounded-lg font-bold transition-all ${
              activeTab === 'kody' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:bg-gray-800 hover:text-white'
            }`}
          >
            <Siren size={20} /> System Ostrzegania
          </button>
          
          <button 
            onClick={() => setActiveTab('obywatele')}
            className={`flex items-center gap-3 p-3 rounded-lg font-bold transition-all ${
              activeTab === 'obywatele' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:bg-gray-800 hover:text-white'
            }`}
          >
            <Users size={20} /> Baza Obywateli
          </button>
          
          <button 
            onClick={() => addToast('Panel służb w przygotowaniu', 'warning')}
            className="flex items-center gap-3 p-3 rounded-lg font-bold text-gray-400 hover:bg-gray-800 hover:text-white transition-all"
          >
            <Gavel size={20} /> Policja i Wyroki
          </button>

          <button 
            onClick={() => addToast('Panel ekonomii w przygotowaniu', 'warning')}
            className="flex items-center gap-3 p-3 rounded-lg font-bold text-gray-400 hover:bg-gray-800 hover:text-white transition-all"
          >
            <Banknote size={20} /> Zarządzanie Budżetem
          </button>
        </div>

        {/* Główna zawartość */}
        <div className="flex-1 p-8 overflow-y-auto bg-gray-950 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')]">
          {activeTab === 'kody' && renderCodePanel()}
          {activeTab === 'obywatele' && renderCitizensPanel()}
        </div>
      </div>

      {/* Kontenery Toastów */}
      {toasts.map((toast, index) => (
        <div key={toast.id} style={{ bottom: `${16 + index * 60}px` }} className="fixed right-4 z-50">
          <Toast message={toast.message} type={toast.type} onClose={() => removeToast(toast.id)} />
        </div>
      ))}
    </div>
  );
}