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

import { ListPage } from "@/components/app/ListPage";
import { Avatar } 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 { tourManagers } from "@/data/mock";
import type { TourManager } from "@/data/types";

export const Route = createFileRoute("/tour-managers")({
  head: () => ({
    meta: [
      { title: "Tour managers | KareVoyage Operations" },
      { name: "description", content: "Tour manager roster with languages, experience, availability and trip load." },
      { property: "og:title", content: "Tour managers | KareVoyage Operations" },
      { property: "og:description", content: "Assign the right manager to every journey." },
    ],
  }),
  component: TourManagersPage,
});

const gridColumns: GridColumn<TourManager>[] = [
  { key: "id", header: "ID", width: 100, editable: false, frozen: true },
  { key: "name", header: "Name", width: 170, validate: validators.required("Name") },
  { key: "mobile", header: "Mobile", width: 140, validate: validators.phone },
  { key: "email", header: "Email", width: 220, validate: validators.email },
  { key: "languages", header: "Languages", width: 180 },
  { key: "experience", header: "Years", width: 80, type: "number", align: "right" },
  { key: "availability", header: "Availability", width: 130, type: "status" },
  { key: "assignedTrips", header: "Trips", width: 80, type: "number", align: "right" },
  { key: "status", header: "Status", width: 110, type: "status" },
];

function TourManagersPage() {
  const columns: TableColumn<TourManager>[] = [
    {
      key: "manager",
      header: "Tour manager",
      sortValue: (m) => m.name,
      cell: (m) => (
        <div className="flex items-center gap-3">
          <Avatar name={m.name} />
          <div className="min-w-0">
            <p className="truncate font-medium">{m.name}</p>
            <p className="truncate text-xs text-muted-foreground">{m.mobile} · {m.experience} yrs</p>
          </div>
        </div>
      ),
    },
    { key: "languages", header: "Languages", responsive: "hidden lg:table-cell", sortValue: (m) => m.languages, cell: (m) => m.languages },
    { key: "trips", header: "Assigned trips", align: "right", sortValue: (m) => m.assignedTrips, cell: (m) => m.assignedTrips },
    { key: "availability", header: "Availability", sortValue: (m) => m.availability, cell: (m) => <StatusPill value={m.availability} /> },
    { key: "status", header: "Status", sortValue: (m) => m.status, cell: (m) => <StatusPill value={m.status} /> },
  ];

  return (
    <ListPage
      title="Tour managers"
      description="Who is on the road, who is available and what languages they speak."
      countLabel={(n) => `${n} managers`}
      searchPlaceholder="Search managers and languages…"
      actions={<Button onClick={() => toast.info("Tour manager form opens here.")}>Add manager</Button>}
      rows={tourManagers}
      columns={columns}
      getId={(m) => m.id}
      searchText={(m) => `${m.name} ${m.email} ${m.mobile} ${m.languages}`}
      filters={[
        { key: "availability", label: "Availability", get: (m) => m.availability },
        { key: "status", label: "Status", get: (m) => m.status },
      ]}
      rowActions={[{ label: "Assign to trip", onSelect: (m) => toast.success(`${m.name} ready to assign.`) }]}
      gridColumns={gridColumns}
      gridModule="Tour Managers"
      emptyTitle="No tour managers"
      emptyMessage="Add managers so trips can be assigned."
    />
  );
}