'use client'

import { formatCPF } from '@brazilian-utils/brazilian-utils'
import { type ColumnDef } from '@tanstack/react-table'
import { ArrowRight } from 'lucide-react'
import { NavLink } from 'react-router'

import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { Button } from '@repo/ui/components/ui/button'
import { Spinner } from '@repo/ui/components/ui/spinner'
import { initials } from '@repo/ui/lib/utils'

// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type User = {
  id: string
  name: string
  email: string
  cpf?: string
  cnpj?: string
}

const formatted = new Intl.DateTimeFormat('pt-BR', {
  day: '2-digit',
  month: '2-digit',
  year: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
})

export const columns: ColumnDef<User>[] = [
  {
    header: 'Colaborador',
    cell: ({ row }) => {
      const { name, email } = row.original

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

          <ul>
            <li className="font-bold truncate max-w-62">{name}</li>
            <li className="text-muted-foreground text-sm truncate max-w-92">
              {email}
            </li>
          </ul>
        </div>
      )
    }
  },
  {
    header: 'CPF',
    cell: ({ row }) => {
      const { cpf } = row.original

      if (cpf) {
        return <>{formatCPF(cpf)}</>
      }

      return <></>
    }
  },
  {
    header: 'Cadastrado em',
    cell: ({ row }) => {
      const created_at = new Date(row.original.createDate)
      return formatted.format(created_at)
    }
  },
  {
    header: 'Último accesso',
    cell: ({ row }) => {
      // Post-migration: rename `lastLogin` to `last_login`
      if (row.original?.lastLogin) {
        const lastLogin = new Date(row.original.lastLogin)
        return formatted.format(lastLogin)
      }

      return <></>
    }
  },
  {
    header: ' ',
    cell: ({ row }) => {
      return (
        <div className="flex justify-end">
          <Button
            variant="outline"
            size="sm"
            className="relative group"
            asChild
          >
            <NavLink to={`${row.original?.id}`}>
              {({ isPending }) => (
                <>
                  {isPending && <Spinner className="absolute" />}
                  <span className="group-[.pending]:invisible">
                    Editar
                  </span>{' '}
                  <ArrowRight className="group-[.pending]:invisible" />
                </>
              )}
            </NavLink>
          </Button>
        </div>
      )
    }
  }
]