import { AlertTriangle } from 'lucide-react';
import { Button } from '@/components/ui/button';

export default function NoiseWarningModal({ flow, isOpen, onClose }) {
  if (!isOpen || !flow || flow.signalQuality === 'CLEAN') return null;
  
  const noiseScore = flow.noiseScore || 0;
  const warnings = flow.warnings || [];
  
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={onClose}>
      <div 
        className="bg-slate-900 border border-orange-500 rounded-lg p-6 max-w-md w-full mx-4"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center gap-3 mb-4">
          <AlertTriangle className="w-6 h-6 text-orange-400" />
          <h3 className="text-lg font-bold text-orange-100">
            Signal Quality Warning
          </h3>
        </div>
        
        <div className="space-y-3 text-sm text-slate-300">
          <p>
            This signal has a <strong className="text-orange-400">noise score of {noiseScore}/100</strong>.
          </p>
          
          {warnings.length > 0 && (
            <div className="bg-slate-800 p-3 rounded">
              <div className="font-semibold mb-2 text-slate-200">Detected Issues:</div>
              <ul className="space-y-1 text-xs">
                {warnings.map((warning, idx) => (
                  <li key={idx} className="text-slate-400">• {warning}</li>
                ))}
              </ul>
            </div>
          )}
          
          <p className="text-orange-300">
            <strong>Recommendation:</strong> Proceed with caution or wait for cleaner signal.
          </p>
        </div>
        
        <div className="flex gap-2 mt-4">
          <Button
            onClick={onClose}
            className="flex-1 px-4 py-2 bg-orange-600 hover:bg-orange-500 text-white rounded"
          >
            I Understand
          </Button>
        </div>
      </div>
    </div>
  );
}

