import { Dialog, DialogContent, DialogHeader, DialogTitle, Button } from '@/components/ui';
import { useCallback, useState } from 'react';
import { TrashIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';

interface DeleteExchangeDialogProps {
  isOpen: boolean;
  exchangeId: string;
  exchangeName: string;
  providerMappingCount: number;
  onClose: () => void;
  onConfirmDelete: (exchangeId: string) => Promise<boolean>;
}

export function DeleteExchangeDialog({
  isOpen,
  exchangeId,
  exchangeName,
  providerMappingCount,
  onClose,
  onConfirmDelete,
}: DeleteExchangeDialogProps) {
  const [loading, setLoading] = useState(false);

  const handleConfirm = useCallback(async () => {
    setLoading(true);
    try {
      const success = await onConfirmDelete(exchangeId);
      if (success) {
        onClose();
      }
    } catch (error) {
      // Error deleting exchange - could add toast notification here
    } finally {
      setLoading(false);
    }
  }, [exchangeId, onConfirmDelete, onClose]);

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-danger">
            <ExclamationTriangleIcon className="h-5 w-5" />
            Delete Exchange
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-4">
          <div className="p-4 bg-danger/10 border border-danger/20 rounded-lg">
            <p className="text-sm text-text-primary">
              Are you sure you want to delete <strong>"{exchangeName}"</strong>?
            </p>
          </div>

          <div className="space-y-2 text-sm text-text-secondary">
            <p className="font-medium text-text-primary">This action will:</p>
            <ul className="list-disc list-inside space-y-1 ml-2">
              <li>Hide the exchange from all lists</li>
              {providerMappingCount > 0 && (
                <li className="text-yellow-400">
                  Delete {providerMappingCount} provider mapping{providerMappingCount !== 1 ? 's' : ''}
                </li>
              )}
              <li>Make provider exchanges available for remapping</li>
            </ul>
          </div>

          {providerMappingCount > 0 && (
            <div className="p-3 bg-yellow-500/10 border border-yellow-500/20 rounded-md">
              <div className="flex items-start gap-2">
                <ExclamationTriangleIcon className="h-4 w-4 text-yellow-400 mt-0.5 flex-shrink-0" />
                <div className="text-sm">
                  <p className="font-medium text-yellow-400">Warning</p>
                  <p className="text-text-secondary">
                    This exchange has {providerMappingCount} provider mapping{providerMappingCount !== 1 ? 's' : ''}. 
                    Deleting will permanently remove these mappings and make the provider exchanges 
                    available for mapping to other exchanges.
                  </p>
                </div>
              </div>
            </div>
          )}

          <div className="bg-surface-secondary p-3 rounded-md">
            <p className="text-xs text-text-muted">
              <strong>Note:</strong> This action cannot be undone. The exchange will be hidden 
              but can be restored by directly updating the database if needed.
            </p>
          </div>
        </div>

        {/* Action Buttons */}
        <div className="flex justify-end gap-2 pt-4">
          <Button type="button" variant="outline" onClick={onClose} disabled={loading}>
            Cancel
          </Button>
          <Button
            type="button"
            onClick={handleConfirm}
            disabled={loading}
            className="bg-danger hover:bg-danger/90 text-white"
          >
            <TrashIcon className="h-4 w-4 mr-1" />
            {loading ? 'Deleting...' : 'Delete Exchange'}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}