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

import { ListPage } from "@/components/app/ListPage";
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 { hotels } from "@/data/mock";
import type { Hotel } from "@/data/types";
import { destinationImage } from "@/lib/images";

export const Route = createFileRoute("/hotels")({
  head: () => ({
    meta: [
      { title: "Hotels | KareVoyage Operations" },
      { name: "description", content: "Hotel partners with cities, room types, facilities and contact details." },
      { property: "og:title", content: "Hotels | KareVoyage Operations" },
      { property: "og:description", content: "Manage accommodation partners." },
    ],
  }),
  component: HotelsPage,
});

const gridColumns: GridColumn<Hotel>[] = [
  { key: "id", header: "ID", width: 100, editable: false, frozen: true },
  { key: "name", header: "Hotel", width: 200, validate: validators.required("Hotel") },
  { key: "city", header: "City", width: 140 },
  { key: "country", header: "Country", width: 140 },
  { key: "address", header: "Address", width: 220 },
  { key: "phone", header: "Phone", width: 150, validate: validators.phone },
  { key: "email", header: "Email", width: 210, validate: validators.email },
  { key: "roomTypes", header: "Room types", width: 180 },
  { key: "facilities", header: "Facilities", width: 200 },
  { key: "status", header: "Status", width: 110, type: "status" },
];

function HotelsPage() {
  const columns: TableColumn<Hotel>[] = [
    {
      key: "hotel",
      header: "Hotel",
      sortValue: (h) => h.name,
      cell: (h) => (
        <div className="flex items-center gap-3">
          <img src={destinationImage(h.country)} alt="" loading="lazy" width={64} height={64} className="h-10 w-14 shrink-0 rounded-md object-cover" />
          <div className="min-w-0">
            <p className="truncate font-medium">{h.name}</p>
            <p className="truncate text-xs text-muted-foreground">{h.city}, {h.country}</p>
          </div>
        </div>
      ),
    },
    { key: "rooms", header: "Room types", responsive: "hidden lg:table-cell", sortValue: (h) => h.roomTypes, cell: (h) => h.roomTypes },
    { key: "facilities", header: "Facilities", responsive: "hidden xl:table-cell", cell: (h) => h.facilities },
    { key: "contact", header: "Contact", responsive: "hidden lg:table-cell", cell: (h) => (
      <div>
        <p className="text-sm">{h.phone}</p>
        <p className="truncate text-xs text-muted-foreground">{h.email}</p>
      </div>
    ) },
    { key: "status", header: "Status", sortValue: (h) => h.status, cell: (h) => <StatusPill value={h.status} /> },
  ];

  return (
    <ListPage
      title="Hotels"
      description="Accommodation partners and the rooms KareVoyage books with them."
      countLabel={(n) => `${n} hotels`}
      searchPlaceholder="Search hotels, cities, countries…"
      actions={<Button onClick={() => toast.info("Hotel form opens here.")}>Add hotel</Button>}
      rows={hotels}
      columns={columns}
      getId={(h) => h.id}
      searchText={(h) => `${h.name} ${h.city} ${h.country} ${h.roomTypes}`}
      filters={[
        { key: "country", label: "Country", get: (h) => h.country },
        { key: "city", label: "City", get: (h) => h.city },
        { key: "status", label: "Status", get: (h) => h.status },
      ]}
      gridColumns={gridColumns}
      gridModule="Hotels"
      emptyTitle="No hotels"
      emptyMessage="Add hotel partners to attach them to itineraries."
    />
  );
}