'use client'

import { type ColumnDef } from '@tanstack/react-table'
import { useToggle } from 'ahooks'
import {
  EllipsisVerticalIcon,
  PencilIcon,
  UserRoundMinusIcon
} from 'lucide-react'
import { NavLink, useParams } from 'react-router'
import { toast } from 'sonner'

import { Abbr } from '@repo/ui/components/abbr'
import {
  useDataTable,
  DataTableColumnDatetime,
  DataTableColumnHeader,
  DataTableColumnCpfCnpj
} from '@repo/ui/components/data-table'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger
} from '@repo/ui/components/ui/alert-dialog'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { Button } from '@repo/ui/components/ui/button'
import { Checkbox } from '@repo/ui/components/ui/checkbox'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from '@repo/ui/components/ui/dropdown-menu'
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
}

export const columns: ColumnDef<User>[] = [
  {
    id: 'select',
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && 'indeterminate')
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        className="cursor-pointer"
        aria-label="Selecionar tudo"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        disabled={!row.getCanSelect()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        className="cursor-pointer"
        aria-label="Selecionar linha"
      />
    )
  },
  {
    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">
              <Abbr>{name}</Abbr>
            </li>
            <li className="text-muted-foreground text-sm">
              <Abbr>{email}</Abbr>
            </li>
          </ul>
        </div>
      )
    }
  },
  {
    accessorKey: 'cpf',
    header: 'CPF',
    cell: ({ row, column }) => (
      <DataTableColumnCpfCnpj row={row} column={column} />
    )
  },
  {
    accessorKey: 'createDate',
    enableSorting: true,
    meta: { title: 'Cadastrado em' },
    header: ({ column }) => <DataTableColumnHeader column={column} />,
    cell: ({ row, column }) => (
      <DataTableColumnDatetime row={row} column={column} />
    )
  },
  {
    accessorKey: 'lastLogin',
    enableSorting: true,
    meta: { title: 'Último acesso' },
    header: ({ column }) => <DataTableColumnHeader column={column} />,
    cell: ({ row, column }) => (
      <DataTableColumnDatetime row={row} column={column} />
    )
  },
  {
    id: 'actions',
    cell: ({ row }) => <ActionMenu row={row} />
  }
]

function ActionMenu({ row }: { row: any }) {
  return (
    <div className="flex justify-end items-center">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
            className="data-[state=open]:bg-muted text-muted-foreground cursor-pointer"
            size="icon-sm"
          >
            <EllipsisVerticalIcon />
            <span className="sr-only">Abrir menu</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-36 *:cursor-pointer">
          <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
            <NavLink to={`${row.id}`}>
              {({ isPending }) => (
                <>
                  {isPending ? <Spinner /> : <PencilIcon />}
                  Editar
                </>
              )}
            </NavLink>
          </DropdownMenuItem>
          <UnlinkItem id={row.id} />
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}

function UnlinkItem({ id }: { id: string }) {
  const [loading, { set }] = useToggle(false)
  const { orgid } = useParams()
  const { table } = useDataTable<User>()

  const unlink = async (e) => {
    e.preventDefault()
    set(true)

    const r = await fetch(`/~/api/orgs/${orgid}/users/${id}`, {
      method: 'DELETE'
    })

    if (r.ok) {
      toast.info('O colaborador foi desvinculado')
      // @ts-ignore
      table.options.meta?.removeRow?.(id)
    }
  }

  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <DropdownMenuItem
          variant="destructive"
          onSelect={(e) => e.preventDefault()}
        >
          <UserRoundMinusIcon /> Desvincular
        </DropdownMenuItem>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Tem certeza absoluta?</AlertDialogTitle>
          <AlertDialogDescription>
            Esta ação não pode ser desfeita. Isso{' '}
            <span className="font-bold">
              removerá permanentemente o vínculo
            </span>{' '}
            deste colaborador.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter className="*:cursor-pointer">
          <AlertDialogCancel>Cancelar</AlertDialogCancel>
          <AlertDialogAction asChild>
            <Button onClick={unlink} disabled={loading} variant="destructive">
              {loading ? <Spinner /> : null} Continuar
            </Button>
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}