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 { transports } from "@/data/mock";
import type { Transport } from "@/data/types";

export const Route = createFileRoute("/transport")({
  head: () => ({
    meta: [
      { title: "Transport | KareVoyage Operations" },
      { name: "description", content: "Coaches, transfers and drivers scheduled across every journey." },
      { property: "og:title", content: "Transport | KareVoyage Operations" },
      { property: "og:description", content: "Ground transport and transfer scheduling." },
    ],
  }),
  component: TransportPage,
});

const gridColumns: GridColumn<Transport>[] = [
  { key: "id", header: "ID", width: 100, editable: false, frozen: true },
  { key: "type", header: "Type", width: 130 },
  { key: "vehicle", header: "Vehicle", width: 160, validate: validators.required("Vehicle") },
  { key: "driver", header: "Driver", width: 150 },
  { key: "driverContact", header: "Driver contact", width: 150, validate: validators.phone },
  { key: "pickup", header: "Pickup", width: 170 },
  { key: "drop", header: "Drop", width: 170 },
  { key: "meetingPoint", header: "Meeting point", width: 170 },
  { key: "date", header: "Date", width: 120, type: "date", validate: validators.date },
  { key: "time", header: "Time", width: 90 },
  { key: "trip", header: "Trip", width: 140 },
  { key: "status", header: "Status", width: 120, type: "status" },
];

function TransportPage() {
  const columns: TableColumn<Transport>[] = [
    {
      key: "vehicle",
      header: "Vehicle",
      sortValue: (t) => t.vehicle,
      cell: (t) => (
        <div>
          <p className="font-medium">{t.vehicle}</p>
          <p className="text-xs text-muted-foreground">{t.type} · {t.trip}</p>
        </div>
      ),
    },
    { key: "route", header: "Route", cell: (t) => <span className="text-sm">{t.pickup} → {t.drop}</span> },
    { key: "when", header: "When", sortValue: (t) => `${t.date}${t.time}`, cell: (t) => <span className="text-sm">{formatDate(t.date)} · {t.time}</span> },
    { key: "driver", header: "Driver", responsive: "hidden lg:table-cell", cell: (t) => (
      <div>
        <p className="text-sm">{t.driver}</p>
        <p className="text-xs text-muted-foreground">{t.driverContact}</p>
      </div>
    ) },
    { key: "status", header: "Status", sortValue: (t) => t.status, cell: (t) => <StatusPill value={t.status} /> },
  ];

  return (
    <ListPage
      title="Transport"
      description="Every coach, transfer and driver assignment on the ground."
      countLabel={(n) => `${n} movements`}
      searchPlaceholder="Search vehicles, drivers, trips…"
      actions={<Button onClick={() => toast.info("Transport form opens here.")}>Add transport</Button>}
      rows={transports}
      columns={columns}
      getId={(t) => t.id}
      searchText={(t) => `${t.vehicle} ${t.driver} ${t.pickup} ${t.drop} ${t.trip}`}
      filters={[
        { key: "type", label: "Type", get: (t) => t.type },
        { key: "status", label: "Status", get: (t) => t.status },
      ]}
      gridColumns={gridColumns}
      gridModule="Transport"
      emptyTitle="No transport scheduled"
      emptyMessage="Add transfers or paste a schedule from Excel."
    />
  );
}