import { useQuery } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { Loading } from '@/components/Loading';
import {
  Car,
  Clock,
  MapPin,
  Users,
  AlertTriangle,
  CheckCircle,
  Plane,
  Radio,
  Bell,
  AlertCircle,
  ArrowRight,
  ChevronRight,
  Activity,
  Calendar,
} from 'lucide-react';
import { useEffect, useState, useRef } from 'react';
import { Link } from 'react-router-dom';
import { DriverChatBubble } from '@/components/DriverChatBubble';
import { DriverChatModal } from '@/components/DriverChatModal';
import { useUnreadCounts, useDriverResponseCheck } from '@/hooks/useSignalMessages';

interface Event {
  id: string;
  title: string;
  pickupLocation: string | null;
  dropoffLocation: string | null;
  location: string | null;
  startTime: string;
  endTime: string;
  actualStartTime: string | null;
  status: string;
  type: string;
  vip: {
    id: string;
    name: string;
  } | null;
  driver: {
    id: string;
    name: string;
  } | null;
  vehicle: {
    id: string;
    name: string;
    type: string;
    seatCapacity: number;
  } | null;
}

interface Vehicle {
  id: string;
  name: string;
  type: string;
  seatCapacity: number;
  status: string;
  currentDriver: { name: string } | null;
}

interface VIP {
  id: string;
  name: string;
  organization: string | null;
  arrivalMode: string;
  expectedArrival: string | null;
  flights: Array<{
    id: string;
    flightNumber: string;
    arrivalAirport: string;
    scheduledArrival: string | null;
    status: string | null;
  }>;
}

interface Driver {
  id: string;
  name: string;
  phone: string;
}

const SCROLL_SPEED = 60; // pixels per second (must be >= 60 for 60fps to register 1px per frame)
const SCROLL_PAUSE_AT_END = 2000; // pause 2 seconds at top/bottom
const USER_INTERACTION_PAUSE = 20000; // pause 20 seconds after user interaction

export function CommandCenter() {
  const [currentTime, setCurrentTime] = useState(new Date());
  const [lastRefresh, setLastRefresh] = useState(new Date());
  const [chatDriver, setChatDriver] = useState<Driver | null>(null);
  const [isChatOpen, setIsChatOpen] = useState(false);

  // Refs for smooth auto-scrolling
  const activeScrollRef = useRef<HTMLDivElement>(null);
  const upcomingScrollRef = useRef<HTMLDivElement>(null);
  const arrivalsScrollRef = useRef<HTMLDivElement>(null);
  const availableScrollRef = useRef<HTMLDivElement>(null);

  // Track user interaction to pause auto-scroll
  const lastInteractionRef = useRef<number>(0);
  // Track scroll directions (persists across renders)
  const scrollDirectionsRef = useRef<number[]>([1, 1, 1, 1]);

  const handleUserInteraction = () => {
    lastInteractionRef.current = Date.now();
  };

  const { data: unreadCounts } = useUnreadCounts();

  const openChat = (driver: { id: string; name: string; phone?: string }) => {
    // Find full driver info including phone
    const fullDriver = drivers?.find(d => d.id === driver.id);
    if (fullDriver) {
      setChatDriver(fullDriver);
      setIsChatOpen(true);
    }
  };

  const closeChat = () => {
    setIsChatOpen(false);
    setChatDriver(null);
  };

  const { data: events, refetch: refetchEvents } = useQuery<Event[]>({
    queryKey: ['events'],
    queryFn: async () => {
      const { data } = await api.get('/events');
      return data;
    },
  });

  const { data: vehicles, refetch: refetchVehicles } = useQuery<Vehicle[]>({
    queryKey: ['vehicles'],
    queryFn: async () => {
      const { data } = await api.get('/vehicles');
      return data;
    },
  });

  const { data: vips, refetch: refetchVips } = useQuery<VIP[]>({
    queryKey: ['vips'],
    queryFn: async () => {
      const { data } = await api.get('/vips');
      return data;
    },
  });

  const { data: drivers } = useQuery<Driver[]>({
    queryKey: ['drivers'],
    queryFn: async () => {
      const { data } = await api.get('/drivers');
      return data;
    },
  });

  // Compute awaiting confirmation BEFORE any conditional returns (for hooks)
  const now = currentTime;
  const awaitingConfirmation = (events || []).filter((event) => {
    if (event.status !== 'SCHEDULED' || event.type !== 'TRANSPORT') return false;
    const start = new Date(event.startTime);
    return start <= now;
  });

  // Check which awaiting events have driver responses since the event started
  // MUST be called before any conditional returns to satisfy React's rules of hooks
  const { data: respondedEventIds } = useDriverResponseCheck(awaitingConfirmation);

  // Update clock every second
  useEffect(() => {
    const clockInterval = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);
    return () => clearInterval(clockInterval);
  }, []);

  // Auto-refresh data every 30 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      refetchEvents();
      refetchVehicles();
      refetchVips();
      setLastRefresh(new Date());
    }, 30000);

    return () => clearInterval(interval);
  }, [refetchEvents, refetchVehicles, refetchVips]);

  // Smooth auto-scrolling for Active, Upcoming, Arrivals, and Available sections
  useEffect(() => {
    const pauseTimers: (NodeJS.Timeout | null)[] = [null, null, null, null];
    const directions = scrollDirectionsRef.current;

    const animate = () => {
      // Get current refs (they may change)
      const scrollContainers = [
        activeScrollRef.current,
        upcomingScrollRef.current,
        arrivalsScrollRef.current,
        availableScrollRef.current,
      ];

      // Check if user has interacted recently
      const timeSinceInteraction = Date.now() - lastInteractionRef.current;
      if (timeSinceInteraction < USER_INTERACTION_PAUSE) {
        return; // Pause scrolling while user is interacting
      }

      scrollContainers.forEach((container, index) => {
        if (!container || pauseTimers[index]) return;

        const { scrollTop, scrollHeight, clientHeight } = container;
        const maxScroll = scrollHeight - clientHeight;

        // Only scroll if there's content to scroll
        if (maxScroll <= 0) return;

        // Calculate new scroll position (ensure at least 1px movement)
        const scrollAmount = Math.max(1, Math.round(SCROLL_SPEED / 60)); // 60fps, min 1px
        const newScrollTop = scrollTop + (scrollAmount * directions[index]);

        // Check if we've reached the bottom
        if (directions[index] === 1 && newScrollTop >= maxScroll) {
          container.scrollTop = maxScroll;
          directions[index] = -1;
          // Pause at bottom
          pauseTimers[index] = setTimeout(() => {
            pauseTimers[index] = null;
          }, SCROLL_PAUSE_AT_END);
        }
        // Check if we've reached the top
        else if (directions[index] === -1 && newScrollTop <= 0) {
          container.scrollTop = 0;
          directions[index] = 1;
          // Pause at top
          pauseTimers[index] = setTimeout(() => {
            pauseTimers[index] = null;
          }, SCROLL_PAUSE_AT_END);
        }
        else {
          container.scrollTop = newScrollTop;
        }
      });
    };

    const intervalId = setInterval(animate, 1000 / 60); // 60fps

    return () => {
      clearInterval(intervalId);
      pauseTimers.forEach(timer => timer && clearTimeout(timer));
    };
  }, []); // Run once on mount

  if (!events || !vehicles || !vips) {
    return <Loading message="Loading Command Center..." />;
  }

  const fifteenMinutes = new Date(now.getTime() + 15 * 60 * 1000);
  const thirtyMinutes = new Date(now.getTime() + 30 * 60 * 1000);
  const twoHoursLater = new Date(now.getTime() + 2 * 60 * 60 * 1000);
  const fourHoursLater = new Date(now.getTime() + 4 * 60 * 60 * 1000);

  // En route trips (IN_PROGRESS)
  const enRouteTrips = events.filter(
    (event) => event.status === 'IN_PROGRESS' && event.type === 'TRANSPORT'
  );

  // Upcoming trips in next 2 hours
  const upcomingTrips = events
    .filter((event) => {
      const start = new Date(event.startTime);
      return start > now && start <= twoHoursLater && event.type === 'TRANSPORT' && event.status === 'SCHEDULED';
    })
    .sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());

  // ALERTS: Events in next 2 hours without driver or vehicle
  const unassignedEvents = upcomingTrips.filter((e) => !e.driver || !e.vehicle);

  // ALERTS: Events starting in <15 min
  const imminentEvents = upcomingTrips.filter((e) => {
    const start = new Date(e.startTime);
    return start <= fifteenMinutes;
  });

  // Upcoming arrivals (next 4 hours)
  const upcomingArrivals = vips
    .filter((vip) => {
      if (vip.expectedArrival) {
        const arrival = new Date(vip.expectedArrival);
        return arrival > now && arrival <= fourHoursLater;
      }
      return vip.flights.some((flight) => {
        if (flight.scheduledArrival) {
          const arrival = new Date(flight.scheduledArrival);
          return arrival > now && arrival <= fourHoursLater;
        }
        return false;
      });
    })
    .sort((a, b) => {
      const aTime = a.expectedArrival || a.flights[0]?.scheduledArrival || '';
      const bTime = b.expectedArrival || b.flights[0]?.scheduledArrival || '';
      return new Date(aTime).getTime() - new Date(bTime).getTime();
    });

  // Vehicle status - calculate dynamically based on active events
  // A vehicle is "in use" if it's assigned to an IN_PROGRESS event
  const vehiclesInActiveEvents = new Set(
    events
      .filter((e) => e.status === 'IN_PROGRESS' && e.vehicle)
      .map((e) => e.vehicle!.id)
  );

  // Also mark vehicles assigned to events starting within 15 minutes as "reserved"
  const vehiclesReservedSoon = new Set(
    events
      .filter((e) => {
        if (e.status !== 'SCHEDULED' || !e.vehicle) return false;
        const start = new Date(e.startTime);
        return start > now && start <= fifteenMinutes;
      })
      .map((e) => e.vehicle!.id)
  );

  const inUseVehicles = vehicles.filter(
    (v) => vehiclesInActiveEvents.has(v.id) || v.status === 'IN_USE'
  );

  const reservedVehicles = vehicles.filter(
    (v) => vehiclesReservedSoon.has(v.id) && !vehiclesInActiveEvents.has(v.id) && v.status !== 'IN_USE'
  );

  const availableVehicles = vehicles.filter(
    (v) =>
      v.status !== 'MAINTENANCE' &&
      !vehiclesInActiveEvents.has(v.id) &&
      !vehiclesReservedSoon.has(v.id) &&
      v.status !== 'IN_USE'
  );

  // Calculate alerts
  const alerts: Array<{ type: 'critical' | 'warning' | 'info'; message: string; link?: string }> = [];

  // Alert for trips awaiting confirmation (overdue)
  awaitingConfirmation.forEach((event) => {
    const minutesLate = Math.floor((now.getTime() - new Date(event.startTime).getTime()) / 60000);
    if (minutesLate >= 5) {
      alerts.push({
        type: 'critical',
        message: `${event.vip?.name || 'Unknown VIP'}: Trip ${minutesLate}min overdue - awaiting driver confirmation`,
        link: `/events`,
      });
    }
  });

  unassignedEvents.forEach((event) => {
    if (!event.driver && !event.vehicle) {
      alerts.push({
        type: 'critical',
        message: `${event.vip?.name || 'Unknown VIP'}: No driver or vehicle assigned (${getTimeUntil(event.startTime)})`,
        link: `/events`,
      });
    } else if (!event.driver) {
      alerts.push({
        type: 'critical',
        message: `${event.vip?.name || 'Unknown VIP'}: No driver assigned (${getTimeUntil(event.startTime)})`,
        link: `/events`,
      });
    } else if (!event.vehicle) {
      alerts.push({
        type: 'warning',
        message: `${event.vip?.name || 'Unknown VIP'}: No vehicle assigned (${getTimeUntil(event.startTime)})`,
        link: `/events`,
      });
    }
  });

  if (availableVehicles.length === 0 && upcomingTrips.length > 0) {
    alerts.push({
      type: 'warning',
      message: 'No vehicles available - all vehicles in use',
      link: `/vehicles`,
    });
  }

  // Get time until event
  function getTimeUntil(dateStr: string) {
    const eventTime = new Date(dateStr);
    const diff = eventTime.getTime() - now.getTime();
    const minutes = Math.floor(diff / 60000);

    if (minutes < 0) return 'NOW';
    if (minutes < 60) return `${minutes}m`;
    const hours = Math.floor(minutes / 60);
    const remainingMin = minutes % 60;
    return `${hours}h ${remainingMin}m`;
  }

  function getUrgencyClass(startTime: string) {
    const start = new Date(startTime);
    const diff = start.getTime() - now.getTime();
    const minutes = diff / 60000;

    if (minutes <= 15) return 'border-l-red-500 bg-red-50 dark:bg-red-950/30';
    if (minutes <= 30) return 'border-l-orange-500 bg-orange-50 dark:bg-orange-950/20';
    if (minutes <= 60) return 'border-l-yellow-500 bg-yellow-50 dark:bg-yellow-950/20';
    return 'border-l-blue-500';
  }

  function getTimeColor(startTime: string) {
    const start = new Date(startTime);
    const diff = start.getTime() - now.getTime();
    const minutes = diff / 60000;

    if (minutes <= 15) return 'text-red-600 dark:text-red-400';
    if (minutes <= 30) return 'text-orange-600 dark:text-orange-400';
    if (minutes <= 60) return 'text-yellow-600 dark:text-yellow-400';
    return 'text-blue-600 dark:text-blue-400';
  }

  const secondsSinceRefresh = Math.floor((now.getTime() - lastRefresh.getTime()) / 1000);

  // System status
  const hasAlerts = alerts.length > 0;
  const hasCriticalAlerts = alerts.some((a) => a.type === 'critical');
  const systemStatus = hasCriticalAlerts ? 'critical' : hasAlerts ? 'warning' : 'operational';

  return (
    <div className="space-y-4">
      {/* Header with Live Clock */}
      <div className="bg-card border border-border rounded-lg shadow-soft p-4">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
          {/* Title and Status */}
          <div className="flex items-center gap-4">
            <div>
              <h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
                <Activity className="h-6 w-6" />
                Command Center
              </h1>
              <div className="flex items-center gap-2 mt-1">
                <div className={`h-2 w-2 rounded-full ${
                  systemStatus === 'operational' ? 'bg-green-500' :
                  systemStatus === 'warning' ? 'bg-yellow-500 animate-pulse' :
                  'bg-red-500 animate-pulse'
                }`} />
                <span className={`text-xs font-medium ${
                  systemStatus === 'operational' ? 'text-green-600 dark:text-green-400' :
                  systemStatus === 'warning' ? 'text-yellow-600 dark:text-yellow-400' :
                  'text-red-600 dark:text-red-400'
                }`}>
                  {systemStatus === 'operational' ? 'All Systems Operational' :
                   systemStatus === 'warning' ? 'Attention Required' :
                   'Critical Issues'}
                </span>
              </div>
            </div>
          </div>

          {/* Live Clock */}
          <div className="text-right">
            <div className="text-4xl font-mono font-bold text-foreground tabular-nums">
              {currentTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
            </div>
            <div className="text-sm text-muted-foreground">
              {currentTime.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
            </div>
            <div className="flex items-center justify-end gap-1 text-xs text-muted-foreground mt-1">
              <Radio className="h-3 w-3 text-green-500 animate-pulse" />
              Updated {secondsSinceRefresh}s ago
            </div>
          </div>
        </div>
      </div>

      {/* Alerts Panel */}
      {alerts.length > 0 && (
        <div className={`rounded-lg border-2 p-4 ${
          hasCriticalAlerts
            ? 'bg-red-50 dark:bg-red-950/30 border-red-300 dark:border-red-800'
            : 'bg-yellow-50 dark:bg-yellow-950/30 border-yellow-300 dark:border-yellow-800'
        }`}>
          <div className="flex items-center gap-2 mb-3">
            <Bell className={`h-5 w-5 ${hasCriticalAlerts ? 'text-red-600' : 'text-yellow-600'}`} />
            <h2 className={`font-semibold ${hasCriticalAlerts ? 'text-red-800 dark:text-red-200' : 'text-yellow-800 dark:text-yellow-200'}`}>
              {alerts.length} Alert{alerts.length > 1 ? 's' : ''} Requiring Attention
            </h2>
          </div>
          <div className="space-y-2">
            {alerts.slice(0, 5).map((alert, idx) => (
              <div key={idx} className="flex items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  {alert.type === 'critical' ? (
                    <AlertCircle className="h-4 w-4 text-red-600 flex-shrink-0" />
                  ) : (
                    <AlertTriangle className="h-4 w-4 text-yellow-600 flex-shrink-0" />
                  )}
                  <span className={`text-sm ${
                    alert.type === 'critical'
                      ? 'text-red-800 dark:text-red-200'
                      : 'text-yellow-800 dark:text-yellow-200'
                  }`}>
                    {alert.message}
                  </span>
                </div>
                {alert.link && (
                  <Link
                    to={alert.link}
                    className="text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 flex items-center gap-1"
                  >
                    Fix <ChevronRight className="h-3 w-3" />
                  </Link>
                )}
              </div>
            ))}
            {alerts.length > 5 && (
              <p className="text-sm text-muted-foreground">+{alerts.length - 5} more alerts</p>
            )}
          </div>
        </div>
      )}

      {/* Quick Stats Row */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <div className="bg-card border border-border p-3 rounded-lg shadow-soft">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground uppercase tracking-wide">En Route</p>
              <p className="text-3xl font-bold text-green-600 dark:text-green-400">{enRouteTrips.length}</p>
            </div>
            <div className="h-10 w-10 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
              <Car className="h-5 w-5 text-green-600 dark:text-green-400" />
            </div>
          </div>
        </div>
        <div className="bg-card border border-border p-3 rounded-lg shadow-soft">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground uppercase tracking-wide">Upcoming (2h)</p>
              <p className="text-3xl font-bold text-blue-600 dark:text-blue-400">{upcomingTrips.length}</p>
            </div>
            <div className="h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
              <Clock className="h-5 w-5 text-blue-600 dark:text-blue-400" />
            </div>
          </div>
        </div>
        <div className="bg-card border border-border p-3 rounded-lg shadow-soft">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground uppercase tracking-wide">Vehicles Free</p>
              <p className="text-3xl font-bold text-emerald-600 dark:text-emerald-400">
                {availableVehicles.length}<span className="text-lg text-muted-foreground">/{vehicles.filter(v => v.status !== 'MAINTENANCE').length}</span>
              </p>
              {inUseVehicles.length > 0 && (
                <p className="text-xs text-blue-600 dark:text-blue-400">{inUseVehicles.length} in use</p>
              )}
            </div>
            <div className="h-10 w-10 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
              <CheckCircle className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
            </div>
          </div>
        </div>
        <div className="bg-card border border-border p-3 rounded-lg shadow-soft">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground uppercase tracking-wide">VIP Arrivals</p>
              <p className="text-3xl font-bold text-purple-600 dark:text-purple-400">{upcomingArrivals.length}</p>
            </div>
            <div className="h-10 w-10 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
              <Plane className="h-5 w-5 text-purple-600 dark:text-purple-400" />
            </div>
          </div>
        </div>
      </div>

      {/* Active & Upcoming - Side by Side */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        {/* Active NOW - includes both en route and awaiting confirmation */}
        {(() => {
          const allActiveTrips = [...awaitingConfirmation, ...enRouteTrips];
          const awaitingIds = new Set(awaitingConfirmation.map(t => t.id));

          return (
            <div className={`bg-card border-2 ${awaitingConfirmation.length > 0 ? 'border-orange-500' : 'border-green-500'} rounded-lg shadow-soft overflow-hidden`}>
              <div className={`${awaitingConfirmation.length > 0 ? 'bg-orange-500' : 'bg-green-600'} px-4 py-2 flex items-center justify-between`}>
                <div className="flex items-center gap-2">
                  <div className="h-3 w-3 rounded-full bg-white animate-pulse" />
                  <h2 className="font-bold text-white">ACTIVE NOW</h2>
                  {awaitingConfirmation.length > 0 && (
                    <span className="text-xs bg-white/20 px-2 py-0.5 rounded-full">
                      {awaitingConfirmation.length} awaiting
                    </span>
                  )}
                </div>
                <span className="text-white/80 text-sm">{allActiveTrips.length} trips</span>
              </div>
              {allActiveTrips.length === 0 ? (
                <div className="p-6 text-center text-muted-foreground">
                  <Car className="h-10 w-10 mx-auto mb-2 opacity-30" />
                  <p className="text-sm">No active transports</p>
                </div>
              ) : (
                <div
                  ref={activeScrollRef}
                  onWheel={handleUserInteraction}
                  onTouchMove={handleUserInteraction}
                  className="divide-y divide-border max-h-[280px] overflow-y-auto scrollbar-hide"
                >
                  {allActiveTrips.map((trip) => {
                    const isAwaiting = awaitingIds.has(trip.id);
                    // Show glow only if awaiting AND driver hasn't responded since event started
                    const showAwaitingGlow = isAwaiting && !respondedEventIds?.has(trip.id);
                    return (
                      <div
                        key={trip.id}
                        className="p-3 transition-colors hover:bg-accent/50"
                      >
                        <div className="flex items-center justify-between gap-3">
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center gap-2 mb-1">
                              <span className="font-semibold text-foreground truncate text-sm">
                                {trip.vip?.name || 'Unknown VIP'}
                              </span>
                              <span className="text-muted-foreground text-xs truncate max-w-[150px]">
                                {trip.title}
                              </span>
                              <Link
                                to="/events"
                                state={{ editEventId: trip.id }}
                                onClick={(e) => e.stopPropagation()}
                                className="p-1 rounded hover:bg-primary/10 text-muted-foreground hover:text-primary transition-colors"
                                title="View/Edit Event"
                              >
                                <Calendar className="h-3.5 w-3.5" />
                              </Link>
                            </div>
                            <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
                              <MapPin className="h-3 w-3 flex-shrink-0" />
                              <span className="truncate">{trip.pickupLocation}</span>
                              <ArrowRight className="h-3 w-3 flex-shrink-0" />
                              <span className="truncate">{trip.dropoffLocation}</span>
                            </div>
                            <div className="flex items-center gap-3 text-xs text-muted-foreground">
                              {trip.driver && (
                                <span className="flex items-center gap-1">
                                  <Users className="h-3 w-3" />
                                  {trip.driver.name}
                                  <DriverChatBubble
                                    unreadCount={unreadCounts?.[trip.driver.id] || 0}
                                    awaitingResponse={showAwaitingGlow}
                                    onClick={() => openChat(trip.driver!)}
                                    className="ml-0.5"
                                  />
                                </span>
                              )}
                              {trip.vehicle && (
                                <span className="flex items-center gap-1">
                                  <Car className="h-3 w-3" /> {trip.vehicle.name}
                                </span>
                              )}
                            </div>
                          </div>
                          <div className="text-right flex-shrink-0">
                            <p className="text-xs text-muted-foreground">ETA</p>
                            <p className="text-lg font-bold text-green-600 dark:text-green-400">
                              {new Date(trip.endTime).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
                            </p>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          );
        })()}

        {/* Upcoming Trips */}
        <div className="bg-card border border-border rounded-lg shadow-soft overflow-hidden">
          <div className="bg-blue-600 px-4 py-2 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Clock className="h-5 w-5 text-white" />
              <h2 className="font-bold text-white">UPCOMING</h2>
            </div>
            <span className="text-white/80 text-sm">{upcomingTrips.length} trips</span>
          </div>
          {upcomingTrips.length === 0 ? (
            <div className="p-6 text-center text-muted-foreground">
              <CheckCircle className="h-10 w-10 mx-auto mb-2 opacity-30" />
              <p className="text-sm">No trips in next 2 hours</p>
            </div>
          ) : (
            <div
              ref={upcomingScrollRef}
              onWheel={handleUserInteraction}
              onTouchMove={handleUserInteraction}
              className="divide-y divide-border max-h-[280px] overflow-y-auto scrollbar-hide"
            >
              {upcomingTrips.map((trip) => {
                const timeColor = getTimeColor(trip.startTime);
                const isImminent = new Date(trip.startTime) <= fifteenMinutes;

                return (
                  <div
                    key={trip.id}
                    className={`p-3 border-l-4 ${isImminent ? 'border-l-red-500 bg-red-50 dark:bg-red-950/20' : 'border-l-blue-500'} hover:bg-accent/30 transition-colors`}
                  >
                    <div className="flex items-center justify-between gap-3">
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          {isImminent && <AlertTriangle className="h-3 w-3 text-red-600 flex-shrink-0" />}
                          <span className="font-semibold text-foreground truncate text-sm">
                            {trip.vip?.name || 'Unknown VIP'}
                          </span>
                          <span className="text-muted-foreground text-xs truncate max-w-[150px]">
                            {trip.title}
                          </span>
                          <Link
                            to="/events"
                            state={{ editEventId: trip.id }}
                            onClick={(e) => e.stopPropagation()}
                            className="p-1 rounded hover:bg-primary/10 text-muted-foreground hover:text-primary transition-colors"
                            title="View/Edit Event"
                          >
                            <Calendar className="h-3.5 w-3.5" />
                          </Link>
                        </div>
                        <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
                          <MapPin className="h-3 w-3 flex-shrink-0" />
                          <span className="truncate">
                            {trip.pickupLocation || trip.location} → {trip.dropoffLocation || 'TBD'}
                          </span>
                        </div>
                        <div className="flex items-center gap-3 text-xs">
                          {trip.driver ? (
                            <span className="flex items-center gap-1 text-muted-foreground">
                              <Users className="h-3 w-3" />
                              {trip.driver.name}
                              <DriverChatBubble
                                unreadCount={unreadCounts?.[trip.driver.id] || 0}
                                onClick={() => openChat(trip.driver!)}
                                className="ml-0.5"
                              />
                            </span>
                          ) : (
                            <span className="flex items-center gap-1 text-red-600 font-medium">
                              <AlertCircle className="h-3 w-3" /> No Driver
                            </span>
                          )}
                          {trip.vehicle ? (
                            <span className="flex items-center gap-1 text-muted-foreground">
                              <Car className="h-3 w-3" /> {trip.vehicle.name}
                            </span>
                          ) : (
                            <span className="flex items-center gap-1 text-red-600 font-medium">
                              <AlertCircle className="h-3 w-3" /> No Vehicle
                            </span>
                          )}
                        </div>
                      </div>
                      <div className="text-right flex-shrink-0">
                        <p className={`text-xl font-bold ${timeColor}`}>
                          {getTimeUntil(trip.startTime)}
                        </p>
                        <p className="text-xs text-muted-foreground">
                          {new Date(trip.startTime).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
                        </p>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>

      {/* Bottom Row: Resources */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        {/* VIP Arrivals */}
        <div className="bg-card border border-border rounded-lg shadow-soft overflow-hidden">
          <div className="bg-purple-600 px-3 py-2 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Plane className="h-4 w-4 text-white" />
              <h2 className="font-semibold text-white text-sm">Arrivals</h2>
            </div>
            <span className="text-white/80 text-xs">{upcomingArrivals.length}</span>
          </div>
          <div
            ref={arrivalsScrollRef}
            onWheel={handleUserInteraction}
            onTouchMove={handleUserInteraction}
            className="max-h-[140px] overflow-y-auto scrollbar-hide"
          >
            {upcomingArrivals.length === 0 ? (
              <div className="p-4 text-center text-muted-foreground">
                <p className="text-xs">No arrivals soon</p>
              </div>
            ) : (
              <div className="divide-y divide-border">
                {upcomingArrivals.map((vip) => {
                  const arrival = vip.expectedArrival || vip.flights[0]?.scheduledArrival;
                  const flight = vip.flights[0];
                  return (
                    <div key={vip.id} className="px-3 py-2">
                      <div className="flex items-center justify-between gap-2">
                        <div className="min-w-0 flex-1">
                          <p className="font-medium text-foreground text-xs truncate">{vip.name}</p>
                          {flight && <p className="text-[10px] text-muted-foreground">{flight.flightNumber}</p>}
                        </div>
                        <p className="text-xs font-bold text-purple-600 dark:text-purple-400">{getTimeUntil(arrival!)}</p>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>

        {/* Vehicles Available */}
        <div className="bg-card border border-border rounded-lg shadow-soft overflow-hidden">
          <div className="bg-emerald-600 px-3 py-2 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Car className="h-4 w-4 text-white" />
              <h2 className="font-semibold text-white text-sm">Available</h2>
            </div>
            <span className="text-white/80 text-xs">{availableVehicles.length}</span>
          </div>
          <div
            ref={availableScrollRef}
            onWheel={handleUserInteraction}
            onTouchMove={handleUserInteraction}
            className="max-h-[140px] overflow-y-auto scrollbar-hide"
          >
            {availableVehicles.length === 0 ? (
              <div className="p-4 text-center">
                <AlertTriangle className="h-6 w-6 mx-auto mb-1 text-yellow-500" />
                <p className="text-xs text-muted-foreground">None available</p>
              </div>
            ) : (
              <div className="divide-y divide-border">
                {availableVehicles.map((vehicle) => (
                  <div key={vehicle.id} className="px-3 py-2 flex items-center justify-between">
                    <div>
                      <p className="text-xs font-medium text-foreground">{vehicle.name}</p>
                      <p className="text-[10px] text-muted-foreground">{vehicle.seatCapacity} seats</p>
                    </div>
                    <CheckCircle className="h-3 w-3 text-emerald-500" />
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* Vehicles In Use */}
        <div className="bg-card border border-border rounded-lg shadow-soft overflow-hidden">
          <div className="bg-blue-600 px-3 py-2 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Car className="h-4 w-4 text-white" />
              <h2 className="font-semibold text-white text-sm">In Use</h2>
            </div>
            <span className="text-white/80 text-xs">{inUseVehicles.length}</span>
          </div>
          <div className="max-h-[140px] overflow-y-auto scrollbar-hide">
            {inUseVehicles.length === 0 ? (
              <div className="p-4 text-center text-muted-foreground">
                <p className="text-xs">All available</p>
              </div>
            ) : (
              <div className="divide-y divide-border">
                {inUseVehicles.slice(0, 4).map((vehicle) => {
                  const activeEvent = events.find((e) => e.status === 'IN_PROGRESS' && e.vehicle?.id === vehicle.id);
                  return (
                    <div key={vehicle.id} className="px-3 py-2">
                      <div className="flex items-center justify-between">
                        <p className="text-xs font-medium text-foreground">{vehicle.name}</p>
                        <div className="h-2 w-2 rounded-full bg-blue-500 animate-pulse" />
                      </div>
                      <p className="text-[10px] text-muted-foreground truncate">
                        {activeEvent?.driver?.name || 'Driver'}
                      </p>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>

        {/* Quick Links */}
        <div className="bg-card border border-border rounded-lg shadow-soft overflow-hidden">
          <div className="bg-gray-600 dark:bg-gray-700 px-3 py-2">
            <h2 className="font-semibold text-white text-sm">Quick Actions</h2>
          </div>
          <div className="p-2 grid grid-cols-2 gap-2">
            <Link
              to="/events"
              className="flex items-center justify-center gap-1 px-2 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded text-xs font-medium hover:bg-blue-200 dark:hover:bg-blue-900/50"
            >
              <Calendar className="h-3 w-3" />
              Events
            </Link>
            <Link
              to="/drivers"
              className="flex items-center justify-center gap-1 px-2 py-2 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded text-xs font-medium hover:bg-purple-200 dark:hover:bg-purple-900/50"
            >
              <Users className="h-3 w-3" />
              Drivers
            </Link>
            <Link
              to="/vips"
              className="flex items-center justify-center gap-1 px-2 py-2 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 rounded text-xs font-medium hover:bg-emerald-200 dark:hover:bg-emerald-900/50"
            >
              <Users className="h-3 w-3" />
              VIPs
            </Link>
            <Link
              to="/vehicles"
              className="flex items-center justify-center gap-1 px-2 py-2 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded text-xs font-medium hover:bg-orange-200 dark:hover:bg-orange-900/50"
            >
              <Car className="h-3 w-3" />
              Vehicles
            </Link>
          </div>
        </div>
      </div>

      {/* Driver Chat Modal */}
      <DriverChatModal
        driver={chatDriver}
        isOpen={isChatOpen}
        onClose={closeChat}
      />
    </div>
  );
}
