import { useState } from 'react'
import { AlertTriangle } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

interface StatusCodeRiskDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  detailItems: string[]
  onConfirm: () => void
}

const CHECKLIST_KEYS = [
  'High-risk status code retry risk check 1',
  'High-risk status code retry risk check 2',
  'High-risk status code retry risk check 3',
  'High-risk status code retry risk check 4',
] as const

export function StatusCodeRiskDialog({
  open,
  onOpenChange,
  detailItems,
  onConfirm,
}: StatusCodeRiskDialogProps) {
  const { t } = useTranslation()
  const [checkedItems, setCheckedItems] = useState<Set<number>>(new Set())
  const [confirmText, setConfirmText] = useState('')

  const requiredText = t('High-risk status code retry confirmation text')
  const allChecked = checkedItems.size === CHECKLIST_KEYS.length
  const textMatches = confirmText.trim() === requiredText.trim()
  const canConfirm = allChecked && textMatches

  const handleConfirm = () => {
    if (!canConfirm) return
    setCheckedItems(new Set())
    setConfirmText('')
    onConfirm()
  }

  const handleCancel = () => {
    setCheckedItems(new Set())
    setConfirmText('')
    onOpenChange(false)
  }

  const toggleCheck = (idx: number) => {
    setCheckedItems((prev) => {
      const next = new Set(prev)
      if (next.has(idx)) next.delete(idx)
      else next.add(idx)
      return next
    })
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className='max-w-lg'>
        <DialogHeader>
          <DialogTitle className='text-destructive flex items-center gap-2'>
            <AlertTriangle className='h-5 w-5' />
            {t('High-risk operation confirmation')}
          </DialogTitle>
          <DialogDescription>
            {t('High-risk status code retry risk disclaimer')}
          </DialogDescription>
        </DialogHeader>

        <div className='space-y-4'>
          {detailItems.length > 0 && (
            <div className='border-destructive/30 bg-destructive/5 rounded-lg border p-3'>
              <p className='mb-2 text-sm font-medium'>
                {t('Detected high-risk status code redirect rules')}
              </p>
              <ul className='list-inside list-disc text-sm'>
                {detailItems.map((item) => (
                  <li key={item} className='font-mono text-xs'>
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          )}

          <div className='space-y-2'>
            {CHECKLIST_KEYS.map((key, idx) => (
              <div key={key} className='flex items-start gap-2'>
                <Checkbox
                  id={`risk-check-${idx}`}
                  checked={checkedItems.has(idx)}
                  onCheckedChange={() => toggleCheck(idx)}
                />
                <Label
                  htmlFor={`risk-check-${idx}`}
                  className='text-sm leading-tight'
                >
                  {t(key)}
                </Label>
              </div>
            ))}
          </div>

          <div className='space-y-1.5'>
            <Label className='text-sm'>
              {t('Action confirmation')}:{' '}
              <code className='bg-muted rounded px-1 text-xs'>
                {requiredText}
              </code>
            </Label>
            <Input
              value={confirmText}
              onChange={(e) => setConfirmText(e.target.value)}
              placeholder={t('High-risk status code retry input placeholder')}
            />
            {confirmText && !textMatches && (
              <p className='text-destructive text-xs'>
                {t('High-risk status code retry input mismatch')}
              </p>
            )}
          </div>
        </div>

        <DialogFooter>
          <Button variant='outline' onClick={handleCancel}>
            {t('Cancel')}
          </Button>
          <Button
            variant='destructive'
            disabled={!canConfirm}
            onClick={handleConfirm}
          >
            {t('I confirm enabling high-risk retry')}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}