'use client'

import * as React from 'react'
import { deleteUser } from '@admin/actions/users'
import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger
} from '@admin/components/ui/alert-dialog'
import { Button } from '@admin/components/ui/button'
import { DropdownMenuItem } from '@admin/components/ui/dropdown-menu'
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@admin/components/ui/form'
import { Input } from '@admin/components/ui/input'
import { Spinner } from '@admin/components/ui/spinner'
import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { Trash } from 'lucide-react'
import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { z } from 'zod/v3'

const DELETE_CONFIRMATION_TEXT = 'Delete'

const deleteUserSchema = z.object({
  confirmation: z
    .string()
    .trim()
    .refine((value): boolean => value === DELETE_CONFIRMATION_TEXT, {
      message: `Type "${DELETE_CONFIRMATION_TEXT}" to confirm this action.`
    })
})

type DeleteUserFormValues = z.infer<typeof deleteUserSchema>

const deleteUserDefaultValues: DeleteUserFormValues = {
  confirmation: ''
}

interface DeleteUserDialogProps {
  userId: string
  userName: string
  isCurrentUser: boolean
}

export function DeleteUserDialog({ userId, userName, isCurrentUser }: DeleteUserDialogProps) {
  const [open, setOpen] = React.useState(false)
  const queryClient = useQueryClient()
  const form = useForm<DeleteUserFormValues>({
    resolver: standardSchemaResolver(deleteUserSchema),
    defaultValues: deleteUserDefaultValues,
    mode: 'onChange',
    reValidateMode: 'onChange'
  })

  const mutation = useMutation({
    mutationFn: async () => {
      const result = await deleteUser(userId)
      if (!result.success) {
        throw new Error(result.error || 'Failed to delete user')
      }

      return result
    },
    onSuccess: async () => {
      toast.success('User deleted successfully')
      await queryClient.invalidateQueries({ queryKey: ['users'] })
      resetFormState()
      setOpen(false)
    },
    onError: (error: Error) => {
      toast.error(error.message || 'Failed to delete this account')
    }
  })

  const isPending = mutation.isPending

  if (isCurrentUser) return null

  function resetFormState() {
    form.reset(deleteUserDefaultValues)
    mutation.reset()
  }

  function handleOpenChange(nextOpen: boolean) {
    setOpen(nextOpen)

    if (!nextOpen) {
      resetFormState()
    }
  }

  return (
    <AlertDialog open={open} onOpenChange={handleOpenChange}>
      <AlertDialogTrigger
        render={
          <DropdownMenuItem
            variant="destructive"
            closeOnClick={false}
            onClick={(event) => event.preventDefault()}
          />
        }
      >
        <Trash className="size-4" />
        Delete user
      </AlertDialogTrigger>
      <AlertDialogContent>
        <Form {...form}>
          <form autoComplete="off" onSubmit={form.handleSubmit(() => mutation.mutate())}>
            <AlertDialogHeader>
              <AlertDialogTitle>Delete account?</AlertDialogTitle>
              <AlertDialogDescription>
                This will permanently delete <strong className="text-foreground">{userName}</strong>
                &apos;s account and <br />
                all of their data. This action cannot be undone.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogBody>
              <FormField
                control={form.control}
                name="confirmation"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Type `{DELETE_CONFIRMATION_TEXT}` to enable deletion.</FormLabel>
                    <FormControl>
                      <Input
                        autoComplete="off"
                        autoCapitalize="none"
                        spellCheck={false}
                        disabled={isPending}
                        autoFocus
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </AlertDialogBody>
            <AlertDialogFooter>
              <AlertDialogCancel type="button" size="lg" disabled={isPending}>
                Cancel
              </AlertDialogCancel>
              <Button
                type="submit"
                disabled={isPending || !form.formState.isValid}
                aria-busy={isPending}
                size="lg"
                variant="destructive"
              >
                {isPending ? <Spinner /> : null}
                {isPending ? 'Deleting…' : 'Delete account'}
              </Button>
            </AlertDialogFooter>
          </form>
        </Form>
      </AlertDialogContent>
    </AlertDialog>
  )
}