import { Link } from "@tanstack/react-router";
import { SeverityBadge } from "./SeverityBadge";
import { Badge } from "~/ui/Badge";

type Alert = {
  number: number;
  tool: string;
  ruleId: string;
  ruleName: string | null;
  severity: string;
  securitySeverity: string | null;
  message: string;
  path: string | null;
  startLine: number | null;
  commitSha: string;
  state: string;
};

export function CodeAlertList({ owner, repo, alerts }: { owner: string; repo: string; alerts: Alert[] }) {
  return (
    <ul className="divide-y divide-kumo-hairline">
      {alerts.map((alert) => (
        <li key={alert.number} className="flex items-start gap-3 px-4 py-3">
          <span className="pt-0.5 font-mono text-xs text-kumo-subtle">#{alert.number}</span>
          <div className="min-w-0 flex-1">
            <Link
              to="/$owner/$repo/security/code-scanning/$number"
              params={{ owner, repo, number: String(alert.number) }}
              className="block truncate text-sm font-medium text-kumo-strong hover:text-accent-400"
            >
              {alert.ruleName ?? alert.ruleId}
            </Link>
            <p className="truncate text-xs text-kumo-subtle">{alert.message}</p>
            <div className="text-xs text-kumo-subtle">
              {alert.tool} · <span className="font-mono">{alert.ruleId}</span>
              {alert.path && (
                <>
                  {" · "}
                  <Link
                    to="/$owner/$repo/blob/$"
                    params={{ owner, repo, _splat: `${alert.commitSha}/${alert.path}` }}
                    className="font-mono hover:text-accent-400"
                  >
                    {alert.path}
                    {alert.startLine ? `:${alert.startLine}` : ""}
                  </Link>
                </>
              )}
            </div>
          </div>
          <SeverityBadge severity={alert.securitySeverity ?? alert.severity} />
          {alert.state !== "open" && <Badge>{alert.state}</Badge>}
        </li>
      ))}
    </ul>
  );
}