import { useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import MarkdownText from "../components/MarkdownText";
import { safeUrl } from "../utils/url";
import MotivationBadge from "../components/MotivationBadge";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import {
  Loader2,
  AlertCircle,
  ArrowLeft,
  Globe,
  Target,
  Shield,
  ExternalLink,
  BookOpen,
  AlertTriangle,
  CheckCircle,
  XCircle,
  Clock,
  Crosshair,
  FlaskConical,
  Swords,
  X,
  Calendar,
} from "lucide-react";
import {
  getThreatActor,
  getThreatActorCoverage,
  getThreatActorGaps,
  type ThreatActorTechnique,
  type GapItem,
} from "../api/threat-actors";
import { generateCampaignFromThreatActor } from "../api/campaigns";
import { useAuth } from "../context/AuthContext";

// ── 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();
  const queryClient = useQueryClient();
  const { user } = useAuth();

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

  // ── Campaign generation modal state ─────────────────────────────
  const [showCampaignModal, setShowCampaignModal] = useState(false);
  const [campaignStartDate, setCampaignStartDate] = useState("");
  const [dateError, setDateError] = useState("");

  const generateMutation = useMutation({
    mutationFn: () =>
      generateCampaignFromThreatActor(actorId!, { start_date: campaignStartDate }),
    onSuccess: (campaign) => {
      queryClient.invalidateQueries({ queryKey: ["campaigns"] });
      setShowCampaignModal(false);
      setCampaignStartDate("");
      setDateError("");
      navigate(`/campaigns/${campaign.id}`);
    },
  });

  const handleGenerateSubmit = () => {
    if (!campaignStartDate) {
      setDateError("Start date is required");
      return;
    }
    const selected = new Date(campaignStartDate + "T00:00:00");
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    if (selected < today) {
      setDateError("Start date must be today or in the future");
      return;
    }
    setDateError("");
    generateMutation.mutate();
  };

  // ── 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>

          {/* Action buttons */}
          <div className="flex items-center gap-2">
            {canGenerate && (
              <button
                onClick={() => {
                  setShowCampaignModal(true);
                  setCampaignStartDate("");
                  setDateError("");
                  generateMutation.reset();
                }}
                className="flex items-center gap-1.5 rounded-lg border border-purple-500/40 bg-purple-900/30 px-3 py-2 text-xs font-medium text-purple-300 hover:bg-purple-900/50 transition-colors"
              >
                <Swords className="h-3.5 w-3.5" />
                Generate Campaign
              </button>
            )}
            {actor.mitre_url && (
              <a
                href={safeUrl(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>
        </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 && (
            <MotivationBadge motivation={actor.motivation} />
          )}
          {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>
          <MarkdownText content={actor.description} className="text-sm leading-relaxed text-gray-300" />
        </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={safeUrl(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>
      )}
      {/* ── Generate Campaign Modal ─────────────────────────────────── */}
      {showCampaignModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
          <div className="mx-4 w-full max-w-md rounded-xl border border-purple-500/30 bg-gray-900 shadow-2xl">
            {/* Header */}
            <div className="flex items-center justify-between border-b border-gray-800 px-6 py-4">
              <div className="flex items-center gap-2">
                <Swords className="h-5 w-5 text-purple-400" />
                <h3 className="text-lg font-semibold text-white">Generate Campaign</h3>
              </div>
              <button
                onClick={() => setShowCampaignModal(false)}
                className="rounded p-1 text-gray-400 hover:bg-gray-800 hover:text-white transition-colors"
              >
                <X className="h-5 w-5" />
              </button>
            </div>

            <div className="px-6 py-5 space-y-5">
              {/* Actor info */}
              <div className="flex items-center gap-3 rounded-lg border border-purple-500/20 bg-purple-900/10 px-4 py-3">
                <Crosshair className="h-4 w-4 shrink-0 text-purple-400" />
                <div>
                  <p className="text-xs text-gray-500">Threat actor</p>
                  <p className="text-sm font-medium text-white">{actor.name}</p>
                </div>
              </div>

              {/* What this does */}
              <p className="text-xs text-gray-400 leading-relaxed">
                A campaign will be auto-generated covering all uncovered techniques for this actor,
                ordered by kill chain phase. Tests will be hidden from the team queue until the start date.
              </p>

              {/* Start date — required */}
              <div>
                <label className="mb-1.5 flex items-center gap-1.5 text-sm font-medium text-gray-300">
                  <Calendar className="h-4 w-4 text-purple-400" />
                  Start date
                  <span className="text-red-400">*</span>
                </label>
                <input
                  type="date"
                  value={campaignStartDate}
                  min={new Date().toISOString().split("T")[0]}
                  onChange={(e) => {
                    setCampaignStartDate(e.target.value);
                    if (dateError) setDateError("");
                  }}
                  className={`w-full rounded-lg border px-3 py-2 text-sm text-gray-200 bg-gray-800 focus:outline-none focus:border-purple-500 transition-colors [color-scheme:dark] ${
                    dateError ? "border-red-500" : "border-gray-700"
                  }`}
                />
                {dateError && (
                  <p className="mt-1.5 flex items-center gap-1.5 text-xs text-red-400">
                    <AlertCircle className="h-3.5 w-3.5 shrink-0" />
                    {dateError}
                  </p>
                )}
                {campaignStartDate && !dateError && (
                  <p className="mt-1.5 text-xs text-amber-400">
                    ⏰ Tests will be queued for the team on{" "}
                    {new Date(campaignStartDate + "T00:00:00").toLocaleDateString("en-GB", {
                      day: "numeric", month: "long", year: "numeric",
                    })}
                  </p>
                )}
              </div>

              {/* API error */}
              {generateMutation.isError && (
                <div className="flex items-start gap-2 rounded-lg border border-red-500/30 bg-red-900/20 px-3 py-2.5 text-xs text-red-400">
                  <AlertCircle className="h-3.5 w-3.5 mt-0.5 shrink-0" />
                  {(generateMutation.error as Error)?.message || "Failed to generate campaign"}
                </div>
              )}
            </div>

            {/* Footer */}
            <div className="flex justify-end gap-3 border-t border-gray-800 px-6 py-4">
              <button
                onClick={() => setShowCampaignModal(false)}
                className="rounded-lg border border-gray-700 px-4 py-2 text-sm text-gray-400 hover:bg-gray-800 transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={handleGenerateSubmit}
                disabled={generateMutation.isPending}
                className="flex items-center gap-1.5 rounded-lg bg-purple-700 px-5 py-2 text-sm font-medium text-white hover:bg-purple-600 disabled:opacity-50 transition-colors"
              >
                {generateMutation.isPending ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : (
                  <Swords className="h-4 w-4" />
                )}
                Generate Campaign
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
