"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { getSetupStatus, setSetupIdentity } from "@/lib/api";
import { SetupIdentityMode } from "./setup-identity-mode";
import { SetupConfigure } from "./setup-configure";
import { SetupAttachAuth } from "./setup-attach-auth";
import { SetupVerify } from "./setup-verify";
import { SetupTelemetry } from "./setup-telemetry";
import { SetupComplete } from "./setup-complete";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Stepper,
  StepperItem,
  StepperList,
  StepperIndicator,
  StepperSeparator,
  StepperTitle,
  StepperTrigger,
} from "@/components/ui/stepper";

type SetupStep =
  | "mode"
  | "configure"
  | "attach-auth"
  | "verify"
  | "telemetry"
  | "complete";

export function SetupWizard() {
  const [currentStep, setCurrentStep] = useState<SetupStep>("mode");
  const [identityMode, setIdentityMode] = useState<string | null>(null);
  const [attachedDid, setAttachedDid] = useState<string | null>(null);
  const [attachedHandle, setAttachedHandle] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [lastFailedMode, setLastFailedMode] = useState<string | null>(null);
  const stepContentRef = useRef<HTMLDivElement>(null);

  const initialLoadRef = useRef(true);
  useEffect(() => {
    if (initialLoadRef.current) {
      initialLoadRef.current = false;
      return;
    }
    stepContentRef.current?.focus();
  }, [currentStep]);

  useEffect(() => {
    getSetupStatus()
      .then((status) => {
        if (status.setup_complete) {
          setCurrentStep("complete");
        } else if (status.plc_verified) {
          setCurrentStep("complete");
        } else if (status.identity_configured) {
          setIdentityMode(status.identity_mode);
          setCurrentStep("verify");
        } else if (
          status.identity_mode &&
          status.identity_mode !== "not_exposed"
        ) {
          setIdentityMode(status.identity_mode);

          const pendingAuth = localStorage.getItem("happyview_attach_auth");
          if (status.identity_mode === "attach_account" && pendingAuth) {
            try {
              const payload = JSON.parse(pendingAuth) as {
                attachedDid: string;
              };
              setAttachedDid(payload.attachedDid);
              setCurrentStep("attach-auth");
            } catch {
              setCurrentStep("configure");
            }
          } else {
            setCurrentStep("configure");
          }
        }
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  const handleModeSelected = useCallback(async (mode: string) => {
    setIdentityMode(mode);
    setError(null);
    setLastFailedMode(null);
    if (mode === "not_exposed") {
      try {
        await setSetupIdentity({ mode: "not_exposed" });
        // Route through telemetry too: the ask is the feature, and skipping
        // identity setup is no reason to skip the only prompt an operator
        // will ever see for it.
        setCurrentStep("telemetry");
      } catch (e) {
        setLastFailedMode(mode);
        setError(
          e instanceof Error
            ? e.message
            : "Failed to save configuration. Check that your backend is running and try again.",
        );
      }
    } else if (mode === "attach_account") {
      setCurrentStep("configure");
    } else {
      try {
        await setSetupIdentity({ mode });
        setCurrentStep("verify");
      } catch (e) {
        setLastFailedMode(mode);
        setError(
          e instanceof Error
            ? e.message
            : "Failed to configure identity. Check that your backend is running and try again.",
        );
      }
    }
  }, []);

  const handleGoBack = useCallback(() => {
    setError(null);
    switch (currentStep) {
      case "configure":
        setCurrentStep("mode");
        break;
      case "attach-auth":
        setCurrentStep("configure");
        break;
      case "verify":
        setCurrentStep(
          identityMode === "attach_account" ? "configure" : "mode",
        );
        break;
    }
  }, [currentStep, identityMode]);

  const handleConfigureComplete = useCallback(
    (opts?: { attachedDid?: string; attachedHandle?: string | null }) => {
      if (opts?.attachedDid) {
        setAttachedDid(opts.attachedDid);
        setAttachedHandle(opts.attachedHandle ?? null);
        setCurrentStep("attach-auth");
      } else {
        setCurrentStep("verify");
      }
    },
    [],
  );

  const handleAttachAuthComplete = useCallback(() => {
    setCurrentStep("verify");
  }, []);

  const handleVerifyComplete = useCallback(() => {
    setCurrentStep("telemetry");
  }, []);

  const handleTelemetryComplete = useCallback(() => {
    setCurrentStep("complete");
  }, []);

  const stepOrder = useMemo<SetupStep[]>(
    () =>
      identityMode === "attach_account"
        ? ["mode", "configure", "attach-auth", "verify", "telemetry", "complete"]
        : ["mode", "verify", "telemetry", "complete"],
    [identityMode],
  );

  const handleStepperNav = useCallback(
    (value: string) => {
      const target = value as SetupStep;
      const currentIndex = stepOrder.indexOf(currentStep);
      const targetIndex = stepOrder.indexOf(target);
      if (targetIndex < 0 || targetIndex > currentIndex) return;
      if (target === "mode") {
        setIdentityMode(null);
        setAttachedDid(null);
        setAttachedHandle(null);
        setError(null);
      }
      setCurrentStep(target);
    },
    [currentStep, stepOrder],
  );

  if (loading) {
    return (
      <div className="space-y-4" role="status" aria-label="Loading setup">
        <Skeleton className="h-10 w-full" />
        <Skeleton className="h-64 w-full rounded-xl" />
      </div>
    );
  }

  return (
    <Stepper value={currentStep} onValueChange={handleStepperNav}>
      <StepperList>
        <StepperItem value="mode">
          <StepperTrigger>
            <StepperIndicator />
            <StepperTitle>Identity</StepperTitle>
          </StepperTrigger>
          <StepperSeparator />
        </StepperItem>
        {identityMode === "attach_account" && (
          <>
            <StepperItem value="configure">
              <StepperTrigger>
                <StepperIndicator />
                <StepperTitle>Account</StepperTitle>
              </StepperTrigger>
              <StepperSeparator />
            </StepperItem>
            <StepperItem value="attach-auth">
              <StepperTrigger>
                <StepperIndicator />
                <StepperTitle>Sign In</StepperTitle>
              </StepperTrigger>
              <StepperSeparator />
            </StepperItem>
          </>
        )}
        <StepperItem value="verify">
          <StepperTrigger>
            <StepperIndicator />
            <StepperTitle>
              {identityMode === "did_plc"
                ? "Key Backup"
                : identityMode === "attach_account"
                  ? "Verify"
                  : "Review"}
            </StepperTitle>
          </StepperTrigger>
          <StepperSeparator />
        </StepperItem>
        <StepperItem value="telemetry">
          <StepperTrigger>
            <StepperIndicator />
            <StepperTitle>Telemetry</StepperTitle>
          </StepperTrigger>
          <StepperSeparator />
        </StepperItem>
        <StepperItem value="complete">
          <StepperTrigger>
            <StepperIndicator />
            <StepperTitle>Done</StepperTitle>
          </StepperTrigger>
        </StepperItem>
      </StepperList>

      {error && (
        <div
          role="alert"
          className="mt-4 rounded-lg border border-destructive/20 bg-destructive/10 p-3 text-sm text-destructive flex items-center justify-between gap-3"
        >
          <span>{error}</span>
          {lastFailedMode && (
            <Button
              variant="ghost"
              size="sm"
              className="text-destructive shrink-0"
              onClick={() => {
                if (lastFailedMode) handleModeSelected(lastFailedMode);
              }}
            >
              Try again
            </Button>
          )}
        </div>
      )}

      <div ref={stepContentRef} tabIndex={-1} className="mt-8 outline-none">
        {currentStep === "mode" && (
          <SetupIdentityMode onComplete={handleModeSelected} />
        )}
        {currentStep === "configure" && identityMode && (
          <SetupConfigure
            mode={identityMode}
            onComplete={handleConfigureComplete}
            onBack={handleGoBack}
          />
        )}
        {currentStep === "attach-auth" && attachedDid && (
          <SetupAttachAuth
            attachedDid={attachedDid}
            attachedHandle={attachedHandle}
            onComplete={handleAttachAuthComplete}
            onBack={handleGoBack}
          />
        )}
        {currentStep === "verify" && identityMode && (
          <SetupVerify
            mode={identityMode}
            onComplete={handleVerifyComplete}
            onBack={handleGoBack}
          />
        )}
        {currentStep === "telemetry" && (
          <SetupTelemetry onNext={handleTelemetryComplete} />
        )}
        {currentStep === "complete" && (
          <SetupComplete identityMode={identityMode} />
        )}
      </div>
    </Stepper>
  );
}