import { useMemo, useState, type ReactNode } from "react"
import {
  Activity,
  AlertOctagon,
  Bug,
  CheckCircle2,
  ChevronDown,
  ChevronUp,
  Clock,
  EyeOff,
  ExternalLink,
  Globe,
  MonitorSmartphone,
  RefreshCw,
  RotateCcw,
  ScrollText,
  ShieldBan,
  Sparkles,
  Loader2,
  X,
} from "lucide-react"
import { useObservabilityData } from "../hooks/useObservabilityData"
import { authFetch } from "../lib/auth"
import { formatRelativeTime } from "../lib/timeUtils"
import {
  issueSeverityTone,
  issueStatusOf,
  latestBreadcrumbs,
  latestStacktrace,
  sampleContext,
  sparklineSeries,
  strongestCorrelate,
  type SeverityTone,
} from "../lib/issue-utils"
import { NeedleTestModal } from "./NeedleTestModal"
import { FilterBar, type FilterChip } from "./FilterBar"
import type { Issue, IssueSample } from "../lib/types"

const kindMeta: Record<string, { label: string; Icon: typeof Activity }> = {
  span_error: { label: "Trace error", Icon: Activity },
  log_error: { label: "Log error", Icon: ScrollText },
  frontend_error: { label: "Frontend error", Icon: Globe },
}

type StatusFilter = "all" | "open" | "resolved" | "ignored"
type KindFilter = "all" | "span_error" | "log_error" | "frontend_error"

interface HoneypotIP {
  ip: string
  count: number
  first_seen: string
  last_seen: string
  promoted_until: string
}

interface DetectorTestResult {
  passed?: boolean
  scenario?: string
  row?: {
    baselineErrorRate: number
    futureErrorCount: number
    futureErrorRate: number
    labelKnown: boolean
    label: boolean
  }
  error?: string
}

interface NeedleResult {
  action?: string
  tool?: string
  confidence?: number
  reasoning?: string
  latency_ms?: number
  arguments?: Record<string, unknown>
  error?: string
}

const statusTabs: { value: StatusFilter; label: string }[] = [
  { value: "all", label: "All" },
  { value: "open", label: "Open" },
  { value: "resolved", label: "Resolved" },
  { value: "ignored", label: "Ignored" },
]

const scopeOptions: { value: KindFilter; label: string }[] = [
  { value: "all", label: "All kinds" },
  { value: "span_error", label: "Traces" },
  { value: "log_error", label: "Logs" },
  { value: "frontend_error", label: "Frontend" },
]

const toneDot: Record<SeverityTone, string> = {
  critical: "bg-ds-critical",
  warn: "bg-ds-warn",
  ok: "bg-ds-ok",
  muted: "bg-ds-text-3",
}

const tonePill: Record<SeverityTone, string> = {
  critical: "bg-ds-critical-bg text-ds-critical",
  warn: "bg-ds-warn-bg text-ds-warn",
  ok: "bg-ds-ok/10 text-ds-ok",
  muted: "bg-ds-fill text-ds-text-3",
}

const toneLabel: Record<SeverityTone, string> = {
  critical: "Open",
  warn: "Open",
  ok: "Resolved",
  muted: "Ignored",
}

const toneLine: Record<SeverityTone, string> = {
  critical: "border-l-ds-critical",
  warn: "border-l-ds-warn",
  ok: "border-l-ds-ok",
  muted: "border-l-ds-line-strong",
}

/** The sparkline + expected-band + breach segment described by the anomaly presentation spec. */
const IssueSparkline = ({ issue }: { issue: Issue }) => {
  const { points, max, reference, breachIndex } = sparklineSeries(issue, 24)
  const width = 100
  const height = 100
  const step = width / (points.length - 1)
  const toY = (v: number) => height - (v / max) * (height - 8) - 4

  const observedPoints = points.map((p, i) => `${(i * step).toFixed(1)},${toY(p.count).toFixed(1)}`).join(" ")

  const hasBreach = breachIndex !== null
  const breachPath = hasBreach
    ? points
        .slice(breachIndex)
        .map((p, i) => `${i === 0 ? "M" : "L"}${((breachIndex + i) * step).toFixed(1)},${toY(p.count).toFixed(1)}`)
        .join(" ")
    : ""
  const detectX = hasBreach ? breachIndex * step : null
  const refY = toY(reference)
  const bandHeight = Math.max(height - refY - 4, 6)

  const description = hasBreach
    ? `Hourly occurrence count over the last 24 hours, climbing above the period average roughly ${points.length - breachIndex} hours ago and still elevated`
    : `Hourly occurrence count over the last 24 hours, staying within the period average`

  return (
    <svg
      width="100%"
      height="56"
      viewBox={`0 0 ${width} ${height}`}
      preserveAspectRatio="none"
      role="img"
      aria-label={description}
    >
      <rect x={0} y={refY} width={width} height={bandHeight} fill="var(--ds-fill)" />
      <polyline
        points={observedPoints}
        fill="none"
        stroke="var(--ds-text-3)"
        strokeWidth="1.6"
        vectorEffect="non-scaling-stroke"
      />
      {hasBreach && (
        <path d={breachPath} fill="none" stroke="var(--ds-critical)" strokeWidth="2.2" vectorEffect="non-scaling-stroke" />
      )}
      {hasBreach && detectX !== null && (
        <line
          x1={detectX}
          y1={0}
          x2={detectX}
          y2={height}
          stroke="var(--ds-line-strong)"
          strokeWidth="1"
          strokeDasharray="3 4"
          vectorEffect="non-scaling-stroke"
        />
      )}
    </svg>
  )
}

const StatCell = ({ label, value, tone }: { label: string; value: ReactNode; tone?: SeverityTone }) => (
  <div className="flex flex-1 flex-col gap-1">
    <span className="text-[10.5px] font-semibold uppercase tracking-[0.09em] text-ds-text-3">{label}</span>
    <span
      className={`font-[family-name:var(--font-display)] text-[18px] font-bold ${
        tone ? (tone === "critical" ? "text-ds-critical" : tone === "warn" ? "text-ds-warn" : tone === "ok" ? "text-ds-ok" : "text-ds-text") : "text-ds-text"
      }`}
    >
      {value}
    </span>
  </div>
)

const StacktraceView = ({ stacktrace }: { stacktrace: string }) => (
  <pre className="max-h-64 overflow-auto rounded-[10px] border border-ds-line bg-ds-bg p-3 font-[family-name:var(--font-data)] text-[11px] leading-relaxed text-ds-text-2 whitespace-pre-wrap break-all">
    {stacktrace}
  </pre>
)

const BreadcrumbsView = ({ issue }: { issue: Issue }) => {
  const crumbs = latestBreadcrumbs(issue)
  if (!crumbs.length) return null
  return (
    <div className="space-y-1.5">
      <p className="flex items-center gap-1.5 text-[10.5px] font-bold uppercase tracking-widest text-ds-text-3">
        <Clock className="h-3 w-3" aria-hidden="true" />
        Breadcrumbs before error
      </p>
      <div className="max-h-48 space-y-1 overflow-auto rounded-[10px] border border-ds-line bg-ds-bg p-3">
        {crumbs.map((crumb, idx) => (
          <div key={`${crumb.t}-${idx}`} className="flex items-baseline gap-2 font-[family-name:var(--font-data)] text-[11px]">
            <span className="shrink-0 text-ds-text-3">
              {new Date(crumb.t).toLocaleTimeString([], { hour12: false })}
            </span>
            <span className="shrink-0 rounded bg-ds-fill px-1.5 py-0.5 text-[10px] font-bold uppercase text-ds-text-2">
              {crumb.category}
            </span>
            <span className="min-w-0 break-all text-ds-text-2">{crumb.message.slice(0, 200)}</span>
          </div>
        ))}
      </div>
    </div>
  )
}

const SampleContextChips = ({ sample }: { sample: IssueSample }) => {
  const ctx = sampleContext(sample)
  if (!ctx.length) return null
  return (
    <span className="inline-flex shrink-0 items-center gap-1 rounded-full border border-ds-warn/30 bg-ds-warn-bg px-2 py-0.5 font-[family-name:var(--font-data)] text-[10.5px] font-bold text-ds-warn">
      {ctx.join(" · ")}
    </span>
  )
}

const StatusActions = ({
  issue,
  onStatusChange,
  busy,
}: {
  issue: Issue
  onStatusChange: (issue: Issue, status: string) => void
  busy: boolean
}) => {
  const status = issueStatusOf(issue)
  const actions: { to: string; label: string; Icon: typeof CheckCircle2 }[] =
    status === "open"
      ? [
          { to: "resolved", label: "Resolve", Icon: CheckCircle2 },
          { to: "ignored", label: "Ignore", Icon: EyeOff },
        ]
      : [{ to: "open", label: "Reopen", Icon: RotateCcw }]

  return (
    <div className="flex items-center gap-2">
      {actions.map(({ to, label, Icon }) => (
        <button
          key={to}
          type="button"
          disabled={busy}
          onClick={(e) => {
            e.stopPropagation()
            onStatusChange(issue, to)
          }}
          className="inline-flex items-center gap-1.5 rounded-[9px] border border-ds-line-strong px-2.5 py-1.5 text-[12.5px] font-medium text-ds-text-2 transition-colors hover:bg-ds-surface-2 hover:text-ds-text disabled:opacity-50"
        >
          <Icon className="h-3.5 w-3.5" aria-hidden="true" />
          {label}
        </button>
      ))}
    </div>
  )
}

const IssueCard = ({
  issue,
  onStatusChange,
  statusBusy,
}: {
  issue: Issue
  onStatusChange: (issue: Issue, status: string) => void
  statusBusy: boolean
}) => {
  const { setActiveTraceId, setActiveSpanId, setActiveTab } = useObservabilityData()
  const [expanded, setExpanded] = useState(false)
  const [needleResult, setNeedleResult] = useState<NeedleResult | null>(null)
  const [needleLoading, setNeedleLoading] = useState(false)

  const handleNeedleTriage = async () => {
    setNeedleLoading(true)
    try {
      const response = await authFetch("/api/needle/classify", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ issue_id: issue.id }),
      })
      setNeedleResult(await response.json())
    } catch (err) {
      setNeedleResult({ error: err instanceof Error ? err.message : String(err) })
    } finally {
      setNeedleLoading(false)
    }
  }

  const meta = kindMeta[issue.kind] ?? { label: issue.kind, Icon: Bug }
  const tone = issueSeverityTone(issue)
  const latestSample = issue.samples[issue.samples.length - 1]
  const stacktrace = latestStacktrace(issue)
  const hasMappedStacktrace = issue.samples.some((sample) => Boolean(sample.resolvedStacktrace))
  const contextSample = issue.samples.find((s) => s.httpMethod || s.httpRoute || s.httpStatus)
  const correlate = strongestCorrelate(issue)

  const viewTrace = (traceId: string, spanId?: string) => {
    setActiveTraceId(traceId)
    if (spanId) setActiveSpanId(spanId)
    setActiveTab("tab1")
  }

  const metaParts = [`service=${issue.service}`]
  if (contextSample?.httpMethod && contextSample?.httpRoute) {
    metaParts.push(`route=${contextSample.httpMethod} ${contextSample.httpRoute}`)
  } else if (contextSample?.httpRoute) {
    metaParts.push(`route=${contextSample.httpRoute}`)
  }
  if (issue.affectedServices.length > 1) {
    metaParts.push(`affects=${issue.affectedServices.length} services`)
  }

  return (
    <article className={`flex flex-col gap-3 rounded-[14px] border border-ds-line border-l-[3px] ${toneLine[tone]} bg-ds-surface`}>
      <div className="flex w-full flex-wrap items-start gap-4 px-5 pt-[18px] pb-1">
        <button
          type="button"
          onClick={() => setExpanded((v) => !v)}
          aria-expanded={expanded}
          aria-label={`${expanded ? "Collapse" : "Expand"} details for ${issue.title}`}
          className="flex min-w-0 flex-1 flex-col gap-1.5 text-left"
        >
          <div className="flex flex-wrap items-center gap-2.5">
            <span className={`inline-flex h-[23px] shrink-0 items-center gap-1.5 whitespace-nowrap rounded-[6px] px-2 text-[10.5px] font-bold uppercase tracking-wider ${tonePill[tone]}`}>
              {toneLabel[tone]}
            </span>
            <span className="inline-flex h-[23px] shrink-0 items-center gap-1.5 whitespace-nowrap rounded-[6px] border border-ds-line-strong px-2 text-[10.5px] font-bold uppercase tracking-wider text-ds-text-2">
              <meta.Icon className="h-3 w-3 shrink-0" aria-hidden="true" />
              {meta.label}
            </span>
            <span className="text-[12.5px] text-ds-text-3">
              Detected {formatRelativeTime(issue.firstSeen / 1e6)} · last seen{" "}
              {formatRelativeTime(issue.lastSeen / 1e6)}
            </span>
          </div>
          <h3 className="font-[family-name:var(--font-display)] text-[17px] font-bold leading-snug text-ds-text break-all">
            {issue.title}
          </h3>
          <p className="font-[family-name:var(--font-data)] text-[12px] text-ds-text-3">{metaParts.join(" · ")}</p>
        </button>

        <div className="flex shrink-0 items-center gap-2">
          {latestSample?.traceId && (
            <button
              type="button"
              onClick={() => viewTrace(latestSample.traceId!, latestSample.spanId)}
              className="inline-flex h-9 items-center rounded-[9px] bg-ds-accent px-3.5 text-[13px] font-semibold text-ds-on-accent"
            >
              View trace
            </button>
          )}
          <StatusActions issue={issue} onStatusChange={onStatusChange} busy={statusBusy} />
          <button
            type="button"
            onClick={() => setExpanded((v) => !v)}
            aria-expanded={expanded}
            aria-label={`${expanded ? "Collapse" : "Expand"} details for ${issue.title}`}
            className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[9px] text-ds-text-3 hover:bg-ds-surface-2 hover:text-ds-text-2"
          >
            {expanded ? (
              <ChevronUp className="h-4 w-4" aria-hidden="true" />
            ) : (
              <ChevronDown className="h-4 w-4" aria-hidden="true" />
            )}
          </button>
        </div>
      </div>

      <div className="px-5">
        <IssueSparkline issue={issue} />
      </div>

      <div className="flex flex-wrap gap-5 border-t border-ds-fill px-5 py-3">
        <StatCell label="Occurrences" value={`×${issue.count}`} />
        <StatCell label="Affected services" value={issue.affectedServices.length || 1} />
        <StatCell label="First seen" value={formatRelativeTime(issue.firstSeen / 1e6)} />
        <div className="flex flex-[1.4] flex-col gap-1">
          <span className="text-[10.5px] font-semibold uppercase tracking-[0.09em] text-ds-text-3">Strongest correlate</span>
          {correlate ? (
            <span className="font-[family-name:var(--font-data)] text-[13px] font-medium text-ds-text">
              {correlate.key}={correlate.value}{" "}
              <span className="font-[family-name:var(--font-ui)] text-[12px] text-ds-text-3">
                {Math.round(correlate.share * 100)}% of {correlate.total} occurrences
              </span>
            </span>
          ) : (
            <span className="font-[family-name:var(--font-data)] text-[13px] font-medium text-ds-text-3">NO SIGNAL</span>
          )}
        </div>
      </div>

      {expanded && (
        <div className="flex flex-col gap-4 border-t border-ds-line bg-ds-bg px-5 py-4 text-[12.5px]">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div className="flex flex-wrap items-center gap-4 text-[11px] text-ds-text-3">
              {issue.status === "resolved" && issue.resolvedAt ? (
                <span>Resolved {formatRelativeTime(issue.resolvedAt / 1e6)}</span>
              ) : null}
              {issue.affectedServices.length > 1 && (
                <span>Affects: {issue.affectedServices.join(", ")}</span>
              )}
            </div>
          </div>

          {stacktrace && (
            <div className="space-y-1.5">
              <p className="text-[10.5px] font-bold uppercase tracking-widest text-ds-text-3">
                {hasMappedStacktrace ? "Source-mapped stacktrace" : "Stacktrace"}
              </p>
              <StacktraceView stacktrace={stacktrace} />
            </div>
          )}

          <BreadcrumbsView issue={issue} />

          <div className="flex flex-wrap gap-4 text-[11px] text-ds-text-3">
            {(contextSample?.userAgent || latestSample?.userAgent) && (
              <span className="inline-flex max-w-[360px] items-center gap-1.5 truncate" title={contextSample?.userAgent || latestSample?.userAgent}>
                <MonitorSmartphone className="h-3 w-3 shrink-0" aria-hidden="true" />
                {(contextSample?.userAgent || latestSample?.userAgent)?.slice(0, 80)}
              </span>
            )}
            {(contextSample?.release || latestSample?.release) && (
              <span>release: {contextSample?.release || latestSample?.release}</span>
            )}
            {(contextSample?.environment || latestSample?.environment) && (
              <span>env: {contextSample?.environment || latestSample?.environment}</span>
            )}
          </div>

          <div className="space-y-2">
            <button
              type="button"
              onClick={() => void handleNeedleTriage()}
              disabled={needleLoading}
              title="Classify this issue using local Needle 3 model"
              className="inline-flex h-8 items-center gap-2 rounded-[9px] border border-ds-line-strong px-3 text-[12px] font-medium text-ds-text-2 hover:text-ds-text disabled:opacity-50"
            >
              {needleLoading ? (
                <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
              ) : (
                <Sparkles className="h-3.5 w-3.5" aria-hidden="true" />
              )}
              {needleLoading ? "Needle 3 triaging…" : "Needle 3 triage"}
            </button>
            {needleResult && (
              <div className="space-y-2 rounded-[12px] border border-ds-line bg-ds-surface-2 p-3 text-[12px]">
                <div className="flex flex-wrap items-center justify-between gap-2 border-b border-ds-line pb-2">
                  <span className="flex flex-wrap items-center gap-2">
                    <span className="text-[10.5px] font-bold uppercase tracking-wider text-ds-text-3">Needle 3 action</span>
                    <span className="rounded-[6px] border border-ds-line-strong px-2 py-0.5 font-[family-name:var(--font-data)] text-ds-text">
                      {needleResult.action || needleResult.tool || "Processed"}
                    </span>
                  </span>
                  {needleResult.confidence !== undefined && (
                    <span className="font-[family-name:var(--font-data)] text-[11px] text-ds-text-3">
                      confidence{" "}
                      <span className={needleResult.confidence >= 0.6 ? "text-ds-ok" : "text-ds-warn"}>
                        {(needleResult.confidence * 100).toFixed(0)}%
                      </span>
                      {needleResult.latency_ms ? ` (${needleResult.latency_ms}ms)` : ""}
                    </span>
                  )}
                </div>
                {needleResult.reasoning && <p className="italic text-ds-text-2">&ldquo;{needleResult.reasoning}&rdquo;</p>}
                {needleResult.arguments && Object.keys(needleResult.arguments).length > 0 && (
                  <div className="flex flex-wrap gap-1.5 font-[family-name:var(--font-data)] text-[11px]">
                    {Object.entries(needleResult.arguments).map(([k, v]) => (
                      <span key={k} className="rounded-[6px] border border-ds-line bg-ds-surface px-2 py-0.5 text-ds-text-2">
                        <span className="text-ds-text-3">{k}:</span> {String(v)}
                      </span>
                    ))}
                  </div>
                )}
                {needleResult.error && (
                  <p className="font-[family-name:var(--font-data)] text-[11px] text-ds-critical">{needleResult.error}</p>
                )}
              </div>
            )}
          </div>

          <div className="space-y-2">
            <p className="text-[10.5px] font-bold uppercase tracking-widest text-ds-text-3">
              Recent occurrences ({issue.samples.length})
            </p>
            <div className="space-y-1.5">
              {[...issue.samples].reverse().map((sample, idx) => (
                <div
                  key={`${sample.timestamp}-${idx}`}
                  className="flex flex-wrap items-center gap-3 rounded-[9px] border border-ds-line bg-ds-surface px-2.5 py-1.5"
                >
                  <span className="shrink-0 font-[family-name:var(--font-data)] text-[10.5px] text-ds-text-3">
                    {new Date(sample.timestamp / 1e6).toLocaleTimeString([], {
                      hour12: false,
                      hour: "2-digit",
                      minute: "2-digit",
                      second: "2-digit",
                    })}
                  </span>
                  <SampleContextChips sample={sample} />
                  <span className="min-w-[160px] flex-1 break-all text-ds-text-2">{sample.message}</span>
                  {sample.url && (
                    <a
                      href={sample.url}
                      target="_blank"
                      rel="noreferrer"
                      onClick={(e) => e.stopPropagation()}
                      className="flex max-w-[220px] shrink-0 items-center gap-1 truncate rounded-full border border-ds-accent/30 bg-ds-accent-bg px-2.5 py-0.5 text-[10.5px] font-bold text-ds-accent"
                      title={sample.url}
                    >
                      <ExternalLink className="h-2.5 w-2.5 shrink-0" aria-hidden="true" />
                      <span className="truncate">{sample.url.replace(/^https?:\/\//, "")}</span>
                    </a>
                  )}
                  {sample.traceId && (
                    <button
                      type="button"
                      onClick={(e) => {
                        e.stopPropagation()
                        viewTrace(sample.traceId!, sample.spanId)
                      }}
                      className="flex shrink-0 items-center gap-1.5 rounded-full border border-ds-line-strong px-2.5 py-0.5 text-[10.5px] font-bold text-ds-text-2 hover:text-ds-text"
                    >
                      <Activity className="h-2.5 w-2.5" aria-hidden="true" />
                      trace:{sample.traceId.slice(0, 6)}
                    </button>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </article>
  )
}

const ServiceDeviationPanel = () => {
  const { uniqueServices, serviceHealth } = useObservabilityData()

  const rows = useMemo(() => {
    return uniqueServices
      .map((name) => {
        const health = serviceHealth[name]
        const total = health?.totalSignals ?? 0
        const errors = health?.errorCount ?? 0
        return { name, total, errors, rate: total > 0 ? errors / total : 0 }
      })
      .sort((a, b) => b.errors - a.errors || b.rate - a.rate)
      .slice(0, 8)
  }, [uniqueServices, serviceHealth])

  return (
    <section className="rounded-[14px] border border-ds-line bg-ds-surface p-4">
      <div className="mb-2 flex items-baseline gap-2">
        <h2 className="text-[11px] font-bold uppercase tracking-[0.1em] text-ds-text-3">Services by deviation</h2>
        <span className="flex-grow" />
        <span className="text-[11.5px] text-ds-text-3">{uniqueServices.length} total</span>
      </div>
      {rows.length === 0 ? (
        <p className="py-3 text-[12px] italic text-ds-text-3">Listening for service signals…</p>
      ) : (
        <ul className="flex flex-col">
          {rows.map((row) => (
            <li key={row.name} className="flex items-center gap-3 border-b border-ds-fill py-2.5 last:border-b-0">
              <span className="flex-1 truncate font-[family-name:var(--font-data)] text-[12.5px] text-ds-text">
                {row.name}
              </span>
              <div className="h-1.5 w-16 overflow-hidden rounded-full bg-ds-fill" aria-hidden="true">
                <div
                  className={`h-full rounded-full ${row.errors > 0 ? "bg-ds-critical" : "bg-ds-line-strong"}`}
                  style={{ width: `${Math.max(row.rate * 100, row.errors > 0 ? 6 : 0)}%` }}
                />
              </div>
              <span
                className={`w-16 shrink-0 text-right font-[family-name:var(--font-data)] text-[12.5px] ${
                  row.errors > 0 ? "text-ds-critical" : "text-ds-text-3"
                }`}
              >
                {row.errors > 0 ? `${(row.rate * 100).toFixed(1)}%` : "0%"}
              </span>
            </li>
          ))}
        </ul>
      )}
    </section>
  )
}

const IssueStatusPanel = ({ counts }: { counts: Record<StatusFilter, number> }) => {
  const total = counts.all || 1
  const segments: { key: StatusFilter; tone: SeverityTone }[] = [
    { key: "open", tone: "critical" },
    { key: "resolved", tone: "ok" },
    { key: "ignored", tone: "muted" },
  ]
  return (
    <section className="rounded-[14px] border border-ds-line bg-ds-surface p-4">
      <h2 className="mb-3 text-[11px] font-bold uppercase tracking-[0.1em] text-ds-text-3">Issue status</h2>
      <div className="mb-3 flex h-2 overflow-hidden rounded-full bg-ds-fill" aria-hidden="true">
        {segments.map((seg) => (
          <span
            key={seg.key}
            className={toneDot[seg.tone]}
            style={{ width: `${(counts[seg.key] / total) * 100}%` }}
          />
        ))}
      </div>
      <ul className="flex flex-col gap-2">
        {segments.map((seg) => (
          <li key={seg.key} className="flex items-center gap-2 text-[13px]">
            <span className={`h-2 w-2 rounded-full ${toneDot[seg.tone]}`} aria-hidden="true" />
            <span className="flex-1 capitalize text-ds-text-2">{seg.key}</span>
            <span className="font-[family-name:var(--font-data)] text-ds-text">{counts[seg.key]}</span>
          </li>
        ))}
      </ul>
    </section>
  )
}

interface IssuesVisualizerProps {
  issues: Issue[]
  loading: boolean
  error: string | null
  refresh: () => void
  onStatusChange: (issue: Issue, status: string) => void
  statusBusy: boolean
}

export const IssuesVisualizer = ({
  issues,
  loading,
  error,
  refresh,
  onStatusChange,
  statusBusy,
}: IssuesVisualizerProps) => {
  const { selectedServices, toggleService, resetFilters, searchQuery, setSearchQuery, uniqueServices } =
    useObservabilityData()
  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all")
  const [kindFilter, setKindFilter] = useState<KindFilter>("all")
  const [needleModalOpen, setNeedleModalOpen] = useState(false)
  const [detectorTest, setDetectorTest] = useState<DetectorTestResult | null>(null)
  const [detectorTestLoading, setDetectorTestLoading] = useState(false)
  const [excludeSpamIPs, setExcludeSpamIPs] = useState(false)
  const [showSpamIPs, setShowSpamIPs] = useState(false)
  const [spamIPs, setSpamIPs] = useState<HoneypotIP[]>([])
  const [spamIPsLoading, setSpamIPsLoading] = useState(false)
  const [spamIPsError, setSpamIPsError] = useState<string | null>(null)

  const loadSpamIPs = async () => {
    setSpamIPsLoading(true)
    setSpamIPsError(null)
    try {
      const response = await authFetch("/api/honeypot/ips")
      if (!response.ok) throw new Error(`HTTP ${response.status}`)
      setSpamIPs((await response.json()) as HoneypotIP[])
    } catch (err) {
      setSpamIPsError(err instanceof Error ? err.message : String(err))
    } finally {
      setSpamIPsLoading(false)
    }
  }

  const spamIPSet = useMemo(() => new Set(spamIPs.map((entry) => entry.ip)), [spamIPs])

  const statusCounts = useMemo(() => {
    const counts: Record<StatusFilter, number> = { all: issues.length, open: 0, resolved: 0, ignored: 0 }
    issues.forEach((issue) => {
      counts[issueStatusOf(issue)] += 1
    })
    return counts
  }, [issues])

  const filteredIssues = useMemo(() => {
    return issues.filter((issue) => {
      if (statusFilter !== "all" && issueStatusOf(issue) !== statusFilter) return false
      if (kindFilter !== "all" && issue.kind !== kindFilter) return false
      if (
        excludeSpamIPs &&
        issue.samples.some(
          (sample) =>
            (sample.httpStatus ?? 0) >= 400 &&
            Boolean(sample.sourceIp) &&
            spamIPSet.has(sample.sourceIp!),
        )
      ) {
        return false
      }
      if (selectedServices.size > 0) {
        const matches =
          selectedServices.has(issue.service) ||
          issue.affectedServices.some((s) => selectedServices.has(s))
        if (!matches) return false
      }
      if (searchQuery) {
        const q = searchQuery.toLowerCase()
        const matches =
          issue.title.toLowerCase().includes(q) || issue.service.toLowerCase().includes(q)
        if (!matches) return false
      }
      return true
    })
  }, [issues, selectedServices, searchQuery, statusFilter, kindFilter, excludeSpamIPs, spamIPSet])

  const { primaryIssues, secondaryIssues } = useMemo(() => {
    const sorted = [...filteredIssues].sort((a, b) => b.count - a.count)
    if (statusFilter !== "all") return { primaryIssues: sorted, secondaryIssues: [] as Issue[] }
    return {
      primaryIssues: sorted.filter((i) => issueStatusOf(i) === "open"),
      secondaryIssues: sorted.filter((i) => issueStatusOf(i) !== "open"),
    }
  }, [filteredIssues, statusFilter])

  const [showSecondary, setShowSecondary] = useState(false)

  const runDetectorTest = async () => {
    setDetectorTestLoading(true)
    setDetectorTest(null)
    try {
      const response = await authFetch("/api/ml/test-spike", { method: "POST" })
      const data = (await response.json()) as DetectorTestResult
      if (!response.ok) throw new Error(data.error ?? `HTTP ${response.status}`)
      setDetectorTest(data)
    } catch (err) {
      setDetectorTest({ error: err instanceof Error ? err.message : String(err) })
    } finally {
      setDetectorTestLoading(false)
    }
  }

  const activeFilterCount =
    selectedServices.size + (statusFilter !== "all" ? 1 : 0) + (excludeSpamIPs ? 1 : 0) + (searchQuery ? 1 : 0)

  const chips: FilterChip[] = [
    ...Array.from(selectedServices).map((service) => ({
      id: `service-${service}`,
      filterKey: "service",
      value: service,
      tone: "neutral" as const,
      onRemove: () => toggleService(service),
    })),
    ...(statusFilter !== "all"
      ? [
          {
            id: "status",
            filterKey: "status",
            value: statusFilter,
            tone: statusFilter === "resolved" ? ("ok" as const) : ("neutral" as const),
            onRemove: () => setStatusFilter("all"),
          },
        ]
      : []),
    ...(excludeSpamIPs
      ? [
          {
            id: "spam-ips",
            filterKey: "spam-ips",
            value: "hidden",
            tone: "neutral" as const,
            onRemove: () => setExcludeSpamIPs(false),
          },
        ]
      : []),
    ...(searchQuery
      ? [
          {
            id: "query",
            filterKey: "query",
            value: searchQuery,
            tone: "neutral" as const,
            onRemove: () => setSearchQuery(""),
          },
        ]
      : []),
  ]

  const addFilterOptions = uniqueServices
    .filter((s) => !selectedServices.has(s))
    .map((s) => ({ value: s, label: s }))

  const clearAll = () => {
    resetFilters()
    setSearchQuery("")
    setStatusFilter("all")
    setExcludeSpamIPs(false)
  }

  if (loading && issues.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-20 text-center text-sm text-ds-text-3">
        <AlertOctagon className="mx-auto mb-4 h-10 w-10 opacity-30" aria-hidden="true" />
        Loading issues…
      </div>
    )
  }

  return (
    <div className="flex flex-col gap-5">
      <FilterBar
        scope={{
          label: "Signal kind",
          options: scopeOptions,
          value: kindFilter,
          onChange: (v) => setKindFilter(v as KindFilter),
        }}
        chips={chips}
        addFilterOptions={addFilterOptions}
        onAddFilter={(v) => toggleService(v)}
        matchText={`Matching ${filteredIssues.length} of ${issues.length} issues · ${activeFilterCount} filter${activeFilterCount === 1 ? "" : "s"}`}
        onClearAll={activeFilterCount > 0 ? clearAll : undefined}
      />

      <div className="flex gap-5">
        <div className="flex min-w-0 flex-1 flex-col gap-3.5">
          <div className="flex flex-wrap items-center gap-3">
            <h1 className="font-[family-name:var(--font-display)] text-[22px] font-bold tracking-[-0.015em] text-ds-text">
              {statusFilter === "all" ? "Needs attention" : `${statusTabs.find((s) => s.value === statusFilter)?.label} issues`}
            </h1>
            <span className="inline-flex h-[22px] items-center rounded-[6px] bg-ds-critical-bg px-2 text-[11.5px] font-semibold text-ds-critical">
              {statusFilter === "all" ? `${primaryIssues.length} open` : filteredIssues.length}
            </span>
            <span className="flex-grow" />
            <div className="flex items-center gap-1 rounded-[9px] border border-ds-line bg-ds-surface p-0.5">
              {statusTabs.map((t) => (
                <button
                  key={t.value}
                  type="button"
                  onClick={() => setStatusFilter(t.value)}
                  aria-pressed={statusFilter === t.value}
                  className={`rounded-[6px] px-2.5 py-1 text-[11.5px] font-semibold transition-colors ${
                    statusFilter === t.value ? "bg-ds-fill text-ds-text" : "text-ds-text-3 hover:text-ds-text-2"
                  }`}
                >
                  {t.label}
                  <span className="ml-1 opacity-60">{statusCounts[t.value]}</span>
                </button>
              ))}
            </div>
            <button
              type="button"
              onClick={() => setExcludeSpamIPs((v) => !v)}
              aria-pressed={excludeSpamIPs}
              title="Hide HTTP errors whose recorded source IP is on the honeypot list"
              className={`inline-flex h-9 items-center gap-1.5 rounded-[9px] border px-2.5 text-[12px] font-medium transition-colors ${
                excludeSpamIPs
                  ? "border-ds-warn/40 bg-ds-warn-bg text-ds-warn"
                  : "border-ds-line-strong text-ds-text-3 hover:text-ds-text-2"
              }`}
            >
              <ShieldBan className="h-3.5 w-3.5" aria-hidden="true" />
              {excludeSpamIPs ? "Spam IPs hidden" : "Hide spam IPs"}
            </button>
            <button
              type="button"
              onClick={() => setNeedleModalOpen(true)}
              title="Open interactive Needle 3 telemetry classifier"
              className="inline-flex h-9 items-center gap-1.5 rounded-[9px] border border-ds-line-strong px-2.5 text-[12px] font-medium text-ds-text-2 hover:text-ds-text"
            >
              <Sparkles className="h-3.5 w-3.5" aria-hidden="true" />
              Test Needle 3
            </button>
            <button
              type="button"
              onClick={() => void runDetectorTest()}
              disabled={detectorTestLoading}
              title="Run a non-persistent synthetic spike through the ML feature and label pipeline"
              className="inline-flex h-9 items-center gap-1.5 rounded-[9px] border border-ds-line-strong px-2.5 text-[12px] font-medium text-ds-text-2 hover:text-ds-text disabled:cursor-wait disabled:opacity-60"
            >
              {detectorTestLoading ? (
                <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
              ) : (
                <Activity className="h-3.5 w-3.5" aria-hidden="true" />
              )}
              Test spike detector
            </button>
            <button
              type="button"
              onClick={() => refresh()}
              className="inline-flex h-9 items-center gap-1.5 rounded-[9px] border border-ds-line-strong px-2.5 text-[12px] font-medium text-ds-text-2 hover:text-ds-text"
            >
              <RefreshCw className={`h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} aria-hidden="true" />
              Refresh
            </button>
          </div>

          {error && (
            <p className="text-[12px] text-ds-critical">Failed to load: {error}</p>
          )}

          {detectorTest && (
            <div
              className={`flex flex-wrap items-center justify-between gap-3 rounded-[12px] border px-3 py-2 text-[12.5px] ${
                detectorTest.passed
                  ? "border-ds-ok/30 text-ds-text"
                  : "border-ds-critical/30 bg-ds-critical-bg text-ds-text"
              }`}
            >
              <div>
                <p className={`font-semibold ${detectorTest.passed ? "text-ds-ok" : "text-ds-critical"}`}>
                  {detectorTest.passed ? "Spike detector verified" : "Spike detector test failed"}
                </p>
                <p className="mt-0.5 text-[11px] text-ds-text-3">{detectorTest.error ?? detectorTest.scenario}</p>
              </div>
              {detectorTest.row && (
                <div className="flex flex-wrap gap-x-3 gap-y-1 font-[family-name:var(--font-data)] text-[11px] text-ds-text-2">
                  <span>baseline {(detectorTest.row.baselineErrorRate * 100).toFixed(1)}%</span>
                  <span>future errors {detectorTest.row.futureErrorCount}</span>
                  <span>future {(detectorTest.row.futureErrorRate * 100).toFixed(1)}%</span>
                  <span>{detectorTest.row.labelKnown && detectorTest.row.label ? "label: spike" : "label: not spike"}</span>
                </div>
              )}
            </div>
          )}

          {showSpamIPs && (
            <div className="rounded-[12px] border border-ds-warn/30 bg-ds-warn-bg p-3 text-[12.5px] text-ds-text-2">
              <div className="mb-2 flex items-center justify-between gap-3">
                <div>
                  <div className="font-bold text-ds-warn">Promoted honeypot IPs</div>
                  <div className="text-[11px] text-ds-text-3">Used by the ingress tarpit synchronizer.</div>
                </div>
                <button
                  type="button"
                  onClick={() => setShowSpamIPs(false)}
                  aria-label="Close spam IP list"
                  className="rounded p-1 text-ds-text-3 hover:text-ds-text"
                >
                  <X className="h-4 w-4" aria-hidden="true" />
                </button>
              </div>
              {spamIPsLoading && <div className="text-ds-text-3">Loading…</div>}
              {spamIPsError && <div className="text-ds-critical">Failed to load: {spamIPsError}</div>}
              {!spamIPsLoading && !spamIPsError && spamIPs.length === 0 && (
                <div className="text-ds-text-3">No promoted IPs.</div>
              )}
              {spamIPs.length > 0 && (
                <div className="grid gap-1 sm:grid-cols-2 lg:grid-cols-3">
                  {spamIPs.map((entry) => (
                    <div key={entry.ip} className="flex items-center justify-between rounded-[8px] bg-ds-bg px-2.5 py-1.5 font-[family-name:var(--font-data)]">
                      <span className="text-ds-text">{entry.ip}</span>
                      <span className="text-[10.5px] text-ds-warn">×{entry.count}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          {!showSpamIPs && (
            <button
              type="button"
              onClick={() => {
                setShowSpamIPs(true)
                if (spamIPs.length === 0) void loadSpamIPs()
              }}
              className="self-start text-[11.5px] text-ds-text-3 hover:text-ds-text-2"
            >
              View promoted spam IPs ({spamIPs.length})
            </button>
          )}

          {primaryIssues.length === 0 ? (
            <div className="flex flex-col items-center justify-center gap-2 rounded-[14px] border border-dashed border-ds-line py-16 text-center">
              <CheckCircle2 className="h-8 w-8 text-ds-ok/60" aria-hidden="true" />
              <p className="text-[14px] font-medium text-ds-text">
                {issues.length === 0 ? "No issues detected" : "Nothing matches your filters"}
              </p>
              <p className="max-w-sm text-[12.5px] text-ds-text-3">
                {issues.length === 0
                  ? "Error-status spans and error/fatal-severity logs will show up here as they arrive."
                  : "Try widening the scope or clearing a filter."}
              </p>
            </div>
          ) : (
            <div className="flex flex-col gap-3">
              {primaryIssues.map((issue) => (
                <IssueCard key={issue.id} issue={issue} onStatusChange={onStatusChange} statusBusy={statusBusy} />
              ))}
            </div>
          )}

          {secondaryIssues.length > 0 && (
            <>
              <button
                type="button"
                onClick={() => setShowSecondary((v) => !v)}
                className="flex items-center gap-2.5 rounded-[12px] border border-dashed border-ds-line px-4 py-3 text-left text-[13px] text-ds-text-3 hover:text-ds-text-2"
              >
                {showSecondary ? (
                  <ChevronUp className="h-4 w-4" aria-hidden="true" />
                ) : (
                  <ChevronDown className="h-4 w-4" aria-hidden="true" />
                )}
                {secondaryIssues.length} resolved or ignored
              </button>
              {showSecondary && (
                <div className="flex flex-col gap-3">
                  {secondaryIssues.map((issue) => (
                    <IssueCard key={issue.id} issue={issue} onStatusChange={onStatusChange} statusBusy={statusBusy} />
                  ))}
                </div>
              )}
            </>
          )}
        </div>

        <aside className="flex w-[340px] shrink-0 flex-col gap-3.5">
          <ServiceDeviationPanel />
          <IssueStatusPanel counts={statusCounts} />
        </aside>
      </div>

      <NeedleTestModal isOpen={needleModalOpen} onClose={() => setNeedleModalOpen(false)} />
    </div>
  )
}

export default IssuesVisualizer