import Link from "next/link";
import { createColumnHelper } from "@tanstack/react-table";
import type { DataTableFeatures } from "@/components/data-table/features";
import { Badge } from "@/components/ui/badge";
import type { Target } from "@/lib/sites";

// Ligne prête à afficher : le domaine Unicode et la date localisée sont calculés côté
// serveur (`formatDomain` utilise l'API Node, et `toLocaleDateString` divergerait entre
// le rendu serveur et l'hydratation). Le domaine ASCII n'est pas exposé ici : la table
// n'en a pas besoin, la page du site le porte.
export type SiteRow = {
  id: string;
  displayDomain: string;
  name: string;
  targets: Target[];
  /** « FR·fr GB·en » : sert à la recherche globale et au filtre par cible. */
  targetsLabel: string;
  /** ISO : tri chronologique par comparaison lexicographique. */
  createdAt: string;
  createdAtLabel: string;
};

const helper = createColumnHelper<DataTableFeatures, SiteRow>();

export const siteColumns = helper.columns([
  helper.accessor("displayDomain", {
    header: "Domaine",
    enableHiding: false,
    cell: ({ row }) => (
      <Link
        href={`/settings/sites/${row.original.id}`}
        className="font-medium underline underline-offset-4"
      >
        {row.original.displayDomain}
      </Link>
    ),
  }),
  helper.accessor("name", { header: "Nom" }),
  helper.accessor("targetsLabel", {
    header: "Cibles",
    filterFn: "includesString",
    cell: ({ row }) => (
      <span className="flex flex-wrap gap-1">
        {row.original.targets.map((target) => (
          <Badge key={target.id} variant={target.is_default ? "secondary" : "outline"}>
            {target.country} · {target.language}
            {target.is_default ? " ★" : ""}
          </Badge>
        ))}
      </span>
    ),
  }),
  helper.accessor("createdAt", {
    header: "Créé le",
    enableGlobalFilter: false,
    cell: ({ row }) => row.original.createdAtLabel,
  }),
]);