"use client";

import { useSession } from "../hooks/useSession";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { Loader2, StopCircle } from "lucide-react";
import { Session } from "@/types/session/session";
import { SessionStopSuccessCard } from "./SessionStopSuccessCard";
import { Modal } from "@/components/ui/modal";
import Button from "@/components/ui/button/Button";
import toast from "react-hot-toast";
import { isSessionTerminalStatus } from "../sessionDetailUtils";

const STOP_RESULT_TIMEOUT_MS = 120000;
const STOP_FALLBACK_REFRESH_MS = 30000;

export const SessionStopButton = ({
  id,
  initialSession,
  chargePointId,
  connectorNumber,
}: {
  id: string;
  initialSession: Session;
  chargePointId?: string | null;
  connectorNumber?: number | null;
}) => {
  const router = useRouter();
  const {
    session,
    idleCostEstimate,
    stopSession,
    isStopping,
    mutate,
    error: stopError,
  } = useSession(id, initialSession, chargePointId, connectorNumber);
  const currentSession = session ?? initialSession;

  // Success state management
  const [isStoppedSuccessfully, setIsStoppedSuccessfully] = useState(false);
  const [finalSession, setFinalSession] = useState<Session | null>(null);
  const [redirectCountdown, setRedirectCountdown] = useState(5);
  const [shouldAutoRedirect, setShouldAutoRedirect] = useState(true);

  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
  const [isConfirmingStop, setIsConfirmingStop] = useState(false);
  const [isAwaitingStopResult, setIsAwaitingStopResult] = useState(false);
  const [animationFrame, setAnimationFrame] = useState(0);
  const hasHandledFailureRef = useRef(false);

  const stoppingDots = useMemo(() => ".".repeat(animationFrame), [animationFrame]);

  const notifyStopFailure = useCallback(() => {
    if (hasHandledFailureRef.current) {
      return;
    }
    hasHandledFailureRef.current = true;
    setIsAwaitingStopResult(false);
    setIsConfirmingStop(false);
    setIsConfirmOpen(false);
    toast.error(stopError || "Gagal menghentikan session. Coba lagi.", {
      duration: 7000,
    });
  }, [stopError]);

  const triggerStop = useCallback(async (): Promise<boolean> => {
    hasHandledFailureRef.current = false;
    const ok = await stopSession();
    if (!ok) {
      notifyStopFailure();
      return false;
    }

    setIsConfirmOpen(false);
    setIsAwaitingStopResult(true);
    return true;
  }, [notifyStopFailure, stopSession]);

  // Tunggu status terminal dari SSE/cache; fallback sekali revalidate jika update telat
  useEffect(() => {
    if (!isAwaitingStopResult) return;

    if (currentSession && isSessionTerminalStatus(currentSession.status)) {
      hasHandledFailureRef.current = false;
      setFinalSession(currentSession);
      setIsStoppedSuccessfully(true);
      setIsAwaitingStopResult(false);
      setIsConfirmingStop(false);
      if (shouldAutoRedirect) {
        setRedirectCountdown(5);
      }
      return;
    }

    const fallbackRefresh = setTimeout(() => {
      void mutate().catch(() => undefined);
    }, STOP_FALLBACK_REFRESH_MS);

    return () => clearTimeout(fallbackRefresh);
  }, [isAwaitingStopResult, currentSession, shouldAutoRedirect, mutate]);

  useEffect(() => {
    if (
      !isStoppedSuccessfully ||
      !finalSession ||
      !currentSession ||
      currentSession._id !== finalSession._id
    ) {
      return;
    }

    if (
      currentSession.updated_at !== finalSession.updated_at ||
      currentSession.status !== finalSession.status ||
      currentSession.is_idle !== finalSession.is_idle
    ) {
      setFinalSession(currentSession);
    }
  }, [isStoppedSuccessfully, finalSession, currentSession]);

  useEffect(() => {
    if (!isAwaitingStopResult) {
      setAnimationFrame(0);
      return;
    }

    const timer = setInterval(() => {
      setAnimationFrame((prev) => (prev + 1) % 4);
    }, 450);

    return () => clearInterval(timer);
  }, [isAwaitingStopResult]);

  useEffect(() => {
    if (!isAwaitingStopResult) return;
    const timeout = setTimeout(() => {
      notifyStopFailure();
    }, STOP_RESULT_TIMEOUT_MS);

    return () => clearTimeout(timeout);
  }, [isAwaitingStopResult, notifyStopFailure]);

  // Countdown timer effect
  useEffect(() => {
    if (!isStoppedSuccessfully || !shouldAutoRedirect) return;

    if (redirectCountdown <= 0) {
      router.push("/sessions");
      return;
    }

    const timer = setTimeout(() => {
      setRedirectCountdown((prev) => prev - 1);
    }, 1000);

    return () => clearTimeout(timer);
  }, [isStoppedSuccessfully, shouldAutoRedirect, redirectCountdown, router]);

  // Handle success state - show success modal
  if (isStoppedSuccessfully && finalSession) {
    return (
      <SessionStopSuccessCard
        session={finalSession}
        idleCostEstimate={idleCostEstimate}
        onBackToSessions={() => router.push("/sessions")}
        countdown={shouldAutoRedirect ? redirectCountdown : 0}
        onSkipCountdown={() => setShouldAutoRedirect(false)}
        isOpen={true}
      />
    );
  }

  // Hanya render tombol ketika status session adalah "Started"
  if (!currentSession || (currentSession.status !== "Started" && !isAwaitingStopResult)) {
    return null;
  }

  const disabled = isStopping || isConfirmingStop || isAwaitingStopResult;
  return (
    <div className="fixed lg:sticky bottom-[calc(1rem+env(safe-area-inset-bottom))] lg:bottom-4 left-0 right-0 lg:left-auto lg:right-auto z-50 lg:z-auto px-4 lg:px-0 lg:pb-0">
      {/* Backdrop blur untuk mobile */}
      <div className="lg:hidden absolute inset-0 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm -z-10" />

      <div className="w-full max-w-4xl mx-auto">
        <Button
          onClick={() => setIsConfirmOpen(true)}
          disabled={disabled}
          className="w-full h-14 text-base font-semibold bg-red-600 hover:bg-red-700 text-white"
          startIcon={<StopCircle className="w-5 h-5" />}
        >
          {isStopping || isAwaitingStopResult ? "Stopping Charging..." : "Stop Charging"}
        </Button>
      </div>

      <Modal
        isOpen={isConfirmOpen}
        onClose={() => (!disabled ? setIsConfirmOpen(false) : undefined)}
        className="max-w-[420px] p-6"
      >
        <div className="space-y-5">
          <div className="space-y-2 text-center">
            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30">
              <StopCircle className="h-6 w-6 text-red-600 dark:text-red-400" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Stop charging?</h3>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              This will end your current charging session.
            </p>
          </div>
          <div className="flex gap-3">
            <Button
              variant="outline"
              className="flex-1 min-w-0 px-3"
              onClick={() => setIsConfirmOpen(false)}
              disabled={disabled}
            >
              Cancel
            </Button>
            <Button
              className="flex-1 min-w-0 bg-red-600 hover:bg-red-700 text-white"
              onClick={async () => {
                setIsConfirmingStop(true);
                const ok = await triggerStop();
                if (!ok) {
                  setIsConfirmingStop(false);
                }
              }}
              disabled={disabled}
            >
              {isConfirmingStop || isAwaitingStopResult ? (
                <>
                  <Loader2 className="w-4 h-4 animate-spin" />
                  Stopping...
                </>
              ) : (
                "Confirm Stop"
              )}
            </Button>
          </div>
        </div>
      </Modal>

      <Modal
        isOpen={isAwaitingStopResult && !isStoppedSuccessfully}
        onClose={() => undefined}
        showCloseButton={false}
        className="mx-4 !w-[calc(100%-2rem)] max-w-[460px] p-6 sm:mx-0 sm:!w-full sm:p-8"
      >
        <div className="space-y-5 text-center">
          <div className="mx-auto relative flex h-20 w-20 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30">
            <Loader2 className="h-10 w-10 text-red-600 dark:text-red-400 animate-spin" />
            <StopCircle className="absolute h-5 w-5 text-red-700 dark:text-red-300 animate-pulse" />
          </div>
          <div className="space-y-2">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
              Finalizing Your Transaction
            </h3>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              Please wait while we finish your charging transaction. This can take a little time, so
              you can relax while we complete it safely.
            </p>
          </div>
          <div className="flex items-center justify-center gap-1.5">
            <span
              className="h-2 w-2 rounded-full bg-red-500 stop-dot-pulse"
              style={{ animationDelay: "-0.2s" }}
            />
            <span
              className="h-2 w-2 rounded-full bg-red-500 stop-dot-pulse"
              style={{ animationDelay: "-0.1s" }}
            />
            <span className="h-2 w-2 rounded-full bg-red-500 stop-dot-pulse" />
          </div>
        </div>
      </Modal>
      <style jsx>{`
        @keyframes stopDotOpacityPulse {
          0%,
          100% {
            opacity: 0.25;
          }
          50% {
            opacity: 1;
          }
        }

        .stop-dot-pulse {
          animation: stopDotOpacityPulse 1.2s ease-in-out infinite;
        }
      `}</style>
    </div>
  );
};