import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, 
  collection, 
  doc, 
  onSnapshot, 
  query, 
  updateDoc, 
  serverTimestamp 
} from 'firebase/firestore';
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';
import { 
  Ambulance, 
  Home, 
  Route, 
  UserCircle, 
  Settings, 
  ChevronDown, 
  ChevronLeft, 
  FileText, 
  AlertTriangle,
  Navigation,
  Activity,
  MapPin,
  ClipboardCheck,
  X,
  CheckCircle2,
  Truck,
  Stethoscope
} from 'lucide-react';

// --- KONFIGURACJA SYSTEMU ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'ambulance-os-live-v4';

const STEPS = [
  { id: 'ACCEPTED', text: "PRZYJMIJ ZLECENIE", color: "bg-blue-600" },
  { id: 'DEPARTED', text: "WYJAZD DO PACJENTA", color: "bg-indigo-600" },
  { id: 'ON_SITE', text: "NA MIEJSCU ODBIORU", color: "bg-emerald-600" },
  { id: 'PICKED_UP', text: "PACJENT W KARETCE", color: "bg-amber-600" },
  { id: 'TRANSPORTING', text: "W DRODZE DO CELU", color: "bg-blue-600" },
  { id: 'ARRIVED', text: "NA MIEJSCU DOCELOWYM", color: "bg-emerald-600" },
  { id: 'FINISHED', text: "ZAKOŃCZ I ZWOLNIJ ZESPÓŁ", color: "bg-slate-900" }
];

export default function App() {
  const [user, setUser] = useState(null);
  const [setup, setSetup] = useState({ team: '', ambulance: '' });
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [activeTab, setActiveTab] = useState('home');
  const [headerExpanded, setHeaderExpanded] = useState(false);
  const [orders, setOrders] = useState([]);
  const [selectedOrder, setSelectedOrder] = useState(null);
  const [teamStatus, setTeamStatus] = useState('READY');
  const [showTtkModal, setShowTtkModal] = useState(false);
  const [currentTime, setCurrentTime] = useState(new Date().toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }));

  // Autoryzacja Firebase
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) {
        console.error("Auth error:", err);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  // Synchronizacja danych
  useEffect(() => {
    if (!user || !isLoggedIn) return;
    const ordersRef = collection(db, 'artifacts', appId, 'public', 'data', 'orders');
    const unsubscribe = onSnapshot(query(ordersRef), (snap) => {
      const data = snap.docs.map(d => ({ id: d.id, ...d.data() }));
      setOrders(data.filter(o => !o.assignedTeam || o.assignedTeam === setup.team));
    });
    const timer = setInterval(() => setCurrentTime(new Date().toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })), 1000);
    return () => { unsubscribe(); clearInterval(timer); };
  }, [user, isLoggedIn, setup.team]);

  const handleLogin = () => { if (setup.team && setup.ambulance) setIsLoggedIn(true); };

  const updateStatus = async (orderId, stepIdx) => {
    if (!user) return;
    const nextStep = STEPS[stepIdx];
    const orderRef = doc(db, 'artifacts', appId, 'public', 'data', 'orders', orderId);
    const order = orders.find(o => o.id === orderId);
    const log = { status: nextStep.text, time: currentTime, code: nextStep.id };
    
    await updateDoc(orderRef, {
      currentStep: stepIdx + 1,
      logs: [...(order.logs || []), log],
      lastUpdate: serverTimestamp(),
      assignedTeam: setup.team
    });

    if (nextStep.id === 'FINISHED') { 
      setSelectedOrder(null); 
      setActiveTab('home'); 
    }
  };

  if (!isLoggedIn) {
    return (
      <div className="fixed inset-0 bg-slate-50 flex flex-col items-center justify-center p-8 font-sans">
        <div className="w-20 h-20 bg-blue-900 rounded-[2rem] flex items-center justify-center shadow-2xl mb-10 border border-slate-100">
          <Ambulance className="text-white size-10" />
        </div>
        <h1 className="text-4xl font-black text-slate-900 mb-2 tracking-tighter">Ambulance OS</h1>
        <p className="text-slate-400 font-bold text-xs mb-12 uppercase tracking-[0.2em]">System Operacyjny ZRM</p>
        <div className="w-full max-w-sm space-y-4">
          <select className="w-full bg-white border border-slate-200 rounded-2xl p-6 font-bold outline-none shadow-sm appearance-none" onChange={e => setSetup({...setup, team: e.target.value})}>
            <option value="">Wybierz Zespół...</option>
            <option value="S-01">S-01 Specjalistyczny</option>
            <option value="P-01">P-01 Podstawowy</option>
          </select>
          <select className="w-full bg-white border border-slate-200 rounded-2xl p-6 font-bold outline-none shadow-sm appearance-none" onChange={e => setSetup({...setup, ambulance: e.target.value})}>
            <option value="">Wybierz Pojazd...</option>
            <option value="L-01">Mercedes Sprinter</option>
            <option value="L-02">VW Crafter</option>
          </select>
          <button onClick={handleLogin} className="w-full bg-blue-600 text-white font-black py-6 rounded-2xl shadow-xl active:scale-95 transition-all mt-6 disabled:opacity-50">ROZPOCZNIJ DYŻUR</button>
        </div>
      </div>
    );
  }

  return (
    <div className="h-screen bg-[#f8fafc] flex flex-col overflow-hidden font-sans select-none">
      
      {/* NAGŁÓWEK SYSTEMOWY */}
      <header className={`relative bg-blue-900 text-white shadow-2xl transition-all duration-300 z-50 overflow-hidden ${headerExpanded ? 'h-80 rounded-b-2xl' : 'h-20 rounded-b-none'}`}>
        <div className="px-6 h-full flex flex-col justify-center">
          {!headerExpanded ? (
            <div className="flex justify-between items-center">
              <div className="flex items-center gap-4">
                <div className={`w-3 h-3 rounded-full animate-pulse ${teamStatus === 'READY' ? 'bg-emerald-400' : 'bg-amber-400'}`} />
                <div>
                  <h2 className="text-lg font-black uppercase leading-none tracking-tight">{setup.team}</h2>
                  <p className="text-[10px] text-blue-300 font-bold uppercase mt-1 tracking-wider">{setup.ambulance}</p>
                </div>
              </div>
              <div className="flex items-center gap-4">
                <div className="text-xl font-black tracking-tighter">{currentTime}</div>
                <button onClick={() => setHeaderExpanded(true)} className="p-2 bg-white/10 rounded-lg"><ChevronDown className="size-5" /></button>
              </div>
            </div>
          ) : (
            <div className="space-y-6">
              <div className="flex justify-between items-center border-b border-white/10 pb-4">
                <div>
                  <h2 className="text-2xl font-black uppercase">OPERACYJNY</h2>
                  <p className="text-[10px] text-blue-300 font-bold uppercase tracking-widest">Zarządzanie Zespołem</p>
                </div>
                <button onClick={() => setHeaderExpanded(false)} className="bg-white/10 p-2 rounded-xl"><X className="size-5" /></button>
              </div>
              <div className="grid grid-cols-3 gap-3">
                <button onClick={() => {setTeamStatus('READY'); setHeaderExpanded(false);}} className={`py-4 rounded-xl text-[10px] font-black uppercase transition-all flex flex-col items-center gap-2 ${teamStatus === 'READY' ? 'bg-emerald-500 text-white shadow-lg' : 'bg-blue-800 text-blue-200'}`}> Gotowy </button>
                <button onClick={() => {setTeamStatus('BREAK'); setHeaderExpanded(false);}} className={`py-4 rounded-xl text-[10px] font-black uppercase transition-all flex flex-col items-center gap-2 ${teamStatus === 'BREAK' ? 'bg-amber-500 text-white shadow-lg' : 'bg-blue-800 text-blue-200'}`}> Przerwa </button>
                <button onClick={() => {setShowTtkModal(true); setHeaderExpanded(false);}} className="py-4 rounded-xl text-[10px] font-black uppercase bg-white text-blue-900 shadow-xl flex flex-col items-center justify-center gap-2 tracking-tight"> <ClipboardCheck className="size-4" /> Raport </button>
              </div>
            </div>
          )}
        </div>
      </header>

      {/* OBSZAR TREŚCI */}
      <main className="flex-1 overflow-y-auto p-4 sm:p-6 pb-40">
        {activeTab === 'home' && (
          <div className="space-y-6 max-w-2xl mx-auto">
            <button onClick={() => setActiveTab('zlecenia')} className="w-full bg-white p-6 sm:p-8 rounded-3xl border border-slate-100 flex items-center gap-6 shadow-sm active:scale-95 transition-all group">
              <div className="w-16 h-16 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center"><FileText className="size-8" /></div>
              <div className="text-left flex-1">
                <h3 className="font-black text-xl text-slate-900">Karty Zleceń</h3>
                <p className="text-xs font-bold text-slate-400 uppercase">Lista aktywnych kursów</p>
              </div>
              <div className="text-3xl font-black text-slate-900 bg-slate-50 px-5 py-2 rounded-xl">{orders.length}</div>
            </button>
            <div className="grid grid-cols-2 gap-4">
              <div className="bg-white p-6 rounded-3xl border border-slate-100 flex flex-col items-center gap-3 shadow-sm active:scale-95 transition-all">
                <Activity className="size-6 text-amber-500" />
                <span className="font-black text-slate-800 text-[9px] uppercase tracking-widest text-center">Monitor Live</span>
              </div>
              <div className="bg-white p-6 rounded-3xl border border-slate-100 flex flex-col items-center gap-3 shadow-sm active:scale-95 transition-all">
                <AlertTriangle className="size-6 text-red-500" />
                <span className="font-black text-slate-800 text-[9px] uppercase tracking-widest text-center">Incydent</span>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'zlecenia' && (
          <div className="space-y-4 max-w-2xl mx-auto animate-in slide-in-from-right-4 duration-300">
            <div className="flex items-center gap-4 mb-4">
              <button onClick={() => setActiveTab('home')} className="p-2 bg-white rounded-xl shadow-sm"><ChevronLeft className="size-6 text-slate-600" /></button>
              <h2 className="text-xl font-black text-slate-900 uppercase tracking-tighter">Zlecenia Aktywne</h2>
            </div>
            {orders.length === 0 ? (
              <div className="bg-white rounded-3xl p-12 text-center border-2 border-dashed border-slate-100">
                <p className="text-slate-300 font-black uppercase text-xs tracking-widest">Brak zleceń</p>
              </div>
            ) : orders.map(order => (
              <div key={order.id} onClick={() => { setSelectedOrder(order); setActiveTab('details'); }} className="bg-white rounded-3xl p-6 border border-slate-50 relative overflow-hidden active:scale-[0.98] transition-all cursor-pointer shadow-sm">
                <div className={`absolute top-0 right-0 px-4 py-1.5 text-[9px] font-black text-white rounded-bl-xl ${order.priority === 'KOD1' ? 'bg-red-600' : 'bg-slate-900'}`}>{order.priority}</div>
                <h4 className="text-lg font-black text-slate-900 mb-4">{order.patientName}</h4>
                <div className="space-y-3">
                  <div className="flex items-center gap-3 text-[11px] font-bold text-slate-500"> <MapPin className="size-3.5 text-blue-500" /> {order.origin} </div>
                  <div className="flex items-center gap-3 text-[11px] font-bold text-slate-500"> <Navigation className="size-3.5 text-emerald-500" /> {order.destination} </div>
                </div>
              </div>
            ))}
          </div>
        )}

        {activeTab === 'details' && selectedOrder && (
          <div className="animate-in slide-in-from-bottom-8 duration-500 space-y-6 max-w-2xl mx-auto">
            <button onClick={() => setActiveTab('zlecenia')} className="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-widest"><ChevronLeft className="size-4" /> Powrót</button>
            <div className={`p-8 rounded-3xl text-white shadow-2xl relative overflow-hidden ${selectedOrder.priority === 'KOD1' ? 'bg-red-600 shadow-red-100' : 'bg-slate-900'}`}>
              <h1 className="text-3xl font-black mb-4 tracking-tighter leading-tight">{selectedOrder.patientName}</h1>
              <div className="flex gap-2">
                <span className="bg-white/20 px-3 py-1.5 rounded-xl text-[9px] font-black uppercase">{selectedOrder.priority}</span>
                <span className="bg-white/20 px-3 py-1.5 rounded-xl text-[9px] font-black uppercase">{selectedOrder.patientAge} LAT</span>
              </div>
            </div>
            <div className="bg-white p-8 rounded-3xl shadow-sm space-y-6">
               <div className="flex gap-4">
                  <div className="w-10 h-10 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center shrink-0"><MapPin className="size-5" /></div>
                  <div><p className="text-[9px] font-black text-slate-300 uppercase mb-0.5 tracking-widest">Odbiór</p><p className="font-black text-slate-800 text-sm leading-tight">{selectedOrder.origin}</p></div>
               </div>
               <div className="flex gap-4 border-t border-slate-50 pt-6">
                  <div className="w-10 h-10 bg-emerald-50 text-emerald-600 rounded-xl flex items-center justify-center shrink-0"><Navigation className="size-5" /></div>
                  <div><p className="text-[9px] font-black text-slate-300 uppercase mb-0.5 tracking-widest">Cel</p><p className="font-black text-slate-800 text-sm leading-tight">{selectedOrder.destination}</p></div>
               </div>
            </div>
            <button onClick={() => updateStatus(selectedOrder.id, selectedOrder.currentStep || 0)} className={`w-full py-6 rounded-2xl text-white font-black uppercase tracking-widest shadow-xl transition-all active:scale-95 ${STEPS[selectedOrder.currentStep || 0].color}`}>
              {STEPS[selectedOrder.currentStep || 0].text}
            </button>
          </div>
        )}
      </main>

      {/* SMART DOCK */}
      <nav className="fixed bottom-6 left-1/2 -translate-x-1/2 w-[90%] max-w-sm bg-white/90 backdrop-blur-xl rounded-2xl border border-slate-200 shadow-2xl p-1.5 flex justify-between items-center z-[100]">
        <button onClick={() => setActiveTab('home')} className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl transition-all duration-300 ${activeTab === 'home' ? 'bg-blue-600 text-white shadow-lg shadow-blue-200' : 'text-slate-400'}`}>
          <Home className="size-5" />
          {activeTab === 'home' && <span className="text-[10px] font-black uppercase tracking-tight">Panel</span>}
        </button>
        <button onClick={() => setActiveTab('zlecenia')} className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl transition-all duration-300 ${activeTab === 'zlecenia' ? 'bg-blue-600 text-white shadow-lg shadow-blue-200' : 'text-slate-400'}`}>
          <Route className="size-5" />
          {activeTab === 'zlecenia' && <span className="text-[10px] font-black uppercase tracking-tight">Karty</span>}
        </button>
        <button className="flex-1 flex items-center justify-center py-3 text-slate-300"><UserCircle className="size-5" /></button>
        <button className="flex-1 flex items-center justify-center py-3 text-slate-300"><Settings className="size-5" /></button>
      </nav>

      {/* MODAL TTK */}
      {showTtkModal && (
        <div className="fixed inset-0 z-[200] bg-slate-900/60 backdrop-blur-sm flex items-end sm:items-center justify-center p-4">
          <div className="bg-white w-full max-w-md rounded-2xl shadow-2xl overflow-hidden animate-in slide-in-from-bottom-10">
            <div className="p-6 border-b border-slate-50 flex justify-between items-center bg-slate-50">
              <h3 className="text-xl font-black text-slate-900 tracking-tighter">Raport Wyposażenia</h3>
              <button onClick={() => setShowTtkModal(false)} className="bg-white p-2 rounded-lg text-slate-400"><X className="size-5" /></button>
            </div>
            <div className="p-6 space-y-3 max-h-[60vh] overflow-y-auto">
              {['Monitor EKG', 'Butla Tlenowa', 'Zestaw Opatrunkowy', 'Leki systemowe', 'Pojazd (Paliwo/Płyny)', 'Łączność'].map((item, idx) => (
                <label key={idx} className="flex items-center justify-between p-4 bg-slate-50 border border-slate-100 rounded-xl">
                  <span className="text-xs font-bold text-slate-700 uppercase">{item}</span>
                  <input type="checkbox" className="w-5 h-5 rounded-md accent-blue-600" />
                </label>
              ))}
            </div>
            <div className="p-6">
              <button onClick={() => setShowTtkModal(false)} className="w-full bg-slate-900 text-white py-4 rounded-xl font-black uppercase tracking-widest shadow-xl">Zatwierdź Raport</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}