import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, 
  collection, 
  addDoc, 
  getDocs, 
  query, 
  where, 
  serverTimestamp,
  onSnapshot
} from 'firebase/firestore';
import { 
  getAuth, 
  signInAnonymously, 
  onAuthStateChanged 
} from 'firebase/auth';
import { 
  Search, 
  Car, 
  ShieldCheck, 
  AlertTriangle, 
  CheckCircle2, 
  History, 
  Download, 
  Fuel, 
  Calendar, 
  MapPin, 
  Info,
  ChevronLeft,
  Upload,
  User
} from 'lucide-react';

// --- CONFIGURARE SISTEM GOOGLE (FIREBASE) ---
// Datele sunt injectate automat de mediu
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'masini-verificate';

// --- COMPONENTE UI ---

const StatusBadge = ({ status, text }) => {
  const configs = {
    ok: { color: "text-emerald-600 bg-emerald-50 border-emerald-100", icon: <CheckCircle2 size={14} />, label: "Fără probleme" },
    attention: { color: "text-amber-600 bg-amber-50 border-amber-100", icon: <AlertTriangle size={14} />, label: "Atenție" },
    unknown: { color: "text-gray-400 bg-gray-50 border-gray-100", icon: <Info size={14} />, label: "Necunoscut" }
  };
  const config = configs[status] || configs.unknown;
  return (
    <div className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold border ${config.color}`}>
      {config.icon}
      <span>{text || config.label}</span>
    </div>
  );
};

// --- PAGINA PRINCIPALĂ ---
const HomePage = ({ onSearch, listings }) => {
  const [vin, setVin] = useState('');

  const handleSearch = (e) => {
    e.preventDefault();
    if (vin.length === 17) onSearch(vin.toUpperCase());
    else alert("VIN-ul trebuie să aibă 17 caractere!");
  };

  return (
    <div className="max-w-6xl mx-auto px-4 py-16 md:py-24 text-center">
      <div className="space-y-6 mb-16">
        <div className="inline-flex items-center gap-2 px-4 py-2 bg-blue-50 text-blue-700 rounded-full text-sm font-bold animate-pulse">
          <ShieldCheck size={18} /> Verificări Comunitare Securizate de Google
        </div>
        <h1 className="text-5xl md:text-7xl font-black text-slate-900 tracking-tight leading-none">
          Verifică istoricul <br/><span className="text-blue-600">oricărei mașini</span>.
        </h1>
        <p className="text-xl text-slate-500 max-w-2xl mx-auto">
          Accesează rapoartele de istoric încărcate de alți utilizatori și cumpără în siguranță.
        </p>

        <form onSubmit={handleSearch} className="relative max-w-2xl mx-auto mt-12">
          <input 
            type="text" 
            placeholder="INTRODU SERIA VIN (17 CARACTERE)..." 
            className="w-full pl-6 pr-40 py-6 text-xl rounded-2xl border-2 border-slate-200 shadow-2xl focus:border-blue-600 outline-none uppercase font-mono tracking-widest transition-all"
            value={vin}
            onChange={(e) => setVin(e.target.value.toUpperCase())}
            maxLength={17}
          />
          <button type="submit" className="absolute right-3 top-3 bottom-3 px-8 bg-blue-600 text-white rounded-xl font-black hover:bg-blue-700 transition-all flex items-center gap-2">
            <Search size={20} /> Caută
          </button>
        </form>
      </div>

      <div className="text-left space-y-8">
        <h2 className="text-2xl font-black text-slate-800">Cele mai recente mașini adăugate</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {listings.length > 0 ? listings.map((car) => (
            <div key={car.id} onClick={() => onSearch(car.vin)} className="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl transition-all cursor-pointer group">
              <div className="flex justify-between items-start mb-4">
                <div>
                  <h3 className="font-black text-lg group-hover:text-blue-600 transition-colors uppercase italic">{car.make} {car.model}</h3>
                  <p className="text-xs font-mono text-slate-400 uppercase tracking-tighter">{car.vin}</p>
                </div>
                <span className="bg-blue-50 text-blue-700 text-[10px] px-2 py-1 rounded-lg font-black">{car.year}</span>
              </div>
              <div className="flex flex-wrap gap-2 pt-4 border-t border-slate-50">
                <StatusBadge status={car.status_damage} text={car.status_damage === 'ok' ? "Fără daune" : "Daune găsite"} />
                <StatusBadge status="ok" text="Furt: OK" />
              </div>
            </div>
          )) : (
            <div className="col-span-3 py-10 text-center text-slate-400 font-bold italic">
              Se încarcă datele din Google Cloud...
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// --- PAGINA RAPORT ---
const ReportPage = ({ car, onBack }) => {
  if (!car) return (
    <div className="max-w-2xl mx-auto py-24 text-center space-y-8">
      <div className="w-24 h-24 bg-slate-100 rounded-[2.5rem] flex items-center justify-center mx-auto text-slate-300">
        <Search size={48} />
      </div>
      <h2 className="text-3xl font-black">VIN Negăsit</h2>
      <p className="text-slate-500">Această serie nu există încă în baza noastră de date. Dacă ai un raport PDF pentru ea, te rugăm să îl adaugi!</p>
      <button onClick={onBack} className="text-blue-600 font-bold underline">Înapoi la căutare</button>
    </div>
  );

  return (
    <div className="max-w-5xl mx-auto py-12 px-4 space-y-10 animate-in fade-in duration-500">
      <button onClick={onBack} className="flex items-center gap-2 text-slate-400 font-bold hover:text-blue-600 transition-colors">
        <ChevronLeft size={18} /> Înapoi la căutare
      </button>

      <div className="bg-slate-900 rounded-[2.5rem] p-10 md:p-14 text-white shadow-2xl relative overflow-hidden">
        <div className="absolute top-0 right-0 w-1/3 h-full bg-blue-600/10 skew-x-12 translate-x-20"></div>
        <div className="relative z-10 space-y-8">
          <div className="flex gap-2">
            <span className="bg-blue-600 text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-widest">Raport Google Cloud</span>
            <span className="bg-white/10 text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-widest italic">Verificat</span>
          </div>
          <h1 className="text-5xl md:text-7xl font-black uppercase tracking-tighter leading-none">
            {car.make} <span className="text-blue-500">{car.model}</span>
          </h1>
          <div className="flex flex-wrap gap-4 items-center">
            <div className="bg-white/10 backdrop-blur-md px-5 py-3 rounded-2xl font-mono text-xl border border-white/20 tracking-widest uppercase">
              {car.vin}
            </div>
            <div className="flex items-center gap-4 text-slate-400 font-bold uppercase text-xs">
              <span className="flex items-center gap-1"><Fuel size={14} /> {car.fuel}</span>
              <span className="flex items-center gap-1"><Calendar size={14} /> {car.year}</span>
              <span className="flex items-center gap-1"><MapPin size={14} /> {car.country}</span>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm border-t-8 border-t-blue-600">
          <p className="text-[10px] font-black text-slate-400 uppercase mb-4 tracking-widest">Daune înregistrate</p>
          <StatusBadge status={car.status_damage} />
          <p className="mt-4 text-sm text-slate-600 leading-relaxed font-medium">{car.details || "Nicio daună raportată în istoricul disponibil."}</p>
        </div>
        <div className="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm border-t-8 border-t-blue-600">
          <p className="text-[10px] font-black text-slate-400 uppercase mb-4 tracking-widest">Kilometraj</p>
          <div className="flex items-center gap-2 mb-4">
            <History className="text-blue-600" size={20} />
            <span className="font-black text-blue-700">Verificat</span>
          </div>
          <h4 className="text-4xl font-black text-slate-900">{Number(car.km).toLocaleString('ro-RO')} <span className="text-sm text-slate-400 uppercase">km</span></h4>
        </div>
        <div className="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm border-t-8 border-t-emerald-500 flex flex-col items-center justify-center text-center">
          <ShieldCheck size={40} className="text-emerald-500 mb-2" />
          <span className="font-black text-emerald-700 uppercase text-xs tracking-widest">Statut Legal Curat</span>
        </div>
      </div>

      <div className="bg-blue-600 rounded-[2.5rem] p-12 text-center text-white space-y-6 shadow-2xl shadow-blue-200">
        <h3 className="text-2xl font-black">Raportul PDF original este disponibil</h3>
        <p className="text-blue-100 max-w-lg mx-auto font-medium">Poți descărca fișierul complet care include fotografii de la licitație și detalii de service.</p>
        <button className="bg-white text-blue-600 px-10 py-5 rounded-2xl font-black text-xl hover:bg-slate-50 transition-all flex items-center gap-3 mx-auto shadow-lg">
          <Download size={24} /> Descarcă Raportul
        </button>
      </div>
    </div>
  );
};

// --- APP ---
export default function App() {
  const [view, setView] = useState('home');
  const [user, setUser] = useState(null);
  const [listings, setListings] = useState([]);
  const [selectedCar, setSelectedCar] = useState(null);

  // 1. Autentificare Google (Anonimă pentru simplitate)
  useEffect(() => {
    const login = async () => {
      await signInAnonymously(auth);
    };
    login();
    onAuthStateChanged(auth, setUser);
  }, []);

  // 2. Citire date din Google Cloud (Real-time)
  useEffect(() => {
    if (!user) return;

    // Calea conform Regulii 1: /artifacts/{appId}/public/data/listings
    const listingsRef = collection(db, 'artifacts', appId, 'public', 'data', 'listings');
    
    // Ascultăm schimbările în timp real
    const unsubscribe = onSnapshot(listingsRef, (snapshot) => {
      const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setListings(data);
    }, (error) => {
      console.error("Eroare Google Cloud:", error);
    });

    return () => unsubscribe();
  }, [user]);

  const handleSearch = (vin) => {
    const match = listings.find(c => c.vin === vin.trim().toUpperCase());
    setSelectedCar(match || null);
    setView('report');
    window.scrollTo(0, 0);
  };

  const handleAddTestCar = async () => {
    if (!user) return;
    try {
      const listingsRef = collection(db, 'artifacts', appId, 'public', 'data', 'listings');
      await addDoc(listingsRef, {
        vin: 'SADCB2BN4JA236050',
        make: 'Jaguar',
        model: 'F-Pace',
        year: 2018,
        fuel: 'Diesel',
        km: 192346,
        country: 'Belgia',
        status_damage: 'attention',
        details: 'Avarie laterală dreapta în 2018. Reparație estimată la 12.000 RON.',
        created_at: serverTimestamp()
      });
      alert("Mașină de test adăugată în Google Cloud!");
    } catch (e) {
      alert("Eroare: " + e.message);
    }
  };

  return (
    <div className="min-h-screen bg-slate-50 font-sans selection:bg-blue-100 selection:text-blue-900">
      <nav className="h-20 bg-white/80 backdrop-blur-md border-b border-slate-100 flex items-center justify-between px-6 sticky top-0 z-50 shadow-sm">
        <div className="flex items-center gap-2 cursor-pointer" onClick={() => setView('home')}>
          <div className="bg-blue-600 p-2.5 rounded-xl text-white shadow-lg shadow-blue-100">
            <Car size={24} />
          </div>
          <span className="font-black uppercase tracking-tighter text-xl">Mașini <span className="text-blue-600">Verificate</span></span>
        </div>
        
        <div className="flex items-center gap-4">
          <button 
            onClick={handleAddTestCar}
            className="hidden md:flex items-center gap-2 text-xs font-black text-slate-400 uppercase tracking-widest hover:text-blue-600 transition-colors"
          >
            <Upload size={14} /> Adaugă Test
          </button>
          <div className="h-8 w-px bg-slate-100 mx-2 hidden md:block"></div>
          <button className="bg-slate-900 text-white px-6 py-2.5 rounded-xl font-bold text-sm hover:bg-black transition-all flex items-center gap-2">
            <User size={16} /> Contul meu
          </button>
        </div>
      </nav>

      <main>
        {view === 'home' ? (
          <HomePage onSearch={handleSearch} listings={listings} />
        ) : (
          <ReportPage car={selectedCar} onBack={() => setView('home')} />
        )}
      </main>

      <footer className="bg-white border-t border-slate-100 py-16 px-6 mt-20 text-center space-y-6">
        <div className="flex items-center justify-center gap-2 mb-4 opacity-50">
            <Car size={20} />
            <span className="font-black uppercase tracking-tighter">Mașini Verificate</span>
        </div>
        <p className="text-slate-400 text-xs font-bold uppercase tracking-[0.2em]">
          Powered by Google Cloud • Proiect Independent 2025
        </p>
        <div className="max-w-2xl mx-auto text-[10px] text-slate-300 font-bold uppercase tracking-widest leading-relaxed">
          Nu suntem afiliați cu carVertical sau alți furnizori de rapoarte. Datele sunt oferite de comunitate pentru a ajuta alți cumpărători.
        </div>
      </footer>
    </div>
  );
}