// PredictiveAlerts — warnings for queue backlog, unavailable tools, stuck jobs.

function PredictiveAlerts({ tools, queue, jobs }) {
  const alerts = React.useMemo(() => {
    const result = [];
    const queuedJobs = queue?.jobs?.filter(j => j.status === "queued") || [];
    if (queuedJobs.length > 10) {
      result.push({ type: "warning", message: `Queue backlog: ${queuedJobs.length} jobs waiting` });
    }
    const failingTools = tools.filter(t => t.status === "unavailable");
    if (failingTools.length > 2) {
      result.push({ type: "critical", message: `${failingTools.length} tools unavailable` });
    }
    const stuckJobs = jobs.filter(j => j.status === "running" && j.started_at && (Date.now() - j.started_at * 1000) > 300000);
    if (stuckJobs.length > 0) {
      result.push({ type: "warning", message: `${stuckJobs.length} jobs running >5 min` });
    }
    return result;
  }, [tools, queue, jobs]);

  if (alerts.length === 0) return null;

  return (
    <div className="mb-4 space-y-2">
      {alerts.map((alert) => (
        <div key={`${alert.type}-${alert.message}`} className={`p-3 rounded-lg border ${alert.type === "critical" ? "bg-red-50 border-red-200" : "bg-amber-50 border-amber-200"}`}>
          <span className={alert.type === "critical" ? "text-red-500" : "text-amber-500"}>{alert.type === "critical" ? "🚨" : "⚠️"}</span>
          <span className={`text-sm font-medium ml-2 ${alert.type === "critical" ? "text-red-900" : "text-amber-900"}`}>{alert.message}</span>
        </div>
      ))}
    </div>
  );
}
