Aegis/frontend/src/pages/TechniquesPage.tsx

import { useState, useMemo } from "react";
import { useQuery } from "@tanstack/react-query";
import { Loader2, AlertCircle, Filter, X, Grid3X3, List } from "lucide-react";
import { getTechniques, type TechniqueSummary } from "../api/techniques";
import AttackMatrix from "../components/AttackMatrix";
import type { TechniqueStatus } from "../types/models";
import { useNavigate } from "react-router-dom";

const STATUS_OPTIONS: { value: TechniqueStatus | "all"; label: string; color: string }[] = [
  { value: "all", label: "All Statuses", color: "text-gray-400" },
  { value: "validated", label: "Validated", color: "text-green-400" },
  { value: "partial", label: "Partial", color: "text-yellow-400" },
  { value: "in_progress", label: "In Progress", color: "text-blue-400" },
  { value: "not_covered", label: "Not Covered", color: "text-red-400" },
  { value: "not_evaluated", label: "Not Evaluated", color: "text-gray-400" },
];

const PLATFORM_OPTIONS = ["all", "windows", "linux", "macos", "cloud", "network"] as const;

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

export default function TechniquesPage() {
  const navigate = useNavigate();
  const [viewMode, setViewMode] = useState<"matrix" | "list">("matrix");
  const [statusFilter, setStatusFilter] = useState<TechniqueStatus | "all">("all");
  const [platformFilter, setPlatformFilter] = useState<string>("all");
  const [tacticFilter, setTacticFilter] = useState<string>("all");

  const {
    data: techniques,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["techniques"],
    queryFn: () => getTechniques(),
  });

  // Extract unique tactics from techniques
  const availableTactics = useMemo(() => {
    if (!techniques) return [];
    const tactics = new Set<string>();
    for (const tech of techniques) {
      if (tech.tactic) {
        tech.tactic.split(",").forEach((t) => tactics.add(t.trim().toLowerCase()));
      }
    }
    return Array.from(tactics).sort();
  }, [techniques]);

  // Apply filters
  const filteredTechniques = useMemo(() => {
    if (!techniques) return [];

    return techniques.filter((tech: TechniqueSummary) => {
      // Status filter
      if (statusFilter !== "all" && tech.status_global !== statusFilter) {
        return false;
      }

      // Tactic filter
      if (tacticFilter !== "all") {
        const techTactics = tech.tactic?.split(",").map((t) => t.trim().toLowerCase()) || [];
        if (!techTactics.includes(tacticFilter)) {
          return false;
        }
      }

      return true;
    });
  }, [techniques, statusFilter, tacticFilter]);

  const hasActiveFilters = statusFilter !== "all" || tacticFilter !== "all" || platformFilter !== "all";

  const clearFilters = () => {
    setStatusFilter("all");
    setPlatformFilter("all");
    setTacticFilter("all");
  };

  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) {
    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 techniques</p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">ATT&CK Techniques</h1>
          <p className="mt-1 text-sm text-gray-400">
            MITRE ATT&CK coverage matrix — click any technique for details
          </p>
        </div>
        <div className="flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-800 p-1">
          <button
            onClick={() => setViewMode("matrix")}
            className={`flex items-center gap-1.5 rounded px-3 py-1.5 text-sm transition-colors ${
              viewMode === "matrix"
                ? "bg-cyan-500/20 text-cyan-400"
                : "text-gray-400 hover:text-gray-200"
            }`}
          >
            <Grid3X3 className="h-4 w-4" />
            Matrix
          </button>
          <button
            onClick={() => setViewMode("list")}
            className={`flex items-center gap-1.5 rounded px-3 py-1.5 text-sm transition-colors ${
              viewMode === "list"
                ? "bg-cyan-500/20 text-cyan-400"
                : "text-gray-400 hover:text-gray-200"
            }`}
          >
            <List className="h-4 w-4" />
            List
          </button>
        </div>
      </div>

      {/* Filters */}
      <div className="flex flex-wrap items-center gap-4 rounded-xl border border-gray-800 bg-gray-900 p-4">
        <div className="flex items-center gap-2">
          <Filter className="h-4 w-4 text-gray-400" />
          <span className="text-sm font-medium text-gray-400">Filters:</span>
        </div>

        {/* Status filter */}
        <select
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value as TechniqueStatus | "all")}
          className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
        >
          {STATUS_OPTIONS.map((opt) => (
            <option key={opt.value} value={opt.value}>
              {opt.label}
            </option>
          ))}
        </select>

        {/* Tactic filter */}
        <select
          value={tacticFilter}
          onChange={(e) => setTacticFilter(e.target.value)}
          className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
        >
          <option value="all">All Tactics</option>
          {availableTactics.map((tactic) => (
            <option key={tactic} value={tactic}>
              {tactic
                .split("-")
                .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
                .join(" ")}
            </option>
          ))}
        </select>

        {/* Platform filter */}
        <select
          value={platformFilter}
          onChange={(e) => setPlatformFilter(e.target.value)}
          className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
        >
          {PLATFORM_OPTIONS.map((platform) => (
            <option key={platform} value={platform}>
              {platform === "all" ? "All Platforms" : platform.charAt(0).toUpperCase() + platform.slice(1)}
            </option>
          ))}
        </select>

        {hasActiveFilters && (
          <button
            onClick={clearFilters}
            className="flex items-center gap-1 rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-400 hover:border-red-500/50 hover:text-red-400"
          >
            <X className="h-3.5 w-3.5" />
            Clear
          </button>
        )}

        <div className="ml-auto text-sm text-gray-500">
          Showing {filteredTechniques.length} of {techniques?.length || 0} techniques
        </div>
      </div>

      {/* Matrix or List View */}
      {viewMode === "matrix" ? (
        <AttackMatrix techniques={filteredTechniques} />
      ) : (
        <div className="rounded-xl border border-gray-800 bg-gray-900">
          <table className="w-full text-left text-sm">
            <thead>
              <tr className="border-b border-gray-800">
                <th className="px-4 py-3 font-medium text-gray-400">MITRE ID</th>
                <th className="px-4 py-3 font-medium text-gray-400">Name</th>
                <th className="px-4 py-3 font-medium text-gray-400">Tactic</th>
                <th className="px-4 py-3 font-medium text-gray-400">Status</th>
              </tr>
            </thead>
            <tbody>
              {filteredTechniques.map((tech) => (
                <tr
                  key={tech.id}
                  onClick={() => navigate(`/techniques/${tech.mitre_id}`)}
                  className="cursor-pointer border-b border-gray-800/50 hover:bg-gray-800/50 transition-colors"
                >
                  <td className="px-4 py-3">
                    <span className="font-mono text-cyan-400">{tech.mitre_id}</span>
                  </td>
                  <td className="px-4 py-3 text-gray-200">{tech.name}</td>
                  <td className="px-4 py-3">
                    <span className="text-gray-400 capitalize">
                      {tech.tactic?.replace(/-/g, " ") || "—"}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <span
                      className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
                        statusBadgeColors[tech.status_global]
                      }`}
                    >
                      {tech.status_global.replace(/_/g, " ")}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          {filteredTechniques.length === 0 && (
            <div className="p-8 text-center text-gray-400">
              No techniques found matching your filters
            </div>
          )}
        </div>
      )}

      {/* Legend */}
      <div className="flex flex-wrap items-center gap-4 rounded-xl border border-gray-800 bg-gray-900 p-4">
        <span className="text-sm font-medium text-gray-400">Legend:</span>
        {STATUS_OPTIONS.filter((s) => s.value !== "all").map((status) => (
          <div key={status.value} className="flex items-center gap-2">
            <div
              className={`h-3 w-3 rounded ${
                status.value === "validated"
                  ? "bg-green-500"
                  : status.value === "partial"
                  ? "bg-yellow-500"
                  : status.value === "in_progress"
                  ? "bg-blue-500"
                  : status.value === "not_covered"
                  ? "bg-red-500"
                  : "bg-gray-600"
              }`}
            />
            <span className="text-xs text-gray-400">{status.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}