import React, { createContext, useContext, useState, useEffect, type ReactNode } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { darkColors, lightColors, type Colors } from "../theme/colors";

type ThemeMode = "dark" | "light";

interface ThemeContextType {
    colors: Colors;
    mode: ThemeMode;
    toggleTheme: () => void;
    isDark: boolean;
}

const STORAGE_KEY = "@theme_mode";
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export function ThemeProvider({ children }: { children: ReactNode }) {
    const [mode, setMode] = useState<ThemeMode>("dark");

    useEffect(() => {
        AsyncStorage.getItem(STORAGE_KEY).then((val) => {
            if (val === "light" || val === "dark") setMode(val);
        });
    }, []);

    const toggleTheme = () => {
        const next = mode === "dark" ? "light" : "dark";
        setMode(next);
        AsyncStorage.setItem(STORAGE_KEY, next);
    };

    const value: ThemeContextType = {
        colors: mode === "dark" ? darkColors : lightColors,
        mode,
        toggleTheme,
        isDark: mode === "dark",
    };

    return (
        <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
    );
}

export function useTheme() {
    const ctx = useContext(ThemeContext);
    if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
    return ctx;
}