import React, { useState } from 'react';
import { Icons } from './IconSet';

interface DeleteProjectModalProps {
  isOpen: boolean;
  onClose: () => void;
  projectId: string;
  projectTitle: string;
  onDelete: () => Promise<void>;
}

const DeleteProjectModal: React.FC<DeleteProjectModalProps> = ({
  isOpen,
  onClose,
  projectId,
  projectTitle,
  onDelete
}) => {
  const [confirmText, setConfirmText] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const requiredText = `LÖSCHE ${projectTitle}`;

  const handleDelete = async () => {
    if (confirmText !== requiredText) {
      setError('Bitte geben Sie den korrekten Text ein');
      return;
    }

    try {
      setLoading(true);
      setError(null);
      await onDelete();
      onClose();
    } catch (err) {
      console.error('Error deleting project:', err);
      setError('Fehler beim Löschen des Projekts');
    } finally {
      setLoading(false);
    }
  };

  const resetAndClose = () => {
    setConfirmText('');
    setError(null);
    onClose();
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
      <div className="bg-surface border border-red-500/20 rounded-xl w-full max-w-md shadow-2xl">
        <div className="p-4 border-b border-red-500/20 bg-red-500/5">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-red-500/20 rounded-full flex items-center justify-center">
              <Icons.Shield className="w-5 h-5 text-red-400" />
            </div>
            <div>
              <h3 className="font-bold text-red-400">Projekt löschen</h3>
              <p className="text-sm text-red-300">Diese Aktion kann nicht rückgängig gemacht werden</p>
            </div>
          </div>
        </div>

        <div className="p-6">
          <div className="mb-6">
            <h4 className="font-semibold text-textMain mb-2">
              Sind Sie absolut sicher?
            </h4>
            <p className="text-sm text-textMuted mb-4">
              Das Löschen von <strong>"{projectTitle}"</strong> wird alle zugehörigen Daten unwiderruflich entfernen:
            </p>
            <ul className="text-sm text-textMuted space-y-1 mb-4">
              <li>• Alle Shop-Artikel und Dienstleistungen</li>
              <li>• Die komplette Bildergalerie</li>
              <li>• Alle Mitarbeiter-Zuweisungen</li>
              <li>• Projekt-Beschreibung und Einstellungen</li>
            </ul>
          </div>

          <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4 mb-6">
            <label className="block text-sm font-medium text-red-400 mb-2">
              Geben Sie <strong>{requiredText}</strong> ein, um zu bestätigen:
            </label>
            <input
              type="text"
              value={confirmText}
              onChange={(e) => setConfirmText(e.target.value)}
              className="w-full bg-[#0b0b0d] border border-red-500/30 rounded p-2 text-sm font-mono"
              placeholder={requiredText}
            />
            {error && (
              <p className="text-red-400 text-xs mt-2">{error}</p>
            )}
          </div>

          <div className="flex gap-3">
            <button
              onClick={resetAndClose}
              disabled={loading}
              className="flex-1 px-4 py-2 text-sm font-medium text-textMuted hover:text-white transition-colors border border-border rounded"
            >
              Abbrechen
            </button>
            <button
              onClick={handleDelete}
              disabled={confirmText !== requiredText || loading}
              className="flex-1 bg-red-500 hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed text-white px-4 py-2 rounded text-sm font-medium transition-colors flex items-center justify-center gap-2"
            >
              {loading ? (
                <>
                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                  Lösche...
                </>
              ) : (
                <>
                  <Icons.Shield className="w-4 h-4" />
                  Endgültig löschen
                </>
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DeleteProjectModal;