'use client'

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

const CONFIRM_WORD = 'SİL'

export default function DeleteLicenseButton({ id }: { id: string }) {
  const [confirmText, setConfirmText] = useState('')
  const [open, setOpen] = useState(false)
  const canDelete = confirmText.trim().toUpperCase() === CONFIRM_WORD

  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"
      >
        Lisansı Sil
      </button>
    )
  }

  return (
    <form action={deleteLicenseAction} 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 — lisans ve bağlı cihaz aktivasyonları kalıcı olarak silinir. Sadece kullanımı durdurmak için "Durum" alanını <span className="font-mono">revoked</span> yapmanız yeterli olabilir.
        Onaylamak için <span className="font-mono text-gray-900 dark:text-white">{CONFIRM_WORD}</span> yazın:
      </p>
      <input
        type="text"
        value={confirmText}
        onChange={(e) => setConfirmText(e.target.value)}
        placeholder={CONFIRM_WORD}
        className="w-full max-w-xs 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>
  )
}