'use client'

import { useState } from 'react'
import { deleteUserAction } from '../actions'

export default function DeleteUserButton({ id, email }: { id: string; email: string }) {
  const [confirmText, setConfirmText] = useState('')
  const [open, setOpen] = useState(false)
  const canDelete = confirmText.trim().toLowerCase() === email.toLowerCase()

  if (!open) {
    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="rounded-md border border-red-300 dark:border-red-900 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 text-sm font-medium px-4 py-2 transition-colors"
      >
        Kullanıcıyı Sil
      </button>
    )
  }

  return (
    <form action={deleteUserAction} className="space-y-3">
      <input type="hidden" name="id" value={id} />
      <p className="text-sm text-gray-600 dark:text-gray-400">
        Bu işlem geri alınamaz — kullanıcının Supabase Auth hesabı ve profili silinir. Bu kullanıcıya bağlı lisanslar askıda kalabilir, gerekirse Lisanslar sayfasından bağlantısını kaldırın.
        Onaylamak için e-postasını yazın: <span className="font-mono text-gray-900 dark:text-white">{email}</span>
      </p>
      <input
        type="text"
        value={confirmText}
        onChange={(e) => setConfirmText(e.target.value)}
        placeholder={email}
        className="w-full rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-red-500"
      />
      <div className="flex items-center gap-3">
        <button
          type="submit"
          disabled={!canDelete}
          className="rounded-md bg-red-600 hover:bg-red-700 disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-medium px-4 py-2 transition-colors"
        >
          Kalıcı Olarak Sil
        </button>
        <button
          type="button"
          onClick={() => { setOpen(false); setConfirmText('') }}
          className="text-sm text-gray-500 hover:text-gray-900 dark:hover:text-white"
        >
          Vazgeç
        </button>
      </div>
    </form>
  )
}