import { useMemo } from 'react'
import { type ColumnDef } from '@tanstack/react-table'
import { type User } from '@/types/users.types'
import { cn } from '@/lib/utils'
import { PERMISSIONS } from '@/constants/permissions'
import { useCan } from '@/hooks/use-can'
import { Badge } from '@/components/ui/badge'
import { Checkbox } from '@/components/ui/checkbox'
import { DataTableColumnHeader } from '@/components/data-table'
import { LongText } from '@/components/long-text'
import { DataTableRowActions } from './data-table-row-actions'
import { UserSubscriptionCell } from './user-subscription-cell'

const usersColumns: ColumnDef<User>[] = [
  {
    id: 'select',
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && 'indeterminate')
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label='Select all'
        className='translate-y-0.5'
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label='Select row'
        className='translate-y-0.5'
      />
    ),
    enableSorting: false,
    enableHiding: false,
    meta: {
      className: cn('inset-s-0 z-10 rounded-tl-[inherit] max-md:sticky'),
    },
  },

  {
    accessorKey: 'id',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='شناسه' />
    ),
    cell: ({ row }) => <div className='w-15'>#{row.original.id}</div>,
    enableSorting: true,
  },

  {
    accessorKey: 'username',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='نام کاربری' />
    ),
    cell: ({ row }) => (
      <LongText className='max-w-36 ps-3'>{row.original.username}</LongText>
    ),
    enableHiding: false,
    meta: {
      className: cn(
        'drop-shadow-[0_1px_2px_rgb(0_0_0_/_0.1)]',
        'dark:drop-shadow-[0_1px_2px_rgb(255_255_255_/_0.1)]',
        'inset-s-6 ps-0.5 max-md:sticky',
        '@4xl/content:table-cell',
        '@4xl/content:drop-shadow-none'
      ),
    },
  },

  {
    accessorKey: 'full_name',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='نام کامل' />
    ),
    cell: ({ row }) => (
      <LongText className='max-w-40'>{row.original.full_name}</LongText>
    ),
  },

  {
    accessorKey: 'phone',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='شماره موبایل' />
    ),
    cell: ({ row }) => <div>{row.original.phone}</div>,
  },

  // {
  //   accessorKey: 'email',
  //   header: ({ column }) => (
  //     <DataTableColumnHeader column={column} title='ایمیل' />
  //   ),
  //   cell: ({ row }) => (
  //     <div className='text-nowrap'>{row.original.email ?? '-'}</div>
  //   ),
  // },

  {
    accessorKey: 'subscription',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='اشتراک' />
    ),
    cell: ({ row }) => (
      <UserSubscriptionCell
        subscription={row.original.subscription}
        subscriptions={row.original.subscriptions}
      />
    ),
  },

  {
    accessorKey: 'followers_count',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='دنبال‌کننده' />
    ),
    cell: ({ row }) => (
      <Badge variant='secondary'>{row.original.followers_count}</Badge>
    ),
  },

  {
    accessorKey: 'created_at',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title='تاریخ عضویت' />
    ),
    cell: ({ row }) => {
      return (
        <div className='text-sm text-muted-foreground'>
          {new Date(row.original.created_at).toLocaleDateString('fa-IR')}
        </div>
      )
    },
  },

  {
    id: 'subscription_type',
    accessorFn: (row) => row.subscription?.plan?.type ?? 'free',
    header: () => null,
    cell: () => null,
    filterFn: (row, columnId, filterValue: string) => {
      if (!filterValue) return true
      return row.getValue(columnId) === filterValue
    },
  },

  {
    id: 'actions',
    cell: DataTableRowActions,
    enableSorting: false,
    enableHiding: false,
  },
]

function columnKey(column: ColumnDef<User>) {
  if ('accessorKey' in column && typeof column.accessorKey === 'string') {
    return column.accessorKey
  }

  return column.id
}

export function useUsersColumns() {
  const { can } = useCan()

  return useMemo(() => {
    return usersColumns.filter((column) => {
      const key = columnKey(column)

      if (key === 'phone') return can(PERMISSIONS.users.fields.phone.view)

      if (key === 'subscription' || key === 'subscription_type') {
        return can(PERMISSIONS.users.fields.subscription.view)
      }

      return true
    })
  }, [can])
}