"use client";

import { createContext, useEffect, useState } from "react";
import Cookies from "js-cookie";

// Define theme options
type ThemeType = "light" | "dark";

export const ThemeContext = createContext<{
    theme: ThemeType;
    toggleTheme: () => void;
}>({
    theme: "light",
    toggleTheme: () => {},
});

export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
    const [theme, setTheme] = useState<ThemeType>("light");

    useEffect(() => {
        // Get theme from cookies or system preference
        const savedTheme = Cookies.get("theme") as ThemeType | undefined;
        if (savedTheme === "dark" || savedTheme === "light") {
            setTheme(savedTheme);
        } else {
            // Detect system preference
            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
            setTheme(prefersDark ? "dark" : "light");
            Cookies.set("theme", prefersDark ? "dark" : "light", { expires: 365 });
        }
    }, []);

    // Apply the transition effect when theme changes
    useEffect(() => {
        document.documentElement.classList.add("transition-theme");
        document.documentElement.setAttribute("data-theme", theme);

        return () => {
            document.documentElement.classList.remove("transition-theme");
        };
    }, [theme]);

    const toggleTheme = () => {
        const newTheme: ThemeType = theme === "dark" ? "light" : "dark";
        setTheme(newTheme);
        Cookies.set("theme", newTheme, { expires: 365 });
    };

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