"use client";

import { useEffect, useState } from "react";

export type ThemeMode = "light" | "medium" | "dark";

const modes: { value: ThemeMode; label: string; icon: string; description: string }[] = [
  { value: "light", label: "Light", icon: "☼", description: "Lotus Day" },
  { value: "medium", label: "Medium", icon: "◐", description: "Earth Glow" },
  { value: "dark", label: "Dark", icon: "◑", description: "Inner Night" },
];

const storageKey = "zelosity-theme";

function isThemeMode(value: string | null): value is ThemeMode {
  return value === "light" || value === "medium" || value === "dark";
}

function getInitialMode(): ThemeMode {
  if (typeof window === "undefined") return "light";
  const stored = window.localStorage.getItem(storageKey);
  if (isThemeMode(stored)) return stored;
  return "light";
}

function applyMode(mode: ThemeMode) {
  document.documentElement.dataset.theme = mode;
}

export function ThemeSwitcher({ className = "" }: { className?: string }) {
  const [mode, setMode] = useState<ThemeMode>("light");
  const currentMode = modes.find((item) => item.value === mode) ?? modes[0];
  const nextMode = modes[(modes.findIndex((item) => item.value === mode) + 1) % modes.length];

  useEffect(() => {
    const initial = getInitialMode();
    applyMode(initial);
    if (initial !== "light") {
      const frame = window.requestAnimationFrame(() => setMode(initial));
      return () => window.cancelAnimationFrame(frame);
    }
  }, []);

  function selectMode(nextMode: ThemeMode) {
    setMode(nextMode);
    applyMode(nextMode);
    window.localStorage.setItem(storageKey, nextMode);
  }

  return (
    <div className={`theme-switcher ${className}`.trim()} role="group" aria-label="Choose visual mode">
      <button
        type="button"
        className="theme-switcher-toggle"
        data-mode={mode}
        aria-label={`${currentMode.label} mode — ${currentMode.description}. Switch to ${nextMode.label} mode`}
        title={`${currentMode.label} · ${currentMode.description}`}
        onClick={() => selectMode(nextMode.value)}
      >
        <span className="theme-switcher-thumb" aria-hidden="true">
          {currentMode.icon}
        </span>
        <span className="theme-switcher-lines" aria-hidden="true">
          <span />
          <span />
          <span />
        </span>
      </button>
    </div>
  );
}