"use client";

import type { ColumnDef } from "@tanstack/react-table";
import { KeyRound, Pencil, Trash2 } from "lucide-react";
import Link from "next/link";

import { PrincipalBadge } from "@/components/admins/rbac/principal-badge";

import { TableRowActions } from "@/components/shared/table-row-actions";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { getInitials } from "@/lib/utils";

import { ActiveInactiveBadge } from "@/components/shared/status-pill";
import type { UserRow } from "./schema";

function UserActions({ row }: { row: UserRow }) {
  const base = `/dashboard/admins/users/${row.id}`;

  return (
    <TableRowActions
      linkActions={[
        { label: "Manage Access", icon: KeyRound, href: `${base}?action=access`, variant: "outline" },
        { label: "Update", icon: Pencil, href: `${base}?action=update` },
        { label: "Delete", icon: Trash2, href: `${base}?action=delete`, variant: "destructive" },
      ]}
    />
  );
}

export const userColumns: ColumnDef<UserRow>[] = [
  {
    accessorKey: "firstName",
    header: "First Name",
    cell: ({ row }) => (
      <div className="flex items-center gap-2.5">
        <Avatar className="size-8">
          {row.original.avatarUrl ? <AvatarImage src={row.original.avatarUrl} alt="" /> : null}
          <AvatarFallback className="text-[11px] font-medium">
            {getInitials(`${row.original.firstName} ${row.original.lastName}`)}
          </AvatarFallback>
        </Avatar>
        <Link
          href={`/dashboard/admins/users/${row.original.id}?action=view`}
          className="font-medium text-primary hover:underline"
        >
          {row.original.firstName}
        </Link>
      </div>
    ),
  },
  {
    accessorKey: "lastName",
    header: "Last Name",
    cell: ({ row }) => <span className="text-sm">{row.original.lastName}</span>,
  },
  {
    accessorKey: "email",
    header: "Email",
    cell: ({ row }) => (
      <a href={`mailto:${row.original.email}`} className="text-primary text-sm hover:underline">
        {row.original.email}
      </a>
    ),
  },
  {
    id: "principal",
    header: "Principal",
    cell: ({ row }) => (
      <PrincipalBadge principal={`backend:${row.original.id}`} principalType="backend" />
    ),
  },
  {
    accessorKey: "roleLabels",
    header: "Roles",
    cell: ({ row }) => (
      <div className="flex flex-wrap gap-1">
        {(row.original.roleLabels ?? []).length === 0 ? (
          <span className="text-muted-foreground text-sm">—</span>
        ) : (
          row.original.roleLabels?.map((role) => (
            <Badge key={role} variant="secondary" className="font-mono text-xs">
              {role}
            </Badge>
          ))
        )}
      </div>
    ),
  },
  {
    accessorKey: "group",
    header: "Group (legacy)",
    cell: ({ row }) => <span className="text-muted-foreground text-sm">{row.original.groupLabel}</span>,
  },
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => (
      <ActiveInactiveBadge status={row.original.status} label={row.original.statusLabel} />
    ),
  },
  {
    accessorKey: "dateAdded",
    header: "Date Added",
    cell: ({ row }) => <span className="text-muted-foreground text-sm">{row.original.dateAdded}</span>,
  },
  {
    accessorKey: "lastUpdated",
    header: "Last Updated",
    cell: ({ row }) => <span className="text-muted-foreground text-sm">{row.original.lastUpdated}</span>,
  },
  {
    id: "options",
    header: () => <span className="block w-full text-right">Options</span>,
    cell: ({ row }) => <UserActions row={row.original} />,
    enableSorting: false,
  },
];