CZQM-Ops-Demo/components/metar-table.tsx

"use client";

import { useState, Fragment, useEffect } from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Skeleton } from "@/components/ui/skeleton";
import { ChevronDown, ChevronUp, Plane, PlaneLanding, PlaneTakeoff, Radio } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

interface Flight {
  callsign: string;
  type: 'Departure' | 'Arrival';
  time: string;
  route: string;
  origin: string;
  destination: string;
}

interface Controller {
  callsign: string;
  frequency: string;
  facility: string;
  facilityLong: string;
}

interface MetarTableProps {
  data: any[];
  loading: boolean;
}

export function MetarTable({ data, loading }: MetarTableProps) {
  const [expandedAirport, setExpandedAirport] = useState<string | null>(null);
  const [flights, setFlights] = useState<Flight[]>([]);
  const [loadingFlights, setLoadingFlights] = useState(false);
  const [controllers, setControllers] = useState<Record<string, Controller[]>>({});

  // Fetch controller data
  useEffect(() => {
    async function fetchControllers() {
      try {
        const response = await fetch('/api/controllers');
        const data = await response.json();
        setControllers(data);
      } catch (error) {
        console.error('Failed to fetch controller data:', error);
      }
    }

    fetchControllers();
    // Refresh controller data every minute
    const interval = setInterval(fetchControllers, 60000);
    return () => clearInterval(interval);
  }, []);

  const handleAirportClick = async (airport: string) => {
    if (expandedAirport === airport) {
      setExpandedAirport(null);
      return;
    }

    setExpandedAirport(airport);
    setLoadingFlights(true);
    try {
      const response = await fetch(`/api/vatsim/${airport}`);
      const data = await response.json();
      setFlights(data);
    } catch (error) {
      console.error('Failed to fetch flights:', error);
    } finally {
      setLoadingFlights(false);
    }
  };

  const getBadgeVariant = (facility: string) => {
    switch (facility) {
      case 'CTR':
        return "secondary";
      case 'APP':
        return "default";
      case 'TWR':
        return "default";
      default:
        return "outline";
    }
  };

  if (loading) {
    return <LoadingSkeleton />;
  }

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Airport</TableHead>
          <TableHead>Conditions</TableHead>
          <TableHead>RWY</TableHead>
          <TableHead>Wind (°/kts)</TableHead>
          <TableHead>Headwind (kts)</TableHead>
          <TableHead>Xwind (kts)</TableHead>
          <TableHead>Altimeter</TableHead>
          <TableHead>ATC</TableHead>
          <TableHead>METAR</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {data.map((row, index) => (
          <Fragment key={`${row.airport}-${index}`}>
            <TableRow
              className="cursor-pointer hover:bg-muted/50"
              onClick={() => handleAirportClick(row.airport)}
            >
              <TableCell className="font-medium flex items-center gap-2">
                {expandedAirport === row.airport ? (
                  <ChevronUp className="h-4 w-4" />
                ) : (
                  <ChevronDown className="h-4 w-4" />
                )}
                {row.airport}
              </TableCell>
              <TableCell className={`text-${row.flightRulesClass}`}>
                {row.flightRules}
              </TableCell>
              <TableCell className={row.runwayClass}>{row.bestRunway}</TableCell>
              <TableCell>{row.wind}</TableCell>
              <TableCell className={`wind-${row.headwindClass}`}>
                {row.headwind}
              </TableCell>
              <TableCell className={`wind-${row.crosswindClass}`}>
                {row.crosswind}
              </TableCell>
              <TableCell>{row.altimeter}</TableCell>
              <TableCell>
                {controllers[row.airport] ? (
                  <div className="flex flex-col gap-1">
                    <TooltipProvider>
                      {controllers[row.airport].map((controller, i) => (
                        <Tooltip key={i}>
                          <TooltipTrigger>
                            <Badge 
                              variant={getBadgeVariant(controller.facility)}
                              className="flex items-center gap-1 w-fit"
                            >
                              <Radio className="h-3 w-3" />
                              {controller.facility} {controller.frequency}
                            </Badge>
                          </TooltipTrigger>
                          <TooltipContent>
                            <p>{controller.facilityLong}</p>
                            <p className="text-xs text-muted-foreground">{controller.callsign}</p>
                          </TooltipContent>
                        </Tooltip>
                      ))}
                    </TooltipProvider>
                  </div>
                ) : (
                  <span className="text-muted-foreground text-sm">Uncontrolled</span>
                )}
              </TableCell>
              <TableCell className="font-mono text-sm">{row.metar}</TableCell>
            </TableRow>
            {expandedAirport === row.airport && (
              <TableRow>
                <TableCell colSpan={9} className="p-0 bg-muted/50">
                  {loadingFlights ? (
                    <div className="p-4 space-y-2">
                      <Skeleton className="h-8 w-full" />
                      <Skeleton className="h-8 w-full" />
                      <Skeleton className="h-8 w-full" />
                    </div>
                  ) : flights.length > 0 ? (
                    <div className="p-4 space-y-4">
                      <h3 className="font-semibold flex items-center gap-2">
                        <Plane className="h-4 w-4" />
                        Active Flights
                      </h3>
                      <div className="grid grid-cols-4 gap-4">
                        {flights.map((flight, i) => (
                          <div
                            key={`${flight.callsign}-${i}`}
                            className="bg-background p-4 rounded-lg shadow-sm space-y-2"
                          >
                            <div className="flex items-center gap-2">
                              {flight.type === 'Departure' ? (
                                <PlaneTakeoff className="h-4 w-4 text-blue-500" />
                              ) : (
                                <PlaneLanding className="h-4 w-4 text-green-500" />
                              )}
                              <span className="font-mono font-semibold">
                                {flight.callsign}
                              </span>
                            </div>
                            <div className="text-sm text-muted-foreground">
                              <p>
                                {flight.type}: {flight.time}Z
                              </p>
                              <p>
                                {flight.origin} → {flight.destination}
                              </p>
                              <p className="font-mono text-xs mt-2 truncate" title={flight.route}>
                                {flight.route}
                              </p>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  ) : (
                    <p className="text-muted-foreground text-center py-4">
                      No active flights found for {row.airport}
                    </p>
                  )}
                </TableCell>
              </TableRow>
            )}
          </Fragment>
        ))}
      </TableBody>
    </Table>
  );
}

function LoadingSkeleton() {
  return (
    <div className="space-y-3 p-4">
      {Array.from({ length: 5 }).map((_, i) => (
        <div key={i} className="flex gap-4">
          <Skeleton className="h-4 w-[100px]" />
          <Skeleton className="h-4 w-[80px]" />
          <Skeleton className="h-4 w-[60px]" />
          <Skeleton className="h-4 w-[100px]" />
          <Skeleton className="h-4 w-[80px]" />
          <Skeleton className="h-4 w-[80px]" />
          <Skeleton className="h-4 w-[80px]" />
          <Skeleton className="h-4 w-[120px]" />
          <Skeleton className="h-4 w-[200px]" />
        </div>
      ))}
    </div>
  );
}