"use client";

import { Link } from "@/i18n/routing";
import { cn } from "@/lib/utils";
import { Link2, SearchCheck, ShieldCheck } from "lucide-react";
import { useTranslations } from "next-intl";

const INCIDENT_ID_RE = /^INC-\d{8}-[A-Z0-9]{4,}$/;

function normalizeIncidentIds(incidentIds?: Array<string | null | undefined>) {
  return Array.from(
    new Set(
      (incidentIds ?? [])
        .map((incidentId) => String(incidentId || "").trim().toUpperCase())
        .filter((incidentId) => INCIDENT_ID_RE.test(incidentId))
    )
  );
}

function boolLabel(value: boolean | null | undefined, emptyLabel: string) {
  if (value === true) return "true";
  if (value === false) return "false";
  return emptyLabel;
}

export interface IncidentEvidenceHeaderProps {
  projectId?: string | null;
  runId?: string | null;
  incidentIds?: Array<string | null | undefined>;
  dryRunCount?: number | null;
  latestRoute?: string | null;
  writesIncidentState?: boolean | null;
  writesAutoRepairResult?: boolean | null;
  className?: string;
}

export function IncidentEvidenceHeader({
  projectId,
  runId,
  incidentIds,
  dryRunCount,
  latestRoute,
  writesIncidentState,
  writesAutoRepairResult,
  className,
}: IncidentEvidenceHeaderProps) {
  const t = useTranslations("awooop.incidentEvidence");
  const normalizedIncidentIds = normalizeIncidentIds(incidentIds);
  const visibleIncidentIds = normalizedIncidentIds.slice(0, 3);
  const hiddenCount = Math.max(normalizedIncidentIds.length - visibleIncidentIds.length, 0);
  const emptyLabel = t("empty");
  const route = latestRoute && latestRoute !== "--" ? latestRoute : emptyLabel;
  const safeProjectId = projectId || "awoooi";
  const runHref = runId
    ? `/awooop/runs/${runId}?project_id=${encodeURIComponent(safeProjectId)}`
    : null;

  return (
    <section className={cn("border border-[#e0ddd4] bg-white", className)}>
      <div className="flex flex-wrap items-start justify-between gap-4 border-b border-[#e0ddd4] bg-[#faf9f3] px-4 py-3">
        <div className="flex min-w-0 items-start gap-3">
          <span className="flex h-9 w-9 shrink-0 items-center justify-center border border-[#9bb6d9] bg-[#eef5ff] text-[#1f5b9b]">
            <SearchCheck className="h-4 w-4" aria-hidden="true" />
          </span>
          <div className="min-w-0">
            <h3 className="text-sm font-semibold text-[#141413]">{t("title")}</h3>
            <p className="mt-1 text-xs leading-5 text-[#77736a]">{t("subtitle")}</p>
          </div>
        </div>
        {runHref && (
          <Link
            href={runHref as never}
            className="inline-flex items-center gap-1.5 border border-[#d8d3c7] bg-white px-2.5 py-1 text-xs font-semibold text-[#141413] hover:border-[#d97757]"
          >
            {t("runLink")}
            <Link2 className="h-3.5 w-3.5" aria-hidden="true" />
          </Link>
        )}
      </div>

      <div className="grid gap-px bg-[#e0ddd4] lg:grid-cols-[1.5fr_1fr_1fr_1fr]">
        <div className="min-w-0 bg-white px-4 py-3">
          <div className="text-xs font-semibold text-[#77736a]">{t("incidentLabel")}</div>
          {visibleIncidentIds.length > 0 ? (
            <div className="mt-2 flex flex-wrap gap-1.5">
              {visibleIncidentIds.map((incidentId) => (
                <Link
                  key={incidentId}
                  href={`/awooop/runs?project_id=${encodeURIComponent(safeProjectId)}&incident_id=${encodeURIComponent(incidentId)}` as never}
                  className="inline-flex items-center border border-[#d8d3c7] bg-[#faf9f3] px-2 py-1 font-mono text-xs font-semibold text-[#2e2b26] hover:border-[#1f6feb] hover:bg-[#edf4ff] hover:text-[#0f4fa8]"
                  title={t("filterTitle", { incidentId })}
                >
                  {incidentId}
                </Link>
              ))}
              {hiddenCount > 0 && (
                <span className="inline-flex items-center border border-[#d8d3c7] bg-white px-2 py-1 font-mono text-xs text-[#5f5b52]">
                  {t("more", { count: hiddenCount })}
                </span>
              )}
            </div>
          ) : (
            <p className="mt-2 text-sm text-[#77736a]">{t("notLinked")}</p>
          )}
        </div>

        <div className="min-w-0 bg-white px-4 py-3">
          <div className="flex items-center gap-1.5 text-xs font-semibold text-[#77736a]">
            <ShieldCheck className="h-3.5 w-3.5" aria-hidden="true" />
            {t("dryRuns")}
          </div>
          <p className="mt-2 font-mono text-xl font-semibold text-[#141413]">
            {typeof dryRunCount === "number" ? dryRunCount : emptyLabel}
          </p>
        </div>

        <div className="min-w-0 bg-white px-4 py-3">
          <div className="text-xs font-semibold text-[#77736a]">{t("route")}</div>
          <p className="mt-2 truncate font-mono text-sm text-[#141413]" title={route}>
            {route}
          </p>
        </div>

        <div className="min-w-0 bg-white px-4 py-3">
          <div className="text-xs font-semibold text-[#77736a]">{t("writes")}</div>
          <p className="mt-2 font-mono text-sm text-[#141413]">
            {t("writeFlags", {
              incident: boolLabel(writesIncidentState, emptyLabel),
              autoRepair: boolLabel(writesAutoRepairResult, emptyLabel),
            })}
          </p>
        </div>
      </div>
    </section>
  );
}
