'use client';

import type { Column, ColumnDef } from '@tanstack/react-table';
import { DataTableColumnHeader } from '@/components/ui/table/data-table-column-header';
import { Icons } from '@/components/icons';
import { formatDateTime } from '@/lib/format';
import type { PermissionTemplate } from '../api/types';
import { PermissionStatusBadge } from './permission-status-badge';
import { PermissionTemplateRowActions } from './permission-template-row-actions';

const STATUS_OPTIONS = [
  { label: 'Active', value: 'active' },
  { label: 'Inactive', value: 'inactive' }
];

export const permissionTemplateColumns: ColumnDef<PermissionTemplate>[] = [
  {
    accessorKey: 'name',
    header: ({ column }: { column: Column<PermissionTemplate, unknown> }) => (
      <DataTableColumnHeader column={column} title='Template' />
    ),
    cell: ({ row }) => (
      <div className='flex flex-col'>
        <span className='font-medium'>{row.original.name}</span>
        <span className='text-muted-foreground text-xs'>{row.original.code}</span>
      </div>
    ),
    meta: {
      label: 'Template',
      placeholder: 'Search templates...',
      variant: 'text' as const,
      icon: Icons.search
    },
    enableColumnFilter: true
  },
  {
    accessorKey: 'assigned_user_count',
    header: ({ column }: { column: Column<PermissionTemplate, unknown> }) => (
      <DataTableColumnHeader column={column} title='Assigned Users' />
    )
  },
  {
    id: 'status',
    accessorKey: 'is_active',
    header: 'STATUS',
    cell: ({ row }) => (
      <PermissionStatusBadge
        isActive={row.original.is_active}
        isSystem={row.original.is_system}
        isDefault={row.original.is_default}
      />
    ),
    enableColumnFilter: true,
    meta: {
      label: 'status',
      variant: 'multiSelect' as const,
      options: STATUS_OPTIONS
    }
  },
  {
    accessorKey: 'updated_at',
    header: ({ column }: { column: Column<PermissionTemplate, unknown> }) => (
      <DataTableColumnHeader column={column} title='Updated At' />
    ),
    cell: ({ row }) => formatDateTime(row.original.updated_at)
  },
  {
    id: 'actions',
    cell: ({ row }) => <PermissionTemplateRowActions data={row.original} />
  }
];
