import { createFileRoute } from "@tanstack/react-router";
import { toast } from "sonner";

import { ListPage } from "@/components/app/ListPage";
import { formatDate } from "@/components/app/Primitives";
import { StatusPill } from "@/components/app/StatusPill";
import type { TableColumn } from "@/components/table/DataTable";
import type { GridColumn } from "@/components/grid/types";
import { validators } from "@/components/grid/types";
import { Button } from "@/components/ui/button";
import { flights } from "@/data/mock";
import type { Flight } from "@/data/types";

export const Route = createFileRoute("/flights")({
  head: () => ({
    meta: [
      { title: "Flights | KareVoyage Operations" },
      { name: "description", content: "Flight schedules, PNRs, terminals and baggage allowances for every trip." },
      { property: "og:title", content: "Flights | KareVoyage Operations" },
      { property: "og:description", content: "Track the air legs of every journey." },
    ],
  }),
  component: FlightsPage,
});

const gridColumns: GridColumn<Flight>[] = [
  { key: "id", header: "ID", width: 100, editable: false, frozen: true },
  { key: "airline", header: "Airline", width: 150, validate: validators.required("Airline") },
  { key: "flightNumber", header: "Flight no.", width: 110 },
  { key: "date", header: "Date", width: 120, type: "date", validate: validators.date },
  { key: "departure", header: "Departs", width: 100 },
  { key: "arrival", header: "Arrives", width: 100 },
  { key: "departureAirport", header: "From", width: 110 },
  { key: "arrivalAirport", header: "To", width: 110 },
  { key: "terminal", header: "Terminal", width: 100 },
  { key: "baggage", header: "Baggage", width: 130 },
  { key: "pnr", header: "PNR", width: 110 },
  { key: "trip", header: "Trip", width: 140 },
  { key: "status", header: "Status", width: 120, type: "status" },
];

function FlightsPage() {
  const columns: TableColumn<Flight>[] = [
    {
      key: "flight",
      header: "Flight",
      sortValue: (f) => `${f.airline}${f.flightNumber}`,
      cell: (f) => (
        <div>
          <p className="font-medium">{f.airline} {f.flightNumber}</p>
          <p className="text-xs text-muted-foreground">PNR {f.pnr} · {f.trip}</p>
        </div>
      ),
    },
    {
      key: "route",
      header: "Route",
      sortValue: (f) => f.departureAirport,
      cell: (f) => (
        <span className="flex items-center gap-2 text-sm">
          <span className="font-mono">{f.departure}</span>
          <span className="text-muted-foreground">{f.departureAirport}</span>
          <span className="text-muted-foreground">→</span>
          <span className="font-mono">{f.arrival}</span>
          <span className="text-muted-foreground">{f.arrivalAirport}</span>
        </span>
      ),
    },
    { key: "date", header: "Date", sortValue: (f) => f.date, cell: (f) => formatDate(f.date) },
    { key: "terminal", header: "Terminal", responsive: "hidden lg:table-cell", cell: (f) => f.terminal },
    { key: "baggage", header: "Baggage", responsive: "hidden xl:table-cell", cell: (f) => f.baggage },
    { key: "status", header: "Status", sortValue: (f) => f.status, cell: (f) => <StatusPill value={f.status} /> },
  ];

  return (
    <ListPage
      title="Flights"
      description="Air legs, PNRs and schedule changes across all journeys."
      countLabel={(n) => `${n} flights`}
      searchPlaceholder="Search airline, flight number, PNR…"
      actions={<Button onClick={() => toast.info("Flight form opens here.")}>Add flight</Button>}
      rows={flights}
      columns={columns}
      getId={(f) => f.id}
      searchText={(f) => `${f.airline} ${f.flightNumber} ${f.pnr} ${f.departureAirport} ${f.arrivalAirport} ${f.trip}`}
      filters={[
        { key: "airline", label: "Airline", get: (f) => f.airline },
        { key: "status", label: "Status", get: (f) => f.status },
        { key: "from", label: "From", get: (f) => f.departureAirport },
      ]}
      gridColumns={gridColumns}
      gridModule="Flights"
      emptyTitle="No flights"
      emptyMessage="Add flights or paste a schedule from Excel."
    />
  );
}