import { type ColumnDef } from '@tanstack/react-table'

import { cn } from '@/lib/utils'

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 { type User } from '@/types/users.types'

import { DataTableRowActions } from './data-table-row-actions'
import { planDurations } from '@/constants/users/users-constants'

export 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 dir='ltr'>{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 }) => (
      <div className='text-nowrap'>
        {row.original.subscription?.plan
          ? `${row.original.subscription?.plan?.type} (${planDurations[row.original.subscription?.plan?.duration]})`
          : '-'}
      </div>
    ),
  },

  {
    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: 'actions',
    cell: DataTableRowActions,
    enableSorting: false,
    enableHiding: false,
  },
]