import { useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import MarkdownText from "../components/MarkdownText";
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 { useAuth } from "../context/AuthContext";
import TestFromTemplateForm from "../components/TestFromTemplateForm";
import JiraLinkPanel from "../components/JiraLinkPanel";
import type { TechniqueStatus, TestState, TestResult } from "../types/models";

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",
  blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-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",
};

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",
};

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";

  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>
                <span
                  className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
                    statusBadgeColors[technique.status_global]
                  }`}
                >
                  {technique.status_global.replace(/_/g, " ")}
                </span>
                {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 */}
      {technique.review_required && (
        <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>.</>
              )}
              {" "}A lead or admin should review the changes and click{" "}
              <span className="font-semibold">Mark as Reviewed</span> to acknowledge them.
            </p>
          </div>
          {!canReview && (
            <span className="shrink-0 rounded-full border border-amber-500/20 bg-amber-500/10 px-2 py-0.5 text-[10px] text-amber-400">
              Leads only
            </span>
          )}
        </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>
          </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", "blue_evaluating", "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",
                blue_evaluating: "Evaluating",
                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>
                  ) : (
                    <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>
                  )}
                </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={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>
      )}

      {/* Jira Integration */}
      {technique && (
        <JiraLinkPanel entityType="technique" entityId={technique.id} readOnly label={technique.name} />
      )}

      {/* 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">
            {defs.map((def) => {
              const isExpanded = expandedId === def.id;
              return (
                <div
                  key={def.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.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>
  );
}