import {
  FlaskConical,
  Play,
  Send,
  CheckCircle,
  XCircle,
  RotateCcw,
  Loader2,
  Shield,
  ShieldCheck,
} from "lucide-react";
import type { Test, TestState, User } from "../../types/models";
import LiveTimer from "./LiveTimer";

// ── Progress steps ─────────────────────────────────────────────────

const PROGRESS_STEPS: { key: TestState; label: string }[] = [
  { key: "draft", label: "Draft" },
  { key: "red_executing", label: "Red Exec" },
  { key: "blue_evaluating", label: "Blue Eval" },
  { key: "in_review", label: "Review" },
  { key: "validated", label: "Validated" },
];

const STATE_INDEX: Record<TestState, number> = {
  draft: 0,
  red_executing: 1,
  blue_evaluating: 2,
  in_review: 3,
  validated: 4,
  rejected: -1,
};

// ── Badge colors ───────────────────────────────────────────────────

const STATE_BADGE: Record<TestState, string> = {
  draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
  red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
  blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/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",
};

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

interface TestDetailHeaderProps {
  test: Test;
  user: User | null;
  isTransitioning: boolean;
  onStartExecution: () => void;
  onSubmitRed: () => void;
  onSubmitBlue: () => void;
  onStartBlueWork: () => void;
  onOpenValidateModal: (side: "red" | "blue") => void;
  onReopen: () => void;
  onPauseTimer: () => void;
  onResumeTimer: () => void;
  isTogglingTimer: boolean;
}

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

export default function TestDetailHeader({
  test,
  user,
  isTransitioning,
  onStartExecution,
  onSubmitRed,
  onSubmitBlue,
  onStartBlueWork,
  onOpenValidateModal,
  onReopen,
  onPauseTimer,
  onResumeTimer,
  isTogglingTimer,
}: TestDetailHeaderProps) {
  const role = user?.role ?? "";
  const currentIdx = STATE_INDEX[test.state];

  const formatDate = (d: string | null) => {
    if (!d) return null;
    return new Date(d).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    });
  };

  // ── Contextual action buttons ────────────────────────────────────

  const renderActions = () => {
    const buttons: React.ReactNode[] = [];

    // Red Team in draft -> Start Execution
    if (
      test.state === "draft" &&
      (role === "red_tech" || role === "red_lead" || role === "admin")
    ) {
      buttons.push(
        <button
          key="start"
          onClick={onStartExecution}
          disabled={isTransitioning}
          className="flex items-center gap-1.5 rounded-lg bg-orange-600 px-4 py-2 text-sm font-medium text-white hover:bg-orange-500 transition-colors disabled:opacity-50"
        >
          {isTransitioning ? <Loader2 className="h-4 w-4 animate-spin" /> : <Play className="h-4 w-4" />}
          Start Execution
        </button>,
      );
    }

    // Red Team in red_executing -> Submit to Blue Team (requires ≥1 red evidence)
    if (
      test.state === "red_executing" &&
      (role === "red_tech" || role === "red_lead" || role === "admin")
    ) {
      const hasRedEvidence = (test.red_evidences?.length ?? 0) > 0;
      buttons.push(
        <div key="submit-red" className="flex flex-col items-end gap-1">
          <button
            onClick={onSubmitRed}
            disabled={isTransitioning || !hasRedEvidence}
            title={!hasRedEvidence ? "Upload at least one Red Team evidence file before submitting" : undefined}
            className="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isTransitioning ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
            Submit to Blue Team
          </button>
          {!hasRedEvidence && (
            <span className="text-[10px] text-orange-400">⚠ Upload evidence first</span>
          )}
        </div>,
      );
    }

    // Blue Team in blue_evaluating:
    //   - if not picked up yet: show "Start Evaluation" button
    //   - if already picked up: show "Submit for Review" button
    if (
      test.state === "blue_evaluating" &&
      (role === "blue_tech" || role === "blue_lead" || role === "admin")
    ) {
      if (!test.blue_work_started_at) {
        buttons.push(
          <button
            key="start-blue-work"
            onClick={onStartBlueWork}
            disabled={isTransitioning}
            className="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors disabled:opacity-50"
          >
            {isTransitioning ? <Loader2 className="h-4 w-4 animate-spin" /> : <Play className="h-4 w-4" />}
            Start Evaluation
          </button>,
        );
      } else {
        // Submit for Review requires ≥1 blue evidence
        const hasBlueEvidence = (test.blue_evidences?.length ?? 0) > 0;
        buttons.push(
          <div key="submit-blue" className="flex flex-col items-end gap-1">
            <button
              onClick={onSubmitBlue}
              disabled={isTransitioning || !hasBlueEvidence}
              title={!hasBlueEvidence ? "Upload at least one Blue Team evidence file before submitting" : undefined}
              className="flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isTransitioning ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
              Submit for Review
            </button>
            {!hasBlueEvidence && (
              <span className="text-[10px] text-orange-400">⚠ Upload evidence first</span>
            )}
          </div>,
        );
      }
    }

    // Red Lead in in_review -> Validate Red
    if (
      test.state === "in_review" &&
      (role === "red_lead" || role === "admin") &&
      !test.red_validation_status
    ) {
      buttons.push(
        <button
          key="validate-red"
          onClick={() => onOpenValidateModal("red")}
          className="flex items-center gap-1.5 rounded-lg bg-orange-600 px-4 py-2 text-sm font-medium text-white hover:bg-orange-500 transition-colors"
        >
          <Shield className="h-4 w-4" />
          Validate Red Side
        </button>,
      );
    }

    // Blue Lead in in_review -> Validate Blue
    if (
      test.state === "in_review" &&
      (role === "blue_lead" || role === "admin") &&
      !test.blue_validation_status
    ) {
      buttons.push(
        <button
          key="validate-blue"
          onClick={() => onOpenValidateModal("blue")}
          className="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors"
        >
          <Shield className="h-4 w-4" />
          Validate Blue Side
        </button>,
      );
    }

    // Leads/admin on rejected -> Reopen
    if (
      test.state === "rejected" &&
      (role === "red_lead" || role === "blue_lead" || role === "admin")
    ) {
      buttons.push(
        <button
          key="reopen"
          onClick={onReopen}
          disabled={isTransitioning}
          className="flex items-center gap-1.5 rounded-lg border border-cyan-500/30 bg-cyan-900/20 px-4 py-2 text-sm font-medium text-cyan-400 hover:bg-cyan-900/40 transition-colors disabled:opacity-50"
        >
          {isTransitioning ? <Loader2 className="h-4 w-4 animate-spin" /> : <RotateCcw className="h-4 w-4" />}
          Continue Test
        </button>,
      );
    }

    return buttons.length > 0 ? (
      <div className="flex flex-wrap items-center gap-2">{buttons}</div>
    ) : null;
  };

  // ── Dual validation indicators ───────────────────────────────────

  const renderValidationIndicators = () => {
    if (test.state !== "in_review" && test.state !== "validated" && test.state !== "rejected") {
      return null;
    }

    const redStatus = test.red_validation_status;
    const blueStatus = test.blue_validation_status;

    const indicator = (label: string, status: string | null) => {
      if (status === "approved")
        return (
          <span className="flex items-center gap-1 text-xs text-green-400">
            <CheckCircle className="h-3.5 w-3.5" /> {label}: Approved
          </span>
        );
      if (status === "rejected")
        return (
          <span className="flex items-center gap-1 text-xs text-red-400">
            <XCircle className="h-3.5 w-3.5" /> {label}: Rejected
          </span>
        );
      return (
        <span className="flex items-center gap-1 text-xs text-gray-500">
          <ShieldCheck className="h-3.5 w-3.5" /> {label}: Pending
        </span>
      );
    };

    return (
      <div className="flex items-center gap-4">
        {indicator("Red Lead", redStatus)}
        {indicator("Blue Lead", blueStatus)}
      </div>
    );
  };

  // ── Live timer ───────────────────────────────────────────────────

  const canControlTimer =
    (test.state === "red_executing" && (role === "red_tech" || role === "red_lead" || role === "admin")) ||
    (test.state === "blue_evaluating" && (role === "blue_tech" || role === "blue_lead" || role === "admin"));

  const renderLiveTimer = () => {
    if (test.state === "red_executing" && test.red_started_at) {
      return (
        <LiveTimer
          startedAt={test.red_started_at}
          pausedAt={test.paused_at}
          pausedSeconds={test.red_paused_seconds}
          label="Red Team Timer"
          variant="red"
          onPause={onPauseTimer}
          onResume={onResumeTimer}
          canControl={canControlTimer}
          isToggling={isTogglingTimer}
        />
      );
    }
    if (test.state === "blue_evaluating" && test.blue_work_started_at) {
      return (
        <LiveTimer
          startedAt={test.blue_work_started_at}
          pausedAt={test.paused_at}
          pausedSeconds={test.blue_paused_seconds}
          label="Blue Team Timer"
          variant="blue"
          onPause={onPauseTimer}
          onResume={onResumeTimer}
          canControl={canControlTimer}
          isToggling={isTogglingTimer}
        />
      );
    }
    return null;
  };

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

  return (
    <div className="rounded-xl border border-gray-800 bg-gray-900 p-6 space-y-4">
      {/* Top row: name + badge + actions */}
      <div className="flex items-start justify-between gap-4">
        <div className="flex items-start gap-4">
          <div className="rounded-lg bg-cyan-500/10 p-3">
            <FlaskConical className="h-8 w-8 text-cyan-400" />
          </div>
          <div>
            <div className="flex items-center gap-3">
              <h1 className="text-2xl font-bold text-white">{test.name}</h1>
              <span
                className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium capitalize ${
                  STATE_BADGE[test.state]
                }`}
              >
                {test.state.replace(/_/g, " ")}
              </span>
            </div>
            <p className="mt-1 text-sm text-gray-400">
              Created {formatDate(test.created_at)}
            </p>
            {renderValidationIndicators()}
          </div>
        </div>

        <div className="flex flex-col items-end gap-2">
          {renderLiveTimer()}
          {renderActions()}
        </div>
      </div>

      {/* Progress bar */}
      {test.state !== "rejected" && (
        <div className="pt-2">
          <div className="flex items-center gap-1">
            {PROGRESS_STEPS.map((step, idx) => {
              const isCompleted = idx < currentIdx;
              const isCurrent = idx === currentIdx;

              return (
                <div key={step.key} className="flex flex-1 flex-col items-center gap-1">
                  <div className="flex w-full items-center">
                    {/* Connector left */}
                    {idx > 0 && (
                      <div
                        className={`h-0.5 flex-1 ${
                          isCompleted || isCurrent ? "bg-cyan-500" : "bg-gray-700"
                        }`}
                      />
                    )}
                    {/* Dot */}
                    <div
                      className={`h-3 w-3 shrink-0 rounded-full border-2 ${
                        isCompleted
                          ? "border-cyan-500 bg-cyan-500"
                          : isCurrent
                            ? "border-cyan-500 bg-gray-900"
                            : "border-gray-600 bg-gray-900"
                      }`}
                    />
                    {/* Connector right */}
                    {idx < PROGRESS_STEPS.length - 1 && (
                      <div
                        className={`h-0.5 flex-1 ${
                          isCompleted ? "bg-cyan-500" : "bg-gray-700"
                        }`}
                      />
                    )}
                  </div>
                  <span
                    className={`text-[10px] font-medium ${
                      isCurrent ? "text-cyan-400" : isCompleted ? "text-gray-400" : "text-gray-600"
                    }`}
                  >
                    {step.label}
                  </span>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* Rejected banner */}
      {test.state === "rejected" && (
        <div className="rounded-lg border border-red-500/30 bg-red-900/20 p-3 text-sm text-red-400">
          This test was rejected and needs to be reopened to restart the workflow.
        </div>
      )}
    </div>
  );
}