'use client'

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

import { Badge } from '@repo/ui/components/ui/badge'
import { Abbr } from '@repo/ui/components/abbr'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { Progress } from '@repo/ui/components/ui/progress'
import {
  DataTableColumnDatetime,
  DataTableColumnHeaderSort
} from '@repo/ui/components/data-table'
import { cn, initials } from '@repo/ui/lib/utils'

import { labels, statuses, type Enrollment } from './data'

export type { Enrollment }

export const columns: ColumnDef<Enrollment>[] = [
  {
    accessorKey: 'user',
    header: 'Colaborador',
    enableHiding: false,
    cell: ({ row }) => {
      const user = row.getValue('user') as { name: string; email: string }

      return (
        <div className="flex gap-2.5 items-center">
          <Avatar className="size-10 hidden lg:block">
            <AvatarFallback className="border">
              {initials(user.name)}
            </AvatarFallback>
          </Avatar>

          <ul>
            <li className="font-bold">
              <Abbr>{user.name}</Abbr>
            </li>
            <li className="text-muted-foreground text-sm">
              <Abbr>{user.email}</Abbr>
            </li>
          </ul>
        </div>
      )
    }
  },
  {
    accessorKey: 'course',
    header: 'Curso',
    enableHiding: false,
    cell: ({ row }) => {
      const { name } = row.getValue('course') as { name: string }
      return <Abbr>{name}</Abbr>
    }
  },
  {
    accessorKey: 'status',
    header: 'Status',
    enableHiding: false,
    cell: ({ row }) => {
      const s = row.getValue('status') as string
      const status = labels[s] ?? s
      const { icon: Icon, color } = statuses?.[s] ?? { icon: HelpCircleIcon }

      return (
        <Badge variant="outline" className={cn(color, ' px-1.5')}>
          <Icon className={cn('stroke-2', color)} />
          {status}
        </Badge>
      )
    }
  },
  {
    accessorKey: 'progress',
    header: 'Progresso',
    enableHiding: false,
    cell: ({ row }) => {
      const progress = row.getValue('progress')

      return (
        <div className="flex gap-2.5 items-center ">
          <Progress value={Number(progress)} className="w-32" />
          <span className="text-xs">{String(progress)}%</span>
        </div>
      )
    }
  },
  {
    accessorKey: 'created_at',
    meta: { title: 'Cadastrado em' },
    enableSorting: true,
    enableHiding: true,
    header: DataTableColumnHeaderSort,
    cell: DataTableColumnDatetime
  },
  {
    accessorKey: 'started_at',
    meta: { title: 'Iniciado em' },
    enableSorting: true,
    enableHiding: true,
    header: DataTableColumnHeaderSort,
    cell: DataTableColumnDatetime
  },
  {
    accessorKey: 'completed_at',
    meta: { title: 'Concluído em' },
    enableSorting: true,
    enableHiding: true,
    header: DataTableColumnHeaderSort,
    cell: DataTableColumnDatetime
  },
  {
    accessorKey: 'failed_at',
    meta: { title: 'Reprovado em' },
    enableSorting: true,
    enableHiding: true,
    header: DataTableColumnHeaderSort,
    cell: DataTableColumnDatetime
  },
  {
    accessorKey: 'canceled_at',
    meta: { title: 'Cancelado em' },
    enableSorting: true,
    enableHiding: true,
    header: DataTableColumnHeaderSort,
    cell: DataTableColumnDatetime
  }
]
