Aegis/frontend/src/pages/TechniqueDetailPage.tsx

import { useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import {
  Loader2,
  AlertCircle,
  ArrowLeft,
  CheckCircle,
  Clock,
  Shield,
  FileText,
  ExternalLink,
  Plus,
  Check,
  X,
  AlertTriangle,
  BookOpen,
  FlaskConical,
  ChevronDown,
  ChevronUp,
} 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-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-500 disabled:opacity-50 transition-colors"
            >
              {reviewMutation.isPending ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <CheckCircle className="h-4 w-4" />
              )}
              Mark as Reviewed
            </button>
          )}
        </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>
          <p className="text-sm text-gray-400 leading-relaxed whitespace-pre-wrap">
            {technique.description || "No description available."}
          </p>
        </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">
                      <div className="flex items-center gap-2">
                        <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>
                        {canReview && test.state === "draft" && (
                          <>
                            <button
                              onClick={() => navigate(`/tests/${test.id}/validate`)}
                              className="rounded p-1 text-gray-400 hover:bg-green-900/50 hover:text-green-400"
                              title="Validate"
                            >
                              <Check className="h-4 w-4" />
                            </button>
                            <button
                              onClick={() => navigate(`/tests/${test.id}/reject`)}
                              className="rounded p-1 text-gray-400 hover:bg-red-900/50 hover:text-red-400"
                              title="Reject"
                            >
                              <X className="h-4 w-4" />
                            </button>
                          </>
                        )}
                      </div>
                    </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>

      {/* 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) => (
              <div
                key={tpl.id}
                className="flex items-center justify-between rounded-lg border border-gray-800 bg-gray-800/30 p-4 transition-colors hover:border-gray-700"
              >
                <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>
                <button
                  onClick={() => setTemplateFormId(tpl.id)}
                  className="ml-3 flex shrink-0 items-center gap-1 rounded-lg border border-cyan-500/30 bg-cyan-500/10 px-3 py-1.5 text-xs font-medium text-cyan-400 hover:bg-cyan-500/20 transition-colors"
                >
                  <FlaskConical className="h-3.5 w-3.5" />
                  Run This Test
                </button>
              </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} />
      )}

      {/* Template instantiation modal */}
      {templateFormId && technique && (
        <TestFromTemplateForm
          templateId={templateFormId}
          techniqueId={technique.id}
          onClose={() => setTemplateFormId(null)}
        />
      )}
    </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 ? (
                        <p className="text-xs text-gray-300 leading-relaxed">{def.description}</p>
                      ) : (
                        <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>
  );
}