'use client'

import { useState } from 'react'
import { ShieldOff, Mail, AlertTriangle, Loader2, CheckCircle2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from '@/components/ui/dialog'
import type { PortalUser } from '@/lib/types'
import { apiFetch } from '@/lib/fetcher'

interface ResetMfaModalProps {
  open: boolean
  onClose: () => void
  user: PortalUser | null
  onSuccess?: () => void
}

type Step = 'confirm' | 'loading' | 'done' | 'error'

export function ResetMfaModal({ open, onClose, user, onSuccess }: ResetMfaModalProps) {
  const [step, setStep] = useState<Step>('confirm')
  const [errorMsg, setErrorMsg] = useState('')

  function handleOpenChange(isOpen: boolean) {
    if (!isOpen) {
      setStep('confirm')
      setErrorMsg('')
      onClose()
    }
  }

  async function handleConfirm() {
    if (!user) return
    setStep('loading')
    try {
    const res = await apiFetch(`/api/portal-users/${user.id}/reset-mfa`, { method: 'POST' })
      const data = await res.json()
      if (!res.ok) {
        setErrorMsg(data.error ?? 'Erro ao remover MFA')
        setStep('error')
        return
      }
      setStep('done')
      onSuccess?.()
    } catch {
      setErrorMsg('Erro de conexão. Tente novamente.')
      setStep('error')
    }
  }

  function handleClose() {
    setStep('confirm')
    setErrorMsg('')
    onClose()
  }

  if (!user) return null

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent className="sm:max-w-md">

        {/* Confirmação */}
        {step === 'confirm' && (
          <>
            <DialogHeader>
              <div className="flex items-center gap-3 mb-1">
                <div className="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center shrink-0">
                  <ShieldOff className="w-5 h-5 text-amber-600" />
                </div>
                <DialogTitle className="text-base">Remover autenticador MFA</DialogTitle>
              </div>
              <DialogDescription className="text-sm leading-relaxed">
                Você está prestes a remover o autenticador MFA de{' '}
                <strong className="text-foreground">{user.name}</strong> ({user.email}).
              </DialogDescription>
            </DialogHeader>

            <div className="space-y-4 py-2">
              <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 flex gap-3">
                <AlertTriangle className="w-4 h-4 text-amber-600 shrink-0 mt-0.5" />
                <div className="space-y-1.5">
                  <p className="text-sm font-semibold text-amber-800">Esta ação é imediata e irreversível</p>
                  <ul className="text-sm text-amber-700 space-y-1 list-disc list-inside">
                    <li>O Google Authenticator atual será invalidado</li>
                    <li>O usuário não conseguirá logar com MFA até cadastrar um novo</li>
                    <li>Um e-mail será enviado ao usuário informando a remoção</li>
                    <li>O link para cadastrar novo MFA expira em 24 horas</li>
                  </ul>
                </div>
              </div>

              <div className="rounded-lg border border-border bg-muted/40 p-4 flex gap-3">
                <Mail className="w-4 h-4 text-muted-foreground shrink-0 mt-0.5" />
                <div>
                  <p className="text-sm font-medium text-foreground">E-mail de notificação</p>
                  <p className="text-sm text-muted-foreground mt-0.5">
                    Será enviado para <strong>{user.email}</strong> com um link seguro
                    para cadastrar novo autenticador e um aviso de segurança caso não tenha solicitado.
                  </p>
                </div>
              </div>
            </div>

            <div className="flex justify-end gap-3 pt-2">
              <Button variant="outline" onClick={handleClose}>
                Cancelar
              </Button>
              <Button
                variant="destructive"
                onClick={handleConfirm}
                className="gap-2"
              >
                <ShieldOff className="w-4 h-4" />
                Confirmar remoção
              </Button>
            </div>
          </>
        )}

        {/* Carregando */}
        {step === 'loading' && (
          <div className="flex flex-col items-center justify-center py-10 gap-4">
            <Loader2 className="w-8 h-8 animate-spin text-primary" />
            <div className="text-center">
              <p className="font-medium text-foreground">Removendo autenticador...</p>
              <p className="text-sm text-muted-foreground mt-1">Enviando e-mail de notificação para {user.email}</p>
            </div>
          </div>
        )}

        {/* Sucesso */}
        {step === 'done' && (
          <>
            <DialogHeader>
              <div className="flex items-center gap-3 mb-1">
                <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center shrink-0">
                  <CheckCircle2 className="w-5 h-5 text-green-600" />
                </div>
                <DialogTitle className="text-base">MFA removido com sucesso</DialogTitle>
              </div>
            </DialogHeader>

            <div className="space-y-3 py-2">
              <div className="rounded-lg border border-green-200 bg-green-50 p-4 space-y-1.5">
                <p className="text-sm font-semibold text-green-800">O que foi feito:</p>
                <ul className="text-sm text-green-700 space-y-1 list-disc list-inside">
                  <li>Autenticador MFA de <strong>{user.name}</strong> foi removido</li>
                  <li>E-mail de notificação enviado para <strong>{user.email}</strong></li>
                  <li>Link para cadastrar novo MFA gerado (válido por 24h)</li>
                  <li>Ação registrada na auditoria do sistema</li>
                </ul>
              </div>
            </div>

            <div className="flex justify-end pt-2">
              <Button onClick={handleClose}>Fechar</Button>
            </div>
          </>
        )}

        {/* Erro */}
        {step === 'error' && (
          <>
            <DialogHeader>
              <div className="flex items-center gap-3 mb-1">
                <div className="w-10 h-10 rounded-full bg-destructive/10 flex items-center justify-center shrink-0">
                  <AlertTriangle className="w-5 h-5 text-destructive" />
                </div>
                <DialogTitle className="text-base">Erro ao remover MFA</DialogTitle>
              </div>
              <DialogDescription>{errorMsg}</DialogDescription>
            </DialogHeader>
            <div className="flex justify-end gap-3 pt-2">
              <Button variant="outline" onClick={handleClose}>Cancelar</Button>
              <Button onClick={() => setStep('confirm')}>Tentar novamente</Button>
            </div>
          </>
        )}

      </DialogContent>
    </Dialog>
  )
}