vip-coordinator/frontend/src/pages/Dashboard.tsx

import { useQuery } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { Users, Car, Calendar, Plane, Clock } from 'lucide-react';
import { VIP, Driver, ScheduleEvent } from '@/types';
import { formatDateTime } from '@/lib/utils';

interface Flight {
  id: string;
  vipId: string;
  vip?: {
    name: string;
    organization: string | null;
  };
  flightNumber: string;
  flightDate: string;
  segment: number;
  departureAirport: string;
  arrivalAirport: string;
  scheduledDeparture: string | null;
  scheduledArrival: string | null;
  actualDeparture: string | null;
  actualArrival: string | null;
  status: string | null;
}

export function Dashboard() {
  const { data: vips } = 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;
    },
  });

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

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

  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const tomorrow = new Date(today);
  tomorrow.setDate(tomorrow.getDate() + 1);

  const eventsToday = events?.filter((e) => {
    const eventDate = new Date(e.startTime);
    return eventDate >= today && eventDate < tomorrow && e.status !== 'CANCELLED';
  }).length || 0;

  const flightsToday = flights?.filter((f) => {
    const flightDate = new Date(f.flightDate);
    return flightDate >= today && flightDate < tomorrow;
  }).length || 0;

  const upcomingEvents = events
    ?.filter((e) => e.status === 'SCHEDULED' && new Date(e.startTime) >= today)
    .sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime())
    .slice(0, 5) || [];

  const upcomingFlights = flights
    ?.filter((f) => {
      const flightDate = new Date(f.flightDate);
      return flightDate >= today && f.status !== 'cancelled';
    })
    .sort((a, b) => new Date(a.flightDate).getTime() - new Date(b.flightDate).getTime())
    .slice(0, 5) || [];

  const stats = [
    {
      name: 'Total VIPs',
      value: vips?.length || 0,
      icon: Users,
      color: 'bg-blue-500',
    },
    {
      name: 'Active Drivers',
      value: drivers?.length || 0,
      icon: Car,
      color: 'bg-green-500',
    },
    {
      name: 'Events Today',
      value: eventsToday,
      icon: Clock,
      color: 'bg-purple-500',
    },
    {
      name: 'Flights Today',
      value: flightsToday,
      icon: Plane,
      color: 'bg-indigo-500',
    },
  ];

  return (
    <div>
      <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-6 md:mb-8">Dashboard</h1>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-6 md:mb-8">
        {stats.map((stat) => {
          const Icon = stat.icon;
          return (
            <div
              key={stat.name}
              className="bg-white overflow-hidden shadow rounded-lg"
            >
              <div className="p-5">
                <div className="flex items-center">
                  <div className={`flex-shrink-0 ${stat.color} rounded-md p-3`}>
                    <Icon className="h-6 w-6 text-white" />
                  </div>
                  <div className="ml-5 w-0 flex-1">
                    <dl>
                      <dt className="text-sm font-medium text-gray-500 truncate">
                        {stat.name}
                      </dt>
                      <dd className="text-3xl font-semibold text-gray-900">
                        {stat.value}
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Recent VIPs */}
      <div className="bg-white shadow rounded-lg p-6 mb-8">
        <h2 className="text-lg font-medium text-gray-900 mb-4">Recent VIPs</h2>
        {vips && vips.length > 0 ? (
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Name
                  </th>
                  <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Organization
                  </th>
                  <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Arrival Mode
                  </th>
                  <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Events
                  </th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {vips.slice(0, 5).map((vip) => (
                  <tr key={vip.id}>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                      {vip.name}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {vip.organization || '-'}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {vip.arrivalMode}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {vip.events?.length || 0}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <p className="text-sm text-gray-500 text-center py-4">
            No VIPs yet. Add your first VIP to get started.
          </p>
        )}
      </div>

      {/* Upcoming Flights */}
      <div className="bg-white shadow rounded-lg p-6 mb-8">
        <h2 className="text-lg font-medium text-gray-900 mb-4">
          Upcoming Flights
        </h2>
        {upcomingFlights.length > 0 ? (
          <div className="space-y-4">
            {upcomingFlights.map((flight) => (
              <div
                key={flight.id}
                className="border-l-4 border-indigo-500 pl-4 py-2"
              >
                <div className="flex justify-between items-start">
                  <div>
                    <h3 className="text-sm font-medium text-gray-900 flex items-center gap-2">
                      <Plane className="h-4 w-4" />
                      {flight.flightNumber}
                    </h3>
                    <p className="text-sm text-gray-500">
                      {flight.vip?.name} • {flight.departureAirport} → {flight.arrivalAirport}
                    </p>
                    {flight.scheduledDeparture && (
                      <p className="text-xs text-gray-400 mt-1">
                        Departs: {formatDateTime(flight.scheduledDeparture)}
                      </p>
                    )}
                  </div>
                  <div className="text-right">
                    <span className="text-xs text-gray-500 block">
                      {new Date(flight.flightDate).toLocaleDateString('en-US', {
                        month: 'short',
                        day: 'numeric',
                        year: 'numeric',
                      })}
                    </span>
                    <span className={`inline-block mt-1 px-2 py-1 text-xs rounded-full ${
                      flight.status?.toLowerCase() === 'scheduled' ? 'bg-blue-100 text-blue-800' :
                      flight.status?.toLowerCase() === 'boarding' ? 'bg-yellow-100 text-yellow-800' :
                      flight.status?.toLowerCase() === 'departed' ? 'bg-purple-100 text-purple-800' :
                      flight.status?.toLowerCase() === 'landed' ? 'bg-green-100 text-green-800' :
                      flight.status?.toLowerCase() === 'delayed' ? 'bg-orange-100 text-orange-800' :
                      'bg-gray-100 text-gray-800'
                    }`}>
                      {flight.status || 'Unknown'}
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <p className="text-sm text-gray-500 text-center py-4">
            No upcoming flights tracked.
          </p>
        )}
      </div>

      {/* Upcoming Events */}
      <div className="bg-white shadow rounded-lg p-6">
        <h2 className="text-lg font-medium text-gray-900 mb-4">
          Upcoming Events
        </h2>
        {upcomingEvents.length > 0 ? (
          <div className="space-y-4">
            {upcomingEvents.map((event) => (
              <div
                key={event.id}
                className="border-l-4 border-primary pl-4 py-2"
              >
                <div className="flex justify-between items-start">
                  <div>
                    <h3 className="text-sm font-medium text-gray-900">
                      {event.title}
                    </h3>
                    <p className="text-sm text-gray-500">
                      {event.vips && event.vips.length > 0
                        ? event.vips.map(vip => vip.name).join(', ')
                        : 'No VIPs assigned'} • {event.driver?.name || 'No driver assigned'}
                    </p>
                    {event.location && (
                      <p className="text-xs text-gray-400 mt-1">{event.location}</p>
                    )}
                  </div>
                  <div className="text-right">
                    <span className="text-xs text-gray-500 block">
                      {formatDateTime(event.startTime)}
                    </span>
                    <span className={`inline-block mt-1 px-2 py-1 text-xs rounded-full ${
                      event.type === 'TRANSPORT' ? 'bg-blue-100 text-blue-800' :
                      event.type === 'MEETING' ? 'bg-purple-100 text-purple-800' :
                      event.type === 'MEAL' ? 'bg-green-100 text-green-800' :
                      'bg-gray-100 text-gray-800'
                    }`}>
                      {event.type}
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <p className="text-sm text-gray-500 text-center py-4">
            No upcoming events scheduled.
          </p>
        )}
      </div>
    </div>
  );
}