import { useParams, useNavigate } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import {
  Loader2,
  AlertCircle,
  ArrowLeft,
  Globe,
  Target,
  Shield,
  ExternalLink,
  BookOpen,
  AlertTriangle,
  CheckCircle,
  XCircle,
  Clock,
  Crosshair,
  FlaskConical,
} from "lucide-react";
import {
  getThreatActor,
  getThreatActorCoverage,
  getThreatActorGaps,
  type ThreatActorTechnique,
  type GapItem,
} from "../api/threat-actors";

// ── MITRE ATT&CK Tactics in kill chain order ──────────────────────
const TACTICS_ORDER = [
  "reconnaissance",
  "resource-development",
  "initial-access",
  "execution",
  "persistence",
  "privilege-escalation",
  "defense-evasion",
  "credential-access",
  "discovery",
  "lateral-movement",
  "collection",
  "command-and-control",
  "exfiltration",
  "impact",
];

/** Status → cell colour. */
function statusCellColor(status: string | null) {
  switch (status) {
    case "validated":
      return "bg-green-500/80 border-green-400/40";
    case "partial":
      return "bg-yellow-500/80 border-yellow-400/40";
    case "in_progress":
      return "bg-blue-500/60 border-blue-400/40";
    case "not_covered":
      return "bg-red-500/70 border-red-400/40";
    case "not_evaluated":
    default:
      return "bg-gray-700/50 border-gray-600/40";
  }
}

function statusLabel(status: string | null) {
  switch (status) {
    case "validated":
      return "Validated";
    case "partial":
      return "Partial";
    case "in_progress":
      return "In Progress";
    case "not_covered":
      return "Not Covered";
    case "review_required":
      return "Review Required";
    case "not_evaluated":
    default:
      return "Not Evaluated";
  }
}

function statusIcon(status: string | null) {
  switch (status) {
    case "validated":
      return <CheckCircle className="h-3.5 w-3.5 text-green-400" />;
    case "partial":
      return <AlertTriangle className="h-3.5 w-3.5 text-yellow-400" />;
    case "in_progress":
      return <Clock className="h-3.5 w-3.5 text-blue-400" />;
    case "not_covered":
      return <XCircle className="h-3.5 w-3.5 text-red-400" />;
    default:
      return <Shield className="h-3.5 w-3.5 text-gray-500" />;
  }
}

export default function ThreatActorDetailPage() {
  const { actorId } = useParams();
  const navigate = useNavigate();

  // ── Queries ─────────────────────────────────────────────────────
  const { data: actor, isLoading, error } = useQuery({
    queryKey: ["threat-actor", actorId],
    queryFn: () => getThreatActor(actorId!),
    enabled: !!actorId,
  });

  const { data: coverage } = useQuery({
    queryKey: ["threat-actor-coverage", actorId],
    queryFn: () => getThreatActorCoverage(actorId!),
    enabled: !!actorId,
  });

  const { data: gaps } = useQuery({
    queryKey: ["threat-actor-gaps", actorId],
    queryFn: () => getThreatActorGaps(actorId!),
    enabled: !!actorId,
  });

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

  if (error || !actor) {
    return (
      <div className="rounded-xl border border-red-500/30 bg-red-900/20 p-6 text-center">
        <AlertCircle className="mx-auto h-8 w-8 text-red-400" />
        <p className="mt-2 text-sm text-red-400">
          {error ? (error as Error)?.message : "Threat actor not found"}
        </p>
      </div>
    );
  }

  // ── Organise techniques by tactic for heatmap ───────────────────
  const techniquesByTactic: Record<string, ThreatActorTechnique[]> = {};
  for (const tech of actor.techniques) {
    const tactic = tech.tactic || "unknown";
    // A technique's tactic field may be comma-separated
    const tactics = tactic.split(",").map((t) => t.trim().toLowerCase().replace(/\s+/g, "-"));
    for (const t of tactics) {
      if (!techniquesByTactic[t]) techniquesByTactic[t] = [];
      techniquesByTactic[t].push(tech);
    }
  }

  // Sort tactics by kill chain order
  const orderedTactics = TACTICS_ORDER.filter((t) => techniquesByTactic[t]);
  const unknownTactics = Object.keys(techniquesByTactic).filter(
    (t) => !TACTICS_ORDER.includes(t)
  );
  const allTactics = [...orderedTactics, ...unknownTactics];

  return (
    <div className="space-y-6">
      {/* Back Button */}
      <button
        onClick={() => navigate("/threat-actors")}
        className="flex items-center gap-1.5 text-sm text-gray-400 hover:text-white transition-colors"
      >
        <ArrowLeft className="h-4 w-4" />
        Back to Threat Actors
      </button>

      {/* ── SECTION 1: Header ──────────────────────────────────────── */}
      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
        <div className="flex items-start justify-between">
          <div>
            <div className="flex items-center gap-3">
              <Crosshair className="h-7 w-7 text-purple-400" />
              <h1 className="text-2xl font-bold text-white">{actor.name}</h1>
              {actor.mitre_id && (
                <span className="rounded-full border border-purple-500/30 bg-purple-900/50 px-2.5 py-0.5 text-xs font-mono text-purple-400">
                  {actor.mitre_id}
                </span>
              )}
            </div>

            {/* Aliases */}
            {actor.aliases && actor.aliases.length > 0 && (
              <div className="mt-2 flex flex-wrap gap-1.5">
                {actor.aliases.map((alias, i) => (
                  <span
                    key={i}
                    className="rounded-full border border-gray-700 bg-gray-800 px-2 py-0.5 text-xs text-gray-400"
                  >
                    {alias}
                  </span>
                ))}
              </div>
            )}
          </div>

          {/* MITRE link */}
          {actor.mitre_url && (
            <a
              href={actor.mitre_url}
              target="_blank"
              rel="noreferrer"
              className="flex items-center gap-1.5 rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-400 hover:text-white transition-colors"
            >
              <ExternalLink className="h-3.5 w-3.5" />
              MITRE ATT&CK
            </a>
          )}
        </div>

        {/* Meta badges */}
        <div className="mt-4 flex flex-wrap items-center gap-3">
          {actor.country && (
            <span className="inline-flex items-center gap-1.5 rounded-full border border-gray-700 bg-gray-800 px-3 py-1 text-xs text-gray-300">
              <Globe className="h-3.5 w-3.5 text-gray-500" />
              {actor.country}
            </span>
          )}
          {actor.motivation && (
            <span className="inline-flex items-center gap-1.5 rounded-full border border-purple-500/30 bg-purple-900/50 px-3 py-1 text-xs text-purple-400">
              <Target className="h-3.5 w-3.5" />
              {actor.motivation}
            </span>
          )}
          {actor.sophistication && (
            <span className="inline-flex items-center gap-1.5 rounded-full border border-cyan-500/30 bg-cyan-900/50 px-3 py-1 text-xs text-cyan-400">
              {actor.sophistication}
            </span>
          )}
          {actor.first_seen && (
            <span className="text-xs text-gray-500">
              First seen: {actor.first_seen}
            </span>
          )}
          {actor.last_seen && (
            <span className="text-xs text-gray-500">
              Last seen: {actor.last_seen}
            </span>
          )}
        </div>

        {/* Target sectors */}
        {actor.target_sectors && actor.target_sectors.length > 0 && (
          <div className="mt-3 flex items-center gap-2">
            <Target className="h-4 w-4 text-gray-600 shrink-0" />
            <div className="flex flex-wrap gap-1.5">
              {actor.target_sectors.map((s, i) => (
                <span
                  key={i}
                  className="rounded-full border border-gray-700 bg-gray-800 px-2 py-0.5 text-[11px] text-gray-400"
                >
                  {s}
                </span>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* ── SECTION 2: Description ─────────────────────────────────── */}
      {actor.description && (
        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
          <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500">
            Description
          </h2>
          <p className="text-sm leading-relaxed text-gray-300 whitespace-pre-line">
            {actor.description}
          </p>
        </div>
      )}

      {/* ── SECTION 3: Coverage Overview ───────────────────────────── */}
      {coverage && (
        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-500">
            Coverage Overview
          </h2>
          <div className="grid gap-4 sm:grid-cols-4">
            <div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center">
              <p className="text-3xl font-bold text-white">{coverage.total_techniques}</p>
              <p className="text-xs text-gray-400">Total Techniques</p>
            </div>
            <div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center">
              <p className="text-3xl font-bold text-green-400">{coverage.covered}</p>
              <p className="text-xs text-gray-400">Covered</p>
            </div>
            <div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center">
              <p className="text-3xl font-bold text-red-400">
                {coverage.total_techniques - coverage.covered}
              </p>
              <p className="text-xs text-gray-400">Gaps</p>
            </div>
            <div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center">
              <p className={`text-3xl font-bold ${
                coverage.coverage_pct >= 80 ? "text-green-400" :
                coverage.coverage_pct >= 50 ? "text-yellow-400" : "text-red-400"
              }`}>
                {coverage.coverage_pct}%
              </p>
              <p className="text-xs text-gray-400">Coverage</p>
            </div>
          </div>

          {/* Breakdown bar */}
          {coverage.total_techniques > 0 && (
            <div className="mt-4">
              <div className="flex h-3 overflow-hidden rounded-full bg-gray-800">
                {coverage.breakdown.validated && (
                  <div
                    className="bg-green-500 transition-all"
                    style={{
                      width: `${(coverage.breakdown.validated / coverage.total_techniques) * 100}%`,
                    }}
                    title={`Validated: ${coverage.breakdown.validated}`}
                  />
                )}
                {coverage.breakdown.partial && (
                  <div
                    className="bg-yellow-500 transition-all"
                    style={{
                      width: `${(coverage.breakdown.partial / coverage.total_techniques) * 100}%`,
                    }}
                    title={`Partial: ${coverage.breakdown.partial}`}
                  />
                )}
                {coverage.breakdown.in_progress && (
                  <div
                    className="bg-blue-500 transition-all"
                    style={{
                      width: `${(coverage.breakdown.in_progress / coverage.total_techniques) * 100}%`,
                    }}
                    title={`In Progress: ${coverage.breakdown.in_progress}`}
                  />
                )}
                {coverage.breakdown.not_covered && (
                  <div
                    className="bg-red-500/70 transition-all"
                    style={{
                      width: `${(coverage.breakdown.not_covered / coverage.total_techniques) * 100}%`,
                    }}
                    title={`Not Covered: ${coverage.breakdown.not_covered}`}
                  />
                )}
              </div>
              <div className="mt-2 flex flex-wrap gap-4 text-xs text-gray-400">
                {Object.entries(coverage.breakdown).map(([status, count]) => (
                  <span key={status} className="flex items-center gap-1.5">
                    {statusIcon(status)}
                    {statusLabel(status)}: {count}
                  </span>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

      {/* ── SECTION 4: Technique Heatmap ───────────────────────────── */}
      {allTactics.length > 0 && (
        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-500">
            Technique Heatmap
          </h2>

          {/* Legend */}
          <div className="mb-4 flex flex-wrap gap-3 text-xs">
            <span className="flex items-center gap-1.5">
              <span className="h-3 w-3 rounded bg-green-500/80" /> Validated
            </span>
            <span className="flex items-center gap-1.5">
              <span className="h-3 w-3 rounded bg-yellow-500/80" /> Partial
            </span>
            <span className="flex items-center gap-1.5">
              <span className="h-3 w-3 rounded bg-blue-500/60" /> In Progress
            </span>
            <span className="flex items-center gap-1.5">
              <span className="h-3 w-3 rounded bg-red-500/70" /> Not Covered
            </span>
            <span className="flex items-center gap-1.5">
              <span className="h-3 w-3 rounded bg-gray-700/50" /> Not Evaluated
            </span>
          </div>

          {/* Heatmap grid — one column per tactic */}
          <div className="overflow-x-auto">
            <div className="inline-flex gap-2 min-w-max">
              {allTactics.map((tactic) => {
                const techs = techniquesByTactic[tactic] || [];
                return (
                  <div key={tactic} className="flex flex-col gap-1" style={{ minWidth: 120 }}>
                    {/* Tactic header */}
                    <div className="rounded bg-gray-800 px-2 py-1.5 text-center">
                      <span className="text-[10px] font-semibold uppercase tracking-wide text-gray-400">
                        {tactic.replace(/-/g, " ")}
                      </span>
                      <span className="ml-1 text-[10px] text-gray-600">({techs.length})</span>
                    </div>

                    {/* Technique cells */}
                    {techs.map((tech) => (
                      <button
                        key={tech.technique_id}
                        onClick={() => navigate(`/techniques/${tech.mitre_id}`)}
                        className={`rounded border p-1.5 text-left transition-all hover:opacity-80 ${statusCellColor(tech.status_global)}`}
                        title={`${tech.mitre_id}: ${tech.name} (${statusLabel(tech.status_global)})`}
                      >
                        <span className="block truncate text-[10px] font-mono text-white/90">
                          {tech.mitre_id}
                        </span>
                        <span className="block truncate text-[9px] text-white/60">
                          {tech.name}
                        </span>
                      </button>
                    ))}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}

      {/* ── SECTION 5: Gap Analysis ────────────────────────────────── */}
      {gaps && gaps.gaps.length > 0 && (
        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
          <h2 className="mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-gray-500">
            <AlertTriangle className="h-4 w-4 text-orange-400" />
            Coverage Gap Analysis ({gaps.total_gaps} gaps)
          </h2>

          <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">Technique</th>
                  <th className="pb-3 px-4 font-medium text-gray-400">Tactic</th>
                  <th className="pb-3 px-4 font-medium text-gray-400">Status</th>
                  <th className="pb-3 px-4 font-medium text-gray-400">Templates</th>
                  <th className="pb-3 px-4 font-medium text-gray-400">Tests</th>
                </tr>
              </thead>
              <tbody>
                {gaps.gaps.map((gap: GapItem) => (
                  <tr
                    key={gap.technique_id}
                    className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors cursor-pointer"
                    onClick={() => navigate(`/techniques/${gap.mitre_id}`)}
                  >
                    <td className="py-2.5 pr-4">
                      <div className="flex items-center gap-2">
                        <span className="font-mono text-xs text-cyan-400">{gap.mitre_id}</span>
                        <span className="truncate text-gray-300 text-xs max-w-[200px]">
                          {gap.name}
                        </span>
                      </div>
                    </td>
                    <td className="py-2.5 px-4 text-xs text-gray-400">
                      {gap.tactic || "-"}
                    </td>
                    <td className="py-2.5 px-4">
                      <span className="flex items-center gap-1.5 text-xs">
                        {statusIcon(gap.status_global)}
                        {statusLabel(gap.status_global)}
                      </span>
                    </td>
                    <td className="py-2.5 px-4">
                      {gap.has_templates ? (
                        <span className="inline-flex items-center gap-1 text-xs text-green-400">
                          <BookOpen className="h-3.5 w-3.5" />
                          {gap.available_templates}
                        </span>
                      ) : (
                        <span className="text-xs text-gray-600">0</span>
                      )}
                    </td>
                    <td className="py-2.5 px-4">
                      {gap.existing_tests > 0 ? (
                        <span className="inline-flex items-center gap-1 text-xs text-blue-400">
                          <FlaskConical className="h-3.5 w-3.5" />
                          {gap.existing_tests}
                        </span>
                      ) : (
                        <span className="text-xs text-gray-600">0</span>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* ── SECTION 6: All Techniques List ─────────────────────────── */}
      {actor.techniques.length > 0 && (
        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-500">
            All Techniques ({actor.techniques.length})
          </h2>
          <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">ID</th>
                  <th className="pb-3 px-4 font-medium text-gray-400">Name</th>
                  <th className="pb-3 px-4 font-medium text-gray-400">Tactic</th>
                  <th className="pb-3 px-4 font-medium text-gray-400">Status</th>
                </tr>
              </thead>
              <tbody>
                {actor.techniques.map((tech: ThreatActorTechnique) => (
                  <tr
                    key={tech.technique_id}
                    className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors cursor-pointer"
                    onClick={() => navigate(`/techniques/${tech.mitre_id}`)}
                  >
                    <td className="py-2.5 pr-4 font-mono text-xs text-cyan-400">
                      {tech.mitre_id}
                    </td>
                    <td className="py-2.5 px-4 text-xs text-gray-300 truncate max-w-[250px]">
                      {tech.name}
                    </td>
                    <td className="py-2.5 px-4 text-xs text-gray-400">
                      {tech.tactic || "-"}
                    </td>
                    <td className="py-2.5 px-4">
                      <span className="flex items-center gap-1.5 text-xs">
                        {statusIcon(tech.status_global)}
                        {statusLabel(tech.status_global)}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* ── References ─────────────────────────────────────────────── */}
      {actor.references && actor.references.length > 0 && (
        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
          <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500">
            References
          </h2>
          <ul className="space-y-1.5">
            {actor.references.map((ref, i) => (
              <li key={i} className="text-xs">
                {ref.url ? (
                  <a
                    href={ref.url}
                    target="_blank"
                    rel="noreferrer"
                    className="text-cyan-400 hover:text-cyan-300 hover:underline"
                  >
                    {ref.source || ref.url}
                  </a>
                ) : (
                  <span className="text-gray-400">{ref.source}</span>
                )}
                {ref.description && (
                  <span className="ml-2 text-gray-500">{ref.description}</span>
                )}
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}