import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from './ui/alert-dialog';
import { PowerOff, AlertTriangle } from 'lucide-react';
import { __, sprintf } from '@/lib/i18n';

export interface DeactivateWarning {
  slug: string;
  packageName: string;
  workflows: Array<{ id: number; name: string }>;
  message: string;
}

interface DeactivateWarningDialogProps {
  warning: DeactivateWarning | null;
  onConfirm: () => void;
  onCancel: () => void;
}

export function DeactivateWarningDialog({
  warning,
  onConfirm,
  onCancel,
}: DeactivateWarningDialogProps) {
  return (
    <AlertDialog open={!!warning} onOpenChange={(open) => !open && onCancel()}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle className="flex items-center gap-2">
            <PowerOff className="w-5 h-5" />
            {sprintf(__('Deactivate %s?'), warning?.packageName ?? '')}
          </AlertDialogTitle>
          <AlertDialogDescription asChild>
            <div className="space-y-3">
              <div className="flex items-start gap-2 p-3 rounded-md bg-amber-50 border border-amber-200 text-amber-800">
                <AlertTriangle className="w-4 h-4 mt-0.5 shrink-0" />
                <p className="text-sm">{warning?.message}</p>
              </div>
              <div className="text-sm text-slate-600">
                <p className="font-medium mb-1">{__('Affected workflows:')}</p>
                <ul className="list-disc list-inside space-y-0.5">
                  {warning?.workflows.map((workflow) => (
                    <li key={workflow.id}>{workflow.name}</li>
                  ))}
                </ul>
              </div>
            </div>
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>{__('Cancel')}</AlertDialogCancel>
          <AlertDialogAction
            onClick={onConfirm}
            className="bg-amber-600 hover:bg-amber-700 gap-2"
          >
            <PowerOff className="w-4 h-4" />
            {__('Deactivate')}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}