'use client'

import type { ColumnDef } from '@tanstack/react-table'
import { useToggle } from 'ahooks'
import { EllipsisIcon, FileBadgeIcon } from 'lucide-react'
import type { ComponentProps } from 'react'

import { Button } from '@repo/ui/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from '@repo/ui/components/ui/dropdown-menu'
import { Spinner } from '@repo/ui/components/ui/spinner'
import {
  DataTableColumnHeaderSelect,
  DataTableColumnSelect
} from '@repo/ui/components/data-table/column-select'
import {
  columns as columns_,
  type Enrollment
} from '@repo/ui/routes/enrollments/columns'

import { CopyToClipboardItem } from '../_app.users._index/columns'

export type { Enrollment }

export const columns: ColumnDef<Enrollment>[] = [
  {
    id: 'select',
    header: DataTableColumnHeaderSelect,
    cell: DataTableColumnSelect,
    meta: { className: 'w-8' }
  },
  ...columns_,
  {
    id: 'action',
    cell: ActionMenu,
    meta: { className: 'w-12' }
  }
]

function ActionMenu({ row }: { row: any }) {
  const [open, { set: setOpen }] = useToggle(false)
  const cert = row.original?.cert

  return (
    <div className="flex justify-end items-center">
      <DropdownMenu
        modal={false}
        open={open}
        onOpenChange={(open) => {
          setOpen(open)
        }}
      >
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
            className="data-[state=open]:bg-muted text-muted-foreground cursor-pointer"
            size="icon-sm"
          >
            <EllipsisIcon />
            <span className="sr-only">Abrir menu</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-46 *:cursor-pointer">
          <CopyToClipboardItem text={row.id} />
          <DownloadItem
            id={row.id}
            disabled={!cert}
            onSuccess={() => setOpen(false)}
          />
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}

type ItemProps = ComponentProps<typeof DropdownMenuItem> & {
  id: string
  onSuccess?: () => void
}

function DownloadItem({ id, onSuccess, ...props }: ItemProps) {
  const [loading, { set }] = useToggle(false)

  const download = async (e: Event) => {
    e.preventDefault()
    set(true)
    const r = await fetch(`/~/api/enrollments/${id}/download`, {
      method: 'GET'
    })

    if (r.ok) {
      const { presigned_url } = (await r.json()) as { presigned_url: string }
      window.open(presigned_url, '_blank')

      set(false)
      onSuccess?.()
    }
  }

  return (
    <DropdownMenuItem onSelect={download} {...props}>
      {loading ? <Spinner /> : <FileBadgeIcon />} Baixar certificado
    </DropdownMenuItem>
  )
}