import { useState } from "preact/hooks";
import { Link } from "../components/Link.tsx";

interface PlcUpdateStep {
  name: string;
  status: "pending" | "in-progress" | "verifying" | "completed" | "error";
  error?: string;
}

// Content chunks for the description
const contentChunks = [
  {
    title: "Welcome to Key Management",
    subtitle: "BOARDING PASS - SECTION A",
    content: (
      <>
        <div class="passenger-info text-slate-600 dark:text-slate-300 font-mono text-sm mb-4">
          GATE: KEY-01 • SEAT: DID-1A
        </div>
        <p class="text-slate-700 dark:text-slate-300 mb-4">
          This tool helps you add a new rotation key to your{" "}
          <Link
            href="https://web.plc.directory/"
            isExternal
            class="text-blue-600 dark:text-blue-400"
          >
            PLC (Public Ledger of Credentials)
          </Link>
          . Having control of a rotation key gives you sovereignty over your DID
          (Decentralized Identifier).
        </p>
      </>
    ),
  },
  {
    title: "Key Benefits",
    subtitle: "BOARDING PASS - SECTION B",
    content: (
      <>
        <div class="passenger-info text-slate-600 dark:text-slate-300 font-mono text-sm mb-4">
          GATE: KEY-02 • SEAT: DID-1B
        </div>
        <div class="space-y-4">
          <div class="p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
            <h4 class="font-mono font-bold text-amber-500 dark:text-amber-400 mb-2">
              PROVIDER MOBILITY ✈️
            </h4>
            <p class="text-slate-700 dark:text-slate-300">
              Change your PDS without losing your identity, protecting you if
              your provider becomes hostile.
            </p>
          </div>
          <div class="p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
            <h4 class="font-mono font-bold text-amber-500 dark:text-amber-400 mb-2">
              IDENTITY CONTROL ✨
            </h4>
            <p class="text-slate-700 dark:text-slate-300">
              Modify your DID document independently of your provider.
            </p>
          </div>
          <div class="p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
            <p class="text-slate-700 dark:text-slate-300">
              💡 It's good practice to have a rotation key so you can move to a
              different provider if you need to.
            </p>
          </div>
        </div>
      </>
    ),
  },
  {
    title: "⚠️ CRITICAL SECURITY WARNING",
    subtitle: "BOARDING PASS - SECTION C",
    content: (
      <>
        <div class="passenger-info text-slate-600 dark:text-slate-300 font-mono text-sm mb-4">
          GATE: KEY-03 • SEAT: DID-1C
        </div>
        <div class="p-4 bg-red-50 dark:bg-red-900 rounded-lg border-2 border-red-500 dark:border-red-700 mb-4">
          <div class="flex items-center mb-3">
            <span class="text-2xl mr-2">⚠️</span>
            <h4 class="font-mono font-bold text-red-700 dark:text-red-400 text-lg">
              NON-REVOCABLE KEY WARNING
            </h4>
          </div>
          <div class="space-y-3 text-red-700 dark:text-red-300">
            <p class="font-bold">
              This rotation key CANNOT BE DISABLED OR DELETED once added:
            </p>
            <ul class="list-disc pl-5 space-y-2">
              <li>
                If compromised, the attacker can take complete control of your
                account and identity
              </li>
              <li>
                Malicious actors with this key have COMPLETE CONTROL of your
                account and identity
              </li>
              <li>
                Store securely, like a password (e.g. <strong>DO NOT</strong>
                {" "}
                keep it in Notes or any easily accessible app on an unlocked
                device).
              </li>
            </ul>
          </div>
        </div>
        <div class="p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
          <p class="text-slate-700 dark:text-slate-300">
            💡 We recommend adding a custom rotation key but recommend{" "}
            <strong class="italic">against</strong>{" "}
            having more than one custom rotation key, as more than one increases
            risk.
          </p>
        </div>
      </>
    ),
  },
  {
    title: "Technical Overview",
    subtitle: "BOARDING PASS - SECTION C",
    content: (
      <>
        <div class="passenger-info text-slate-600 dark:text-slate-300 font-mono text-sm mb-4">
          GATE: KEY-03 • SEAT: DID-1C
        </div>
        <div class="p-4 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
          <div class="flex items-center mb-3">
            <span class="text-lg mr-2">📝</span>
            <h4 class="font-mono font-bold text-amber-500 dark:text-amber-400">
              TECHNICAL DETAILS
            </h4>
          </div>
          <p class="text-slate-700 dark:text-slate-300">
            The rotation key is a did:key that will be added to your PLC
            document's rotationKeys array. This process uses the AT Protocol's
            PLC operations to update your DID document.
            <Link
              href="https://web.plc.directory/"
              class="block ml-1 text-blue-600 dark:text-blue-400"
              isExternal
            >
              Learn more about did:plc
            </Link>
          </p>
        </div>
      </>
    ),
  },
];

export default function PlcUpdateProgress() {
  const [hasStarted, setHasStarted] = useState(false);
  const [currentChunkIndex, setCurrentChunkIndex] = useState(0);
  const [steps, setSteps] = useState<PlcUpdateStep[]>([
    { name: "Generate Rotation Key", status: "pending" },
    { name: "Start PLC update", status: "pending" },
    { name: "Complete PLC update", status: "pending" },
  ]);
  const [generatedKey, setGeneratedKey] = useState<string>("");
  const [keyJson, setKeyJson] = useState<any>(null);
  const [emailToken, setEmailToken] = useState<string>("");
  const [hasDownloadedKey, setHasDownloadedKey] = useState(false);
  const [downloadedKeyId, setDownloadedKeyId] = useState<string | null>(null);
  const [hasContinuedPastDownload, setHasContinuedPastDownload] = useState(
    false,
  );

  const updateStepStatus = (
    index: number,
    status: PlcUpdateStep["status"],
    error?: string,
  ) => {
    console.log(
      `Updating step ${index} to ${status}${
        error ? ` with error: ${error}` : ""
      }`,
    );
    setSteps((prevSteps) =>
      prevSteps.map((step, i) =>
        i === index
          ? { ...step, status, error }
          : i > index
          ? { ...step, status: "pending", error: undefined }
          : step
      )
    );
  };

  const handleStart = () => {
    setHasStarted(true);
    // Automatically start the first step
    setTimeout(() => {
      handleGenerateKey();
    }, 100);
  };

  const getStepDisplayName = (step: PlcUpdateStep, index: number) => {
    if (step.status === "completed") {
      switch (index) {
        case 0:
          return "Rotation Key Generated";
        case 1:
          return "PLC Operation Requested";
        case 2:
          return "PLC Update Completed";
      }
    }

    if (step.status === "in-progress") {
      switch (index) {
        case 0:
          return "Generating Rotation Key...";
        case 1:
          return "Requesting PLC Operation Token...";
        case 2:
          return step.name ===
              "Enter the code sent to your email to complete PLC update"
            ? step.name
            : "Completing PLC Update...";
      }
    }

    if (step.status === "verifying") {
      switch (index) {
        case 0:
          return "Verifying Rotation Key Generation...";
        case 1:
          return "Verifying PLC Operation Token Request...";
        case 2:
          return "Verifying PLC Update Completion...";
      }
    }

    return step.name;
  };

  const handleStartPlcUpdate = async (keyToUse?: string) => {
    const key = keyToUse || generatedKey;

    // Debug logging
    console.log("=== PLC Update Debug ===");
    console.log("Current state:", {
      keyToUse,
      generatedKey,
      key,
      hasKeyJson: !!keyJson,
      keyJsonId: keyJson?.publicKeyDid,
      hasDownloadedKey,
      downloadedKeyId,
      steps: steps.map((s) => ({ name: s.name, status: s.status })),
    });

    if (!key) {
      console.log("No key generated yet");
      updateStepStatus(1, "error", "No key generated yet");
      return;
    }

    if (!keyJson || keyJson.publicKeyDid !== key) {
      console.log("Key mismatch or missing:", {
        hasKeyJson: !!keyJson,
        keyJsonId: keyJson?.publicKeyDid,
        expectedKey: key,
      });
      updateStepStatus(
        1,
        "error",
        "Please ensure you have the correct key loaded",
      );
      return;
    }

    updateStepStatus(1, "in-progress");
    try {
      // First request the token
      console.log("Requesting PLC token...");
      const tokenRes = await fetch("/api/plc/token", {
        method: "GET",
      });
      const tokenText = await tokenRes.text();
      console.log("Token response:", tokenText);

      if (!tokenRes.ok) {
        try {
          const json = JSON.parse(tokenText);
          throw new Error(json.message || "Failed to request PLC token");
        } catch {
          throw new Error(tokenText || "Failed to request PLC token");
        }
      }

      let data;
      try {
        data = JSON.parse(tokenText);
        if (!data.success) {
          throw new Error(data.message || "Failed to request token");
        }
      } catch {
        throw new Error("Invalid response from server");
      }

      console.log("Token request successful, updating UI...");
      // Update step name to prompt for token
      setSteps((prevSteps) =>
        prevSteps.map((step, i) =>
          i === 1
            ? {
              ...step,
              name: "Enter the code sent to your email to complete PLC update",
              status: "in-progress",
            }
            : step
        )
      );
    } catch (error) {
      console.error("Token request failed:", error);
      updateStepStatus(
        1,
        "error",
        error instanceof Error ? error.message : String(error),
      );
    }
  };

  const handleTokenSubmit = async () => {
    console.log("=== Token Submit Debug ===");
    console.log("Current state:", {
      emailToken,
      generatedKey,
      keyJsonId: keyJson?.publicKeyDid,
      steps: steps.map((s) => ({ name: s.name, status: s.status })),
    });

    if (!emailToken) {
      console.log("No token provided");
      updateStepStatus(1, "error", "Please enter the email token");
      return;
    }

    if (!keyJson || !keyJson.publicKeyDid) {
      console.log("Missing key data");
      updateStepStatus(1, "error", "Key data is missing, please try again");
      return;
    }

    // Prevent duplicate submissions
    if (steps[1].status === "completed" || steps[2].status === "completed") {
      console.log("Update already completed, preventing duplicate submission");
      return;
    }

    updateStepStatus(1, "completed");
    try {
      updateStepStatus(2, "in-progress");
      console.log("Submitting update request with token...");
      // Send the update request with both key and token
      const res = await fetch("/api/plc/update", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: keyJson.publicKeyDid,
          token: emailToken,
        }),
      });
      const text = await res.text();
      console.log("Update response:", text);

      let data;
      try {
        data = JSON.parse(text);
      } catch {
        throw new Error("Invalid response from server");
      }

      // Check for error responses
      if (!res.ok || !data.success) {
        const errorMessage = data.message || "Failed to complete PLC update";
        console.error("Update failed:", errorMessage);
        throw new Error(errorMessage);
      }

      // Only proceed if we have a successful response
      console.log("Update completed successfully!");

      // Add a delay before marking steps as completed for better UX
      updateStepStatus(2, "verifying");

      const verifyRes = await fetch("/api/plc/verify", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: keyJson.publicKeyDid,
        }),
      });

      const verifyText = await verifyRes.text();
      console.log("Verification response:", verifyText);

      let verifyData;
      try {
        verifyData = JSON.parse(verifyText);
      } catch {
        throw new Error("Invalid verification response from server");
      }

      if (!verifyRes.ok || !verifyData.success) {
        const errorMessage = verifyData.message ||
          "Failed to verify PLC update";
        console.error("Verification failed:", errorMessage);
        throw new Error(errorMessage);
      }

      console.log("Verification successful, marking steps as completed");
      updateStepStatus(2, "completed");
    } catch (error) {
      console.error("Update failed:", error);
      // Reset the steps to error state
      updateStepStatus(
        1,
        "error",
        error instanceof Error ? error.message : String(error),
      );
      updateStepStatus(2, "pending"); // Reset the final step

      // If token is invalid, we should clear it so user can try again
      if (
        error instanceof Error &&
        error.message.toLowerCase().includes("token is invalid")
      ) {
        setEmailToken("");
      }
    }
  };

  const handleDownload = () => {
    console.log("=== Download Debug ===");
    console.log("Download started with:", {
      hasKeyJson: !!keyJson,
      keyJsonId: keyJson?.publicKeyDid,
    });

    if (!keyJson) {
      console.error("No key JSON to download");
      return;
    }

    try {
      const jsonString = JSON.stringify(keyJson, null, 2);
      const filename = `plc-key-${keyJson.publicKeyDid || "unknown"}.json`;

      // Create data URL
      const dataStr = "data:text/json;charset=utf-8," +
        encodeURIComponent(jsonString);

      // Create download link
      const downloadAnchorNode = document.createElement("a");
      downloadAnchorNode.setAttribute("href", dataStr);
      downloadAnchorNode.setAttribute("download", filename);

      // For Chrome/Firefox compatibility
      downloadAnchorNode.style.display = "none";
      document.body.appendChild(downloadAnchorNode);

      // Trigger download
      downloadAnchorNode.click();

      // Cleanup
      document.body.removeChild(downloadAnchorNode);

      console.log("Download completed, showing continue button...");
      setHasDownloadedKey(true);
      setDownloadedKeyId(keyJson.publicKeyDid);
      // Keep step 0 in completed state but don't auto-proceed
    } catch (error) {
      console.error("Download failed:", error);
    }
  };

  const handleGenerateKey = async () => {
    console.log("=== Generate Key Debug ===");
    updateStepStatus(0, "in-progress");
    setKeyJson(null);
    setGeneratedKey("");
    setHasDownloadedKey(false);
    setDownloadedKeyId(null);

    try {
      console.log("Requesting new key...");
      const res = await fetch("/api/plc/keys");
      const text = await res.text();
      console.log("Key generation response:", text);

      if (!res.ok) {
        try {
          const json = JSON.parse(text);
          throw new Error(json.message || "Failed to generate key");
        } catch {
          throw new Error(text || "Failed to generate key");
        }
      }

      let data;
      try {
        data = JSON.parse(text);
      } catch {
        throw new Error("Invalid response from /api/plc/keys");
      }

      if (!data.publicKeyDid || !data.privateKeyHex) {
        throw new Error("Key generation failed: missing key data");
      }

      console.log("Key generated successfully:", {
        keyId: data.publicKeyDid,
      });

      setGeneratedKey(data.publicKeyDid);
      setKeyJson(data);
      updateStepStatus(0, "completed");
    } catch (error) {
      console.error("Key generation failed:", error);
      updateStepStatus(
        0,
        "error",
        error instanceof Error ? error.message : String(error),
      );
    }
  };

  const getStepIcon = (status: PlcUpdateStep["status"]) => {
    switch (status) {
      case "pending":
        return (
          <div class="w-8 h-8 rounded-full border-2 border-gray-300 dark:border-gray-600 flex items-center justify-center">
            <div class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600" />
          </div>
        );
      case "in-progress":
        return (
          <div class="w-8 h-8 rounded-full border-2 border-blue-500 border-t-transparent animate-spin flex items-center justify-center">
            <div class="w-3 h-3 rounded-full bg-blue-500" />
          </div>
        );
      case "verifying":
        return (
          <div class="w-8 h-8 rounded-full border-2 border-yellow-500 border-t-transparent animate-spin flex items-center justify-center">
            <div class="w-3 h-3 rounded-full bg-yellow-500" />
          </div>
        );
      case "completed":
        return (
          <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
            <svg
              class="w-5 h-5 text-white"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 13l4 4L19 7"
              />
            </svg>
          </div>
        );
      case "error":
        return (
          <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center">
            <svg
              class="w-5 h-5 text-white"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </div>
        );
    }
  };

  const getStepClasses = (status: PlcUpdateStep["status"]) => {
    const baseClasses =
      "flex items-center space-x-3 p-4 rounded-lg transition-colors duration-200";
    switch (status) {
      case "pending":
        return `${baseClasses} bg-gray-50 dark:bg-gray-800`;
      case "in-progress":
        return `${baseClasses} bg-blue-50 dark:bg-blue-900`;
      case "verifying":
        return `${baseClasses} bg-yellow-50 dark:bg-yellow-900`;
      case "completed":
        return `${baseClasses} bg-green-50 dark:bg-green-900`;
      case "error":
        return `${baseClasses} bg-red-50 dark:bg-red-900`;
    }
  };

  const requestNewToken = async () => {
    try {
      console.log("Requesting new token...");
      const res = await fetch("/api/plc/token", {
        method: "GET",
      });
      const text = await res.text();
      console.log("Token request response:", text);

      if (!res.ok) {
        throw new Error(text || "Failed to request new token");
      }

      let data;
      try {
        data = JSON.parse(text);
        if (!data.success) {
          throw new Error(data.message || "Failed to request token");
        }
      } catch {
        throw new Error("Invalid response from server");
      }

      // Clear any existing error and token
      setEmailToken("");
      updateStepStatus(1, "in-progress");
      updateStepStatus(2, "pending");
    } catch (error) {
      console.error("Failed to request new token:", error);
      updateStepStatus(
        1,
        "error",
        error instanceof Error ? error.message : String(error),
      );
    }
  };

  if (!hasStarted) {
    return (
      <div class="space-y-6">
        <div class="ticket bg-white dark:bg-slate-800 p-6 relative">
          <div class="boarding-label text-amber-500 dark:text-amber-400 font-mono font-bold tracking-wider text-sm mb-2">
            {contentChunks[currentChunkIndex].subtitle}
          </div>

          <div class="flex justify-between items-start mb-4">
            <h3 class="text-2xl font-mono text-slate-800 dark:text-slate-200">
              {contentChunks[currentChunkIndex].title}
            </h3>
          </div>

          {/* Main Description */}
          <div class="mb-6">{contentChunks[currentChunkIndex].content}</div>

          {/* Navigation */}
          <div class="mt-8 border-t border-dashed border-slate-200 dark:border-slate-700 pt-4">
            <div class="flex justify-between items-center">
              <button
                type="button"
                onClick={() =>
                  setCurrentChunkIndex((prev) => Math.max(0, prev - 1))}
                class={`px-4 py-2 font-mono text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 transition-colors duration-200 flex items-center space-x-2 ${
                  currentChunkIndex === 0 ? "invisible" : ""
                }`}
              >
                <svg
                  class="w-5 h-5 rotate-180"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9 5l7 7-7 7"
                  />
                </svg>
                <span>Previous Gate</span>
              </button>

              {currentChunkIndex === contentChunks.length - 1
                ? (
                  <button
                    type="button"
                    onClick={handleStart}
                    class="px-6 py-2 bg-amber-500 hover:bg-amber-600 text-white font-mono rounded-md transition-colors duration-200 flex items-center space-x-2"
                  >
                    <span>Begin Key Generation</span>
                    <svg
                      class="w-5 h-5"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M9 5l7 7-7 7"
                      />
                    </svg>
                  </button>
                )
                : (
                  <button
                    type="button"
                    onClick={() =>
                      setCurrentChunkIndex((prev) =>
                        Math.min(contentChunks.length - 1, prev + 1)
                      )}
                    class="px-4 py-2 font-mono text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 transition-colors duration-200 flex items-center space-x-2"
                  >
                    <span>Next Gate</span>
                    <svg
                      class="w-5 h-5"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M9 5l7 7-7 7"
                      />
                    </svg>
                  </button>
                )}
            </div>

            {/* Progress Dots */}
            <div class="flex justify-center space-x-3 mt-4">
              {contentChunks.map((_, index) => (
                <div
                  key={index}
                  class={`h-1.5 w-8 rounded-full transition-colors duration-200 ${
                    index === currentChunkIndex
                      ? "bg-amber-500"
                      : "bg-slate-200 dark:bg-slate-700"
                  }`}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div class="space-y-8">
      {/* Progress Steps */}
      <div class="space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
            Key Generation Progress
          </h3>
          {/* Add a help tooltip */}
          <div class="relative group">
            <button class="text-gray-400 hover:text-gray-500" type="button">
              <svg
                class="w-5 h-5"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
            </button>
            <div class="absolute right-0 w-64 p-2 mt-2 space-y-1 text-sm bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 hidden group-hover:block z-10">
              <p class="text-gray-600 dark:text-gray-400">
                Follow these steps to securely add a new rotation key to your
                PLC record. Each step requires completion before proceeding.
              </p>
            </div>
          </div>
        </div>

        {/* Steps with enhanced visual hierarchy */}
        {steps.map((step, index) => (
          <div
            key={step.name}
            class={`${getStepClasses(step.status)} ${
              step.status === "in-progress"
                ? "ring-2 ring-blue-500 ring-opacity-50"
                : ""
            }`}
          >
            <div class="flex-shrink-0">{getStepIcon(step.status)}</div>
            <div class="flex-1 min-w-0">
              <div class="flex items-center justify-between">
                <p
                  class={`font-medium ${
                    step.status === "error"
                      ? "text-red-900 dark:text-red-200"
                      : step.status === "completed"
                      ? "text-green-900 dark:text-green-200"
                      : step.status === "in-progress"
                      ? "text-blue-900 dark:text-blue-200"
                      : "text-gray-900 dark:text-gray-200"
                  }`}
                >
                  {getStepDisplayName(step, index)}
                </p>
                {/* Add step number */}
                <span class="text-sm text-gray-500 dark:text-gray-400">
                  Step {index + 1} of {steps.length}
                </span>
              </div>

              {step.error && (
                <div class="mt-2 p-2 bg-red-50 dark:bg-red-900/50 rounded-md">
                  <p class="text-sm text-red-600 dark:text-red-400 flex items-center">
                    <svg
                      class="w-4 h-4 mr-1"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                      />
                    </svg>
                    {(() => {
                      try {
                        const err = JSON.parse(step.error);
                        return err.message || step.error;
                      } catch {
                        return step.error;
                      }
                    })()}
                  </p>
                </div>
              )}

              {/* Key Download Warning */}
              {index === 0 &&
                step.status === "completed" &&
                !hasContinuedPastDownload && (
                <div class="mt-4 space-y-4">
                  <div class="bg-yellow-50 dark:bg-yellow-900/50 p-4 rounded-lg border border-yellow-200 dark:border-yellow-800">
                    <div class="flex items-start">
                      <div class="flex-shrink-0">
                        <svg
                          class="h-5 w-5 text-yellow-400"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                        >
                          <path
                            fill-rule="evenodd"
                            d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
                            clip-rule="evenodd"
                          />
                        </svg>
                      </div>
                      <div class="ml-3">
                        <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
                          Critical Security Step
                        </h3>
                        <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
                          <p class="mb-2">
                            Your rotation key grants control over your identity:
                          </p>
                          <ul class="list-disc pl-5 space-y-2">
                            <li>
                              <strong>Store Securely:</strong>{" "}
                              Use a password manager
                            </li>
                            <li>
                              <strong>Keep Private:</strong>{" "}
                              Never share with anyone
                            </li>
                            <li>
                              <strong>Backup:</strong> Keep a secure backup copy
                            </li>
                            <li>
                              <strong>Required:</strong>{" "}
                              Needed for future DID modifications
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                      <button
                        type="button"
                        onClick={handleDownload}
                        class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors duration-200 flex items-center space-x-2"
                      >
                        <svg
                          class="w-5 h-5"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                          />
                        </svg>
                        <span>Download Key</span>
                      </button>

                      {hasDownloadedKey && (
                        <button
                          type="button"
                          onClick={() => {
                            console.log(
                              "Continue clicked, proceeding to PLC update",
                            );
                            setHasContinuedPastDownload(true);
                            handleStartPlcUpdate(keyJson.publicKeyDid);
                          }}
                          class="px-4 py-2  bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors duration-200 flex items-center space-x-2"
                        >
                          <svg
                            class="w-5 h-5"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="2"
                              d="M9 5l7 7-7 7"
                            />
                          </svg>
                          <span>Continue</span>
                        </button>
                      )}
                    </div>

                    {!hasDownloadedKey && (
                      <div class="flex items-center text-sm text-red-600 dark:text-red-400">
                        <svg
                          class="w-4 h-4 mr-1"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                          />
                        </svg>
                        Download required to proceed
                      </div>
                    )}
                  </div>
                </div>
              )}

              {/* Email Code Input */}
              {index === 1 &&
                (step.status === "in-progress" ||
                  step.status === "verifying") &&
                step.name ===
                  "Enter the code sent to your email to complete PLC update" &&
                (
                  <div class="mt-4 space-y-4">
                    <div class="bg-blue-50 dark:bg-blue-900/50 p-4 rounded-lg">
                      <p class="text-sm text-blue-800 dark:text-blue-200 mb-3">
                        Check your email for the verification code to complete
                        the PLC update:
                      </p>
                      <div class="flex space-x-2">
                        <div class="flex-1 relative">
                          <input
                            type="text"
                            value={emailToken}
                            onChange={(e) =>
                              setEmailToken(e.currentTarget.value)}
                            placeholder="Enter verification code"
                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:focus:border-blue-400 dark:focus:ring-blue-400"
                          />
                        </div>
                        <button
                          type="button"
                          onClick={handleTokenSubmit}
                          disabled={!emailToken || step.status === "verifying"}
                          class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
                        >
                          <span>
                            {step.status === "verifying"
                              ? "Verifying..."
                              : "Verify"}
                          </span>
                          <svg
                            class="w-4 h-4"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="2"
                              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                            />
                          </svg>
                        </button>
                      </div>
                      {step.error && (
                        <div class="mt-2 p-2 bg-red-50 dark:bg-red-900/50 rounded-md">
                          <p class="text-sm text-red-600 dark:text-red-400 flex items-center">
                            <svg
                              class="w-4 h-4 mr-1"
                              fill="none"
                              stroke="currentColor"
                              viewBox="0 0 24 24"
                            >
                              <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                              />
                            </svg>
                            {step.error}
                          </p>
                          {step.error
                            .toLowerCase()
                            .includes("token is invalid") && (
                            <div class="mt-2">
                              <p class="text-sm text-red-500 dark:text-red-300 mb-2">
                                The verification code may have expired. Request
                                a new code to try again.
                              </p>
                              <button
                                type="button"
                                onClick={requestNewToken}
                                class="text-sm px-3 py-1 bg-red-100 hover:bg-red-200 dark:bg-red-800 dark:hover:bg-red-700 text-red-700 dark:text-red-200 rounded-md transition-colors duration-200 flex items-center space-x-1"
                              >
                                <svg
                                  class="w-4 h-4"
                                  fill="none"
                                  stroke="currentColor"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                                  />
                                </svg>
                                <span>Request New Code</span>
                              </button>
                            </div>
                          )}
                        </div>
                      )}
                    </div>
                  </div>
                )}
            </div>
          </div>
        ))}
      </div>

      {/* Success Message */}
      {steps[2].status === "completed" && (
        <div class="p-4 bg-green-50 dark:bg-green-900/50 rounded-lg border-2 border-green-200 dark:border-green-800">
          <div class="flex items-center space-x-3 mb-4">
            <svg
              class="w-6 h-6 text-green-500"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
            <h4 class="text-lg font-medium text-green-800 dark:text-green-200">
              PLC Update Successful!
            </h4>
          </div>
          <p class="text-sm text-green-700 dark:text-green-300 mb-4">
            Your rotation key has been successfully added to your PLC record.
            You can now use this key for future DID modifications.
          </p>
          <div class="flex space-x-4">
            <button
              type="button"
              onClick={async () => {
                try {
                  const response = await fetch("/api/logout", {
                    method: "POST",
                    credentials: "include",
                  });
                  if (!response.ok) {
                    throw new Error("Logout failed");
                  }
                  globalThis.location.href = "/";
                } catch (error) {
                  console.error("Failed to logout:", error);
                }
              }}
              class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors duration-200 flex items-center space-x-2"
            >
              <svg
                class="w-5 h-5"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
                />
              </svg>
              <span>Sign Out</span>
            </button>
            <a
              href="https://ko-fi.com/knotbin"
              target="_blank"
              class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors duration-200 flex items-center space-x-2"
            >
              <svg
                class="w-5 h-5"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
                />
              </svg>
              <span>Support Us</span>
            </a>
          </div>
        </div>
      )}
    </div>
  );
}