import {
  AlertTriangle,
  CheckCircle2,
  Info,
  Loader2,
  RotateCcw,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'
import { type StatusTone } from './status-badge'

type AdminActionDialogProps = {
  open: boolean
  onOpenChange: (open: boolean) => void
  title: React.ReactNode
  description: React.ReactNode
  confirmLabel: React.ReactNode
  tone?: StatusTone
  isLoading?: boolean
  disabled?: boolean
  cancelLabel?: React.ReactNode
  onConfirm: () => void
  children?: React.ReactNode
}

const toneMeta: Record<
  StatusTone,
  {
    icon: React.ElementType
    className: string
    buttonVariant: 'default' | 'destructive'
  }
> = {
  success: {
    icon: CheckCircle2,
    className: 'bg-success/10 text-success-foreground ring-success/20',
    buttonVariant: 'default',
  },
  warning: {
    icon: AlertTriangle,
    className: 'bg-warning/10 text-warning-foreground ring-warning/20',
    buttonVariant: 'default',
  },
  info: {
    icon: Info,
    className: 'bg-info/10 text-info-foreground ring-info/20',
    buttonVariant: 'default',
  },
  danger: {
    icon: AlertTriangle,
    className: 'bg-danger/10 text-danger-foreground ring-danger/20',
    buttonVariant: 'destructive',
  },
  neutral: {
    icon: RotateCcw,
    className: 'bg-neutral/10 text-neutral-foreground ring-neutral/20',
    buttonVariant: 'default',
  },
}

export function AdminActionDialog({
  open,
  onOpenChange,
  title,
  description,
  confirmLabel,
  tone = 'info',
  isLoading,
  disabled,
  cancelLabel = 'Cancel',
  onConfirm,
  children,
}: AdminActionDialogProps) {
  const meta = toneMeta[tone]
  const Icon = meta.icon

  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent className='overflow-hidden p-0 sm:max-w-[460px]'>
        <div className='border-b bg-muted/30 px-6 py-5'>
          <AlertDialogHeader className='text-start'>
            <div className='flex items-start gap-4'>
              <div
                className={cn(
                  'mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-lg ring-1',
                  meta.className
                )}
              >
                <Icon className='size-5' />
              </div>
              <div className='min-w-0 space-y-2'>
                <AlertDialogTitle className='text-base leading-6'>
                  {title}
                </AlertDialogTitle>
                <AlertDialogDescription asChild>
                  <div className='text-sm leading-6 text-muted-foreground'>
                    {description}
                  </div>
                </AlertDialogDescription>
              </div>
            </div>
          </AlertDialogHeader>
        </div>
        {children && <div className='px-6 py-4'>{children}</div>}
        <AlertDialogFooter className='border-t bg-background px-6 py-4'>
          <AlertDialogCancel disabled={isLoading}>
            {cancelLabel}
          </AlertDialogCancel>
          <Button
            type='button'
            variant={meta.buttonVariant}
            disabled={disabled || isLoading}
            onClick={onConfirm}
          >
            {isLoading && <Loader2 className='size-4 animate-spin' />}
            {confirmLabel}
          </Button>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
