"use client";

import type { ColumnDef } from "@tanstack/react-table";
import { ExternalLink } from "lucide-react";
import Link from "next/link";

import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";

import { GatewayStatusBadge } from "./status-badge";
import type { PaymentGatewayRow } from "./schema";

export const paymentGatewayColumns: ColumnDef<PaymentGatewayRow>[] = [
  {
    accessorKey: "name",
    header: "Name",
    cell: ({ row }) => (
      <Link
        href={row.original.settingsHref}
        className="font-medium text-primary hover:underline"
      >
        {row.original.name}
      </Link>
    ),
  },
  {
    accessorKey: "description",
    header: "Description",
    cell: ({ row }) => (
      <p className="max-w-xl text-muted-foreground text-sm leading-relaxed">
        {row.original.description}
      </p>
    ),
  },
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => (
      <GatewayStatusBadge status={row.original.status} label={row.original.statusLabel} />
    ),
  },
  {
    accessorKey: "sortOrder",
    header: "Sort order",
    cell: ({ row }) => (
      <span className="font-medium tabular-nums text-sm">{row.original.sortOrder}</span>
    ),
  },
  {
    id: "options",
    header: () => <span className="block w-full text-right">Options</span>,
    cell: ({ row }) => (
      <div className="flex justify-end">
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="default" size="icon-sm" className="size-7" asChild>
              <Link href={row.original.settingsHref} aria-label="Gateway detail page">
                <ExternalLink className="size-3.5" />
              </Link>
            </Button>
          </TooltipTrigger>
          <TooltipContent>Gateway detail page</TooltipContent>
        </Tooltip>
      </div>
    ),
    enableSorting: false,
  },
];