import { createContext, useContext, useEffect, useState, type ReactNode } from "react";

/**
 * ModeContext — Podcast ⇄ Música
 *
 * Referenciado desde a Fase 0 nos comentários do BottomNav.tsx
 * ("o ModeSwitcher no Topbar controla o modo — a BottomNav não muda"),
 * mas nunca tinha sido implementado — só existia como intenção documentada.
 *
 * "Explorar" (BottomNav/Sidebar) passa a mostrar o catálogo do modo ativo.
 * Persistido em localStorage para lembrar a escolha entre sessões.
 */

export type AppMode = "podcast" | "musica" | "audiolivro";

const STORAGE_KEY = "sof-modo-ativo";

type ModeContextValue = {
  mode: AppMode;
  setMode: (mode: AppMode) => void;
};

const ModeContext = createContext<ModeContextValue | null>(null);

export function ModeProvider({ children }: { children: ReactNode }) {
  const [mode, setModeState] = useState<AppMode>(() => {
    if (typeof window === "undefined") return "podcast";
    const saved = window.localStorage.getItem(STORAGE_KEY);
    return saved === "musica" ? saved : "podcast";
  });

  useEffect(() => {
    window.localStorage.setItem(STORAGE_KEY, mode);
  }, [mode]);

  const setMode = (next: AppMode) => setModeState(next);

  return <ModeContext.Provider value={{ mode, setMode }}>{children}</ModeContext.Provider>;
}

export function useMode(): ModeContextValue {
  const ctx = useContext(ModeContext);
  if (!ctx) {
    throw new Error("useMode deve ser usado dentro de um ModeProvider");
  }
  return ctx;
}
