const SEVERITY_COLOR = {
  critical: 'bg-ap-red',
  high: 'bg-ap-orange',
  medium: 'bg-ap-yellow',
  low: 'bg-ap-blue',
  info: 'bg-ap-silver-dim',
};

const SEVERITY_TEXT = {
  critical: 'text-ap-red',
  high: 'text-ap-orange',
  medium: 'text-ap-yellow',
  low: 'text-ap-blue',
  info: 'text-ap-silver-dim',
};

function formatTimestamp(ts) {
  if (!ts) return '--:--:--';
  const d = ts instanceof Date ? ts : new Date(ts);
  if (Number.isNaN(d.getTime())) return '--:--:--';
  const h = String(d.getHours()).padStart(2, '0');
  const m = String(d.getMinutes()).padStart(2, '0');
  const s = String(d.getSeconds()).padStart(2, '0');
  return `${h}:${m}:${s}`;
}

function SeverityDot({ severity }) {
  const bg = SEVERITY_COLOR[severity] || SEVERITY_COLOR.info;
  return <span className={`inline-block w-1.5 h-1.5 ${bg} shrink-0`} />;
}

function BlockedBadge({ blocked }) {
  if (blocked) {
    return (
      <span className="px-1.5 py-0.5 text-[9px] font-mono font-bold uppercase bg-ap-green/20 text-ap-green select-none">
        Blocked
      </span>
    );
  }
  return (
    <span className="px-1.5 py-0.5 text-[9px] font-mono font-bold uppercase bg-ap-red/20 text-ap-red select-none">
      Allowed
    </span>
  );
}

function AlertRow({ alert }) {
  const {
    timestamp,
    severity = 'info',
    attackType,
    sourceIP,
    targetIP,
    source,
    country,
    port,
    blocked,
  } = alert;

  const sevText = SEVERITY_TEXT[severity] || SEVERITY_TEXT.info;

  return (
    <div className="px-3 py-2 border-b border-white/5 hover:bg-white/5 transition-colors cursor-default">
      {/* Top line */}
      <div className="flex items-center gap-2">
        <SeverityDot severity={severity} />
        <span className={`font-mono text-xs font-semibold ${sevText}`}>
          {severity.toUpperCase()}
        </span>
        <span className="font-mono text-xs text-ap-silver truncate">
          {attackType}
        </span>
        <span className="ml-auto font-mono text-[11px] text-ap-silver-dim tabular-nums shrink-0">
          {formatTimestamp(timestamp)}
        </span>
      </div>

      {/* Bottom line */}
      <div className="flex items-center gap-2 mt-1">
        <span className="font-mono text-[11px] text-ap-silver-dim truncate">
          {sourceIP}
          {port != null ? `:${port}` : ''}
          <span className="text-ap-silver-dim/50 mx-1">{'->'}</span>
          {targetIP}
        </span>
        {country && (
          <span className="font-mono text-[9px] text-ap-silver-dim uppercase shrink-0">
            [{country}]
          </span>
        )}
        {source && (
          <span className="font-mono text-[10px] text-ap-silver-dim/70 truncate">
            {source}
          </span>
        )}
        <span className="ml-auto shrink-0">
          <BlockedBadge blocked={blocked} />
        </span>
      </div>
    </div>
  );
}

export default function ThreatFeed({ alerts = [] }) {
  return (
    <div className="panel h-full flex flex-col">
      {/* Panel header */}
      <div className="panel-header">
        <span className="dot" />
        <span>Threat Feed</span>
        <span className="ml-auto px-1.5 py-0.5 text-[9px] font-mono font-bold tabular-nums bg-ap-red-dim text-ap-red select-none">
          {alerts.length}
        </span>
      </div>

      {/* Scrollable alert list */}
      <div className="flex-1 overflow-y-auto">
        {alerts.length === 0 && (
          <div className="px-3 py-6 text-center font-mono text-xs text-ap-silver-dim">
            No alerts
          </div>
        )}
        {alerts.map((alert) => (
          <AlertRow key={alert.id} alert={alert} />
        ))}
      </div>
    </div>
  );
}
