import React, { useState, useEffect, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, collection, addDoc, doc, updateDoc, 
  onSnapshot, query, deleteDoc, orderBy 
} from 'firebase/firestore';
import { 
  getAuth, signInAnonymously, signInWithCustomToken, 
  onAuthStateChanged, signOut 
} from 'firebase/auth';
import { 
  MapPin, Calendar, User, Plus, Trash2, CheckCircle, 
  XCircle, Package, Check, X, CreditCard, Mail, 
  Smartphone, ShieldCheck, Image as ImageIcon, 
  ChevronLeft, ChevronRight, Lock, LogOut, Upload, 
  Search, ArrowRight, BarChart3, Users, Settings, 
  Filter, Star, Clock, Globe, Briefcase, Info
} from 'lucide-react';

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 : 'aztur-enterprise-system';

const App = () => {
  const [user, setUser] = useState(null);
  const [isAdmin, setIsAdmin] = useState(false);
  const [view, setView] = useState('home'); // home, login, admin, tour-detail, policy, search
  const [loading, setLoading] = useState(true);
  
  // Data States
  const [tours, setTours] = useState([]);
  const [bookings, setBookings] = useState([]);
  const [selectedTour, setSelectedTour] = useState(null);
  const [searchTerm, setSearchTerm] = useState("");
  const [activeTab, setActiveTab] = useState('overview'); // admin tabs
  
  // Form States
  const [loginForm, setLoginForm] = useState({ email: '', password: '' });
  const [imagePreview, setImagePreview] = useState([]);
  const [tourForm, setTourForm] = useState({
    title: '',
    basePrice: '',
    duration: '',
    locations: '',
    description: '',
    category: 'Xarici',
    included: '',
    notIncluded: '',
    images: []
  });

  // Auth Effect
  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(err); }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (u) => {
      setUser(u);
      setIsAdmin(u && !u.isAnonymous);
      setLoading(false);
    });
    return () => unsubscribe();
  }, []);

  // Real-time Data Listeners
  useEffect(() => {
    if (!user) return;
    
    const toursRef = query(collection(db, 'artifacts', appId, 'public', 'data', 'tours'), orderBy('createdAt', 'desc'));
    const unsubTours = onSnapshot(toursRef, (snap) => {
      setTours(snap.docs.map(d => ({ id: d.id, ...d.data() })));
    }, (err) => console.log(err));

    const bookingsRef = collection(db, 'artifacts', appId, 'public', 'data', 'all_bookings');
    const unsubBookings = onSnapshot(bookingsRef, (snap) => {
      setBookings(snap.docs.map(d => ({ id: d.id, ...d.data() })));
    });

    return () => { unsubTours(); unsubBookings(); };
  }, [user]);

  // Image Upload Logic
  const handleImageSelect = (e) => {
    const files = Array.from(e.target.files);
    files.forEach(file => {
      const reader = new FileReader();
      reader.onloadend = () => {
        setTourForm(prev => ({ ...prev, images: [...prev.images, reader.result] }));
        setImagePreview(prev => [...prev, reader.result]);
      };
      reader.readAsDataURL(file);
    });
  };

  const handleAdminLogin = (e) => {
    e.preventDefault();
    // Simulate real auth - for CPanel/MySQL integration replace this with API call
    if (loginForm.email === 'admin@aztur.az' && loginForm.password === 'admin2026') {
      setIsAdmin(true);
      setView('admin');
    } else {
      alert("Yanlış giriş məlumatları!");
    }
  };

  const handleBooking = async (tour) => {
    const name = prompt("Ad və Soyad:");
    const phone = prompt("Əlaqə nömrəsi:");
    if (!name || !phone) return;

    try {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'all_bookings'), {
        tourId: tour.id,
        tourTitle: tour.title,
        customerName: name,
        customerPhone: phone,
        status: 'Yeni',
        price: tour.basePrice,
        createdAt: new Date().toISOString()
      });
      alert("Rezervasiya uğurla tamamlandı. Menecerimiz sizinlə əlaqə saxlayacaq.");
    } catch (err) { console.error(err); }
  };

  const filteredTours = useMemo(() => {
    return tours.filter(t => 
      t.title.toLowerCase().includes(searchTerm.toLowerCase()) || 
      t.locations.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [tours, searchTerm]);

  const stats = useMemo(() => {
    const totalRevenue = bookings.filter(b => b.status === 'Təsdiqləndi').reduce((s, b) => s + Number(b.price), 0);
    return {
      revenue: totalRevenue,
      totalOrders: bookings.length,
      pending: bookings.filter(b => b.status === 'Yeni').length
    };
  }, [bookings]);

  if (loading) return <div className="h-screen flex items-center justify-center font-bold text-blue-600 animate-pulse">AZTUR YÜKLƏNİR...</div>;

  return (
    <div className="min-h-screen bg-[#F8FAFC] text-[#1E293B]">
      {/* Navigation */}
      <nav className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-xl border-b border-slate-200 shadow-sm">
        <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
          <div className="flex items-center gap-10">
            <div className="flex items-center gap-2 cursor-pointer group" onClick={() => setView('home')}>
              <div className="bg-blue-600 p-2 rounded-xl group-hover:rotate-12 transition-transform shadow-lg shadow-blue-200">
                <Globe className="text-white w-6 h-6" />
              </div>
              <span className="text-2xl font-black tracking-tighter">AZ<span className="text-blue-600">TUR</span></span>
            </div>
            <div className="hidden lg:flex items-center gap-8 text-xs font-black uppercase tracking-widest text-slate-500">
              <button onClick={() => setView('home')} className={view === 'home' ? 'text-blue-600' : 'hover:text-blue-600'}>Turlar</button>
              <button className="hover:text-blue-600">Haqqımızda</button>
              <button onClick={() => setView('policy')} className={view === 'policy' ? 'text-blue-600' : 'hover:text-blue-600'}>Məxfilik</button>
              <button className="hover:text-blue-600">Əlaqə</button>
            </div>
          </div>
          
          <div className="flex items-center gap-4">
            <div className="hidden md:flex items-center bg-slate-100 rounded-full px-4 py-2">
              <Search size={16} className="text-slate-400" />
              <input 
                type="text" 
                placeholder="Hara getmək istəyirsiniz?" 
                className="bg-transparent border-none outline-none text-sm px-3 w-48"
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
            {isAdmin ? (
              <div className="flex items-center gap-3">
                <button onClick={() => setView('admin')} className="flex items-center gap-2 bg-blue-50 text-blue-600 px-5 py-2.5 rounded-full font-bold text-sm">
                  <Settings size={16}/> Panel
                </button>
                <button onClick={() => setIsAdmin(false)} className="text-slate-400 hover:text-red-500 transition-colors"><LogOut size={20}/></button>
              </div>
            ) : (
              <button onClick={() => setView('login')} className="bg-slate-900 text-white px-6 py-2.5 rounded-full font-bold text-sm hover:scale-105 transition-transform flex items-center gap-2 shadow-xl shadow-slate-200">
                <Lock size={16} /> Admin
              </button>
            )}
          </div>
        </div>
      </nav>

      <main className="pt-28 pb-20 max-w-7xl mx-auto px-6">
        {/* HOME VIEW */}
        {view === 'home' && (
          <div className="space-y-12">
            <header className="relative h-[500px] rounded-[3rem] overflow-hidden group">
               <img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=2000" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-[5s]" />
               <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/40 to-transparent flex items-center p-12 md:p-24">
                  <div className="max-w-2xl space-y-6 animate-in slide-in-from-left duration-700">
                    <span className="bg-blue-600/30 backdrop-blur-md text-blue-400 border border-blue-400/30 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest uppercase">2026 Yay Mövsümü</span>
                    <h1 className="text-5xl md:text-7xl font-black text-white leading-[1.1]">Xəyallarınızdakı <br /> Səyahəti <span className="text-blue-500">Yaşayın.</span></h1>
                    <p className="text-slate-300 text-lg md:text-xl font-medium">Bütün xərclər daxil, professional bələdçi müşayiəti ilə unudulmaz anlar sizi gözləyir.</p>
                    <div className="flex gap-4">
                      <button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-2xl font-black shadow-2xl shadow-blue-500/20 transition-all">İndi Kəşf Et</button>
                      <button className="bg-white/10 backdrop-blur hover:bg-white/20 text-white border border-white/20 px-8 py-4 rounded-2xl font-black transition-all">Kampaniyalar</button>
                    </div>
                  </div>
               </div>
            </header>

            <section className="space-y-8">
              <div className="flex items-end justify-between">
                <div>
                  <h2 className="text-3xl font-black">Populyar İstiqamətlər</h2>
                  <p className="text-slate-400 font-medium">Ən çox seçilən və bəyənilən turlarımız</p>
                </div>
                <div className="flex gap-2">
                  <button className="p-3 bg-white border border-slate-200 rounded-xl hover:bg-slate-50"><ChevronLeft size={20}/></button>
                  <button className="p-3 bg-white border border-slate-200 rounded-xl hover:bg-slate-50"><ChevronRight size={20}/></button>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {filteredTours.map((tour) => (
                  <div key={tour.id} className="group bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:shadow-2xl hover:shadow-blue-200/40 transition-all duration-500 cursor-pointer" onClick={() => {setSelectedTour(tour); setView('tour-detail'); window.scrollTo(0,0)}}>
                    <div className="h-72 overflow-hidden relative">
                      <img src={tour.images[0] || "https://images.unsplash.com/photo-1523906834658-6e24ef2386f9"} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000" />
                      <div className="absolute top-5 left-5 bg-white/90 backdrop-blur px-4 py-2 rounded-2xl flex items-center gap-2 font-black text-xs shadow-lg">
                        <Star size={14} className="text-yellow-500 fill-yellow-500" /> 4.9 (120 rəy)
                      </div>
                      <div className="absolute bottom-5 right-5 bg-blue-600 text-white px-5 py-2.5 rounded-2xl font-black text-sm shadow-xl">
                        {tour.basePrice} AZN
                      </div>
                    </div>
                    <div className="p-8 space-y-4">
                      <div className="flex justify-between items-start">
                         <h3 className="text-2xl font-bold group-hover:text-blue-600 transition-colors">{tour.title}</h3>
                         <span className="text-xs font-black bg-slate-100 px-3 py-1 rounded-full text-slate-500">{tour.category}</span>
                      </div>
                      <div className="flex items-center gap-6 text-slate-400 font-bold text-xs uppercase tracking-widest">
                        <span className="flex items-center gap-2"><MapPin size={14} className="text-blue-500" /> {tour.locations.split(',')[0]}</span>
                        <span className="flex items-center gap-2"><Clock size={14} className="text-blue-500" /> {tour.duration || '7 gün'}</span>
                      </div>
                      <div className="pt-6 border-t flex items-center justify-between">
                         <div className="flex -space-x-3">
                           {[1,2,3].map(i => <img key={i} className="w-8 h-8 rounded-full border-2 border-white" src={`https://i.pravatar.cc/100?img=${i+10}`} />)}
                           <div className="w-8 h-8 rounded-full bg-slate-100 border-2 border-white flex items-center justify-center text-[10px] font-bold text-slate-500">+15</div>
                         </div>
                         <button className="text-blue-600 font-black text-sm flex items-center gap-2 group-hover:translate-x-1 transition-transform">Ətraflı <ArrowRight size={16}/></button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </section>
          </div>
        )}

        {/* TOUR DETAIL VIEW */}
        {view === 'tour-detail' && selectedTour && (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 animate-in fade-in duration-500">
             <div className="lg:col-span-2 space-y-12">
                <button onClick={() => setView('home')} className="flex items-center gap-2 text-slate-400 font-bold hover:text-blue-600 transition-colors uppercase tracking-widest text-xs">
                  <ChevronLeft size={20}/> Turlara Qayıt
                </button>

                <div className="space-y-4">
                  <h1 className="text-6xl font-black tracking-tighter">{selectedTour.title}</h1>
                  <div className="flex items-center gap-10">
                    <div className="flex items-center gap-2 text-slate-500 font-bold"><MapPin className="text-blue-600"/> {selectedTour.locations}</div>
                    <div className="flex items-center gap-2 text-slate-500 font-bold"><Users className="text-blue-600"/> Max 25 Nəfər</div>
                    <div className="flex items-center gap-2 text-slate-500 font-bold"><Briefcase className="text-blue-600"/> Tam Sığortalı</div>
                  </div>
                </div>

                {/* Gallery */}
                <div className="grid grid-cols-4 gap-4 h-[600px]">
                   <div className="col-span-3 h-full rounded-[3rem] overflow-hidden shadow-2xl">
                     <img src={selectedTour.images[0]} className="w-full h-full object-cover" />
                   </div>
                   <div className="grid grid-rows-3 gap-4 h-full">
                      {selectedTour.images.slice(1,4).map((img, i) => (
                        <div key={i} className="rounded-3xl overflow-hidden border border-slate-100">
                          <img src={img} className="w-full h-full object-cover" />
                        </div>
                      ))}
                   </div>
                </div>

                <div className="bg-white p-12 rounded-[3.5rem] shadow-sm border border-slate-100 space-y-12">
                   <div className="grid grid-cols-3 gap-8 py-10 border-b">
                      <div className="text-center">
                        <div className="text-slate-400 text-[10px] font-black uppercase mb-2">Müddət</div>
                        <div className="font-black text-xl">10 GÜN / 9 GECƏ</div>
                      </div>
                      <div className="text-center border-x">
                        <div className="text-slate-400 text-[10px] font-black uppercase mb-2">Nəqliyyat</div>
                        <div className="font-black text-xl">AVİABİLET DAXİL</div>
                      </div>
                      <div className="text-center">
                        <div className="text-slate-400 text-[10px] font-black uppercase mb-2">Mətbəx</div>
                        <div className="font-black text-xl">3 DƏFƏ QİDALANMA</div>
                      </div>
                   </div>

                   <section className="space-y-6">
                     <h2 className="text-3xl font-black">Turun İcmalı</h2>
                     <p className="text-slate-600 text-xl leading-relaxed font-medium">{selectedTour.description}</p>
                   </section>

                   <div className="grid grid-cols-1 md:grid-cols-2 gap-10 bg-slate-50 p-10 rounded-[2.5rem]">
                      <div className="space-y-4">
                        <h4 className="font-black text-green-600 uppercase tracking-[0.2em] text-xs">Qiymətə daxildir:</h4>
                        <ul className="space-y-3">
                          {selectedTour.included.split(',').map((item, i) => (
                            <li key={i} className="flex items-start gap-3 text-sm font-bold text-slate-700">
                              <CheckCircle size={18} className="text-green-500 shrink-0"/> {item.trim()}
                            </li>
                          ))}
                        </ul>
                      </div>
                      <div className="space-y-4">
                        <h4 className="font-black text-red-500 uppercase tracking-[0.2em] text-xs">Qiymətə daxil deyil:</h4>
                        <ul className="space-y-3">
                          {selectedTour.notIncluded.split(',').map((item, i) => (
                            <li key={i} className="flex items-start gap-3 text-sm font-bold text-slate-700">
                              <XCircle size={18} className="text-red-400 shrink-0"/> {item.trim()}
                            </li>
                          ))}
                        </ul>
                      </div>
                   </div>

                   <section className="space-y-8">
                     <h2 className="text-3xl font-black">Səyahət Proqramı</h2>
                     <div className="space-y-12 border-l-2 border-slate-100 pl-8 ml-4">
                       {selectedTour.program.split('\n').map((line, i) => (
                         <div key={i} className="relative">
                            <div className="absolute -left-[41px] top-0 w-4 h-4 rounded-full bg-blue-600 border-4 border-white shadow-md"></div>
                            <p className="text-slate-600 leading-relaxed text-lg font-medium">{line}</p>
                         </div>
                       ))}
                     </div>
                   </section>
                </div>
             </div>

             <aside className="space-y-8 sticky top-28 h-fit">
                <div className="bg-slate-900 text-white p-10 rounded-[3.5rem] shadow-2xl space-y-8">
                   <div className="space-y-2">
                     <span className="text-slate-400 font-bold uppercase text-[10px] tracking-widest">Adambaşı Qiymət</span>
                     <div className="flex items-baseline gap-2">
                       <span className="text-5xl font-black">{selectedTour.basePrice}</span>
                       <span className="text-2xl font-bold text-blue-400">AZN</span>
                     </div>
                   </div>

                   <div className="space-y-4">
                      <div className="flex justify-between items-center text-sm">
                        <span className="text-slate-400">Rezervasiya depoziti</span>
                        <span className="font-bold">200 AZN</span>
                      </div>
                      <div className="flex justify-between items-center text-sm">
                        <span className="text-slate-400">Tax tutumları</span>
                        <span className="font-bold">Daxildir</span>
                      </div>
                   </div>

                   <button onClick={() => handleBooking(selectedTour)} className="w-full bg-blue-600 hover:bg-blue-700 text-white py-6 rounded-3xl font-black text-lg transition-all shadow-xl shadow-blue-500/20 flex items-center justify-center gap-3">
                     Rezervasiya Et <ArrowRight />
                   </button>
                   
                   <div className="text-center text-[10px] font-bold text-slate-500 uppercase tracking-widest">İstənilən vaxt geri qaytarılma imkanı</div>
                </div>

                <div className="bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm space-y-6">
                   <h4 className="font-black text-sm uppercase">Kömək lazımdır?</h4>
                   <div className="flex items-center gap-4 group cursor-pointer">
                      <div className="bg-blue-50 p-3 rounded-2xl text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-all"><Smartphone /></div>
                      <div>
                        <div className="text-xs text-slate-400 font-bold">Zəng mərkəzi</div>
                        <div className="font-black">*1010</div>
                      </div>
                   </div>
                </div>
             </aside>
          </div>
        )}

        {/* LOGIN VIEW */}
        {view === 'login' && (
          <div className="max-w-md mx-auto mt-20 animate-in zoom-in duration-300">
             <div className="bg-white p-12 rounded-[4rem] shadow-2xl border border-slate-100">
                <div className="text-center space-y-4 mb-10">
                  <div className="bg-blue-600 w-16 h-16 rounded-[1.5rem] mx-auto flex items-center justify-center text-white shadow-xl shadow-blue-200"><Lock size={32}/></div>
                  <h2 className="text-3xl font-black">Xoş gəldiniz</h2>
                  <p className="text-slate-400 font-medium">Yalnız səlahiyyətli şəxslər üçün</p>
                </div>
                <form onSubmit={handleAdminLogin} className="space-y-6">
                  <div className="space-y-2">
                    <label className="text-xs font-black uppercase text-slate-400 tracking-widest ml-4">Admin Email</label>
                    <input required type="email" value={loginForm.email} onChange={e => setLoginForm({...loginForm, email: e.target.value})} className="w-full p-5 bg-slate-50 border-none rounded-3xl outline-none focus:ring-2 focus:ring-blue-100 transition-all font-bold" placeholder="admin@aztur.az" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-xs font-black uppercase text-slate-400 tracking-widest ml-4">Şifrə</label>
                    <input required type="password" value={loginForm.password} onChange={e => setLoginForm({...loginForm, password: e.target.value})} className="w-full p-5 bg-slate-50 border-none rounded-3xl outline-none focus:ring-2 focus:ring-blue-100 transition-all font-bold" placeholder="••••••••" />
                  </div>
                  <button type="submit" className="w-full bg-slate-900 text-white py-6 rounded-3xl font-black text-lg hover:scale-[1.02] transition-all shadow-xl shadow-slate-200">Panelə Giriş</button>
                </form>
             </div>
          </div>
        )}

        {/* ADMIN PANEL */}
        {view === 'admin' && isAdmin && (
          <div className="space-y-10 animate-in slide-in-from-bottom-10 duration-500">
             <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
                <div>
                  <h1 className="text-5xl font-black tracking-tighter">İdarəetmə Paneli</h1>
                  <p className="text-slate-400 font-bold mt-1 uppercase tracking-widest text-[10px]">Aztur Global Turizm Sistemləri</p>
                </div>
                <div className="flex bg-white p-1.5 rounded-2xl border border-slate-200 shadow-sm">
                   <button onClick={() => setActiveTab('overview')} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-wider transition-all ${activeTab === 'overview' ? 'bg-blue-600 text-white shadow-lg shadow-blue-200' : 'text-slate-400 hover:bg-slate-50'}`}>İcmal</button>
                   <button onClick={() => setActiveTab('tours')} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-wider transition-all ${activeTab === 'tours' ? 'bg-blue-600 text-white shadow-lg shadow-blue-200' : 'text-slate-400 hover:bg-slate-50'}`}>Turlar</button>
                   <button onClick={() => setActiveTab('bookings')} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-wider transition-all ${activeTab === 'bookings' ? 'bg-blue-600 text-white shadow-lg shadow-blue-200' : 'text-slate-400 hover:bg-slate-50'}`}>Sifarişlər</button>
                </div>
             </div>

             {/* STATS */}
             {activeTab === 'overview' && (
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                   <div className="bg-white p-10 rounded-[3rem] border border-slate-100 shadow-sm flex items-center justify-between">
                      <div>
                        <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Ümumi Gəlir</div>
                        <div className="text-4xl font-black">{stats.revenue} AZN</div>
                      </div>
                      <div className="bg-blue-50 p-4 rounded-3xl text-blue-600"><CreditCard size={32}/></div>
                   </div>
                   <div className="bg-white p-10 rounded-[3rem] border border-slate-100 shadow-sm flex items-center justify-between">
                      <div>
                        <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Bütün Rezervlər</div>
                        <div className="text-4xl font-black">{stats.totalOrders}</div>
                      </div>
                      <div className="bg-green-50 p-4 rounded-3xl text-green-600"><Users size={32}/></div>
                   </div>
                   <div className="bg-white p-10 rounded-[3rem] border border-slate-100 shadow-sm flex items-center justify-between">
                      <div>
                        <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Gözləyən Sorğu</div>
                        <div className="text-4xl font-black">{stats.pending}</div>
                      </div>
                      <div className="bg-yellow-50 p-4 rounded-3xl text-yellow-600"><Clock size={32}/></div>
                   </div>
                </div>
             )}

             {/* ADD TOUR TAB */}
             {activeTab === 'tours' && (
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
                   <div className="lg:col-span-2 bg-white p-12 rounded-[3.5rem] shadow-sm border border-slate-100">
                      <h3 className="text-2xl font-black mb-10 flex items-center gap-3"><Plus className="text-blue-600"/> Yeni Tur Yerləşdir</h3>
                      <form onSubmit={async (e) => {
                        e.preventDefault();
                        if (tourForm.images.length === 0) return alert("Şəkil yükləyin");
                        try {
                          await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'tours'), {
                            ...tourForm,
                            createdAt: new Date().toISOString()
                          });
                          alert("Tur uğurla əlavə edildi!");
                          setTourForm({ title: '', basePrice: '', duration: '', locations: '', description: '', category: 'Xarici', included: '', notIncluded: '', images: [] });
                          setImagePreview([]);
                        } catch (err) { console.error(err); }
                      }} className="space-y-8">
                        <div className="grid grid-cols-2 gap-8">
                          <div className="space-y-2">
                            <label className="text-[10px] font-black uppercase text-slate-400 ml-4 tracking-widest">Başlıq</label>
                            <input required value={tourForm.title} onChange={e => setTourForm({...tourForm, title: e.target.value})} className="w-full p-4 bg-slate-50 border-none rounded-2xl outline-none focus:ring-2 focus:ring-blue-100 font-bold" placeholder="Məs: Bali Turu" />
                          </div>
                          <div className="space-y-2">
                            <label className="text-[10px] font-black uppercase text-slate-400 ml-4 tracking-widest">Qiymət (AZN)</label>
                            <input required type="number" value={tourForm.basePrice} onChange={e => setTourForm({...tourForm, basePrice: e.target.value})} className="w-full p-4 bg-slate-50 border-none rounded-2xl outline-none focus:ring-2 focus:ring-blue-100 font-bold" placeholder="999" />
                          </div>
                        </div>

                        <div className="space-y-4">
                          <label className="text-[10px] font-black uppercase text-slate-400 ml-4 tracking-widest">Görüntülər (Çoxsaylı seçin)</label>
                          <div className="relative group border-2 border-dashed border-slate-200 rounded-[2.5rem] p-12 text-center hover:bg-blue-50/50 hover:border-blue-400 transition-all cursor-pointer">
                             <input type="file" multiple accept="image/*" onChange={handleImageSelect} className="absolute inset-0 opacity-0 cursor-pointer" />
                             <Upload className="mx-auto mb-4 text-blue-600" size={32} />
                             <p className="font-bold text-slate-500">Faylları bura sürüşdürün və ya klikləyin</p>
                             <div className="flex flex-wrap gap-4 mt-8 justify-center">
                               {imagePreview.map((src, i) => (
                                 <div key={i} className="w-24 h-24 rounded-2xl overflow-hidden border-2 border-white shadow-md">
                                   <img src={src} className="w-full h-full object-cover" />
                                 </div>
                               ))}
                             </div>
                          </div>
                        </div>

                        <div className="grid grid-cols-2 gap-8">
                          <div className="space-y-2">
                            <label className="text-[10px] font-black uppercase text-slate-400 ml-4 tracking-widest">Kateqoriya</label>
                            <select value={tourForm.category} onChange={e => setTourForm({...tourForm, category: e.target.value})} className="w-full p-4 bg-slate-50 border-none rounded-2xl outline-none font-bold">
                              <option>Xarici</option>
                              <option>Daxili</option>
                              <option>Ekstremal</option>
                              <option>Bal ayı</option>
                            </select>
                          </div>
                          <div className="space-y-2">
                            <label className="text-[10px] font-black uppercase text-slate-400 ml-4 tracking-widest">Müddət (Məs: 7 gün)</label>
                            <input value={tourForm.duration} onChange={e => setTourForm({...tourForm, duration: e.target.value})} className="w-full p-4 bg-slate-50 border-none rounded-2xl outline-none font-bold" />
                          </div>
                        </div>

                        <div className="space-y-2">
                          <label className="text-[10px] font-black uppercase text-slate-400 ml-4 tracking-widest">Haqqında Detallı</label>
                          <textarea value={tourForm.description} onChange={e => setTourForm({...tourForm, description: e.target.value})} className="w-full p-4 bg-slate-50 border-none rounded-2xl outline-none h-40 font-medium" />
                        </div>

                        <button type="submit" className="w-full bg-slate-900 text-white py-6 rounded-[2rem] font-black text-lg hover:bg-blue-600 transition-all shadow-xl shadow-slate-200">Yayımla</button>
                      </form>
                   </div>

                   <div className="space-y-6">
                      <h4 className="font-black text-sm uppercase">Yayımlanan Turlar</h4>
                      <div className="space-y-4">
                        {tours.map(t => (
                          <div key={t.id} className="bg-white p-6 rounded-3xl border border-slate-100 flex items-center gap-4 group">
                             <img src={t.images[0]} className="w-16 h-16 rounded-2xl object-cover" />
                             <div className="flex-1 overflow-hidden">
                               <p className="font-bold truncate">{t.title}</p>
                               <p className="text-[10px] font-black text-blue-600 uppercase tracking-widest">{t.basePrice} AZN</p>
                             </div>
                             <button onClick={() => deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'tours', t.id))} className="p-3 text-red-400 hover:bg-red-50 rounded-xl opacity-0 group-hover:opacity-100 transition-all"><Trash2 size={18}/></button>
                          </div>
                        ))}
                      </div>
                   </div>
                </div>
             )}

             {/* BOOKINGS TAB */}
             {activeTab === 'bookings' && (
                <div className="bg-white rounded-[3.5rem] shadow-sm border border-slate-100 overflow-hidden">
                   <div className="overflow-x-auto">
                      <table className="w-full text-left">
                         <thead className="bg-slate-50 border-b border-slate-100">
                            <tr className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">
                               <th className="p-8">Müştəri</th>
                               <th className="p-8">Tur</th>
                               <th className="p-8">Qiymət</th>
                               <th className="p-8">Status</th>
                               <th className="p-8">Əməliyyat</th>
                            </tr>
                         </thead>
                         <tbody className="divide-y divide-slate-50">
                            {bookings.map(b => (
                              <tr key={b.id} className="hover:bg-slate-50/50 transition-colors">
                                <td className="p-8">
                                   <div className="font-bold">{b.customerName}</div>
                                   <div className="text-xs text-slate-400">{b.customerPhone}</div>
                                </td>
                                <td className="p-8 font-bold">{b.tourTitle}</td>
                                <td className="p-8 font-black text-blue-600">{b.price} AZN</td>
                                <td className="p-8">
                                   <span className={`px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-wider ${
                                     b.status === 'Yeni' ? 'bg-yellow-100 text-yellow-700' : 'bg-green-100 text-green-700'
                                   }`}>
                                     {b.status}
                                   </span>
                                </td>
                                <td className="p-8">
                                   <div className="flex gap-2">
                                     <button onClick={() => updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'all_bookings', b.id), {status: 'Təsdiqləndi'})} className="p-2.5 bg-green-50 text-green-600 rounded-xl hover:bg-green-600 hover:text-white transition-all"><Check size={18}/></button>
                                     <button className="p-2.5 bg-red-50 text-red-500 rounded-xl hover:bg-red-500 hover:text-white transition-all"><X size={18}/></button>
                                   </div>
                                </td>
                              </tr>
                            ))}
                         </tbody>
                      </table>
                   </div>
                </div>
             )}
          </div>
        )}

        {/* POLICY VIEW */}
        {view === 'policy' && (
          <div className="max-w-4xl mx-auto space-y-12 py-10 animate-in fade-in">
             <div className="flex items-center gap-6">
               <div className="bg-blue-600 p-5 rounded-[2rem] text-white shadow-2xl shadow-blue-200"><ShieldCheck size={40}/></div>
               <h1 className="text-6xl font-black tracking-tighter">Məxfilik Siyasəti</h1>
             </div>
             <div className="bg-white p-16 rounded-[4rem] shadow-sm border border-slate-100 space-y-10 text-slate-600 leading-relaxed text-lg">
                <section className="space-y-4">
                  <h2 className="text-2xl font-black text-slate-900">1. Məlumatların Qorunması</h2>
                  <p>AZTUR olaraq biz sizin şəxsi məlumatlarınızın təhlükəsizliyinə tam zəmanət veririk. Toplanan bütün məlumatlar 256-bit SSL protokolu ilə şifrələnir.</p>
                </section>
                <section className="space-y-4">
                  <h2 className="text-2xl font-black text-slate-900">2. Ödəniş və Maliyyə</h2>
                  <p>Maliyyə əməliyyatları heç vaxt bizim sistemimizdə saxlanılmır. Bütün ödənişlər birbaşa rəsmi bank tərəfdaşlarımızın portalı vasitəsilə həyata keçirilir.</p>
                </section>
                <div className="pt-10 border-t flex justify-between items-center">
                   <div className="font-bold text-sm">Son yenilənmə: Fevral 2026</div>
                   <button onClick={() => setView('home')} className="bg-slate-900 text-white px-8 py-4 rounded-2xl font-black">Bağla</button>
                </div>
             </div>
          </div>
        )}
      </main>

      <footer className="bg-white border-t border-slate-200 py-24">
         <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-20">
            <div className="space-y-8">
               <div className="flex items-center gap-2">
                 <div className="bg-blue-600 p-2 rounded-xl"><Globe className="text-white w-5 h-5" /></div>
                 <span className="text-2xl font-black tracking-tighter uppercase">AZTUR</span>
               </div>
               <p className="text-slate-400 font-medium leading-loose">Sizin üçün ən unikal marşrutları hazırlayırıq. 10 illik təcrübə, 50-dən çox ölkə üzrə tərəfdaşlıq.</p>
            </div>
            <div className="space-y-8">
               <h4 className="font-black text-xs uppercase tracking-[0.3em] text-blue-600">Xidmətlər</h4>
               <ul className="space-y-4 text-slate-500 font-bold text-sm">
                 <li className="hover:text-blue-600 cursor-pointer">Viza Dəstəyi</li>
                 <li className="hover:text-blue-600 cursor-pointer">Aviabilet Satışı</li>
                 <li className="hover:text-blue-600 cursor-pointer">Otel Rezervasiyası</li>
                 <li className="hover:text-blue-600 cursor-pointer">Transfer Xidməti</li>
               </ul>
            </div>
            <div className="space-y-8">
               <h4 className="font-black text-xs uppercase tracking-[0.3em] text-blue-600">Şirkət</h4>
               <ul className="space-y-4 text-slate-500 font-bold text-sm">
                 <li className="hover:text-blue-600 cursor-pointer">Biz kimik?</li>
                 <li className="hover:text-blue-600 cursor-pointer">Vakansiyalar</li>
                 <li className="hover:text-blue-600 cursor-pointer">Məxfilik</li>
                 <li className="hover:text-blue-600 cursor-pointer">Qaydalar</li>
               </ul>
            </div>
            <div className="space-y-8">
               <h4 className="font-black text-xs uppercase tracking-[0.3em] text-blue-600">Bakı Ofisi</h4>
               <div className="space-y-4">
                  <p className="text-3xl font-black">*1010</p>
                  <p className="text-slate-400 font-medium text-sm">Nizami küçəsi 103, <br /> Landmark Business Center</p>
               </div>
            </div>
         </div>
         <div className="max-w-7xl mx-auto px-6 mt-20 pt-10 border-t border-slate-100 flex flex-col md:flex-row justify-between items-center gap-6 text-[10px] font-black uppercase tracking-widest text-slate-400">
            <p>© 2026 AZTUR GLOBAL TRAVEL SERVICES. BÜTÜN HÜQUQLAR QORUNUR.</p>
            <div className="flex gap-10">
               <span className="cursor-pointer hover:text-slate-900 transition-colors">Instagram</span>
               <span className="cursor-pointer hover:text-slate-900 transition-colors">Facebook</span>
               <span className="cursor-pointer hover:text-slate-900 transition-colors">LinkedIn</span>
            </div>
         </div>
      </footer>
    </div>
  );
};

export default App;