import { useQuery } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import { Loader2, AlertCircle, FlaskConical, Plus } from "lucide-react";
import { getTechniques, type TechniqueSummary } from "../api/techniques";
import type { TestState, TestResult } from "../types/models";
import { useAuth } from "../context/AuthContext";

const testStateBadgeColors: Record<TestState, string> = {
  draft: "bg-gray-800/50 text-gray-400 border-gray-600/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",
};

interface TestSummary {
  id: string;
  technique_id: string;
  technique_mitre_id: string;
  technique_name: string;
  name: string;
  state: TestState;
  result: TestResult | null;
  platform: string | null;
  created_at: string;
}

export default function TestsPage() {
  const navigate = useNavigate();
  const { user } = useAuth();

  const canCreate =
    user?.role === "admin" || user?.role === "red_tech" || user?.role === "blue_tech";

  // For now, we'll fetch techniques to get their tests
  // In a production app, you'd want a dedicated /tests endpoint
  const {
    data: techniques,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["techniques"],
    queryFn: () => getTechniques(),
  });

  // Note: Since we don't have a direct /tests list endpoint, we're showing
  // a message to navigate through techniques. In a full implementation,
  // you'd add a /tests endpoint to the backend.

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
    });
  };

  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 data</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">Tests</h1>
          <p className="mt-1 text-sm text-gray-400">
            Security tests for technique validation
          </p>
        </div>
        {canCreate && (
          <button
            onClick={() => navigate("/tests/new")}
            className="flex items-center gap-1.5 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-500 transition-colors"
          >
            <Plus className="h-4 w-4" />
            New Test
          </button>
        )}
      </div>

      {/* Info Card */}
      <div className="rounded-xl border border-cyan-500/30 bg-cyan-500/10 p-6">
        <div className="flex items-start gap-4">
          <div className="rounded-lg bg-cyan-500/20 p-3">
            <FlaskConical className="h-6 w-6 text-cyan-400" />
          </div>
          <div>
            <h2 className="text-lg font-semibold text-white">Browse Tests by Technique</h2>
            <p className="mt-1 text-sm text-gray-400">
              Tests are organized by MITRE ATT&CK technique. Navigate to a technique from the{" "}
              <button
                onClick={() => navigate("/techniques")}
                className="text-cyan-400 hover:underline"
              >
                Techniques page
              </button>{" "}
              to view and manage its associated tests.
            </p>
            <div className="mt-4 flex flex-wrap gap-3">
              <button
                onClick={() => navigate("/techniques")}
                className="rounded-lg border border-cyan-500/30 bg-cyan-500/10 px-4 py-2 text-sm font-medium text-cyan-400 hover:bg-cyan-500/20 transition-colors"
              >
                Browse Techniques Matrix
              </button>
              {canCreate && (
                <button
                  onClick={() => navigate("/tests/new")}
                  className="rounded-lg border border-gray-700 bg-gray-800 px-4 py-2 text-sm font-medium text-gray-300 hover:border-gray-600 hover:text-white transition-colors"
                >
                  Create Standalone Test
                </button>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Quick Stats */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div className="rounded-xl border border-gray-800 bg-gray-900 p-5">
          <p className="text-sm text-gray-400">Techniques with Tests</p>
          <p className="mt-1 text-2xl font-bold text-cyan-400">
            {techniques?.filter((t: TechniqueSummary) => t.status_global !== "not_evaluated").length || 0}
          </p>
        </div>
        <div className="rounded-xl border border-gray-800 bg-gray-900 p-5">
          <p className="text-sm text-gray-400">Validated</p>
          <p className="mt-1 text-2xl font-bold text-green-400">
            {techniques?.filter((t: TechniqueSummary) => t.status_global === "validated").length || 0}
          </p>
        </div>
        <div className="rounded-xl border border-gray-800 bg-gray-900 p-5">
          <p className="text-sm text-gray-400">In Progress</p>
          <p className="mt-1 text-2xl font-bold text-blue-400">
            {techniques?.filter((t: TechniqueSummary) => t.status_global === "in_progress").length || 0}
          </p>
        </div>
        <div className="rounded-xl border border-gray-800 bg-gray-900 p-5">
          <p className="text-sm text-gray-400">Pending Evaluation</p>
          <p className="mt-1 text-2xl font-bold text-gray-400">
            {techniques?.filter((t: TechniqueSummary) => t.status_global === "not_evaluated").length || 0}
          </p>
        </div>
      </div>

      {/* Techniques with Recent Activity */}
      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
        <h2 className="mb-4 text-lg font-semibold text-white">Techniques Being Tested</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">Name</th>
                <th className="pb-3 px-4 font-medium text-gray-400">Status</th>
                <th className="pb-3 pl-4 font-medium text-gray-400">Action</th>
              </tr>
            </thead>
            <tbody>
              {techniques
                ?.filter((t: TechniqueSummary) => t.status_global !== "not_evaluated")
                .slice(0, 10)
                .map((tech: TechniqueSummary) => (
                  <tr
                    key={tech.id}
                    className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
                  >
                    <td className="py-3 pr-4">
                      <span className="font-mono text-cyan-400">{tech.mitre_id}</span>
                    </td>
                    <td className="py-3 px-4 text-gray-200">{tech.name}</td>
                    <td className="py-3 px-4">
                      <span
                        className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
                          tech.status_global === "validated"
                            ? testStateBadgeColors.validated
                            : tech.status_global === "in_progress"
                            ? testStateBadgeColors.in_review
                            : tech.status_global === "partial"
                            ? "bg-yellow-900/50 text-yellow-400 border-yellow-500/30"
                            : testStateBadgeColors.draft
                        }`}
                      >
                        {tech.status_global.replace(/_/g, " ")}
                      </span>
                    </td>
                    <td className="py-3 pl-4">
                      <button
                        onClick={() => navigate(`/techniques/${tech.mitre_id}`)}
                        className="text-sm text-cyan-400 hover:underline"
                      >
                        View Tests
                      </button>
                    </td>
                  </tr>
                ))}
            </tbody>
          </table>
          {techniques?.filter((t: TechniqueSummary) => t.status_global !== "not_evaluated").length === 0 && (
            <div className="py-8 text-center text-gray-400">
              No techniques have been tested yet. Create your first test to get started.
            </div>
          )}
        </div>
      </div>
    </div>
  );
}