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

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 { wishlist } from "@/data/mock";
import type { WishlistRow } from "@/data/types";
import { destinationImage } from "@/lib/images";

export const Route = createFileRoute("/wishlist")({
  head: () => ({
    meta: [
      { title: "Wishlist | KareVoyage Operations" },
      { name: "description", content: "What travellers are saving, and which saved journeys convert into bookings." },
      { property: "og:title", content: "Wishlist | KareVoyage Operations" },
      { property: "og:description", content: "Demand signals from saved tours." },
    ],
  }),
  component: WishlistPage,
});

const gridColumns: GridColumn<WishlistRow>[] = [
  { key: "id", header: "ID", width: 100, editable: false, frozen: true },
  { key: "guest", header: "Guest", width: 170, validate: validators.required("Guest") },
  { key: "tour", header: "Tour", width: 220 },
  { key: "destination", header: "Destination", width: 150 },
  { key: "savedDate", header: "Saved", width: 120, type: "date", validate: validators.date },
  { key: "status", header: "Status", width: 120, type: "status" },
];

function WishlistPage() {
  const columns: TableColumn<WishlistRow>[] = [
    {
      key: "tour",
      header: "Saved tour",
      sortValue: (w) => w.tour,
      cell: (w) => (
        <div className="flex items-center gap-3">
          <img src={destinationImage(w.destination)} 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">{w.tour}</p>
            <p className="truncate text-xs text-muted-foreground">{w.destination}</p>
          </div>
        </div>
      ),
    },
    { key: "guest", header: "Guest", sortValue: (w) => w.guest, cell: (w) => w.guest },
    { key: "saved", header: "Saved", sortValue: (w) => w.savedDate, cell: (w) => formatDate(w.savedDate) },
    { key: "status", header: "Status", sortValue: (w) => w.status, cell: (w) => <StatusPill value={w.status} /> },
  ];

  const top = [...new Set(wishlist.map((w) => w.destination))]
    .map((d) => ({ destination: d, count: wishlist.filter((w) => w.destination === d).length }))
    .sort((a, b) => b.count - a.count)
    .slice(0, 4);

  return (
    <ListPage
      title="Wishlist"
      description="Where interest is building, before it becomes a booking."
      countLabel={(n) => `${n} saved journeys`}
      searchPlaceholder="Search guest, tour, destination…"
      above={
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {top.map((t) => (
            <div key={t.destination} className="overflow-hidden rounded-xl border border-border bg-surface">
              <img src={destinationImage(t.destination)} alt="" loading="lazy" width={640} height={400} className="h-20 w-full object-cover" />
              <div className="px-4 py-3">
                <p className="kv-eyebrow">{t.destination}</p>
                <p className="mt-1 text-sm">{t.count} saves</p>
              </div>
            </div>
          ))}
        </div>
      }
      rows={wishlist}
      columns={columns}
      getId={(w) => w.id}
      searchText={(w) => `${w.guest} ${w.tour} ${w.destination}`}
      filters={[
        { key: "destination", label: "Destination", get: (w) => w.destination },
        { key: "status", label: "Status", get: (w) => w.status },
      ]}
      gridColumns={gridColumns}
      gridModule="Wishlist"
      emptyTitle="Nothing saved yet"
      emptyMessage="Saved tours from the guest app appear here."
    />
  );
}