"use client";

import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useState,
  useTransition,
} from "react";
import { useRouter } from "@/i18n/navigation";

interface DevModeContextValue {
  devMode: boolean;
  canUseDevMode: boolean;
  toggling: boolean;
  toggleDevMode: () => Promise<void>;
}

const DevModeContext = createContext<DevModeContextValue>({
  devMode: false,
  canUseDevMode: false,
  toggling: false,
  toggleDevMode: async () => {},
});

export function DevModeProvider({
  devMode: initialDevMode,
  canUseDevMode,
  children,
}: {
  devMode: boolean;
  canUseDevMode: boolean;
  children: React.ReactNode;
}) {
  const [devMode, setDevMode] = useState(initialDevMode);
  const [toggling, setToggling] = useState(false);
  const router = useRouter();
  const [, startTransition] = useTransition();

  useEffect(() => {
    setDevMode(initialDevMode);
  }, [initialDevMode]);

  const toggleDevMode = useCallback(async () => {
    if (!canUseDevMode || toggling) return;

    const next = !devMode;
    setDevMode(next);
    setToggling(true);

    try {
      const res = await fetch("/api/account", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ devMode: next }),
      });
      if (!res.ok) throw new Error("Failed to update dev mode");
      startTransition(() => router.refresh());
    } catch {
      setDevMode(!next);
    } finally {
      setToggling(false);
    }
  }, [canUseDevMode, devMode, toggling, router]);

  return (
    <DevModeContext.Provider value={{ devMode, canUseDevMode, toggling, toggleDevMode }}>
      {children}
    </DevModeContext.Provider>
  );
}

export function useDevMode(): boolean {
  return useContext(DevModeContext).devMode;
}

export function useDevModeControls() {
  return useContext(DevModeContext);
}