"use client";

import { useEffect, useState } from "react";
import {
  readThemePreference,
  resolveTheme,
  saveThemePreference,
  toggleTheme,
} from "@/lib/theme-preference.js";

function applyTheme(theme) {
  document.documentElement.dataset.theme = theme;
  document.documentElement.style.colorScheme = theme;
}

export default function ThemeToggle() {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    const nextTheme = resolveTheme({
      savedTheme: readThemePreference(window.localStorage),
      systemPrefersDark: window.matchMedia?.("(prefers-color-scheme: dark)").matches,
    });
    setTheme(nextTheme);
    applyTheme(nextTheme);
  }, []);

  const switchTheme = () => {
    const nextTheme = toggleTheme(theme);
    setTheme(nextTheme);
    saveThemePreference(nextTheme, window.localStorage);
    applyTheme(nextTheme);
  };

  const isDark = theme === "dark";
  return (
    <button
      type="button"
      onClick={switchTheme}
      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
      className="theme-toggle rounded-lg border px-3 py-2 text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2"
    >
      <span aria-hidden="true" className="mr-1.5">{isDark ? "☀" : "☾"}</span>
      {isDark ? "Light mode" : "Dark mode"}
    </button>
  );
}