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

export const Route = createFileRoute("/referrals")({
  head: () => ({
    meta: [
      { title: "Referrals | KareVoyage Operations" },
      { name: "description", content: "Referral pipeline from invitation to reward credit." },
      { property: "og:title", content: "Referrals | KareVoyage Operations" },
      { property: "og:description", content: "Track who referred whom and what they earned." },
    ],
  }),
  component: ReferralsPage,
});

const gridColumns: GridColumn<Referral>[] = [
  { key: "id", header: "ID", width: 100, editable: false, frozen: true },
  { key: "referrer", header: "Referrer", width: 170, validate: validators.required("Referrer") },
  { key: "referral", header: "Referred guest", width: 170 },
  { key: "date", header: "Date", width: 120, type: "date", validate: validators.date },
  { key: "status", header: "Status", width: 150, type: "status" },
  { key: "booking", header: "Booking", width: 130 },
  { key: "trip", header: "Trip", width: 140 },
  { key: "reward", header: "Reward", width: 100, type: "number", align: "right" },
  { key: "rewardStatus", header: "Reward status", width: 140, type: "status" },
];

function ReferralsPage() {
  const columns: TableColumn<Referral>[] = [
    {
      key: "referral",
      header: "Referral",
      sortValue: (r) => r.referrer,
      cell: (r) => (
        <div>
          <p className="font-medium">{r.referrer} <span className="text-muted-foreground">→</span> {r.referral}</p>
          <p className="text-xs text-muted-foreground">{r.id} · {formatDate(r.date)}</p>
        </div>
      ),
    },
    { key: "booking", header: "Booking", responsive: "hidden lg:table-cell", cell: (r) => r.booking || "—" },
    { key: "reward", header: "Reward", align: "right", sortValue: (r) => r.reward, cell: (r) => `${r.reward} pts` },
    { key: "rewardStatus", header: "Reward", sortValue: (r) => r.rewardStatus, cell: (r) => <StatusPill value={r.rewardStatus} /> },
    { key: "status", header: "Stage", sortValue: (r) => r.status, cell: (r) => <StatusPill value={r.status} /> },
  ];

  return (
    <ListPage
      title="Referrals"
      description="Guest-to-guest introductions and the rewards they generate."
      countLabel={(n) => `${n} referrals`}
      searchPlaceholder="Search referrer or referred guest…"
      actions={<Button onClick={() => toast.info("Referral credit form opens here.")}>Credit reward</Button>}
      rows={referrals}
      columns={columns}
      getId={(r) => r.id}
      searchText={(r) => `${r.referrer} ${r.referral} ${r.booking} ${r.trip}`}
      filters={[
        { key: "status", label: "Stage", get: (r) => r.status },
        { key: "rewardStatus", label: "Reward status", get: (r) => r.rewardStatus },
      ]}
      gridColumns={gridColumns}
      gridModule="Referrals"
      emptyTitle="No referrals"
      emptyMessage="Referrals will appear here as guests invite friends."
    />
  );
}