import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, doc, onSnapshot, setDoc, deleteDoc } from 'firebase/firestore';
import { 
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, 
  LineChart, Line, AreaChart, Area, Cell, PieChart, Pie, Legend
} from 'recharts';
import { 
  LayoutDashboard, Globe, TrendingUp, DollarSign, ShoppingCart, 
  Activity, RefreshCw, Plus, Trash2, ExternalLink, Filter,
  ChevronDown, Search, ArrowUpRight, Zap, Target, MousePointer2,
  Clock, X, Trophy, BarChart3, ListOrdered, Settings2, Monitor
} from 'lucide-react';

// Firebase Config
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 : 'socialstardom-enterprise';

export default function App() {
  const [user, setUser] = useState(null);
  const [sites, setSites] = useState([]);
  const [siteData, setSiteData] = useState({});
  const [activeSiteId, setActiveSiteId] = useState('all');
  const [loading, setLoading] = useState(false);
  const [view, setView] = useState('overview'); // 'overview' | 'leaderboard' | 'network'
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [newSite, setNewSite] = useState({ name: '', url: '', apiKey: '' });

  // 1. Strict Authentication Flow
  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("Authentication failed:", err);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (u) => {
      setUser(u);
    });
    return () => unsubscribe();
  }, []);

  // 2. Secured Firestore Listener
  useEffect(() => {
    if (!user) return;
    const sitesCollection = collection(db, 'artifacts', appId, 'public', 'data', 'sites');
    const unsubscribe = onSnapshot(sitesCollection, 
      (snapshot) => {
        setSites(snapshot.docs.map(d => ({ id: d.id, ...d.data() })));
      },
      (error) => {
        console.error("Firestore snapshot error:", error);
      }
    );
    return () => unsubscribe();
  }, [user]);

  const refreshData = async () => {
    if (!user || sites.length === 0) return;
    setLoading(true);
    const results = { ...siteData };
    for (const site of sites) {
      try {
        const res = await fetch(`${site.url}?key=${site.apiKey}`);
        if (!res.ok) throw new Error("Fetch failed");
        results[site.id] = await res.json();
      } catch (e) { 
        results[site.id] = { error: true, site_name: site.name }; 
      }
    }
    setSiteData(results);
    setLoading(false);
  };

  useEffect(() => { 
    if (sites.length > 0) refreshData(); 
  }, [sites]);

  const totals = Object.values(siteData).reduce((acc, curr) => {
    if (curr.stats) {
      acc.rev += parseFloat(curr.stats.total_revenue || 0);
      acc.paytm += parseFloat(curr.stats.paytm_revenue || 0);
      acc.orders += parseInt(curr.stats.total_orders || 0);
      acc.traffic += parseInt(curr.journey?.funnel?.users || 0);
    }
    return acc;
  }, { rev: 0, paytm: 0, orders: 0, traffic: 0 });

  // Leaderboard Calculation
  const leaderboardData = sites.map(site => {
    const data = siteData[site.id];
    return {
      id: site.id,
      name: site.name,
      revenue: parseFloat(data?.stats?.total_revenue || 0),
      orders: parseInt(data?.stats?.total_orders || 0),
      conversion: parseFloat(data?.analytics?.conversion?.replace('%', '') || 0),
      status: data?.error ? 'Offline' : (data ? 'Online' : 'Pending')
    };
  }).sort((a, b) => b.revenue - a.revenue);

  if (!user) return (
    <div className="h-screen bg-slate-950 flex flex-col items-center justify-center text-white gap-4">
      <Zap className="text-indigo-500 animate-pulse" size={48} />
      <div className="font-black text-xl tracking-tighter uppercase animate-pulse">Establishing Secure Connection...</div>
    </div>
  );

  const currentData = activeSiteId === 'all' ? null : siteData[activeSiteId];

  return (
    <div className="min-h-screen bg-[#F8FAFC] text-slate-900 font-sans flex selection:bg-indigo-100">
      
      {/* Vertical Sidebar */}
      <aside className="w-20 lg:w-72 bg-slate-950 text-white flex flex-col sticky top-0 h-screen z-50 border-r border-slate-800">
        <div className="p-6 border-b border-slate-900">
          <div className="flex items-center gap-3">
            <div className="bg-indigo-600 p-2 rounded-xl text-white flex-shrink-0 shadow-lg shadow-indigo-500/20">
              <Zap size={24} fill="currentColor" />
            </div>
            <div className="hidden lg:block">
              <span className="font-black text-lg tracking-tighter leading-none block">SOCIALSTARDOM</span>
              <span className="text-[10px] text-indigo-400 font-bold uppercase tracking-[0.2em]">Enterprise Hub</span>
            </div>
          </div>
        </div>

        <nav className="flex-1 p-4 space-y-2 mt-4">
          <SidebarItem active={view === 'overview'} icon={<LayoutDashboard size={20}/>} label="Global Overview" onClick={() => setView('overview')} />
          <SidebarItem active={view === 'leaderboard'} icon={<Trophy size={20}/>} label="Site Leaderboard" onClick={() => setView('leaderboard')} />
          <SidebarItem active={view === 'network'} icon={<Globe size={20}/>} label="Network Management" onClick={() => setView('network')} />
          <div className="h-[1px] bg-slate-900 my-4 mx-2" />
          <SidebarItem active={false} icon={<BarChart3 size={20}/>} label="Source Analytics" onClick={() => {}} />
          <SidebarItem active={false} icon={<Settings2 size={20}/>} label="Global Settings" onClick={() => {}} />
        </nav>

        <div className="p-4 border-t border-slate-900 bg-slate-900/50">
           <div className="hidden lg:block space-y-1 mb-4">
              <p className="text-[10px] text-slate-500 font-black uppercase tracking-widest">Active IST</p>
              <p className="text-xs font-bold text-slate-300 flex items-center gap-2"><Clock size={12}/> {new Date().toLocaleTimeString('en-IN', { timeZone: 'Asia/Kolkata' })}</p>
           </div>
           <div className="bg-indigo-600/10 border border-indigo-500/20 p-4 rounded-2xl">
              <p className="text-[9px] text-indigo-400 font-black uppercase tracking-widest leading-none mb-1">Total Revenue</p>
              <p className="text-lg font-black text-white truncate">₹{totals.rev.toLocaleString('en-IN')}</p>
           </div>
        </div>
      </aside>

      {/* Main Area */}
      <div className="flex-1">
        {/* Top Header Bar */}
        <header className="h-20 bg-white/80 backdrop-blur-md border-b border-slate-200 sticky top-0 z-40 px-8 flex items-center justify-between shadow-sm">
          <div className="flex items-center gap-4">
            <h1 className="text-xl font-black text-slate-900 tracking-tight uppercase">
              {view === 'overview' ? 'Performance Overview' : view === 'leaderboard' ? 'Site Rankings' : 'Manage Network'}
            </h1>
            <div className="h-4 w-[1px] bg-slate-300 hidden md:block" />
            <div className="hidden md:flex gap-1">
              <button 
                onClick={() => setActiveSiteId('all')}
                className={`px-4 py-1.5 rounded-full text-[10px] font-black uppercase transition-all ${activeSiteId === 'all' ? 'bg-indigo-600 text-white shadow-lg' : 'text-slate-500 hover:bg-slate-100'}`}
              >
                All Sites
              </button>
              {sites.map(s => (
                <button 
                  key={s.id}
                  onClick={() => setActiveSiteId(s.id)}
                  className={`px-4 py-1.5 rounded-full text-[10px] font-black uppercase transition-all ${activeSiteId === s.id ? 'bg-indigo-600 text-white shadow-lg' : 'text-slate-500 hover:bg-slate-100'}`}
                >
                  {s.name}
                </button>
              ))}
            </div>
          </div>

          <div className="flex gap-3">
            <button 
              onClick={refreshData}
              disabled={loading}
              className="bg-white border border-slate-200 p-2.5 rounded-xl text-slate-600 hover:bg-slate-50 transition-all flex items-center gap-2 text-xs font-bold"
            >
              <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
              <span className="hidden md:inline">{loading ? 'Syncing...' : 'Sync Live Data'}</span>
            </button>
            <button 
              onClick={() => setIsModalOpen(true)}
              className="bg-indigo-600 text-white px-5 py-2.5 rounded-xl font-bold text-xs hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-100 flex items-center gap-2"
            >
              <Plus size={16} /> <span>Connect Website</span>
            </button>
          </div>
        </header>

        <main className="p-8 max-w-[1400px] mx-auto animate-in fade-in duration-500">
          
          {view === 'overview' && (
            <div className="space-y-8">
              {/* KPI Grid */}
              <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                <KPICard title="Global Revenue" value={`₹${totals.rev.toLocaleString('en-IN')}`} icon={<DollarSign size={20}/>} color="bg-indigo-600" trend="+14.2%" />
                <KPICard title="Total Orders" value={totals.orders.toLocaleString()} icon={<ShoppingCart size={20}/>} color="bg-emerald-600" trend="+8.5%" />
                <KPICard title="Paytm Sales" value={`₹${totals.paytm.toLocaleString('en-IN')}`} icon={<Target size={20}/>} color="bg-rose-600" trend="+12.1%" />
                <KPICard title="Network Flow" value={totals.traffic.toLocaleString()} icon={<Activity size={20}/>} color="bg-amber-600" trend="+22.0%" />
              </div>

              {/* Main Analytics Row */}
              <div className="grid grid-cols-12 gap-8">
                <div className="col-span-12 lg:col-span-8 space-y-8">
                  <div className="bg-white p-8 rounded-[2.5rem] border border-slate-200 shadow-sm overflow-hidden relative">
                    <div className="flex justify-between items-center mb-10">
                      <div>
                        <h3 className="font-black text-slate-900 text-xl tracking-tight">Revenue Dynamics</h3>
                        <p className="text-xs font-bold text-slate-400 mt-1 uppercase tracking-widest">Real-time Financial Flow</p>
                      </div>
                      <div className="flex gap-2">
                         <div className="flex items-center gap-2 bg-slate-50 px-3 py-1.5 rounded-full border border-slate-100">
                           <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
                           <span className="text-[10px] font-black text-slate-500 uppercase">Live Stream</span>
                         </div>
                      </div>
                    </div>
                    <div className="h-[380px] w-full">
                      <ResponsiveContainer width="100%" height="100%">
                        <AreaChart data={activeSiteId === 'all' ? leaderboardData : [{name: 'Mon', revenue: 4500}, {name: 'Tue', revenue: 5200}, {name: 'Wed', revenue: 4800}, {name: 'Thu', revenue: 7100}, {name: 'Fri', revenue: 6400}, {name: 'Sat', revenue: 8900}, {name: 'Sun', revenue: 9500}]}>
                          <defs>
                            <linearGradient id="colorRev" x1="0" y1="0" x2="0" y2="1">
                              <stop offset="5%" stopColor="#4f46e5" stopOpacity={0.15}/>
                              <stop offset="95%" stopColor="#4f46e5" stopOpacity={0}/>
                            </linearGradient>
                          </defs>
                          <CartesianGrid strokeDasharray="4 4" vertical={false} stroke="#E2E8F0" />
                          <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{fontSize: 10, fontWeight: 900, fill: '#94A3B8'}} dy={10} />
                          <YAxis axisLine={false} tickLine={false} tick={{fontSize: 10, fontWeight: 900, fill: '#94A3B8'}} dx={-10} />
                          <Tooltip contentStyle={{borderRadius: '24px', border: 'none', boxShadow: '0 20px 25px -5px rgba(0,0,0,0.1)', fontWeight: 900}} />
                          <Area type="monotone" dataKey="revenue" stroke="#4f46e5" strokeWidth={5} fillOpacity={1} fill="url(#colorRev)" />
                        </AreaChart>
                      </ResponsiveContainer>
                    </div>
                  </div>

                  <div className="bg-white p-8 rounded-[2.5rem] border border-slate-200 shadow-sm">
                    <h3 className="font-black text-slate-900 text-lg mb-8 flex items-center gap-2">
                      <BarChart3 size={20} className="text-indigo-600" /> Attribution Analysis
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
                      <div className="h-[300px]">
                        <ResponsiveContainer width="100%" height="100%">
                          <PieChart>
                            <Pie 
                              data={currentData?.attribution || [{source: 'Organic', orders: 40}, {source: 'Google Ads', orders: 30}, {source: 'Social', orders: 20}, {source: 'Direct', orders: 10}]} 
                              innerRadius={70} 
                              outerRadius={100} 
                              paddingAngle={8} 
                              dataKey="orders" 
                              nameKey="source"
                              stroke="none"
                            >
                              {['#4f46e5', '#10b981', '#f59e0b', '#ef4444'].map((c, i) => <Cell key={i} fill={c} cornerRadius={10} />)}
                            </Pie>
                            <Tooltip />
                          </PieChart>
                        </ResponsiveContainer>
                      </div>
                      <div className="space-y-4 flex flex-col justify-center">
                        {(currentData?.attribution || [{source: 'Organic', orders: 40}, {source: 'Google Ads', orders: 30}, {source: 'Social', orders: 20}, {source: 'Direct', orders: 10}]).map((attr, idx) => (
                          <div key={idx} className="flex justify-between items-center bg-slate-50 p-4 rounded-2xl border border-slate-100 hover:border-indigo-200 transition-all group">
                             <div className="flex items-center gap-3">
                               <div className="w-3 h-3 rounded-full" style={{backgroundColor: ['#4f46e5', '#10b981', '#f59e0b', '#ef4444'][idx]}} />
                               <span className="text-xs font-black text-slate-700 uppercase tracking-tight">{attr.source}</span>
                             </div>
                             <span className="font-black text-indigo-600 text-sm">{attr.orders} Leads</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>

                <div className="col-span-12 lg:col-span-4 space-y-8">
                   <div className="bg-indigo-600 p-8 rounded-[3rem] text-white shadow-2xl shadow-indigo-200 overflow-hidden relative">
                      <div className="relative z-10">
                        <h3 className="font-black text-xl mb-8 flex items-center gap-2"><Filter size={20}/> Acquisition Funnel</h3>
                        <div className="space-y-4">
                           <FunnelStep label="Impressions" value={currentData?.journey?.funnel?.impressions || '120.4K'} percent="100%" />
                           <FunnelStep label="Site Clicks" value={currentData?.journey?.funnel?.clicks || '14.2K'} percent="11.8%" />
                           <FunnelStep label="Active Users" value={currentData?.journey?.funnel?.users || '3.1K'} percent="4.2%" />
                           <FunnelStep label="Paytm Orders" value={currentData?.stats?.paytm_conversions || '482'} percent="0.4%" active />
                        </div>
                      </div>
                      <div className="absolute -bottom-10 -right-10 opacity-10 rotate-12 scale-150"><Monitor size={200}/></div>
                   </div>

                   <div className="bg-white p-8 rounded-[2.5rem] border border-slate-200 shadow-sm">
                      <h3 className="font-black text-slate-400 text-[10px] uppercase tracking-[0.2em] mb-6 border-b border-slate-100 pb-4">Top Converting Keywords</h3>
                      <div className="space-y-3">
                        {['buy smm inr paytm', 'cheap followers india', 'youtube views india', 'instagram panel inr'].map((k, i) => (
                          <div key={i} className="flex items-center justify-between group">
                            <span className="text-xs font-bold text-slate-600 hover:text-indigo-600 transition-colors flex items-center gap-2"><Search size={14} className="text-indigo-400"/> {k}</span>
                            <ArrowUpRight size={14} className="text-slate-300 opacity-0 group-hover:opacity-100 transition-all"/>
                          </div>
                        ))}
                      </div>
                   </div>
                </div>
              </div>
            </div>
          )}

          {view === 'leaderboard' && (
            <div className="space-y-8 max-w-5xl mx-auto">
              <div className="flex flex-col md:flex-row justify-between items-end gap-6 mb-4">
                 <div>
                   <h2 className="text-3xl font-black text-slate-900 tracking-tighter">Site Leaderboard</h2>
                   <p className="text-slate-500 font-bold text-sm">Real-time performance ranking across your network.</p>
                 </div>
                 <div className="bg-white p-2 rounded-2xl border border-slate-200 flex gap-2 shadow-sm">
                    <button className="px-4 py-2 bg-indigo-600 text-white rounded-xl text-[10px] font-black uppercase">By Revenue</button>
                    <button className="px-4 py-2 hover:bg-slate-50 text-slate-500 rounded-xl text-[10px] font-black uppercase">By Conversion</button>
                 </div>
              </div>

              <div className="grid grid-cols-1 gap-4">
                {leaderboardData.map((item, index) => (
                  <div key={item.id} className="bg-white p-6 rounded-[2rem] border border-slate-200 shadow-sm hover:shadow-xl hover:border-indigo-200 transition-all flex items-center gap-8 relative overflow-hidden group">
                    {/* Rank Badge */}
                    <div className={`w-14 h-14 rounded-2xl flex items-center justify-center font-black text-2xl ${index === 0 ? 'bg-amber-100 text-amber-600' : index === 1 ? 'bg-slate-100 text-slate-500' : index === 2 ? 'bg-orange-50 text-orange-600' : 'bg-slate-50 text-slate-300'}`}>
                      #{index + 1}
                    </div>

                    <div className="flex-1">
                       <h3 className="font-black text-xl text-slate-900 tracking-tight flex items-center gap-3">
                         {item.name}
                         {index === 0 && <Trophy size={18} className="text-amber-500 animate-bounce" />}
                       </h3>
                       <div className="flex items-center gap-4 mt-1">
                          <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-1"><Activity size={10}/> {item.status}</span>
                          <span className="text-[10px] font-black text-indigo-500 uppercase tracking-widest flex items-center gap-1"><ShoppingCart size={10}/> {item.orders} Orders</span>
                       </div>
                    </div>

                    <div className="grid grid-cols-2 md:grid-cols-3 gap-8 text-right pr-4">
                       <div className="hidden md:block">
                          <p className="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">Conversion</p>
                          <p className="text-sm font-black text-emerald-600">{item.conversion}%</p>
                       </div>
                       <div>
                          <p className="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">Total Revenue</p>
                          <p className="text-lg font-black text-slate-900">₹{item.revenue.toLocaleString('en-IN')}</p>
                       </div>
                       <button className="hidden md:flex items-center justify-center p-3 rounded-xl bg-slate-50 text-slate-400 hover:bg-indigo-50 hover:text-indigo-600 transition-all">
                          <ChevronDown size={20} />
                       </button>
                    </div>

                    <div className="absolute left-0 top-0 w-1 h-full bg-indigo-600 opacity-0 group-hover:opacity-100 transition-all" />
                  </div>
                ))}
              </div>
            </div>
          )}

          {view === 'network' && (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {sites.map(site => (
                <div key={site.id} className="bg-white p-10 rounded-[2.5rem] border border-slate-200 shadow-sm relative group hover:shadow-2xl transition-all duration-300">
                  <button 
                    onClick={() => handleDeleteSite(site.id)}
                    className="absolute top-8 right-8 text-slate-200 hover:text-rose-500 transition-colors"
                  >
                    <Trash2 size={22} />
                  </button>
                  <div className="bg-slate-50 w-20 h-20 rounded-[2rem] flex items-center justify-center text-indigo-600 mb-8 shadow-inner group-hover:bg-indigo-600 group-hover:text-white transition-all duration-500">
                    <Globe size={36} />
                  </div>
                  <h3 className="font-black text-2xl text-slate-900 tracking-tighter mb-2">{site.name}</h3>
                  <p className="text-slate-400 text-xs font-bold mb-8 truncate">{site.url}</p>
                  
                  <div className="pt-8 border-t border-slate-100 flex justify-between items-center">
                    <div className="flex items-center gap-2">
                       <div className={`w-3 h-3 rounded-full ${siteData[site.id]?.error ? 'bg-rose-500 shadow-[0_0_12px_rgba(244,63,94,0.4)]' : 'bg-emerald-500 shadow-[0_0_12px_rgba(16,185,129,0.4)]'}`} />
                       <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{siteData[site.id]?.error ? 'Service Interrupted' : 'Secure Connection'}</span>
                    </div>
                    <button onClick={() => setActiveSiteId(site.id)} className="bg-slate-50 hover:bg-indigo-50 p-2 rounded-xl text-slate-400 hover:text-indigo-600 transition-all">
                       <ExternalLink size={18} />
                    </button>
                  </div>
                </div>
              ))}
              <button 
                onClick={() => setIsModalOpen(true)}
                className="border-4 border-dashed border-slate-200 p-10 rounded-[2.5rem] flex flex-col items-center justify-center gap-4 text-slate-300 hover:border-indigo-400 hover:text-indigo-500 hover:bg-white transition-all duration-300"
              >
                <Plus size={48} />
                <span className="font-black text-sm uppercase tracking-widest">Connect Domain</span>
              </button>
            </div>
          )}

        </main>
      </div>

      {/* Modern Modal Integration */}
      {isModalOpen && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-950/90 backdrop-blur-xl p-6">
          <div className="bg-white rounded-[3rem] w-full max-w-xl shadow-2xl overflow-hidden animate-in zoom-in duration-300">
            <div className="p-12">
               <div className="flex justify-between items-center mb-12">
                  <div>
                    <h2 className="text-4xl font-black text-slate-900 tracking-tighter">Expand Network</h2>
                    <p className="text-xs font-black text-indigo-500 uppercase tracking-widest mt-1">Configure New Integration</p>
                  </div>
                  <button onClick={() => setIsModalOpen(false)} className="bg-slate-100 hover:bg-rose-50 p-3 rounded-full text-slate-400 hover:text-rose-500 transition-all">
                    <X size={28} />
                  </button>
               </div>
               
               <form onSubmit={async (e) => {
                 e.preventDefault();
                 if (!user) return;
                 const id = crypto.randomUUID();
                 await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'sites', id), { 
                   ...newSite, 
                   id,
                   createdAt: new Date().toISOString() 
                 });
                 setNewSite({ name: '', url: '', apiKey: '' });
                 setIsModalOpen(false);
               }} className="space-y-6">
                 <InputField label="Site Name" placeholder="SocialStardom Store 01" value={newSite.name} onChange={v => setNewSite({...newSite, name: v})} />
                 <InputField label="Endpoint Endpoint URL" placeholder="https://domain.com/api-stats.php" value={newSite.url} onChange={v => setNewSite({...newSite, url: v})} />
                 <InputField label="Assigned API Secret" placeholder="Paste X-API-KEY" type="password" value={newSite.apiKey} onChange={v => setNewSite({...newSite, apiKey: v})} />
                 <button className="w-full bg-indigo-600 text-white font-black py-6 rounded-3xl hover:bg-slate-900 transition-all shadow-2xl shadow-indigo-200 mt-6 tracking-widest text-sm uppercase">Activate Integration</button>
               </form>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function SidebarItem({ active, icon, label, onClick }) {
  return (
    <button 
      onClick={onClick}
      className={`w-full flex items-center gap-4 px-5 py-4 rounded-2xl transition-all duration-200 relative group ${
        active 
          ? 'bg-indigo-600 text-white shadow-xl shadow-indigo-950/40' 
          : 'text-slate-500 hover:bg-slate-900 hover:text-slate-100'
      }`}
    >
      <div className={`${active ? 'text-white' : 'text-slate-600 group-hover:text-indigo-400'} transition-colors`}>{icon}</div>
      <span className="hidden lg:block font-black text-sm tracking-tight">{label}</span>
      {active && <div className="absolute right-4 w-1.5 h-1.5 rounded-full bg-white hidden lg:block" />}
    </button>
  );
}

function KPICard({ title, value, icon, color, trend }) {
  return (
    <div className="bg-white p-8 rounded-[2.5rem] border border-slate-200 shadow-sm group hover:border-indigo-500 transition-all relative overflow-hidden">
      <div className="flex justify-between items-start mb-6">
        <div className={`${color} p-4 rounded-[1.25rem] text-white shadow-lg transition-transform group-hover:scale-110 duration-300`}>
          {icon}
        </div>
        <div className="flex items-center gap-1 bg-emerald-50 text-emerald-600 px-2.5 py-1 rounded-lg text-[10px] font-black">
          <TrendingUp size={12}/> {trend}
        </div>
      </div>
      <div>
        <p className="text-[10px] font-black text-slate-400 uppercase tracking-[0.15em] mb-1">{title}</p>
        <p className="text-3xl font-black text-slate-900 tracking-tighter">{value}</p>
      </div>
      <div className="absolute -bottom-4 -right-4 opacity-[0.03] group-hover:opacity-[0.08] transition-opacity duration-500 scale-150">
         {icon}
      </div>
    </div>
  );
}

function FunnelStep({ label, value, percent, active }) {
  return (
    <div className={`flex items-center justify-between p-5 rounded-3xl border transition-all duration-300 ${active ? 'bg-white/20 border-white/40 shadow-inner' : 'border-white/10 hover:bg-white/5'}`}>
      <div>
        <span className="text-[10px] font-bold uppercase opacity-60 tracking-[0.15em] block mb-1">{label}</span>
        <span className="text-xl font-black tracking-tight">{value}</span>
      </div>
      <div className="text-right">
        <span className="text-[10px] font-black bg-black/20 px-3 py-1.5 rounded-xl uppercase tracking-widest">{percent}</span>
      </div>
    </div>
  );
}

function InputField({ label, placeholder, type = "text", value, onChange }) {
  return (
    <div className="space-y-2">
      <label className="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] ml-2">{label}</label>
      <input 
        type={type} required placeholder={placeholder}
        className="w-full px-8 py-5 bg-slate-50 border border-slate-100 rounded-[1.5rem] focus:ring-4 focus:ring-indigo-500/10 focus:bg-white focus:border-indigo-500 focus:outline-none font-bold transition-all"
        value={value} onChange={e => onChange(e.target.value)}
      />
    </div>
  );
}

const handleDeleteSite = async (id) => {
  const sitesCollection = collection(db, 'artifacts', appId, 'public', 'data', 'sites');
  await deleteDoc(doc(sitesCollection, id));
};