import { AlertTriangle, X } from 'lucide-react';

export function RestoreModal({ snapshot, vmName, confirmText, onCancel, onConfirm, onTextChange, busy }) {
  if (!snapshot) return null;
  const canConfirm = confirmText === vmName && !busy;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
      <div className="w-full max-w-lg rounded-md border border-red-900 bg-zinc-950 shadow-2xl">
        <div className="flex items-center justify-between border-b border-red-950 px-4 py-3">
          <div className="flex items-center gap-2 text-red-300">
            <AlertTriangle className="h-5 w-5" />
            <h2 className="text-sm font-semibold">Destructive Disk Restore</h2>
          </div>
          <button className="rounded-md p-1 text-zinc-400 hover:text-zinc-100" onClick={onCancel} type="button">
            <X className="h-5 w-5" />
          </button>
        </div>
        <div className="space-y-4 p-4">
          <p className="text-sm leading-6 text-zinc-300">
            Warning: The VM will be stopped and its current disk will be irreversibly overwritten with
            snapshot <span className="font-mono text-red-200">{snapshot.id.slice(0, 8)}</span>. Incus config, profiles, devices, and metadata are not restored by this action.
          </p>
          <label className="block text-sm text-zinc-300">
            Type <span className="font-mono text-zinc-100">{vmName}</span> to confirm.
            <input
              className="mt-2 h-10 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 text-zinc-100 outline-none focus:border-red-500"
              onChange={(event) => onTextChange(event.target.value)}
              value={confirmText}
            />
          </label>
          <div className="flex justify-end gap-2">
            <button className="h-9 rounded-md border border-zinc-700 px-3 text-sm text-zinc-200" onClick={onCancel} type="button">
              Cancel
            </button>
            <button
              className="h-9 rounded-md border border-red-700 bg-red-950 px-3 text-sm text-red-100 hover:bg-red-900 disabled:hover:bg-red-950"
              disabled={!canConfirm}
              onClick={onConfirm}
              type="button"
            >
              Confirm Disk Restore
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}