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 { guests, membershipTiers, rewardRules, rewardTxns } from "@/data/mock";
import type { RewardTxn } from "@/data/types";

export const Route = createFileRoute("/loyalty")({
  head: () => ({
    meta: [
      { title: "Loyalty | KareVoyage Operations" },
      { name: "description", content: "Membership tiers, reward rules and every points transaction across the guest base." },
      { property: "og:title", content: "Loyalty | KareVoyage Operations" },
      { property: "og:description", content: "Run the KareVoyage membership and rewards programme." },
    ],
  }),
  component: LoyaltyPage,
});

const gridColumns: GridColumn<RewardTxn>[] = [
  { key: "id", header: "ID", width: 100, editable: false, frozen: true },
  { key: "guest", header: "Guest", width: 170, validate: validators.required("Guest") },
  { key: "date", header: "Date", width: 120, type: "date", validate: validators.date },
  { key: "type", header: "Type", width: 150, type: "status" },
  { key: "trip", header: "Trip", width: 140 },
  { key: "points", header: "Points", width: 100, type: "number", align: "right" },
  { key: "status", header: "Status", width: 120, type: "status" },
  { key: "expiry", header: "Expiry", width: 120, type: "date", validate: validators.date },
  { key: "reference", header: "Reference", width: 160 },
];

function LoyaltyPage() {
  const columns: TableColumn<RewardTxn>[] = [
    {
      key: "txn",
      header: "Transaction",
      sortValue: (r) => r.guest,
      cell: (r) => (
        <div>
          <p className="font-medium">{r.guest}</p>
          <p className="text-xs text-muted-foreground">{r.type} · {r.reference}</p>
        </div>
      ),
    },
    { key: "date", header: "Date", sortValue: (r) => r.date, cell: (r) => formatDate(r.date) },
    { key: "points", header: "Points", align: "right", sortValue: (r) => r.points, cell: (r) => <span className={r.points < 0 ? "text-destructive" : "text-success"}>{r.points > 0 ? "+" : ""}{r.points}</span> },
    { key: "expiry", header: "Expiry", responsive: "hidden lg:table-cell", sortValue: (r) => r.expiry, cell: (r) => formatDate(r.expiry) },
    { key: "status", header: "Status", sortValue: (r) => r.status, cell: (r) => <StatusPill value={r.status} /> },
  ];

  const pointsOutstanding = rewardTxns.filter((r) => r.status === "Available").reduce((s, r) => s + r.points, 0);

  return (
    <ListPage
      title="Loyalty"
      description="Membership tiers, earn-and-burn rules and the full points ledger."
      countLabel={(n) => `${n} points transactions`}
      searchPlaceholder="Search guest, reference, trip…"
      actions={<Button onClick={() => toast.info("Manual points adjustment opens here.")}>Adjust points</Button>}
      above={
        <div className="space-y-6">
          <div className="grid gap-4 sm:grid-cols-3">
            {[
              { label: "Members", value: guests.filter((g) => g.membership !== "None").length },
              { label: "Points outstanding", value: pointsOutstanding.toLocaleString("en-IN") },
              { label: "Active rules", value: rewardRules.filter((r) => r.status === "Active").length },
            ].map((s) => (
              <div key={s.label} className="rounded-xl border border-border bg-surface px-5 py-4">
                <p className="kv-eyebrow">{s.label}</p>
                <p className="mt-2 font-display text-[26px] leading-none">{s.value}</p>
              </div>
            ))}
          </div>

          <div className="grid gap-4 lg:grid-cols-2">
            <div className="rounded-xl border border-border bg-surface p-5">
              <p className="kv-eyebrow mb-3">Membership tiers</p>
              <ul className="divide-y divide-border">
                {membershipTiers.map((t) => (
                  <li key={t.id} className="flex items-center justify-between gap-4 py-2.5">
                    <div className="min-w-0">
                      <p className="text-sm font-medium">{t.name}</p>
                      <p className="truncate text-xs text-muted-foreground">{t.qualification} · {t.benefits}</p>
                    </div>
                    <span className="shrink-0 text-xs tabular-nums text-muted-foreground">{t.points.toLocaleString("en-IN")} pts</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="rounded-xl border border-border bg-surface p-5">
              <p className="kv-eyebrow mb-3">Reward rules</p>
              <ul className="divide-y divide-border">
                {rewardRules.map((r) => (
                  <li key={r.id} className="flex items-center justify-between gap-4 py-2.5">
                    <div className="min-w-0">
                      <p className="text-sm font-medium">{r.rule}</p>
                      <p className="truncate text-xs text-muted-foreground">{r.appliesTo} · expires in {r.expiryMonths} months</p>
                    </div>
                    <span className="shrink-0 text-xs text-muted-foreground">{r.value}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      }
      rows={rewardTxns}
      columns={columns}
      getId={(r) => r.id}
      searchText={(r) => `${r.guest} ${r.type} ${r.trip} ${r.reference}`}
      filters={[
        { key: "type", label: "Type", get: (r) => r.type },
        { key: "status", label: "Status", get: (r) => r.status },
      ]}
      gridColumns={gridColumns}
      gridModule="Loyalty"
      emptyTitle="No points activity"
      emptyMessage="Reward transactions will appear here."
    />
  );
}