import { useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import MarkdownText from "../components/MarkdownText";
import { safeUrl } from "../utils/url";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import {
  Loader2,
  AlertCircle,
  ArrowLeft,
  CheckCircle,
  Clock,
  Shield,
  FileText,
  ExternalLink,
  Plus,
  AlertTriangle,
  BookOpen,
  FlaskConical,
  ChevronDown,
  ChevronUp,
  Radar,
} from "lucide-react";
import { getTechniqueByMitreId, markTechniqueReviewed } from "../api/techniques";
import { getTemplatesByTechnique } from "../api/test-templates";
import { listJiraLinks, type JiraLink } from "../api/jira";
import { getJiraConfig } from "../api/settings";
import { useAuth } from "../context/AuthContext";
import TestFromTemplateForm from "../components/TestFromTemplateForm";
import type { TechniqueStatus, TestState, TestResult } from "../types/models";

import StatusBadge from "../components/StatusBadge";

const statusBadgeColors: Record<TechniqueStatus, string> = {
  validated: "bg-green-900/50 text-green-400 border-green-500/30",
  partial: "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
  in_progress: "bg-blue-900/50 text-blue-400 border-blue-500/30",
  not_covered: "bg-red-900/50 text-red-400 border-red-500/30",
  not_evaluated: "bg-gray-800/50 text-gray-400 border-gray-600/30",
  review_required: "bg-orange-900/50 text-orange-400 border-orange-500/30",
};

const testStateBadgeColors: Record<TestState, string> = {
  draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
  red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
  red_review: "bg-amber-900/50 text-amber-400 border-amber-500/30",
  blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/30",
  blue_review: "bg-purple-900/50 text-purple-400 border-purple-500/30",
  in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
  validated: "bg-green-900/50 text-green-400 border-green-500/30",
  rejected: "bg-red-900/50 text-red-400 border-red-500/30",
  disputed: "bg-amber-900/50 text-amber-400 border-amber-500/30",
};

const testResultBadgeColors: Record<TestResult, string> = {
  detected: "bg-green-900/50 text-green-400 border-green-500/30",
  not_detected: "bg-red-900/50 text-red-400 border-red-500/30",
  partially_detected: "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
};

/* ── TechniqueJiraSection ─────────────────────────────────────────────
   Techniques don't have their own Jira tickets — tickets live on tests.
   This component fetches all test-linked Jira tickets for this technique
   in a single batched request and shows them read-only.
   ─────────────────────────────────────────────────────────────────── */
function TechniqueJiraSection({ technique }: { technique: ReturnType<typeof Object.create> }) {
  const tests: { id: string; name: string }[] = (technique as any).tests ?? [];

  const testIds = tests.map((t) => t.id);

  const { data: links = [], isLoading } = useQuery({
    queryKey: ["jira-links-technique", testIds],
    queryFn: () =>
      listJiraLinks({ entity_type: "test", entity_ids: testIds }),
    enabled: testIds.length > 0,
    staleTime: 60_000,
  });

  const { data: jiraConfig } = useQuery({
    queryKey: ["jira-config"],
    queryFn: getJiraConfig,
    staleTime: 5 * 60 * 1000,
  });

  const jiraBase = jiraConfig?.url?.replace(/\/$/, "") ?? "https://jira.atlassian.com";

  const statusColors: Record<string, string> = {
    "To Do":       "bg-gray-700 text-gray-300",
    "In Progress": "bg-blue-900/50 text-blue-400",
    "Done":        "bg-green-900/50 text-green-400",
  };

  // Build a map entity_id → test name
  const testById = Object.fromEntries(tests.map((t) => [t.id, t.name]));

  // Only render if there's something to show (or we're loading)
  if (!isLoading && links.length === 0) return null;

  return (
    <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
      <h2 className="mb-4 flex items-center gap-2 text-lg font-semibold text-white">
        <ExternalLink className="h-5 w-5 text-blue-400" />
        Jira Tickets
      </h2>

      {isLoading ? (
        <div className="flex justify-center py-4">
          <Loader2 className="h-5 w-5 animate-spin text-gray-500" />
        </div>
      ) : (
        <div className="space-y-2">
          {links.map((link: JiraLink) => (
            <div
              key={link.id}
              className="flex items-center justify-between rounded-lg border border-gray-700 bg-gray-800/30 px-4 py-3"
            >
              <div className="flex-1 min-w-0">
                {/* Test name */}
                <p className="text-xs text-gray-500 truncate mb-1">
                  {testById[link.entity_id] ?? "Test"}
                </p>
                {/* Jira ticket info */}
                <div className="flex items-center gap-2 flex-wrap">
                  <span className="font-mono text-sm font-medium text-blue-400">
                    {link.jira_issue_key}
                  </span>
                  {link.jira_status && (
                    <span className={`rounded px-1.5 py-0.5 text-xs ${statusColors[link.jira_status] ?? "bg-gray-700 text-gray-300"}`}>
                      {link.jira_status}
                    </span>
                  )}
                  {link.jira_priority && (
                    <span className="text-xs text-gray-500">{link.jira_priority}</span>
                  )}
                  {link.jira_assignee && (
                    <span className="text-xs text-gray-500">→ {link.jira_assignee}</span>
                  )}
                </div>
              </div>
              <a
                href={`${jiraBase}/browse/${link.jira_issue_key}`}
                target="_blank"
                rel="noopener noreferrer"
                className="ml-3 shrink-0 rounded p-1.5 text-gray-500 hover:bg-gray-700 hover:text-blue-400 transition-colors"
                title="Open in Jira"
              >
                <ExternalLink className="h-4 w-4" />
              </a>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function getMitreUrl(mitreId: string, externalRefs?: Array<{ source_name: string; url?: string }>): string {
  const ref = externalRefs?.find((r) => r.source_name === "mitre-attack" && r.url);
  if (ref?.url) return ref.url;
  return `https://attack.mitre.org/techniques/${mitreId.replace(".", "/")}/`;
}

export default function TechniqueDetailPage() {
  const { mitreId } = useParams<{ mitreId: string }>();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { user } = useAuth();

  const [templateFormId, setTemplateFormId] = useState<string | null>(null);

  const canReview =
    user?.role === "admin" || user?.role === "red_lead" || user?.role === "blue_lead";

  // Same roles that can create tests (mirrors backend POST /tests/from-template)
  const canRunTemplate =
    user?.role === "admin" || user?.role === "red_lead" || user?.role === "blue_lead";

  const {
    data: technique,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["technique", mitreId],
    queryFn: () => getTechniqueByMitreId(mitreId!),
    enabled: !!mitreId,
  });

  const { data: templates = [], isLoading: isTemplatesLoading } = useQuery({
    queryKey: ["templates-for-technique", mitreId],
    queryFn: () => getTemplatesByTechnique(mitreId!),
    enabled: !!mitreId,
  });

  const reviewMutation = useMutation({
    mutationFn: () => markTechniqueReviewed(mitreId!),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["technique", mitreId] });
      queryClient.invalidateQueries({ queryKey: ["techniques"] });
    },
  });

  if (isLoading) {
    return (
      <div className="flex h-64 items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
      </div>
    );
  }

  if (error || !technique) {
    return (
      <div className="flex h-64 flex-col items-center justify-center gap-2">
        <AlertCircle className="h-10 w-10 text-red-400" />
        <p className="text-red-400">Failed to load technique</p>
        <button
          onClick={() => navigate("/techniques")}
          className="mt-2 flex items-center gap-1 text-sm text-cyan-400 hover:underline"
        >
          <ArrowLeft className="h-4 w-4" />
          Back to techniques
        </button>
      </div>
    );
  }

  const formatDate = (dateStr: string | null) => {
    if (!dateStr) return "—";
    return new Date(dateStr).toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    });
  };

  return (
    <div className="space-y-6">
      {/* Back button */}
      <button
        onClick={() => navigate("/techniques")}
        className="flex items-center gap-1 text-sm text-gray-400 hover:text-cyan-400 transition-colors"
      >
        <ArrowLeft className="h-4 w-4" />
        Back to techniques
      </button>

      {/* Header */}
      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
        <div className="flex items-start justify-between">
          <div className="flex items-start gap-4">
            <div className="rounded-lg bg-cyan-500/10 p-3">
              <Shield className="h-8 w-8 text-cyan-400" />
            </div>
            <div>
              <div className="flex items-center gap-3">
                <h1 className="text-2xl font-bold text-white">{technique.mitre_id}</h1>
                <StatusBadge status={technique.status_global as TechniqueStatus} />
                {technique.review_required && (
                  <span className="inline-flex items-center gap-1 rounded-full border border-orange-500/30 bg-orange-900/50 px-2.5 py-0.5 text-xs font-medium text-orange-400">
                    <AlertTriangle className="h-3 w-3" />
                    Review Required
                  </span>
                )}
              </div>
              <p className="mt-1 text-lg text-gray-300">{technique.name}</p>
            </div>
          </div>

          {canReview && technique.review_required && (
            <button
              onClick={() => reviewMutation.mutate()}
              disabled={reviewMutation.isPending}
              className="flex items-center gap-2 rounded-lg bg-amber-600 px-4 py-2 text-sm font-medium text-white hover:bg-amber-500 disabled:opacity-50 transition-colors shrink-0"
            >
              {reviewMutation.isPending ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <CheckCircle className="h-4 w-4" />
              )}
              Mark as Reviewed
            </button>
          )}
        </div>
      </div>

      {/* Review required banner — only shown to users who can act on it */}
      {technique.review_required && canReview && (
        <div className="flex items-start gap-3 rounded-xl border border-amber-500/30 bg-amber-500/5 p-4">
          <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-amber-400" />
          <div className="flex-1 min-w-0">
            <p className="text-sm font-medium text-amber-300">
              This technique has been updated in MITRE ATT&CK
            </p>
            <p className="mt-0.5 text-xs text-amber-400/70">
              The MITRE ATT&CK sync detected changes to this technique.
              {technique.mitre_last_modified && (
                <> Last modified in ATT&CK: <span className="font-mono">{technique.mitre_last_modified.slice(0, 10)}</span>.</>
              )}
              {" "}Click{" "}
              <span className="font-semibold">Mark as Reviewed</span> to acknowledge the changes.
            </p>
          </div>
        </div>
      )}

      {/* Info Section */}
      <div className="grid gap-6 lg:grid-cols-3">
        {/* Description */}
        <div className="lg:col-span-2 rounded-xl border border-gray-800 bg-gray-900 p-6">
          <h2 className="mb-3 text-lg font-semibold text-white">Description</h2>
          <MarkdownText
            content={technique.description || "No description available."}
            className="text-sm text-gray-400 leading-relaxed"
          />
        </div>

        {/* Metadata */}
        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
          <h2 className="mb-4 text-lg font-semibold text-white">Details</h2>
          <dl className="space-y-4">
            <div>
              <dt className="text-xs font-medium uppercase text-gray-500">Tactic</dt>
              <dd className="mt-1 text-sm text-gray-300 capitalize">
                {technique.tactic?.replace(/-/g, " ") || "—"}
              </dd>
            </div>
            <div>
              <dt className="text-xs font-medium uppercase text-gray-500">Platforms</dt>
              <dd className="mt-1 flex flex-wrap gap-1">
                {technique.platforms && technique.platforms.length > 0 ? (
                  technique.platforms.map((p) => (
                    <span
                      key={p}
                      className="rounded-full bg-gray-800 px-2 py-0.5 text-xs text-gray-300"
                    >
                      {p}
                    </span>
                  ))
                ) : (
                  <span className="text-sm text-gray-500">—</span>
                )}
              </dd>
            </div>
            <div>
              <dt className="text-xs font-medium uppercase text-gray-500">Subtechnique</dt>
              <dd className="mt-1 text-sm text-gray-300">
                {technique.is_subtechnique ? `Yes (${technique.parent_mitre_id})` : "No"}
              </dd>
            </div>
            <div>
              <dt className="text-xs font-medium uppercase text-gray-500">Last Review</dt>
              <dd className="mt-1 text-sm text-gray-300">
                {formatDate(technique.last_review_date)}
              </dd>
            </div>
            <div>
              <dt className="text-xs font-medium uppercase text-gray-500">MITRE Version</dt>
              <dd className="mt-1 text-sm text-gray-300">{technique.mitre_version || "—"}</dd>
            </div>
            <div>
              <dt className="text-xs font-medium uppercase text-gray-500">MITRE ATT&amp;CK</dt>
              <dd className="mt-1">
                <a
                  href={getMitreUrl(technique.mitre_id, technique.external_references)}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-1 text-sm text-cyan-400 hover:underline"
                >
                  <ExternalLink className="h-3.5 w-3.5" />
                  View on MITRE ATT&amp;CK
                </a>
              </dd>
            </div>
          </dl>
        </div>
      </div>

      {/* Tests Section */}
      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
        <div className="mb-4 flex items-center justify-between">
          <h2 className="text-lg font-semibold text-white">Associated Tests</h2>
          <button
            onClick={() => navigate(`/tests/new?technique=${technique.id}`)}
            className="flex items-center gap-1.5 rounded-lg border border-cyan-500/30 bg-cyan-500/10 px-3 py-1.5 text-sm font-medium text-cyan-400 hover:bg-cyan-500/20 transition-colors"
          >
            <Plus className="h-4 w-4" />
            New Test
          </button>
        </div>

        {technique.tests && technique.tests.length > 0 ? (
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm">
              <thead>
                <tr className="border-b border-gray-800">
                  <th className="pb-3 pr-4 font-medium text-gray-400">Name</th>
                  <th className="pb-3 px-4 font-medium text-gray-400">State</th>
                  <th className="pb-3 px-4 font-medium text-gray-400">Result</th>
                  <th className="pb-3 px-4 font-medium text-gray-400">Platform</th>
                  <th className="pb-3 px-4 font-medium text-gray-400">Created</th>
                  <th className="pb-3 pl-4 font-medium text-gray-400">Actions</th>
                </tr>
              </thead>
              <tbody>
                {technique.tests.map((test) => (
                  <tr
                    key={test.id}
                    className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
                  >
                    <td className="py-3 pr-4">
                      <span className="font-medium text-gray-200">{test.name}</span>
                    </td>
                    <td className="py-3 px-4">
                      <span
                        className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
                          testStateBadgeColors[test.state]
                        }`}
                      >
                        {test.state.replace(/_/g, " ")}
                      </span>
                    </td>
                    <td className="py-3 px-4">
                      {test.result ? (
                        <span
                          className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
                            testResultBadgeColors[test.result]
                          }`}
                        >
                          {test.result.replace(/_/g, " ")}
                        </span>
                      ) : (
                        <span className="text-gray-600">—</span>
                      )}
                    </td>
                    <td className="py-3 px-4">
                      <span className="text-gray-400 capitalize">{test.platform || "—"}</span>
                    </td>
                    <td className="py-3 px-4">
                      <span className="text-gray-400">{formatDate(test.created_at)}</span>
                    </td>
                    <td className="py-3 pl-4">
                      <button
                        onClick={() => navigate(`/tests/${test.id}`)}
                        className="rounded p-1 text-gray-400 hover:bg-gray-800 hover:text-cyan-400"
                        title="View Details"
                      >
                        <FileText className="h-4 w-4" />
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center py-8 text-gray-400">
            <Clock className="mb-2 h-8 w-8" />
            <p>No tests have been created for this technique yet.</p>
            <button
              onClick={() => navigate(`/tests/new?technique=${technique.id}`)}
              className="mt-3 flex items-center gap-1 text-sm text-cyan-400 hover:underline"
            >
              <Plus className="h-4 w-4" />
              Create the first test
            </button>
          </div>
        )}
      </div>

      {/* Detection Rules Section */}
      <DetectionRulesSection rules={(technique as any).detection_rules ?? []} />

      {/* Available Test Templates Section */}
      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
        <div className="mb-4 flex items-center justify-between">
          <h2 className="text-lg font-semibold text-white">Available Test Templates</h2>
          <button
            onClick={() => navigate("/test-catalog")}
            className="flex items-center gap-1.5 text-sm text-gray-400 hover:text-cyan-400 transition-colors"
          >
            <BookOpen className="h-4 w-4" />
            Browse Full Catalog
          </button>
        </div>

        {isTemplatesLoading ? (
          <div className="flex items-center justify-center py-8">
            <Loader2 className="h-6 w-6 animate-spin text-gray-500" />
          </div>
        ) : templates.length > 0 ? (
          <div className="grid gap-3 sm:grid-cols-2">
            {templates.map((tpl) => {
              // ── Derive test status for this technique ──────────────
              const allTests = (technique as any).tests ?? [];

              // Any test currently in a non-terminal state
              const ACTIVE_STATES: TestState[] = [
                "draft", "red_executing", "red_review", "blue_evaluating", "blue_review", "in_review",
              ];
              const activeTest = allTests.find(
                (t: { state: TestState }) => ACTIVE_STATES.includes(t.state)
              ) ?? null;

              // Most recent validated test
              const latestValidated: {
                id: string;
                detection_result: TestResult | null;
                updated_at: string | null;
                created_at: string;
              } | null =
                [...allTests]
                  .filter((t: { state: TestState }) => t.state === "validated")
                  .sort((a: { updated_at: string | null; created_at: string }, b: { updated_at: string | null; created_at: string }) =>
                    (b.updated_at || b.created_at).localeCompare(a.updated_at || a.created_at)
                  )[0] ?? null;

              // Coverage is stale if the sync job raised the review flag
              // (only meaningful when we already have a validated test)
              const isStale = technique.review_required && !!latestValidated;

              // ── Helpers ────────────────────────────────────────────
              const ACTIVE_LABEL: Partial<Record<TestState, string>> = {
                draft:           "Draft",
                red_executing:   "Executing",
                red_review:      "Red Review",
                blue_evaluating: "Evaluating",
                blue_review:     "Blue Review",
                in_review:       "In Review",
              };

              const detResult = latestValidated?.detection_result;
              const detBadgeStyle =
                detResult === "detected"
                  ? "border-green-500/30 bg-green-500/10 text-green-400"
                  : detResult === "partially_detected"
                  ? "border-yellow-500/30 bg-yellow-500/10 text-yellow-400"
                  : detResult === "not_detected"
                  ? "border-red-500/30 bg-red-500/10 text-red-400"
                  : "border-gray-600/30 bg-gray-800/50 text-gray-400";

              const detLabel =
                detResult === "detected"        ? "Detected"
                : detResult === "partially_detected" ? "Partial"
                : detResult === "not_detected"  ? "Not detected"
                : "Validated";

              const needsReRun =
                !activeTest &&
                latestValidated &&
                (detResult !== "detected" || isStale);

              return (
              <div
                key={tpl.id}
                className="flex items-start justify-between rounded-lg border border-gray-800 bg-gray-800/30 p-4 transition-colors hover:border-gray-700"
              >
                {/* Left: template info */}
                <div className="min-w-0 flex-1">
                  <p className="truncate text-sm font-medium text-gray-200">{tpl.name}</p>
                  <div className="mt-1 flex flex-wrap gap-1">
                    <span className="inline-flex rounded-full border border-gray-600/30 bg-gray-800/50 px-2 py-0.5 text-[10px] text-gray-400">
                      {tpl.source === "atomic_red_team" ? "Atomic" : tpl.source}
                    </span>
                    {tpl.platform && (
                      <span className="inline-flex rounded-full border border-gray-600/30 bg-gray-800/50 px-2 py-0.5 text-[10px] capitalize text-gray-400">
                        {tpl.platform}
                      </span>
                    )}
                    {tpl.severity && (
                      <span className="inline-flex rounded-full border border-gray-600/30 bg-gray-800/50 px-2 py-0.5 text-[10px] capitalize text-gray-400">
                        {tpl.severity}
                      </span>
                    )}
                  </div>
                </div>

                {/* Right: status + action */}
                <div className="ml-3 flex shrink-0 flex-col items-end gap-2">
                  {/* ── Status badge ── */}
                  {activeTest && (
                    <span className="inline-flex items-center gap-1 rounded-full border border-blue-500/30 bg-blue-500/10 px-2 py-0.5 text-[10px] font-medium text-blue-400">
                      <Clock className="h-2.5 w-2.5" />
                      {ACTIVE_LABEL[activeTest.state as TestState] ?? activeTest.state.replace(/_/g, " ")}
                    </span>
                  )}

                  {!activeTest && latestValidated && (
                    <div className="flex flex-col items-end gap-0.5">
                      <span className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium ${detBadgeStyle}`}>
                        {detResult === "detected"
                          ? <CheckCircle className="h-2.5 w-2.5" />
                          : <AlertTriangle className="h-2.5 w-2.5" />
                        }
                        {detLabel}
                      </span>
                      {isStale && (
                        <span className="text-[9px] font-medium text-amber-400">
                          ⚠ Coverage may be stale
                        </span>
                      )}
                    </div>
                  )}

                  {/* ── Action button ── */}
                  {activeTest ? (
                    <button
                      onClick={() => navigate(`/tests/${activeTest.id}`)}
                      className="flex items-center gap-1 rounded-lg border border-blue-500/30 bg-blue-500/10 px-3 py-1.5 text-xs font-medium text-blue-400 hover:bg-blue-500/20 transition-colors"
                    >
                      <ExternalLink className="h-3.5 w-3.5" />
                      View test
                    </button>
                  ) : canRunTemplate ? (
                    <button
                      onClick={() => setTemplateFormId(tpl.id)}
                      className={`flex items-center gap-1 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors ${
                        latestValidated && detResult === "detected" && !isStale
                          ? "border-gray-600/30 bg-gray-800/50 text-gray-400 hover:border-gray-600 hover:text-gray-300"
                          : "border-cyan-500/30 bg-cyan-500/10 text-cyan-400 hover:bg-cyan-500/20"
                      }`}
                    >
                      <FlaskConical className="h-3.5 w-3.5" />
                      {needsReRun ? "Run This Test" : latestValidated ? "Re-run" : "Run This Test"}
                    </button>
                  ) : null}
                </div>
              </div>
              );
            })}
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center py-8 text-gray-400">
            <BookOpen className="mb-2 h-8 w-8 text-gray-600" />
            <p className="text-sm">No test templates available for this technique.</p>
            <button
              onClick={() => navigate("/test-catalog")}
              className="mt-3 flex items-center gap-1 text-sm text-cyan-400 hover:underline"
            >
              Browse the full test catalog
            </button>
          </div>
        )}
      </div>

      {/* Recommended Defenses (D3FEND) */}
      {technique.d3fend_defenses && technique.d3fend_defenses.length > 0 && (
        <D3FENDSection defenses={technique.d3fend_defenses} />
      )}

      {/* Intel Items Section */}
      {technique.intel_items && technique.intel_items.length > 0 && (
        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
          <h2 className="mb-4 text-lg font-semibold text-white">Threat Intelligence</h2>
          <div className="space-y-3">
            {technique.intel_items.map((intel) => (
              <div
                key={intel.id}
                className="flex items-center justify-between rounded-lg border border-gray-800 bg-gray-800/30 p-4"
              >
                <div>
                  <p className="font-medium text-gray-200">{intel.title || intel.url}</p>
                  <p className="mt-0.5 text-xs text-gray-500">
                    {intel.source && <span>{intel.source} • </span>}
                    Detected {formatDate(intel.detected_at)}
                  </p>
                </div>
                <a
                  href={safeUrl(intel.url)}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-1 text-sm text-cyan-400 hover:underline"
                >
                  View
                  <ExternalLink className="h-3.5 w-3.5" />
                </a>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* External References */}
      {technique.external_references && technique.external_references.filter((r) => r.source_name !== "mitre-attack" && r.url).length > 0 && (
        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
          <h2 className="mb-4 text-lg font-semibold text-white">References</h2>
          <div className="space-y-2">
            {technique.external_references
              .filter((r) => r.source_name !== "mitre-attack" && r.url)
              .map((ref, i) => (
                <div
                  key={i}
                  className="flex items-start justify-between rounded-lg border border-gray-800 bg-gray-800/30 p-3"
                >
                  <div className="min-w-0 flex-1">
                    <p className="text-sm font-medium text-gray-200">{ref.source_name}</p>
                    {ref.description && (
                      <p className="mt-0.5 line-clamp-2 text-xs text-gray-500">{ref.description}</p>
                    )}
                  </div>
                  <a
                    href={safeUrl(ref.url!)}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="ml-3 flex shrink-0 items-center gap-1 text-sm text-cyan-400 hover:underline"
                  >
                    View
                    <ExternalLink className="h-3.5 w-3.5" />
                  </a>
                </div>
              ))}
          </div>
        </div>
      )}

      {/* Jira Integration — shows tickets linked to tests of this technique */}
      {technique && <TechniqueJiraSection technique={technique} />}

      {/* Template instantiation modal */}
      {templateFormId && technique && (
        <TestFromTemplateForm
          templateId={templateFormId}
          techniqueId={technique.id}
          onClose={() => setTemplateFormId(null)}
        />
      )}
    </div>
  );
}

// ── Detection Rules Section ───────────────────────────────────────────

interface DetectionRule {
  id: string;
  title: string;
  description: string | null;
  source: string;
  source_id: string | null;
  source_url: string | null;
  rule_format: string;
  severity: string | null;
  platforms: string[];
  false_positive_rate: string | null;
}

const severityColors: Record<string, string> = {
  critical:      "bg-red-900/40 text-red-400 border-red-500/30",
  high:          "bg-orange-900/40 text-orange-400 border-orange-500/30",
  medium:        "bg-yellow-900/40 text-yellow-400 border-yellow-500/30",
  low:           "bg-blue-900/40 text-blue-400 border-blue-500/30",
  informational: "bg-gray-800/60 text-gray-400 border-gray-600/30",
};

const sourceColors: Record<string, string> = {
  sigma:   "bg-purple-900/40 text-purple-400 border-purple-500/30",
  elastic: "bg-blue-900/40 text-blue-400 border-blue-500/30",
  splunk:  "bg-orange-900/40 text-orange-400 border-orange-500/30",
  custom:  "bg-cyan-900/40 text-cyan-400 border-cyan-500/30",
};

function DetectionRulesSection({ rules }: { rules: DetectionRule[] }) {
  const [expandedId, setExpandedId] = useState<string | null>(null);

  return (
    <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
      <div className="mb-4 flex items-center justify-between">
        <h2 className="flex items-center gap-2 text-lg font-semibold text-white">
          <Radar className="h-5 w-5 text-cyan-400" />
          Detection Rules
        </h2>
        <span
          className={`rounded-full border px-2.5 py-0.5 text-xs font-medium ${
            rules.length > 0
              ? "border-cyan-500/30 bg-cyan-900/40 text-cyan-400"
              : "border-gray-600/30 bg-gray-800/50 text-gray-500"
          }`}
        >
          {rules.length} rule{rules.length !== 1 ? "s" : ""}
        </span>
      </div>

      {rules.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-8 text-gray-500">
          <Radar className="mb-2 h-8 w-8 text-gray-700" />
          <p className="text-sm">No detection rules linked to this technique.</p>
        </div>
      ) : (
        <div className="space-y-2">
          {rules.map((rule) => {
            const isExpanded = expandedId === rule.id;
            const sevColor = severityColors[rule.severity ?? ""] ?? severityColors.informational;
            const srcColor = sourceColors[rule.source] ?? sourceColors.custom;
            return (
              <div
                key={rule.id}
                className="rounded-lg border border-gray-800 bg-gray-800/30 transition-colors hover:border-gray-700 cursor-pointer"
                onClick={() => setExpandedId(isExpanded ? null : rule.id)}
              >
                <div className="flex items-center gap-3 p-3">
                  {/* Severity dot */}
                  <div
                    className={`h-2 w-2 shrink-0 rounded-full ${
                      rule.severity === "critical" ? "bg-red-400"
                      : rule.severity === "high" ? "bg-orange-400"
                      : rule.severity === "medium" ? "bg-yellow-400"
                      : rule.severity === "low" ? "bg-blue-400"
                      : "bg-gray-600"
                    }`}
                  />
                  {/* Title */}
                  <span className="flex-1 min-w-0 truncate text-sm font-medium text-gray-200">
                    {rule.title}
                  </span>
                  {/* Badges */}
                  <div className="flex shrink-0 items-center gap-1.5">
                    {rule.severity && (
                      <span className={`rounded border px-1.5 py-0.5 text-[10px] font-semibold uppercase ${sevColor}`}>
                        {rule.severity}
                      </span>
                    )}
                    <span className={`rounded border px-1.5 py-0.5 text-[10px] font-medium uppercase ${srcColor}`}>
                      {rule.source}
                    </span>
                    <span className="rounded border border-gray-700 bg-gray-800 px-1.5 py-0.5 text-[10px] text-gray-500">
                      {rule.rule_format.replace("_yaml", "").toUpperCase()}
                    </span>
                    {isExpanded ? (
                      <ChevronUp className="h-3.5 w-3.5 text-gray-500" />
                    ) : (
                      <ChevronDown className="h-3.5 w-3.5 text-gray-500" />
                    )}
                  </div>
                </div>

                {isExpanded && (
                  <div
                    className="border-t border-gray-700/50 px-4 py-3 space-y-2"
                    onClick={(e) => e.stopPropagation()}
                  >
                    {rule.description && (
                      <MarkdownText content={rule.description} className="text-xs text-gray-400 leading-relaxed" />
                    )}
                    <div className="flex flex-wrap gap-3 text-xs text-gray-500">
                      {rule.rule_format && (
                        <span>Format: <span className="text-gray-300">{rule.rule_format}</span></span>
                      )}
                      {rule.false_positive_rate && (
                        <span>False positives: <span className="text-gray-300 capitalize">{rule.false_positive_rate}</span></span>
                      )}
                      {rule.platforms && rule.platforms.length > 0 && (
                        <span>Platforms: <span className="text-gray-300">{rule.platforms.join(", ")}</span></span>
                      )}
                      {rule.source_id && (
                        <span>Source ID: <span className="font-mono text-gray-300">{rule.source_id}</span></span>
                      )}
                    </div>
                    {rule.source_url && (
                      <a
                        href={rule.source_url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-flex items-center gap-1 text-xs text-cyan-400 hover:underline"
                      >
                        <ExternalLink className="h-3 w-3" />
                        View source rule
                      </a>
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ── D3FEND Section ────────────────────────────────────────────────────

function D3FENDSection({ defenses }: { defenses: Array<{
  id: string;
  d3fend_id: string;
  name: string;
  description?: string | null;
  tactic?: string | null;
  d3fend_url?: string | null;
}> }) {
  const [expandedId, setExpandedId] = useState<string | null>(null);

  const grouped: Record<string, typeof defenses> = {};
  for (const def of defenses) {
    const tactic = def.tactic || "Other";
    if (!grouped[tactic]) grouped[tactic] = [];
    grouped[tactic].push(def);
  }

  const tacticColors: Record<string, string> = {
    Detect: "border-blue-500/30 bg-blue-900/20 text-blue-400",
    Harden: "border-emerald-500/30 bg-emerald-900/20 text-emerald-400",
    Isolate: "border-purple-500/30 bg-purple-900/20 text-purple-400",
    Deceive: "border-amber-500/30 bg-amber-900/20 text-amber-400",
    Evict: "border-red-500/30 bg-red-900/20 text-red-400",
    Model: "border-cyan-500/30 bg-cyan-900/20 text-cyan-400",
  };

  const tacticDescriptions: Record<string, string> = {
    Detect: "Techniques for identifying adversary activity through monitoring and analysis.",
    Harden: "Techniques for strengthening systems to reduce the attack surface.",
    Isolate: "Techniques for containing threats by limiting communication and access.",
    Deceive: "Techniques that use deception to mislead adversaries.",
    Evict: "Techniques for removing adversary presence from systems.",
    Model: "Techniques for understanding and mapping the environment.",
  };

  return (
    <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
      <div className="mb-4 flex items-center justify-between">
        <h2 className="text-lg font-semibold text-white flex items-center gap-2">
          <Shield className="h-5 w-5 text-emerald-400" />
          Recommended Defenses (D3FEND)
        </h2>
        <span className="rounded-full bg-emerald-900/50 border border-emerald-500/30 px-2.5 py-0.5 text-xs font-medium text-emerald-400">
          {defenses.length} countermeasure{defenses.length !== 1 ? "s" : ""}
        </span>
      </div>

      {Object.entries(grouped).map(([tactic, defs]) => (
        <div key={tactic} className="mb-4 last:mb-0">
          <h3 className="mb-1 text-sm font-medium text-gray-400 uppercase tracking-wide">
            {tactic}
          </h3>
          {tacticDescriptions[tactic] && (
            <p className="mb-2 text-xs text-gray-500">{tacticDescriptions[tactic]}</p>
          )}
          <div className="grid gap-2 sm:grid-cols-2 items-start">
            {defs.map((def) => {
              const isExpanded = expandedId === def.d3fend_id;
              return (
                <div
                  key={def.d3fend_id}
                  className={`rounded-lg border p-3 transition-all cursor-pointer ${
                    isExpanded ? "ring-1 ring-gray-600" : ""
                  } ${tacticColors[tactic] || "border-gray-700 bg-gray-800/30 text-gray-300"}`}
                  onClick={() => setExpandedId(isExpanded ? null : def.d3fend_id)}
                >
                  <div className="flex items-start justify-between">
                    <div className="min-w-0 flex-1">
                      <p className="text-sm font-medium text-gray-200 flex items-center gap-1.5">
                        <span className="font-mono text-xs text-gray-500">{def.d3fend_id}</span>
                        {def.name}
                      </p>
                    </div>
                    {isExpanded ? (
                      <ChevronUp className="ml-2 h-4 w-4 shrink-0 text-gray-500" />
                    ) : (
                      <ChevronDown className="ml-2 h-4 w-4 shrink-0 text-gray-500" />
                    )}
                  </div>

                  {isExpanded && (
                    <div className="mt-3 space-y-2 border-t border-gray-700/50 pt-3">
                      {def.description ? (
                        <MarkdownText content={def.description} className="text-xs text-gray-300 leading-relaxed" />
                      ) : (
                        <p className="text-xs text-gray-500 italic">No description available.</p>
                      )}
                      <div className="flex items-center gap-3 pt-1">
                        <span className="rounded bg-gray-800 px-2 py-0.5 text-[10px] font-medium text-gray-400 border border-gray-700">
                          Tactic: {def.tactic || "Unknown"}
                        </span>
                        <span className="rounded bg-gray-800 px-2 py-0.5 text-[10px] font-medium text-gray-400 border border-gray-700">
                          ID: {def.d3fend_id}
                        </span>
                      </div>
                      {def.d3fend_url && (
                        <a
                          href={def.d3fend_url}
                          target="_blank"
                          rel="noopener noreferrer"
                          onClick={(e) => e.stopPropagation()}
                          className="inline-flex items-center gap-1.5 text-xs text-cyan-400 hover:text-cyan-300 hover:underline mt-1"
                        >
                          <ExternalLink className="h-3 w-3" />
                          View on MITRE D3FEND
                        </a>
                      )}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}
