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

export const Route = createFileRoute("/content")({
  head: () => ({
    meta: [
      { title: "Content | KareVoyage Operations" },
      { name: "description", content: "Banners, highlights and app sections with scheduling and audience targeting." },
      { property: "og:title", content: "Content | KareVoyage Operations" },
      { property: "og:description", content: "Publish what travellers see in the app." },
    ],
  }),
  component: ContentPage,
});

const gridColumns: GridColumn<ContentRow>[] = [
  { key: "id", header: "ID", width: 100, editable: false, frozen: true },
  { key: "section", header: "Section", width: 150 },
  { key: "title", header: "Title", width: 220, validate: validators.required("Title") },
  { key: "subtitle", header: "Subtitle", width: 220 },
  { key: "cta", header: "CTA", width: 130 },
  { key: "link", header: "Link", width: 200 },
  { key: "order", header: "Order", width: 80, type: "number", align: "right" },
  { key: "startDate", header: "Start", width: 120, type: "date", validate: validators.date },
  { key: "endDate", header: "End", width: 120, type: "date", validate: validators.date },
  { key: "audience", header: "Audience", width: 150 },
  { key: "status", header: "Status", width: 130, type: "status" },
];

function ContentPage() {
  const columns: TableColumn<ContentRow>[] = [
    {
      key: "content",
      header: "Content",
      sortValue: (c) => c.title,
      cell: (c) => (
        <div>
          <p className="font-medium">{c.title}</p>
          <p className="truncate text-xs text-muted-foreground">{c.section} · {c.subtitle}</p>
        </div>
      ),
    },
    { key: "audience", header: "Audience", responsive: "hidden lg:table-cell", sortValue: (c) => c.audience, cell: (c) => c.audience },
    { key: "window", header: "Live window", responsive: "hidden lg:table-cell", sortValue: (c) => c.startDate, cell: (c) => `${formatDate(c.startDate)} – ${formatDate(c.endDate)}` },
    { key: "order", header: "Order", align: "right", sortValue: (c) => c.order, cell: (c) => c.order },
    { key: "status", header: "Status", sortValue: (c) => c.status, cell: (c) => <StatusPill value={c.status} /> },
  ];

  return (
    <ListPage
      title="Content"
      description="Everything travellers see in the app: banners, highlights and campaign blocks."
      countLabel={(n) => `${n} content blocks`}
      searchPlaceholder="Search titles, sections, audiences…"
      actions={<Button onClick={() => toast.info("Content editor opens here.")}>New content block</Button>}
      rows={contentRows}
      columns={columns}
      getId={(c) => c.id}
      searchText={(c) => `${c.title} ${c.subtitle} ${c.section} ${c.audience}`}
      filters={[
        { key: "section", label: "Section", get: (c) => c.section },
        { key: "status", label: "Status", get: (c) => c.status },
        { key: "audience", label: "Audience", get: (c) => c.audience },
      ]}
      rowActions={[
        { label: "Publish", onSelect: (c) => toast.success(`${c.title} published.`) },
        { label: "Unpublish", onSelect: (c) => toast.error(`${c.title} unpublished.`), destructive: true },
      ]}
      gridColumns={gridColumns}
      gridModule="Content"
      emptyTitle="No content blocks"
      emptyMessage="Create a block to publish it to the guest app."
    />
  );
}