import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import {
  Loader2,
  CheckCircle,
  XCircle,
  MinusCircle,
  ChevronDown,
  ChevronRight,
  ExternalLink,
  Shield,
} from "lucide-react";
import {
  getDetectionRulesForTest,
  evaluateDetectionRule,
  type DetectionRuleItem,
} from "../../api/detection-rules";
import type { User } from "../../types/models";

const severityColors: Record<string, string> = {
  critical: "bg-red-900/50 text-red-400 border-red-500/30",
  high: "bg-orange-900/50 text-orange-400 border-orange-500/30",
  medium: "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
  low: "bg-blue-900/50 text-blue-400 border-blue-500/30",
  informational: "bg-gray-800/50 text-gray-400 border-gray-600/30",
};

const sourceColors: Record<string, string> = {
  sigma: "bg-purple-900/50 text-purple-400 border-purple-500/30",
  elastic: "bg-cyan-900/50 text-cyan-400 border-cyan-500/30",
  splunk: "bg-green-900/50 text-green-400 border-green-500/30",
  custom: "bg-gray-800/50 text-gray-400 border-gray-600/30",
};

interface Props {
  testId: string;
  user: User | null;
  canEdit: boolean;
}

export default function DetectionRuleChecklist({ testId, user, canEdit }: Props) {
  const queryClient = useQueryClient();
  const [expandedRules, setExpandedRules] = useState<Set<string>>(new Set());
  const [editingNotes, setEditingNotes] = useState<Record<string, string>>({});

  const { data, isLoading, error } = useQuery({
    queryKey: ["detection-rules-for-test", testId],
    queryFn: () => getDetectionRulesForTest(testId),
    enabled: !!testId,
  });

  const evaluateMutation = useMutation({
    mutationFn: evaluateDetectionRule,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["detection-rules-for-test", testId] });
    },
  });

  const toggleExpanded = (ruleId: string) => {
    setExpandedRules((prev) => {
      const next = new Set(prev);
      if (next.has(ruleId)) next.delete(ruleId);
      else next.add(ruleId);
      return next;
    });
  };

  const handleEvaluate = (ruleId: string, triggered: boolean | null) => {
    evaluateMutation.mutate({
      test_id: testId,
      detection_rule_id: ruleId,
      triggered,
      notes: editingNotes[ruleId],
    });
  };

  const handleNotesChange = (ruleId: string, notes: string) => {
    setEditingNotes((prev) => ({ ...prev, [ruleId]: notes }));
  };

  const handleNotesSave = (ruleId: string, triggered: boolean | null) => {
    evaluateMutation.mutate({
      test_id: testId,
      detection_rule_id: ruleId,
      triggered: triggered,
      notes: editingNotes[ruleId] ?? "",
    });
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-8">
        <Loader2 className="h-6 w-6 animate-spin text-gray-500" />
      </div>
    );
  }

  if (error || !data) {
    return null;
  }

  if (data.rules.length === 0) {
    return (
      <div className="rounded-lg border border-gray-700 bg-gray-800/30 p-4 text-center">
        <Shield className="mx-auto h-8 w-8 text-gray-600" />
        <p className="mt-2 text-sm text-gray-400">No detection rules available for this technique.</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* Summary bar */}
      <div className="flex items-center justify-between rounded-lg border border-gray-700 bg-gray-800/50 p-3">
        <div className="flex items-center gap-4">
          <div className="text-sm text-gray-300">
            <span className="font-semibold text-white">{data.triggered}</span>
            <span className="text-gray-500"> / </span>
            <span className="font-semibold text-white">{data.total}</span>
            <span className="ml-1 text-gray-400">rules triggered</span>
          </div>
          {data.evaluated > 0 && (
            <span className="rounded-full bg-cyan-900/50 border border-cyan-500/30 px-2 py-0.5 text-xs font-medium text-cyan-400">
              {data.detection_rate}% detection rate
            </span>
          )}
        </div>
        <div className="text-xs text-gray-500">
          {data.evaluated} / {data.total} evaluated
        </div>
      </div>

      {/* Progress bar */}
      <div className="h-2 w-full rounded-full bg-gray-800 overflow-hidden">
        <div className="flex h-full">
          {data.total > 0 && (
            <>
              <div
                className="bg-green-500 transition-all"
                style={{ width: `${(data.triggered / data.total) * 100}%` }}
              />
              <div
                className="bg-red-500 transition-all"
                style={{
                  width: `${((data.evaluated - data.triggered) / data.total) * 100}%`,
                }}
              />
            </>
          )}
        </div>
      </div>

      {/* Rules list */}
      <div className="space-y-2">
        {data.rules.map((rule) => {
          const isExpanded = expandedRules.has(rule.id);
          const notesDraft = editingNotes[rule.id] ?? rule.notes ?? "";

          return (
            <div
              key={rule.id}
              className="rounded-lg border border-gray-700 bg-gray-800/30 overflow-hidden"
            >
              {/* Rule header */}
              <div className="flex items-center gap-3 p-3">
                {/* Expand toggle */}
                <button
                  onClick={() => toggleExpanded(rule.id)}
                  className="shrink-0 text-gray-500 hover:text-gray-300"
                >
                  {isExpanded ? (
                    <ChevronDown className="h-4 w-4" />
                  ) : (
                    <ChevronRight className="h-4 w-4" />
                  )}
                </button>

                {/* Status icon */}
                {rule.triggered === true && <CheckCircle className="h-4 w-4 shrink-0 text-green-400" />}
                {rule.triggered === false && <XCircle className="h-4 w-4 shrink-0 text-red-400" />}
                {rule.triggered == null && <MinusCircle className="h-4 w-4 shrink-0 text-gray-500" />}

                {/* Rule info */}
                <div className="min-w-0 flex-1">
                  <p className="text-sm font-medium text-gray-200 truncate">{rule.title}</p>
                </div>

                {/* Badges */}
                <div className="flex shrink-0 items-center gap-1.5">
                  {rule.severity && (
                    <span
                      className={`inline-flex rounded-full border px-2 py-0.5 text-[10px] font-medium ${
                        severityColors[rule.severity] || severityColors.informational
                      }`}
                    >
                      {rule.severity}
                    </span>
                  )}
                  <span
                    className={`inline-flex rounded-full border px-2 py-0.5 text-[10px] font-medium ${
                      sourceColors[rule.source] || sourceColors.custom
                    }`}
                  >
                    {rule.source}
                  </span>
                </div>

                {/* Evaluate buttons */}
                {canEdit && (
                  <div className="flex shrink-0 items-center gap-1">
                    <button
                      onClick={() => handleEvaluate(rule.id, true)}
                      disabled={evaluateMutation.isPending}
                      className={`rounded p-1 transition-colors ${
                        rule.triggered === true
                          ? "bg-green-900/50 text-green-400"
                          : "text-gray-500 hover:bg-green-900/30 hover:text-green-400"
                      }`}
                      title="Triggered"
                    >
                      <CheckCircle className="h-4 w-4" />
                    </button>
                    <button
                      onClick={() => handleEvaluate(rule.id, false)}
                      disabled={evaluateMutation.isPending}
                      className={`rounded p-1 transition-colors ${
                        rule.triggered === false
                          ? "bg-red-900/50 text-red-400"
                          : "text-gray-500 hover:bg-red-900/30 hover:text-red-400"
                      }`}
                      title="Not Triggered"
                    >
                      <XCircle className="h-4 w-4" />
                    </button>
                    <button
                      onClick={() => handleEvaluate(rule.id, null)}
                      disabled={evaluateMutation.isPending}
                      className={`rounded p-1 transition-colors ${
                        rule.triggered === null && rule.result_id
                          ? "bg-gray-700 text-gray-300"
                          : "text-gray-500 hover:bg-gray-700 hover:text-gray-300"
                      }`}
                      title="Not Applicable"
                    >
                      <MinusCircle className="h-4 w-4" />
                    </button>
                  </div>
                )}
              </div>

              {/* Expanded content */}
              {isExpanded && (
                <div className="border-t border-gray-700 p-3 space-y-3">
                  {rule.description && (
                    <p className="text-xs text-gray-400">{rule.description}</p>
                  )}

                  {/* Rule content */}
                  {rule.rule_content && (
                    <div>
                      <p className="mb-1 text-[10px] font-medium uppercase text-gray-500">
                        Rule Content ({rule.rule_format})
                      </p>
                      <pre className="max-h-48 overflow-auto rounded bg-gray-900 p-3 font-mono text-xs text-gray-300">
                        {rule.rule_content}
                      </pre>
                    </div>
                  )}

                  {/* Source link */}
                  {rule.source_url && (
                    <a
                      href={rule.source_url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-flex items-center gap-1 text-xs text-cyan-400 hover:underline"
                    >
                      View source
                      <ExternalLink className="h-3 w-3" />
                    </a>
                  )}

                  {/* Notes */}
                  {canEdit ? (
                    <div>
                      <label className="mb-1 block text-[10px] font-medium uppercase text-gray-500">
                        Notes
                      </label>
                      <div className="flex gap-2">
                        <input
                          value={notesDraft}
                          onChange={(e) => handleNotesChange(rule.id, e.target.value)}
                          placeholder="Add evaluation notes..."
                          className="flex-1 rounded border border-gray-700 bg-gray-900 px-2 py-1.5 text-xs text-gray-200 placeholder-gray-500 focus:border-indigo-500 focus:outline-none"
                        />
                        <button
                          onClick={() => handleNotesSave(rule.id, rule.triggered)}
                          disabled={evaluateMutation.isPending}
                          className="shrink-0 rounded bg-indigo-600 px-2 py-1.5 text-xs font-medium text-white hover:bg-indigo-500 disabled:opacity-50"
                        >
                          Save
                        </button>
                      </div>
                    </div>
                  ) : (
                    rule.notes && (
                      <div>
                        <p className="text-[10px] font-medium uppercase text-gray-500">Notes</p>
                        <p className="mt-0.5 text-xs text-gray-400">{rule.notes}</p>
                      </div>
                    )
                  )}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}