Momento/memento-note/components/legal/delete-account-dialog.tsx

'use client'

import { useState } from 'react'
import { signOut } from 'next-auth/react'
import { Loader2, ShieldAlert } from 'lucide-react'
import { toast } from 'sonner'
import { useLanguage } from '@/lib/i18n'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'

interface DeleteAccountDialogProps {
  userEmail: string
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function DeleteAccountDialog({ userEmail, open, onOpenChange }: DeleteAccountDialogProps) {
  const { t } = useLanguage()
  const [inputEmail, setInputEmail] = useState('')
  const [isDeleting, setIsDeleting] = useState(false)

  const isConfirmed = inputEmail === userEmail

  const handleDelete = async () => {
    if (!isConfirmed || isDeleting) return
    setIsDeleting(true)
    try {
      const response = await fetch('/api/user/account', {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: userEmail }),
      })

      if (!response.ok) {
        throw new Error('Deletion failed')
      }

      toast.success(t('account.deleteAccount.successRedirect'))
      await signOut({ callbackUrl: '/login?deleted=true' })
    } catch {
      toast.error(t('account.deleteAccount.errorFailed'))
      setIsDeleting(false)
    }
  }

  const handleOpenChange = (v: boolean) => {
    if (isDeleting) return
    if (!v) setInputEmail('')
    onOpenChange(v)
  }

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent className="max-w-lg border-border bg-memento-paper dark:bg-background">
        <DialogHeader>
          <div className="flex items-center gap-3 mb-1">
            <div className="p-2 bg-rose-500/10 rounded-xl text-rose-600 dark:text-rose-400 border border-rose-500/20 shrink-0">
              <ShieldAlert size={18} />
            </div>
            <DialogTitle className="font-memento-serif text-xl text-ink">
              {t('account.deleteAccount.dialogTitle')}
            </DialogTitle>
          </div>
          <DialogDescription className="text-[11px] text-concrete leading-relaxed">
            {t('account.deleteAccount.dialogDescription')}
          </DialogDescription>
        </DialogHeader>

        <div className="py-2 space-y-4">
          <div className="bg-rose-50/60 dark:bg-rose-500/5 border border-rose-200/50 dark:border-rose-500/20 rounded-xl p-4 space-y-2">
            <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-rose-600 dark:text-rose-400">
              {t('account.deleteAccount.whatWillBeDeleted')}
            </p>
            <ul className="space-y-1">
              {[
                t('account.deleteAccount.item1'),
                t('account.deleteAccount.item2'),
                t('account.deleteAccount.item3'),
                t('account.deleteAccount.item4'),
                t('account.deleteAccount.item5'),
                t('account.deleteAccount.item6'),
                t('account.deleteAccount.item7'),
              ].map((item, i) => (
                <li key={i} className="text-[11px] text-concrete flex items-start gap-2">
                  <span className="text-rose-400 mt-0.5 shrink-0">•</span>
                  {item}
                </li>
              ))}
            </ul>
          </div>

          <div className="space-y-2">
            <label className="text-[10px] font-bold uppercase tracking-[0.2em] text-concrete block">
              {t('account.deleteAccount.dialogDescription')}
            </label>
            <input
              type="email"
              value={inputEmail}
              onChange={e => setInputEmail(e.target.value)}
              placeholder={t('account.deleteAccount.emailPlaceholder')}
              disabled={isDeleting}
              className="w-full px-4 py-2.5 bg-white/40 dark:bg-white/5 border border-border rounded-xl text-sm text-ink placeholder:text-concrete/60 focus:outline-none focus:ring-1 focus:ring-rose-400 disabled:opacity-60"
              autoComplete="off"
              data-1p-ignore
            />
            <p className="text-[10px] text-concrete/70">
              {userEmail}
            </p>
          </div>
        </div>

        <DialogFooter className="gap-2 sm:gap-2">
          <button
            type="button"
            onClick={() => handleOpenChange(false)}
            disabled={isDeleting}
            className="px-5 py-2.5 text-[10px] font-bold uppercase tracking-[0.2em] text-concrete hover:text-ink transition-colors disabled:opacity-60"
          >
            {t('account.deleteAccount.cancelButton')}
          </button>
          <button
            type="button"
            onClick={handleDelete}
            disabled={!isConfirmed || isDeleting}
            className="px-6 py-2.5 bg-rose-600 text-white rounded-xl text-[10px] font-bold uppercase tracking-[0.2em] shadow-xl shadow-rose-600/20 hover:scale-[1.02] active:scale-95 transition-all duration-300 disabled:opacity-50 disabled:pointer-events-none"
          >
            <span className="flex items-center gap-2">
              {isDeleting && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
              {isDeleting
                ? t('account.deleteAccount.deleting')
                : t('account.deleteAccount.confirmButton')}
            </span>
          </button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}