"use client";

import { useState, useEffect, useCallback } from "react";

export type ColorTheme = "purple" | "blue" | "green" | "orange" | "pink" | "cyan";

export const COLOR_THEME_STORAGE_KEY = "v5-color-theme";
export const DEFAULT_COLOR_THEME: ColorTheme = "purple";

export const COLOR_THEMES: { id: ColorTheme; label: string; light: string; dark: string }[] = [
  { id: "purple", label: "보라",   light: "#6c5ce7", dark: "#a29bfe" },
  { id: "blue",   label: "블루",   light: "#3b82f6", dark: "#93c5fd" },
  { id: "green",  label: "그린",   light: "#10b981", dark: "#6ee7b7" },
  { id: "orange", label: "오렌지", light: "#f97316", dark: "#fdba74" },
  { id: "pink",   label: "핑크",   light: "#ec4899", dark: "#f472b6" },
  { id: "cyan",   label: "시안",   light: "#0891b2", dark: "#7dd3fc" },
];

export function useColorTheme() {
  const [color, setColorState] = useState<ColorTheme>(DEFAULT_COLOR_THEME);

  useEffect(() => {
    const current = (document.documentElement.getAttribute("data-color") as ColorTheme) || DEFAULT_COLOR_THEME;
    setColorState(current);
  }, []);

  const setColor = useCallback((next: ColorTheme) => {
    if (next === DEFAULT_COLOR_THEME) {
      document.documentElement.removeAttribute("data-color");
    } else {
      document.documentElement.setAttribute("data-color", next);
    }
    try {
      localStorage.setItem(COLOR_THEME_STORAGE_KEY, next);
    } catch {}
    setColorState(next);
  }, []);

  return { color, setColor };
}