'use client'

import { useState } from 'react'
import { AlertTriangle, Loader2 } from 'lucide-react'
import type { SSOConfig } from '../_types'

export function DeleteConfirmModal({
  config,
  onClose,
  onConfirm,
}: {
  config: SSOConfig | null
  onClose: () => void
  onConfirm: () => Promise<void>
}) {
  const [deleting, setDeleting] = useState(false)

  if (!config) return null

  const handleDelete = async () => {
    setDeleting(true)
    try {
      await onConfirm()
      onClose()
    } finally {
      setDeleting(false)
    }
  }

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4 p-6">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
            <AlertTriangle className="w-5 h-5 text-red-600" />
          </div>
          <div>
            <h3 className="text-lg font-semibold text-slate-900">Konfiguration loeschen?</h3>
            <p className="text-sm text-slate-500">Diese Aktion kann nicht rueckgaengig gemacht werden.</p>
          </div>
        </div>
        <p className="text-sm text-slate-600 mb-6">
          Die SSO-Konfiguration <strong>&quot;{config.name}&quot;</strong> wird unwiderruflich geloescht.
          Alle ueber diese Konfiguration provisionierten Benutzer verlieren den SSO-Zugang.
        </p>
        <div className="flex justify-end gap-3">
          <button
            onClick={onClose}
            className="px-4 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg transition-colors"
          >
            Abbrechen
          </button>
          <button
            onClick={handleDelete}
            disabled={deleting}
            className="px-4 py-2 text-sm text-white bg-red-600 hover:bg-red-700 rounded-lg font-medium transition-colors disabled:opacity-50 flex items-center gap-2"
          >
            {deleting && <Loader2 className="w-4 h-4 animate-spin" />}
            Endgueltig loeschen
          </button>
        </div>
      </div>
    </div>
  )
}