import { useState } from 'react'
import { AlertTriangle } from 'lucide-react'

/**
 * Two-step delete confirmation:
 *   Step 1 — "Are you sure?" with a description of what will be deleted.
 *   Step 2 — Type "DELETE" to confirm.
 *
 * Props:
 *   title       — e.g. "Διαγραφή Βάρδιας #12"
 *   description — e.g. "Η βάρδια του Νίκου θα διαγραφεί μόνιμα."
 *   onConfirm   — called when the user completes both steps
 *   onCancel    — called when the user dismisses
 */
export default function DeleteConfirmModal({ title, description, onConfirm, onCancel }) {
  const [step, setStep] = useState(1)
  const [typed, setTyped] = useState('')

  const canDelete = typed.trim().toUpperCase() === 'DELETE'

  return (
    <div
      className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/60 p-4"
      onClick={onCancel}
    >
      <div
        className="w-full max-w-md rounded-2xl bg-white shadow-2xl"
        onClick={e => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-start gap-3 px-6 pt-6 pb-4">
          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-red-100">
            <AlertTriangle size={18} className="text-red-600" />
          </div>
          <div>
            <div className="text-base font-bold text-gray-900">{title}</div>
            <div className="mt-1 text-sm text-gray-500">{description}</div>
          </div>
        </div>

        <div className="px-6 pb-6 space-y-4">
          {step === 1 && (
            <>
              <p className="text-sm text-red-700 font-medium bg-red-50 rounded-lg px-3 py-2">
                Αυτή η ενέργεια είναι μη αναστρέψιμη.
              </p>
              <div className="flex gap-3">
                <button
                  onClick={onCancel}
                  className="flex-1 rounded-lg border border-gray-200 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50"
                >
                  Ακύρωση
                </button>
                <button
                  onClick={() => setStep(2)}
                  className="flex-1 rounded-lg bg-red-600 py-2 text-sm font-bold text-white hover:bg-red-700"
                >
                  Ναι, συνέχεια →
                </button>
              </div>
            </>
          )}

          {step === 2 && (
            <>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Για επιβεβαίωση πληκτρολογήστε <span className="font-mono font-bold text-red-600">DELETE</span>
                </label>
                <input
                  autoFocus
                  type="text"
                  value={typed}
                  onChange={e => setTyped(e.target.value)}
                  onKeyDown={e => e.key === 'Enter' && canDelete && onConfirm()}
                  placeholder="DELETE"
                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-red-400"
                />
              </div>
              <div className="flex gap-3">
                <button
                  onClick={onCancel}
                  className="flex-1 rounded-lg border border-gray-200 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50"
                >
                  Ακύρωση
                </button>
                <button
                  onClick={onConfirm}
                  disabled={!canDelete}
                  className="flex-1 rounded-lg bg-red-600 py-2 text-sm font-bold text-white hover:bg-red-700 disabled:opacity-40 disabled:cursor-not-allowed"
                >
                  Διαγραφή
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  )
}
