frontend/src/components/impact/ImpactGraph.jsx

import { AlertTriangle, ArrowRight, Box } from 'lucide-react';
import RiskBadge from './RiskBadge';

export default function ImpactGraph({ impact }) {
  const services = Array.isArray(impact?.impacted_services) ? impact.impacted_services : impact?.impacted_services ? [impact.impacted_services] : [];
  if (!impact) {
    return (
      <div className="rounded-lg border border-white/10 bg-white/[0.03] p-5 text-sm text-slate-500">
        Select a file to view its projected blast radius.
      </div>
    );
  }

  return (
    <div className="space-y-3">
      <div className="flex items-start gap-3 rounded-lg border border-amber-400/20 bg-amber-500/8 p-3">
        <AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-200" />
        <div className="min-w-0">
          <p className="text-sm font-semibold text-white">Changed File</p>
          <p className="path-text font-mono text-xs text-slate-400">{impact.target_file || 'Selected module'}</p>
        </div>
      </div>
      {services.map((service, index) => {
        const normalized = typeof service === 'object' ? service : { name: String(service), severity: 'medium', description: 'Impacted by the selected change.' };
        return (
        <div key={`${normalized.name}-${index}`} className="flex items-center gap-3">
          <ArrowRight className="h-4 w-4 flex-shrink-0 text-slate-600" />
          <div className="flex-1 rounded-lg border border-white/10 bg-white/[0.03] p-3">
            <div className="flex items-start gap-3">
              <Box className="mt-0.5 h-4 w-4 flex-shrink-0 text-cyan-200" />
              <div className="min-w-0 flex-1">
                <div className="mb-1 flex items-center gap-2">
                  <p className="path-text text-sm font-semibold text-white">{normalized.name}</p>
                  <RiskBadge level={normalized.severity} />
                </div>
                <p className="text-xs leading-relaxed text-slate-500">{normalized.description}</p>
              </div>
            </div>
          </div>
        </div>
        );
      })}
    </div>
  );
}