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

export const Route = createFileRoute("/notifications")({
  head: () => ({
    meta: [
      { title: "Notifications | KareVoyage Operations" },
      { name: "description", content: "Push, email and SMS campaigns with scheduling, audience and open rates." },
      { property: "og:title", content: "Notifications | KareVoyage Operations" },
      { property: "og:description", content: "Reach travellers on the right channel." },
    ],
  }),
  component: NotificationsPage,
});

const gridColumns: GridColumn<NotificationRow>[] = [
  { key: "id", header: "ID", width: 100, editable: false, frozen: true },
  { key: "title", header: "Title", width: 240, validate: validators.required("Title") },
  { key: "channel", header: "Channel", width: 120, type: "status", options: ["Push", "Email", "SMS", "In-app"] },
  { key: "purpose", header: "Purpose", width: 150 },
  { key: "audience", header: "Audience", width: 160 },
  { key: "scheduled", header: "Scheduled", width: 130, type: "date", validate: validators.date },
  { key: "sent", header: "Sent", width: 90, type: "number", align: "right" },
  { key: "opened", header: "Opened", width: 90, type: "number", align: "right" },
  { key: "status", header: "Status", width: 120, type: "status" },
];

function NotificationsPage() {
  const columns: TableColumn<NotificationRow>[] = [
    {
      key: "campaign",
      header: "Campaign",
      sortValue: (n) => n.title,
      cell: (n) => (
        <div>
          <p className="font-medium">{n.title}</p>
          <p className="text-xs text-muted-foreground">{n.channel} · {n.purpose} · {n.audience}</p>
        </div>
      ),
    },
    { key: "scheduled", header: "Scheduled", sortValue: (n) => n.scheduled, cell: (n) => formatDate(n.scheduled) },
    { key: "sent", header: "Sent", align: "right", sortValue: (n) => n.sent, cell: (n) => n.sent.toLocaleString("en-IN") },
    {
      key: "open",
      header: "Open rate",
      align: "right",
      responsive: "hidden lg:table-cell",
      sortValue: (n) => (n.sent ? n.opened / n.sent : 0),
      cell: (n) => (n.sent ? `${Math.round((n.opened / n.sent) * 100)}%` : "—"),
    },
    { key: "status", header: "Status", sortValue: (n) => n.status, cell: (n) => <StatusPill value={n.status} /> },
  ];

  return (
    <ListPage
      title="Notifications"
      description="Trip updates, reminders and campaigns across push, email and SMS."
      countLabel={(n) => `${n} campaigns`}
      searchPlaceholder="Search campaigns, categories, audiences…"
      actions={<Button onClick={() => toast.info("Campaign composer opens here.")}>New campaign</Button>}
      rows={notifications}
      columns={columns}
      getId={(n) => n.id}
      searchText={(n) => `${n.title} ${n.channel} ${n.purpose} ${n.audience}`}
      filters={[
        { key: "channel", label: "Channel", get: (n) => n.channel },
        { key: "status", label: "Status", get: (n) => n.status },
        { key: "purpose", label: "Purpose", get: (n) => n.purpose },
      ]}
      rowActions={[{ label: "Duplicate", onSelect: (n) => toast.success(`${n.title} duplicated.`) }]}
      gridColumns={gridColumns}
      gridModule="Notifications"
      emptyTitle="No campaigns"
      emptyMessage="Create a campaign to reach travellers."
    />
  );
}