import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInAnonymously, 
  signInWithCustomToken, 
  onAuthStateChanged,
  signOut
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  doc, 
  addDoc, 
  onSnapshot, 
  updateDoc, 
  deleteDoc,
  query,
  where
} from 'firebase/firestore';
import { 
  Truck, 
  BarChart3, 
  ShieldCheck, 
  Globe, 
  Clock, 
  FileText, 
  CheckCircle2, 
  ArrowRight, 
  Phone, 
  Mail, 
  MapPin,
  Menu,
  X,
  LayoutDashboard,
  LogOut,
  Plus,
  Search,
  Settings,
  User,
  Linkedin,
  Facebook,
  Twitter,
  Instagram,
  AlertCircle,
  Building2,
  FileUp,
  ChevronRight,
  Calendar,
  DollarSign,
  TrendingUp,
  FileBadge,
  UserPlus,
  HardDrive,
  Activity,
  ClipboardList,
  Filter
} from 'lucide-react';

// --- Firebase Configuration ---
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 : 'forward-dispatch-crm';

const App = () => {
  const [currentPage, setCurrentPage] = useState('home');
  const [crmTab, setCrmTab] = useState('loads'); 
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [user, setUser] = useState(null);
  const [loads, setLoads] = useState([]);
  const [carriers, setCarriers] = useState([]);
  const [drivers, setDrivers] = useState([]);
  const [selectedCarrier, setSelectedCarrier] = useState(null);
  const [selectedLoad, setSelectedLoad] = useState(null);
  const [isDispatchModalOpen, setIsDispatchModalOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  // --- Search and Filters State ---
  const [searchQuery, setSearchQuery] = useState("");
  const [statusFilter, setStatusFilter] = useState("All");
  const [carrierFilter, setCarrierFilter] = useState("All");

  // --- Auth Logic ---
  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);
        setError("Authentication failed. Please refresh.");
      }
    };

    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (u) => {
      setUser(u);
      setIsLoading(false);
    });
    return () => unsubscribe();
  }, []);

  // --- Database Sync ---
  useEffect(() => {
    if (!user) return;

    const loadsCol = collection(db, 'artifacts', appId, 'public', 'data', 'loads');
    const carriersCol = collection(db, 'artifacts', appId, 'public', 'data', 'carriers');
    const driversCol = collection(db, 'artifacts', appId, 'public', 'data', 'drivers');
    
    const unsubLoads = onSnapshot(loadsCol, (snap) => {
      setLoads(snap.docs.map(d => ({ id: d.id, ...d.data() })));
    }, () => setError("Failed to sync load data."));

    const unsubCarriers = onSnapshot(carriersCol, (snap) => {
      setCarriers(snap.docs.map(d => ({ id: d.id, ...d.data() })));
    }, () => setError("Failed to sync carrier data."));

    const unsubDrivers = onSnapshot(driversCol, (snap) => {
      setDrivers(snap.docs.map(d => ({ id: d.id, ...d.data() })));
    }, () => setError("Failed to sync driver data."));

    return () => { unsubLoads(); unsubCarriers(); unsubDrivers(); };
  }, [user]);

  const navigate = (page) => {
    setCurrentPage(page);
    setIsMenuOpen(false);
    window.scrollTo(0, 0);
  };

  const handleSignOut = async () => {
    await signOut(auth);
    navigate('home');
  };

  // --- CRM Actions ---
  const addLoad = async (e) => {
    e.preventDefault();
    if (!user) return;
    const formData = new FormData(e.target);
    const newLoad = {
      carrierId: formData.get('carrierId'),
      origin: formData.get('origin'),
      destination: formData.get('destination'),
      rate: parseFloat(formData.get('rate')),
      status: 'Unassigned',
      assignedDriverId: null,
      trackingHistory: [{ status: 'Created', timestamp: new Date().toISOString() }],
      createdAt: new Date().toISOString(),
      dispatcherId: user.uid
    };

    try {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'loads'), newLoad);
      e.target.reset();
      setIsDispatchModalOpen(false);
    } catch (err) { setError("Failed to add load."); }
  };

  const assignDriverToLoad = async (loadId, driverId) => {
    try {
      const loadRef = doc(db, 'artifacts', appId, 'public', 'data', 'loads', loadId);
      const driver = drivers.find(d => d.id === driverId);
      await updateDoc(loadRef, {
        assignedDriverId: driverId,
        assignedDriverName: driver.name,
        status: 'Assigned',
        trackingHistory: [...(selectedLoad.trackingHistory || []), { status: 'Assigned', timestamp: new Date().toISOString() }]
      });
      setSelectedLoad(prev => ({ ...prev, status: 'Assigned', assignedDriverId: driverId, assignedDriverName: driver.name }));
    } catch (err) { setError("Failed to assign driver."); }
  };

  const updateLoadStatus = async (loadId, newStatus) => {
    try {
      const loadRef = doc(db, 'artifacts', appId, 'public', 'data', 'loads', loadId);
      await updateDoc(loadRef, {
        status: newStatus,
        trackingHistory: [...(selectedLoad.trackingHistory || []), { status: newStatus, timestamp: new Date().toISOString() }]
      });
      setSelectedLoad(prev => ({ ...prev, status: newStatus }));
    } catch (err) { setError("Failed to update status."); }
  };

  const addCarrier = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const newCarrier = {
      companyName: formData.get('name'),
      mcNumber: formData.get('mc'),
      email: formData.get('email'),
      truckCount: formData.get('trucks') || "0",
      contractStatus: 'Pending',
      createdAt: new Date().toISOString()
    };
    try {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'carriers'), newCarrier);
      e.target.reset();
    } catch (err) { setError("Failed to add carrier."); }
  };

  const addDriver = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const newDriver = {
      carrierId: selectedCarrier.id,
      companyName: selectedCarrier.companyName,
      name: formData.get('driverName'),
      licenseNumber: formData.get('license'),
      licensePlate: formData.get('plate'),
      phone: formData.get('phone'),
      createdAt: new Date().toISOString()
    };
    try {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'drivers'), newDriver);
      e.target.reset();
    } catch (err) { setError("Failed to add driver."); }
  };

  // --- Filtering Logic ---
  const filteredLoads = loads.filter(load => {
    const carrier = carriers.find(c => c.id === load.carrierId);
    const matchesSearch = 
      load.origin?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      load.destination?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      carrier?.companyName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      load.assignedDriverName?.toLowerCase().includes(searchQuery.toLowerCase());
    
    const matchesStatus = statusFilter === "All" || load.status === statusFilter;
    const matchesCarrier = carrierFilter === "All" || load.carrierId === carrierFilter;

    return matchesSearch && matchesStatus && matchesCarrier;
  });

  // --- Components ---

  const Navbar = () => (
    <nav className="sticky top-0 z-50 bg-white shadow-sm border-b border-slate-100">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-20 items-center">
          <div className="flex-shrink-0 cursor-pointer" onClick={() => navigate('home')}>
            <span className="text-2xl font-black tracking-tighter text-slate-900 uppercase">
              Forward <span className="text-blue-600">Dispatching</span>
            </span>
          </div>
          <div className="hidden md:flex space-x-8 items-center font-semibold text-slate-600">
            <button onClick={() => navigate('home')} className={`hover:text-blue-600 ${currentPage === 'home' ? 'text-blue-600' : ''}`}>Home</button>
            <button onClick={() => navigate('services')} className={`hover:text-blue-600 ${currentPage === 'services' ? 'text-blue-600' : ''}`}>Services</button>
            <button onClick={() => navigate('onboarding')} className={`hover:text-blue-600 ${currentPage === 'onboarding' ? 'text-blue-600' : ''}`}>Carrier Setup</button>
            {user && !user.isAnonymous ? (
              <button onClick={() => navigate('crm')} className="flex items-center gap-2 bg-slate-900 text-white px-6 py-2 rounded-full hover:bg-slate-800 transition"><LayoutDashboard size={18} /> CRM Portal</button>
            ) : (
              <button onClick={() => navigate('login')} className="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition">Login</button>
            )}
          </div>
          <div className="md:hidden"><button onClick={() => setIsMenuOpen(!isMenuOpen)}><Menu /></button></div>
        </div>
      </div>
    </nav>
  );

  const CRM_Dashboard = () => (
    <div className="min-h-screen bg-slate-50 flex">
      {/* Sidebar */}
      <aside className="w-64 bg-slate-900 text-white p-6 hidden lg:flex flex-col">
        <div className="mb-10 text-xl font-bold border-b border-slate-800 pb-4 flex items-center gap-2"><LayoutDashboard className="text-blue-400" /> CRM Console</div>
        <nav className="space-y-2 flex-1">
          <button onClick={() => { setCrmTab('loads'); setSelectedCarrier(null); setSelectedLoad(null); }} className={`w-full text-left p-3 rounded-xl flex items-center gap-3 transition ${crmTab === 'loads' ? 'bg-blue-600 text-white' : 'text-slate-400 hover:bg-slate-800'}`}><Truck size={18}/> Active Loads</button>
          <button onClick={() => { setCrmTab('carriers'); setSelectedCarrier(null); setSelectedLoad(null); }} className={`w-full text-left p-3 rounded-xl flex items-center gap-3 transition ${crmTab === 'carriers' ? 'bg-blue-600 text-white' : 'text-slate-400 hover:bg-slate-800'}`}><Building2 size={18}/> Carriers</button>
          <button onClick={() => setCrmTab('invoices')} className={`w-full text-left p-3 rounded-xl flex items-center gap-3 transition ${crmTab === 'invoices' ? 'bg-blue-600 text-white' : 'text-slate-400 hover:bg-slate-800'}`}><FileText size={18}/> Invoices</button>
          <button onClick={() => setCrmTab('analytics')} className={`w-full text-left p-3 rounded-xl flex items-center gap-3 transition ${crmTab === 'analytics' ? 'bg-blue-600 text-white' : 'text-slate-400 hover:bg-slate-800'}`}><BarChart3 size={18}/> Analytics</button>
        </nav>
        <div className="mt-auto pt-10"><button onClick={handleSignOut} className="flex items-center gap-2 text-slate-400 hover:text-white transition"><LogOut size={18} /> Sign Out</button></div>
      </aside>

      <main className="flex-1 p-8 overflow-y-auto h-screen relative">
        <header className="flex justify-between items-center mb-8">
          <div>
            <h1 className="text-2xl font-bold text-slate-900">
              {crmTab === 'loads' && (selectedLoad ? "Load Tracking & Workflow" : "Dispatcher Workspace")}
              {crmTab === 'carriers' && (selectedCarrier ? "Carrier Profile" : "Carrier Directory")}
              {crmTab === 'invoices' && "Financial Hub"}
              {crmTab === 'analytics' && "Performance Analytics"}
            </h1>
            <p className="text-slate-500">
              {crmTab === 'loads' && (selectedLoad ? `ID: ${selectedLoad.id}` : `Monitoring ${filteredLoads.length} shipments.`)}
            </p>
          </div>
          <div className="flex gap-4 items-center">
             {crmTab === 'loads' && !selectedLoad && (
               <button 
                 onClick={() => setIsDispatchModalOpen(true)}
                 className="bg-blue-600 text-white px-6 py-3 rounded-xl font-bold hover:bg-blue-700 transition flex items-center gap-2 shadow-lg shadow-blue-200"
               >
                 <Plus size={18} /> Dispatch New Load
               </button>
             )}
             <div className="bg-white px-4 py-2 rounded-xl shadow-sm border flex items-center gap-2">
                <span className="text-xs font-mono text-slate-600">{user?.uid.substring(0,8)}...</span>
             </div>
          </div>
        </header>

        {error && <div className="mb-6 bg-red-50 text-red-600 p-4 rounded-xl flex items-center gap-2 border border-red-100"><AlertCircle size={18} /> {error}</div>}

        {/* Load Board Content */}
        {crmTab === 'loads' && !selectedLoad && (
          <div className="space-y-6">
            {/* Filter Bar */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4 bg-white p-4 rounded-2xl border shadow-sm">
               <div className="relative">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
                  <input 
                    type="text" 
                    placeholder="Search origin, destination, names..." 
                    className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-100 rounded-xl text-sm outline-none focus:ring-2 focus:ring-blue-100"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
               </div>
               <div>
                  <select 
                    className="w-full p-2 bg-slate-50 border border-slate-100 rounded-xl text-sm outline-none"
                    value={statusFilter}
                    onChange={(e) => setStatusFilter(e.target.value)}
                  >
                    <option value="All">All Statuses</option>
                    <option value="Unassigned">Unassigned</option>
                    <option value="Assigned">Assigned</option>
                    <option value="In Transit">In Transit</option>
                    <option value="Delivered">Delivered</option>
                  </select>
               </div>
               <div>
                  <select 
                    className="w-full p-2 bg-slate-50 border border-slate-100 rounded-xl text-sm outline-none"
                    value={carrierFilter}
                    onChange={(e) => setCarrierFilter(e.target.value)}
                  >
                    <option value="All">All Carriers</option>
                    {carriers.map(c => <option key={c.id} value={c.id}>{c.companyName}</option>)}
                  </select>
               </div>
               <div className="flex items-center gap-2 px-3 text-slate-400 text-xs font-bold uppercase tracking-tight">
                  <Filter size={14} /> Filters Active: { (searchQuery || statusFilter !== "All" || carrierFilter !== "All") ? "Yes" : "No" }
               </div>
            </div>

            <section className="bg-white rounded-3xl shadow-sm border overflow-hidden">
              <div className="overflow-x-auto">
                <table className="w-full text-left">
                  <thead className="bg-slate-50 text-slate-400 text-[10px] font-black uppercase tracking-widest">
                    <tr>
                      <th className="p-4">Carrier / Driver</th>
                      <th className="p-4">Route</th>
                      <th className="p-4 text-right">Rate</th>
                      <th className="p-4">Status</th>
                      <th className="p-4 text-center">Action</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {filteredLoads.length === 0 ? (
                      <tr><td colSpan="5" className="p-20 text-center text-slate-400">No matching loads found.</td></tr>
                    ) : (
                      filteredLoads.map((load) => {
                        const carrier = carriers.find(c => c.id === load.carrierId);
                        return (
                          <tr key={load.id} className="hover:bg-slate-50 transition cursor-pointer" onClick={() => setSelectedLoad(load)}>
                            <td className="p-4">
                              <div className="font-bold text-slate-900">{carrier?.companyName || "Unknown Carrier"}</div>
                              <div className="text-[10px] text-blue-600 font-bold uppercase">{load.assignedDriverName || "No Driver Assigned"}</div>
                            </td>
                            <td className="p-4"><div className="flex items-center gap-2 text-xs"><span className="font-semibold">{load.origin}</span><ArrowRight size={12} className="text-slate-300" /><span className="font-semibold">{load.destination}</span></div></td>
                            <td className="p-4 text-right font-mono font-bold text-slate-700">${load.rate?.toLocaleString()}</td>
                            <td className="p-4">
                              <span className={`px-3 py-1 rounded-full text-[10px] font-black uppercase ${
                                load.status === 'Delivered' ? 'bg-green-100 text-green-700' : 
                                load.status === 'In Transit' ? 'bg-purple-100 text-purple-700' :
                                'bg-blue-100 text-blue-700'
                              }`}>{load.status}</span>
                            </td>
                            <td className="p-4 text-center">
                              <button className="p-2 hover:bg-white border border-transparent hover:border-slate-100 rounded-lg transition text-slate-400 hover:text-blue-600">
                                <ChevronRight size={18} />
                              </button>
                            </td>
                          </tr>
                        );
                      })
                    )}
                  </tbody>
                </table>
              </div>
            </section>
          </div>
        )}

        {/* Dispatch New Load Modal */}
        {isDispatchModalOpen && (
          <div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
            <div className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onClick={() => setIsDispatchModalOpen(false)}></div>
            <div className="relative bg-white w-full max-w-lg rounded-[40px] shadow-2xl p-8 border animate-in fade-in zoom-in duration-300">
              <div className="flex justify-between items-center mb-6">
                <h3 className="text-xl font-bold flex items-center gap-2"><Plus className="text-blue-600" /> New Load Entry</h3>
                <button onClick={() => setIsDispatchModalOpen(false)} className="p-2 hover:bg-slate-100 rounded-full transition"><X size={20}/></button>
              </div>
              <form onSubmit={addLoad} className="space-y-4">
                <div>
                  <label className="text-[10px] font-black text-slate-400 uppercase">Carrier Partnership</label>
                  <select name="carrierId" required className="w-full p-4 bg-slate-50 border rounded-2xl mt-1 text-sm font-medium">
                    <option value="">Select a company...</option>
                    {carriers.map(c => <option key={c.id} value={c.id}>{c.companyName}</option>)}
                  </select>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div><label className="text-[10px] font-black text-slate-400 uppercase">Origin</label><input name="origin" required className="w-full p-4 bg-slate-50 border rounded-2xl mt-1 text-sm" placeholder="City, ST" /></div>
                  <div><label className="text-[10px] font-black text-slate-400 uppercase">Destination</label><input name="destination" required className="w-full p-4 bg-slate-50 border rounded-2xl mt-1 text-sm" placeholder="City, ST" /></div>
                </div>
                <div><label className="text-[10px] font-black text-slate-400 uppercase">Gross Rate ($)</label><input name="rate" type="number" step="0.01" required className="w-full p-4 bg-slate-50 border rounded-2xl mt-1 text-sm" placeholder="0.00" /></div>
                <div className="pt-4 flex gap-3">
                   <button type="button" onClick={() => setIsDispatchModalOpen(false)} className="flex-1 py-4 bg-slate-100 text-slate-600 rounded-2xl font-bold hover:bg-slate-200 transition">Cancel</button>
                   <button type="submit" className="flex-[2] bg-blue-600 text-white py-4 rounded-2xl font-bold hover:bg-blue-700 transition">Post Load to Board</button>
                </div>
              </form>
            </div>
          </div>
        )}

        {/* Load Details View (Workflow) */}
        {crmTab === 'loads' && selectedLoad && (
          <div className="space-y-8 pb-20">
            <button onClick={() => setSelectedLoad(null)} className="flex items-center gap-2 text-blue-600 font-bold text-sm mb-4 transition hover:gap-3"><ArrowRight className="rotate-180" size={16}/> Back to Dashboard</button>
            
            <div className="grid lg:grid-cols-3 gap-8">
              <div className="lg:col-span-2 space-y-8">
                {/* Workflow Status Tracking */}
                <section className="bg-white p-8 rounded-[40px] shadow-sm border">
                   <h3 className="text-lg font-black mb-8 flex items-center gap-2"><Activity className="text-blue-600" size={20}/> Load Lifecycle Tracking</h3>
                   <div className="relative flex justify-between items-center px-4">
                      <div className="absolute top-1/2 left-0 w-full h-1 bg-slate-100 -z-10 -translate-y-1/2"></div>
                      {['Unassigned', 'Assigned', 'In Transit', 'Delivered'].map((step, idx) => (
                        <div key={step} className="flex flex-col items-center">
                           <div className={`w-10 h-10 rounded-full border-4 flex items-center justify-center font-bold z-10 transition-all duration-500 ${
                             selectedLoad.status === step ? 'bg-blue-600 border-blue-100 text-white scale-110' : 
                             (idx < ['Unassigned', 'Assigned', 'In Transit', 'Delivered'].indexOf(selectedLoad.status) ? 'bg-green-500 border-green-100 text-white' : 'bg-white border-slate-100 text-slate-300')
                           }`}>
                             {idx < ['Unassigned', 'Assigned', 'In Transit', 'Delivered'].indexOf(selectedLoad.status) ? <CheckCircle2 size={18}/> : idx + 1}
                           </div>
                           <span className={`text-[10px] font-black uppercase mt-2 tracking-tight ${selectedLoad.status === step ? 'text-blue-600 font-black' : 'text-slate-400'}`}>{step}</span>
                        </div>
                      ))}
                   </div>
                </section>

                <div className="grid md:grid-cols-2 gap-8">
                   <section className="bg-white p-8 rounded-[40px] shadow-sm border">
                      <h3 className="text-sm font-black text-slate-400 uppercase tracking-widest mb-6">Assign Driver</h3>
                      {!selectedLoad.assignedDriverId ? (
                        <div className="space-y-4">
                           <div className="space-y-2 max-h-60 overflow-y-auto pr-2">
                             {drivers.filter(d => d.carrierId === selectedLoad.carrierId).map(driver => (
                               <button 
                                 key={driver.id} 
                                 onClick={() => assignDriverToLoad(selectedLoad.id, driver.id)}
                                 className="w-full p-4 bg-slate-50 hover:bg-blue-50 hover:border-blue-200 border rounded-2xl flex justify-between items-center transition"
                               >
                                 <div className="text-left">
                                   <div className="font-bold text-slate-900">{driver.name}</div>
                                   <div className="text-[10px] text-slate-400 uppercase">{driver.licensePlate}</div>
                                 </div>
                                 <UserPlus size={16} className="text-blue-600" />
                               </button>
                             ))}
                             {drivers.filter(d => d.carrierId === selectedLoad.carrierId).length === 0 && (
                               <div className="text-center py-6 text-slate-400 text-xs italic">No drivers registered for {carriers.find(c => c.id === selectedLoad.carrierId)?.companyName}</div>
                             )}
                           </div>
                        </div>
                      ) : (
                        <div className="p-6 bg-slate-900 rounded-3xl text-white">
                           <div className="flex items-center gap-4 mb-4">
                              <div className="w-12 h-12 bg-white/10 rounded-2xl flex items-center justify-center"><User /></div>
                              <div>
                                 <div className="font-black text-lg">{selectedLoad.assignedDriverName}</div>
                                 <div className="text-xs text-blue-400 uppercase tracking-widest">Active Assignment</div>
                              </div>
                           </div>
                           <div className="space-y-2 text-xs font-bold text-slate-400">
                              <div className="flex justify-between"><span>Phone:</span> <span className="text-white font-mono">{drivers.find(d => d.id === selectedLoad.assignedDriverId)?.phone}</span></div>
                              <div className="flex justify-between"><span>Plate:</span> <span className="text-white font-mono">{drivers.find(d => d.id === selectedLoad.assignedDriverId)?.licensePlate}</span></div>
                           </div>
                           <button 
                             onClick={() => updateLoadStatus(selectedLoad.id, 'Unassigned')}
                             className="mt-6 w-full py-3 bg-white/5 hover:bg-white/10 rounded-xl text-[10px] font-black uppercase transition border border-white/10"
                           >Reassign Driver</button>
                        </div>
                      )}
                   </section>

                   <section className="bg-white p-8 rounded-[40px] shadow-sm border">
                      <h3 className="text-sm font-black text-slate-400 uppercase tracking-widest mb-6">Load Documentation</h3>
                      <div className="space-y-3">
                         <div className="p-4 border border-dashed border-slate-200 rounded-2xl hover:bg-slate-50 cursor-pointer group transition">
                            <div className="flex items-center justify-between">
                               <div className="flex items-center gap-3">
                                  <div className="w-10 h-10 bg-slate-100 rounded-xl flex items-center justify-center text-slate-400 group-hover:text-blue-600 transition"><FileText size={20}/></div>
                                  <div><div className="text-xs font-bold">Rate Confirmation</div><div className="text-[10px] text-slate-400 uppercase">Wait for Upload</div></div>
                               </div>
                               <FileUp size={16} className="text-slate-300"/>
                            </div>
                         </div>
                         <div className="p-4 border border-dashed border-slate-200 rounded-2xl hover:bg-slate-50 cursor-pointer group transition">
                            <div className="flex items-center justify-between">
                               <div className="flex items-center gap-3">
                                  <div className="w-10 h-10 bg-slate-100 rounded-xl flex items-center justify-center text-slate-400 group-hover:text-blue-600 transition"><ClipboardList size={20}/></div>
                                  <div><div className="text-xs font-bold">Bill of Lading</div><div className="text-[10px] text-slate-400 uppercase">Scan Required</div></div>
                               </div>
                               <FileUp size={16} className="text-slate-300"/>
                            </div>
                         </div>
                      </div>
                   </section>
                </div>
              </div>

              {/* Sidebar: Tracking History */}
              <div className="lg:col-span-1 space-y-8">
                 <section className="bg-white p-8 rounded-[40px] shadow-sm border">
                    <h3 className="text-sm font-black text-slate-400 uppercase tracking-widest mb-6">Live Events</h3>
                    <div className="space-y-6">
                       {(selectedLoad.trackingHistory || []).map((log, i) => (
                         <div key={i} className="flex gap-4 relative">
                            {i !== (selectedLoad.trackingHistory || []).length - 1 && <div className="absolute top-6 left-[7px] w-0.5 h-full bg-slate-100"></div>}
                            <div className={`w-4 h-4 rounded-full mt-1 shrink-0 ${i === (selectedLoad.trackingHistory || []).length - 1 ? 'bg-blue-600 ring-4 ring-blue-100' : 'bg-slate-200'}`}></div>
                            <div>
                               <div className="text-xs font-black text-slate-900 uppercase tracking-tight">{log.status}</div>
                               <div className="text-[10px] text-slate-400 font-medium">{new Date(log.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>
                            </div>
                         </div>
                       ))}
                    </div>
                    <div className="mt-10 pt-8 border-t space-y-3">
                       <button onClick={() => updateLoadStatus(selectedLoad.id, 'In Transit')} className="w-full py-3 bg-blue-50 text-blue-700 rounded-xl text-xs font-black hover:bg-blue-600 hover:text-white transition uppercase">Set In Transit</button>
                       <button onClick={() => updateLoadStatus(selectedLoad.id, 'Delivered')} className="w-full py-3 bg-green-50 text-green-700 rounded-xl text-xs font-black hover:bg-green-600 hover:text-white transition uppercase">Mark Delivered</button>
                    </div>
                 </section>
              </div>
            </div>
          </div>
        )}

        {/* Carrier Tab Logic */}
        {crmTab === 'carriers' && !selectedCarrier && (
          <div className="grid lg:grid-cols-4 gap-8">
            <section className="lg:col-span-1 bg-white p-6 rounded-3xl shadow-sm border h-fit">
              <h3 className="text-lg font-bold mb-6 flex items-center gap-2"><Plus size={20} className="text-blue-600" /> Register Carrier</h3>
              <form onSubmit={addCarrier} className="space-y-4">
                <input name="name" required className="w-full p-3 bg-slate-50 border rounded-xl text-sm" placeholder="Company Name" />
                <input name="mc" required className="w-full p-3 bg-slate-50 border rounded-xl text-sm" placeholder="MC #" />
                <input name="email" type="email" required className="w-full p-3 bg-slate-50 border rounded-xl text-sm" placeholder="Contact Email" />
                <input name="trucks" type="number" className="w-full p-3 bg-slate-50 border rounded-xl text-sm" placeholder="Number of Trucks" />
                <button type="submit" className="w-full bg-slate-900 text-white py-4 rounded-xl font-bold hover:bg-slate-800 transition">Register Carrier</button>
              </form>
            </section>
            <section className="lg:col-span-3 grid md:grid-cols-2 gap-6">
              {carriers.map(carrier => (
                <div key={carrier.id} onClick={() => setSelectedCarrier(carrier)} className="bg-white p-6 rounded-[32px] border hover:shadow-lg transition cursor-pointer group">
                  <div className="flex justify-between items-start mb-4">
                    <div className="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition"><Building2 size={24} /></div>
                    <ChevronRight className="text-slate-200" />
                  </div>
                  <h3 className="font-bold text-lg text-slate-900">{carrier.companyName}</h3>
                  <div className="flex justify-between mt-2">
                    <p className="text-sm font-bold text-slate-400 uppercase tracking-tight">MC#{carrier.mcNumber}</p>
                    <p className="text-sm font-bold text-blue-600">{carrier.truckCount || 0} Trucks</p>
                  </div>
                </div>
              ))}
            </section>
          </div>
        )}

        {crmTab === 'carriers' && selectedCarrier && (
          <div className="space-y-8">
            <button onClick={() => setSelectedCarrier(null)} className="flex items-center gap-2 text-blue-600 font-bold text-sm"><ArrowRight className="rotate-180" size={16}/> Back to Directory</button>
            <div className="grid lg:grid-cols-3 gap-8">
               <div className="lg:col-span-2 space-y-8">
                  <section className="bg-white p-8 rounded-[40px] shadow-sm border">
                    <h2 className="text-3xl font-black">{selectedCarrier.companyName}</h2>
                    <p className="text-slate-500">MC#{selectedCarrier.mcNumber} • {selectedCarrier.email}</p>
                    <div className="mt-8 grid md:grid-cols-2 gap-6">
                       {drivers.filter(d => d.carrierId === selectedCarrier.id).map(driver => (
                         <div key={driver.id} className="p-6 bg-slate-50 rounded-3xl border">
                            <h4 className="font-bold text-slate-900">{driver.name}</h4>
                            <p className="text-xs text-slate-500 mt-1">{driver.phone} • {driver.licensePlate}</p>
                         </div>
                       ))}
                    </div>
                  </section>
               </div>
               <div className="lg:col-span-1">
                  <section className="bg-white p-6 rounded-3xl shadow-sm border">
                    <h3 className="text-lg font-bold mb-6">Add Driver</h3>
                    <form onSubmit={addDriver} className="space-y-4">
                      <input name="driverName" required className="w-full p-3 bg-slate-50 border rounded-xl text-sm" placeholder="Driver Name" />
                      <input name="phone" required className="w-full p-3 bg-slate-50 border rounded-xl text-sm" placeholder="Phone" />
                      <div className="grid grid-cols-2 gap-4">
                        <input name="license" required className="w-full p-3 bg-slate-50 border rounded-xl text-sm" placeholder="License #" />
                        <input name="plate" required className="w-full p-3 bg-slate-50 border rounded-xl text-sm" placeholder="Plate #" />
                      </div>
                      <button type="submit" className="w-full bg-slate-900 text-white py-4 rounded-xl font-bold">Add Driver</button>
                    </form>
                  </section>
               </div>
            </div>
          </div>
        )}

        {crmTab === 'invoices' && (
          <div className="bg-white rounded-3xl shadow-sm border overflow-hidden">
             <div className="p-6 border-b bg-slate-50/50"><h3 className="font-bold">Financial History</h3></div>
             <table className="w-full text-left">
                <thead className="bg-slate-50 text-slate-400 text-[10px] font-black uppercase tracking-widest"><tr><th className="p-6">Invoice #</th><th className="p-6">Carrier</th><th className="p-6">Amount</th><th className="p-6">Status</th></tr></thead>
                <tbody className="divide-y divide-slate-100">
                  {loads.map((l, i) => (
                    <tr key={i} className="hover:bg-slate-50/50 transition">
                      <td className="p-6 font-mono text-xs">INV-00{i+1}</td>
                      <td className="p-6 font-bold">{carriers.find(c => c.id === l.carrierId)?.companyName || "Unknown"}</td>
                      <td className="p-6 font-bold text-blue-600">${(l.rate * 0.1).toFixed(2)}</td>
                      <td className="p-6"><span className="px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-[10px] font-black uppercase">Pending</span></td>
                    </tr>
                  ))}
                </tbody>
             </table>
          </div>
        )}

        {crmTab === 'analytics' && (
          <div className="grid md:grid-cols-4 gap-6">
             {[
               { label: "Total Gross", val: `$${loads.reduce((a, b) => a + (b.rate || 0), 0).toLocaleString()}`, icon: <DollarSign />, color: "text-green-600" },
               { label: "Active Loads", val: loads.length, icon: <Truck />, color: "text-blue-600" },
               { label: "Avg. Rate", val: `$${(loads.reduce((a, b) => a + (b.rate || 0), 0) / (loads.length || 1)).toFixed(0)}`, icon: <TrendingUp />, color: "text-purple-600" },
               { label: "Partners", val: carriers.length, icon: <User />, color: "text-amber-600" }
             ].map((stat, i) => (
               <div key={i} className="bg-white p-6 rounded-3xl border shadow-sm">
                  <div className={`mb-4 ${stat.color}`}>{stat.icon}</div>
                  <div className="text-2xl font-black">{stat.val}</div>
                  <div className="text-xs font-bold text-slate-400 uppercase tracking-tight">{stat.label}</div>
               </div>
             ))}
          </div>
        )}
      </main>
    </div>
  );

  const LoginPage = () => (
    <div className="min-h-[80vh] flex items-center justify-center bg-slate-50 px-4">
      <div className="max-w-md w-full bg-white p-10 rounded-[40px] shadow-xl border">
        <div className="text-center mb-10">
          <div className="bg-blue-600 w-16 h-16 rounded-3xl flex items-center justify-center mx-auto mb-6 rotate-3"><LayoutDashboard className="text-white" /></div>
          <h2 className="text-3xl font-bold">Dispatcher Login</h2>
          <p className="text-slate-500 mt-2">Access your CRM dashboard</p>
        </div>
        <form className="space-y-6" onSubmit={(e) => { e.preventDefault(); navigate('crm'); }}>
          <input type="text" className="w-full p-4 border rounded-2xl" placeholder="Dispatcher ID" />
          <input type="password" placeholder="Access Key" className="w-full p-4 border rounded-2xl" />
          <button type="submit" className="w-full bg-blue-600 text-white py-4 rounded-2xl font-bold hover:bg-blue-700 transition">Enter Dashboard</button>
        </form>
      </div>
    </div>
  );

  const HomePage = () => (
    <div>
      <section className="relative h-[80vh] flex items-center justify-center text-center text-white px-4 bg-slate-900 overflow-hidden">
        <div className="absolute inset-0 opacity-40"><img src="https://images.unsplash.com/photo-1519003722824-194d4455a60c?auto=format&fit=crop&q=80&w=2000" className="w-full h-full object-cover" alt="Trucking Background" /></div>
        <div className="relative z-10 max-w-4xl">
          <h1 className="text-5xl md:text-7xl font-extrabold mb-6">Stop Chasing Loads. <br/><span className="text-blue-400">Maximize Your RPM.</span></h1>
          <p className="text-xl mb-10 text-slate-300">Premium 24/7 Dispatching & Operations for US Owner-Operators. We handle the paperwork, you handle the miles.</p>
          <div className="flex flex-col md:flex-row gap-4 justify-center">
            <button onClick={() => navigate('onboarding')} className="bg-blue-600 hover:bg-blue-700 px-10 py-4 rounded-full text-xl font-bold transition flex items-center justify-center">Get Started <ArrowRight className="ml-2" /></button>
            <button onClick={() => navigate('login')} className="bg-slate-800 border border-slate-700 hover:bg-slate-700 px-10 py-4 rounded-full text-xl font-bold transition">Dispatcher Login</button>
          </div>
        </div>
      </section>
      <section className="py-24 bg-white px-8">
        <div className="max-w-7xl mx-auto grid md:grid-cols-3 gap-12 text-center">
           {[
             { title: "High-Pay Lanes", icon: <BarChart3 className="text-blue-600 w-10 h-10 mx-auto"/>, desc: "We use DAT & Truckstop data to secure the highest RPM in your preferred lanes." },
             { title: "24/7 Back-Office", icon: <FileText className="text-blue-600 w-10 h-10 mx-auto"/>, desc: "From packets to factoring, we handle every piece of paper so you stay hands-off." },
             { title: "No Forced Dispatch", icon: <ShieldCheck className="text-blue-600 w-10 h-10 mx-auto"/>, desc: "You are the boss. We provide the options, you make the final call on every load." }
           ].map((item, i) => (
             <div key={i} className="p-10 bg-slate-50 rounded-[40px] border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300">
               <div className="mb-6">{item.icon}</div>
               <h3 className="text-xl font-bold mb-3">{item.title}</h3>
               <p className="text-slate-600 leading-relaxed">{item.desc}</p>
             </div>
           ))}
        </div>
      </section>
    </div>
  );

  const ServicesPage = () => (
    <div className="py-20 px-8">
      <div className="max-w-5xl mx-auto text-center mb-16"><h2 className="text-4xl font-black mb-4 uppercase tracking-tight">Our <span className="text-blue-600">Specializations</span></h2><p className="text-slate-500">We don't just move freight; we optimize your business structure.</p></div>
      <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-8 mb-16">
        <div className="bg-blue-900 text-white p-12 rounded-[50px] shadow-xl"><Truck className="w-14 h-14 mb-8 text-blue-400" /><h3 className="text-3xl font-bold mb-6">Reefer Dispatching</h3><p className="text-blue-100 text-lg mb-8">Precision monitoring for temp-sensitive cargo. We manage cold-chain compliance and reefer-specific fuel surcharges.</p></div>
        <div className="bg-slate-50 border border-slate-200 p-12 rounded-[50px] shadow-sm"><Truck className="w-14 h-14 mb-8 text-blue-600" /><h3 className="text-3xl font-bold mb-6 text-slate-900">Dry Van Power</h3><p className="text-slate-600 text-lg mb-8">Focus on consistent gross revenue through high-volume lane triangulation and power-only drop-and-hook loads.</p></div>
      </div>
    </div>
  );

  const Footer = () => (
    <footer className="bg-slate-900 text-white py-16 px-8">
      <div className="max-w-7xl mx-auto grid md:grid-cols-4 gap-12">
        <div className="col-span-2"><span className="text-2xl font-black tracking-tighter uppercase">Forward <span className="text-blue-500">Dispatching</span></span><p className="mt-4 text-slate-400 max-w-sm mb-6">A US-registered division of ForwardDesk LLC.</p></div>
        <div><h4 className="font-bold mb-4">Navigation</h4><ul className="space-y-2 text-slate-400"><li className="cursor-pointer hover:text-white" onClick={() => navigate('services')}>Services</li><li className="cursor-pointer hover:text-white" onClick={() => navigate('onboarding')}>Onboarding</li></ul></div>
        <div><h4 className="font-bold mb-4">Contact</h4><p className="text-slate-400 flex items-center gap-2 mb-2"><Mail size={14} /> wahaj@forwarddispatching.com</p></div>
      </div>
      <div className="max-w-7xl mx-auto mt-12 pt-8 border-t border-slate-800 text-center text-slate-500 text-sm">© 2026 Forward Dispatching.</div>
    </footer>
  );

  if (isLoading) return <div className="h-screen flex items-center justify-center text-blue-600 font-bold">Initializing Systems...</div>;

  return (
    <div className="min-h-screen bg-white">
      {currentPage !== 'crm' && <Navbar />}
      <main>
        {currentPage === 'home' && <HomePage />}
        {currentPage === 'services' && <ServicesPage />}
        {currentPage === 'onboarding' && <ServicesPage />}
        {currentPage === 'login' && <LoginPage />}
        {currentPage === 'crm' && <CRM_Dashboard />}
      </main>
      {currentPage !== 'crm' && <Footer />}
    </div>
  );
};

export default App;