import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useQuery, useMutation } from "@tanstack/react-query";
import {
  Loader2,
  FlaskConical,
  X,
  AlertCircle,
  BookOpen,
} from "lucide-react";
import { getTemplateById } from "../api/test-templates";
import { createTestFromTemplate } from "../api/tests";
import type { TestTemplate } from "../types/models";

// ── Props ──────────────────────────────────────────────────────────

interface TestFromTemplateFormProps {
  templateId: string;
  /** If provided, pre-selects the technique (from TechniqueDetailPage). */
  techniqueId?: string;
  onClose: () => void;
}

// ── Component ──────────────────────────────────────────────────────

export default function TestFromTemplateForm({
  templateId,
  techniqueId: propTechniqueId,
  onClose,
}: TestFromTemplateFormProps) {
  const navigate = useNavigate();

  // ── Load template details ──────────────────────────────────────

  const {
    data: template,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["test-template", templateId],
    queryFn: () => getTemplateById(templateId),
    enabled: !!templateId,
  });

  // ── Form state (pre-filled from template) ──────────────────────

  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [technique, setTechnique] = useState(propTechniqueId || "");
  const [platform, setPlatform] = useState("");
  const [procedureText, setProcedureText] = useState("");
  const [toolUsed, setToolUsed] = useState("");
  const [expectedDetection, setExpectedDetection] = useState("");

  // Hydrate form when template loads
  useEffect(() => {
    if (template) {
      setName(template.name || "");
      setDescription(template.description || "");
      setTechnique(propTechniqueId || template.mitre_technique_id || "");
      setPlatform(template.platform || "");
      setProcedureText(template.attack_procedure || "");
      setToolUsed(template.tool_suggested || "");
      setExpectedDetection(template.expected_detection || "");
    }
  }, [template, propTechniqueId]);

  // ── Submit ─────────────────────────────────────────────────────

  const createMutation = useMutation({
    mutationFn: () => createTestFromTemplate(templateId, technique),
    onSuccess: (test) => {
      navigate(`/tests/${test.id}`);
    },
  });

  const canSubmit = name.trim().length > 0 && technique.trim().length > 0;

  // ── Render ─────────────────────────────────────────────────────

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <div className="max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-xl border border-gray-800 bg-gray-900 shadow-xl">
        {/* Header */}
        <div className="sticky top-0 z-10 flex items-center justify-between border-b border-gray-800 bg-gray-900 px-6 py-4">
          <div className="flex items-center gap-2">
            <BookOpen className="h-5 w-5 text-cyan-400" />
            <h3 className="text-lg font-semibold text-white">Create Test from Template</h3>
          </div>
          <button
            onClick={onClose}
            className="rounded p-1 text-gray-400 hover:bg-gray-800 hover:text-white"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Body */}
        {isLoading ? (
          <div className="flex items-center justify-center py-16">
            <Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
          </div>
        ) : error ? (
          <div className="flex flex-col items-center justify-center py-16">
            <AlertCircle className="h-10 w-10 text-red-400" />
            <p className="mt-2 text-sm text-red-400">Failed to load template</p>
          </div>
        ) : (
          <div className="space-y-5 px-6 py-5">
            {/* Template info banner */}
            <div className="rounded-lg border border-cyan-500/20 bg-cyan-900/10 p-3">
              <p className="text-xs text-cyan-400">
                Pre-filled from template: <strong>{template?.name}</strong>
                {template?.source && (
                  <span className="ml-2 rounded-full border border-gray-600/30 bg-gray-800/50 px-2 py-0.5 text-[10px] text-gray-400">
                    {template.source}
                  </span>
                )}
              </p>
            </div>

            {/* Name */}
            <div>
              <label className="mb-1.5 block text-sm font-medium text-gray-300">
                Test Name <span className="text-red-400">*</span>
              </label>
              <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
                placeholder="Test name"
              />
            </div>

            {/* Description */}
            <div>
              <label className="mb-1.5 block text-sm font-medium text-gray-300">
                Description
              </label>
              <textarea
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                rows={3}
                className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
                placeholder="Test description..."
              />
            </div>

            {/* Technique ID */}
            <div>
              <label className="mb-1.5 block text-sm font-medium text-gray-300">
                MITRE Technique ID <span className="text-red-400">*</span>
              </label>
              <input
                value={technique}
                onChange={(e) => setTechnique(e.target.value)}
                className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
                placeholder="e.g. T1059.001"
                readOnly={!!propTechniqueId}
              />
              {propTechniqueId && (
                <p className="mt-1 text-xs text-gray-500">Pre-selected from technique page</p>
              )}
            </div>

            {/* Platform */}
            <div>
              <label className="mb-1.5 block text-sm font-medium text-gray-300">Platform</label>
              <input
                value={platform}
                onChange={(e) => setPlatform(e.target.value)}
                className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
                placeholder="e.g. windows, linux, macos"
              />
            </div>

            {/* Attack Procedure */}
            <div>
              <label className="mb-1.5 block text-sm font-medium text-gray-300">
                Suggested Attack Procedure
              </label>
              <textarea
                value={procedureText}
                onChange={(e) => setProcedureText(e.target.value)}
                rows={5}
                className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 font-mono text-sm text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
                placeholder="Attack procedure..."
              />
            </div>

            {/* Tool Suggested */}
            <div>
              <label className="mb-1.5 block text-sm font-medium text-gray-300">
                Suggested Tool
              </label>
              <input
                value={toolUsed}
                onChange={(e) => setToolUsed(e.target.value)}
                className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
                placeholder="e.g. Atomic Red Team, Cobalt Strike"
              />
            </div>

            {/* Expected Detection (read-only reference for Blue Team) */}
            <div>
              <label className="mb-1.5 block text-sm font-medium text-gray-300">
                Expected Detection
                <span className="ml-2 text-xs text-gray-500">(read-only reference for Blue Team)</span>
              </label>
              <div className="rounded-lg border border-gray-700 bg-gray-800/50 p-3">
                <p className="whitespace-pre-wrap font-mono text-sm text-gray-400">
                  {expectedDetection || "No detection guidance provided in template."}
                </p>
              </div>
            </div>

            {/* Error */}
            {createMutation.isError && (
              <div className="rounded-lg border border-red-500/30 bg-red-900/20 p-3 text-sm text-red-400">
                {(createMutation.error as Error)?.message || "Failed to create test"}
              </div>
            )}
          </div>
        )}

        {/* Footer */}
        <div className="sticky bottom-0 flex justify-end gap-3 border-t border-gray-800 bg-gray-900 px-6 py-4">
          <button
            onClick={onClose}
            className="rounded-lg border border-gray-700 px-4 py-2 text-sm text-gray-400 hover:bg-gray-800"
          >
            Cancel
          </button>
          <button
            onClick={() => createMutation.mutate()}
            disabled={!canSubmit || createMutation.isPending}
            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 disabled:opacity-50 transition-colors"
          >
            {createMutation.isPending ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              <FlaskConical className="h-4 w-4" />
            )}
            Create Test
          </button>
        </div>
      </div>
    </div>
  );
}