"use client";

import { useEffect, useMemo, useState } from "react";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { Check, MonitorCog, MoonStar, SunMedium } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import {
  isThemeMode,
  resolveThemeMode,
  THEME_STORAGE_KEY,
  themeOptions,
  type ResolvedTheme,
  type ThemeMode,
} from "@/lib/theme";

function applyTheme(mode: ThemeMode) {
  const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
  const resolved = resolveThemeMode(mode, systemPrefersDark);
  document.documentElement.classList.toggle("dark", resolved === "dark");
  document.documentElement.style.colorScheme = resolved;
  document.documentElement.dataset.theme = mode;
}

function getStoredTheme(): ThemeMode {
  const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
  return isThemeMode(stored) ? stored : "system";
}

function modeIcon(mode: ThemeMode, resolvedTheme: ResolvedTheme) {
  if (mode === "system") return <MonitorCog className="h-4 w-4" />;
  if (resolvedTheme === "dark") return <MoonStar className="h-4 w-4" />;
  return <SunMedium className="h-4 w-4" />;
}

export function ThemeToggle({ className }: { className?: string }) {
  const [mounted, setMounted] = useState(false);
  const [mode, setMode] = useState<ThemeMode>("system");
  const [systemPrefersDark, setSystemPrefersDark] = useState(false);

  useEffect(() => {
    const media = window.matchMedia("(prefers-color-scheme: dark)");
    const storedMode = getStoredTheme();
    setMode(storedMode);
    setSystemPrefersDark(media.matches);
    applyTheme(storedMode);
    setMounted(true);

    const onStorage = (event: StorageEvent) => {
      if (event.key !== THEME_STORAGE_KEY) return;
      const currentMode = getStoredTheme();
      setMode(currentMode);
      setSystemPrefersDark(media.matches);
      applyTheme(currentMode);
    };

    const onSystemChange = () => {
      setSystemPrefersDark(media.matches);
      if (getStoredTheme() !== "system") return;
      applyTheme("system");
    };

    window.addEventListener("storage", onStorage);
    media.addEventListener("change", onSystemChange);
    return () => {
      window.removeEventListener("storage", onStorage);
      media.removeEventListener("change", onSystemChange);
    };
  }, []);

  useEffect(() => {
    if (!mounted) return;
    window.localStorage.setItem(THEME_STORAGE_KEY, mode);
    applyTheme(mode);
  }, [mode, mounted]);

  const currentLabel = useMemo(
    () => themeOptions.find((option) => option.mode === mode)?.label ?? "Sistema",
    [mode],
  );
  const resolvedTheme = resolveThemeMode(mode, systemPrefersDark);

  const selectTheme = (nextMode: ThemeMode) => {
    setMode(nextMode);
  };

  if (!mounted) {
    return (
      <Button
        type="button"
        variant="outline"
        size="sm"
        className={cn("gap-2", className)}
        aria-label="Cambiar tema"
        suppressHydrationWarning
      >
        <MonitorCog className="h-4 w-4" />
        <span className="hidden xl:inline">Sistema</span>
      </Button>
    );
  }

  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <Button
          type="button"
          variant="outline"
          size="sm"
          className={cn("gap-2", className)}
          aria-label="Cambiar tema"
        >
          {modeIcon(mode, resolvedTheme)}
          <span className="hidden xl:inline">{currentLabel}</span>
        </Button>
      </DropdownMenu.Trigger>

      <DropdownMenu.Portal>
        <DropdownMenu.Content
          align="end"
          sideOffset={8}
          className="z-50 min-w-44 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg outline-none"
        >
          {themeOptions.map((option) => {
            const isActive = option.mode === mode;
            return (
              <DropdownMenu.Item
                key={option.mode}
                onSelect={() => selectTheme(option.mode)}
                className={cn(
                  "flex cursor-default items-center justify-between rounded-sm px-3 py-2 text-sm text-foreground outline-none transition-colors focus:bg-accent focus:text-accent-foreground",
                )}
              >
                <span className="flex items-center gap-2">
                  {option.mode === "light" ? (
                    <SunMedium className="h-4 w-4" />
                  ) : option.mode === "dark" ? (
                    <MoonStar className="h-4 w-4" />
                  ) : (
                    <MonitorCog className="h-4 w-4" />
                  )}
                  {option.label}
                </span>
                {isActive ? <Check className="h-4 w-4 text-primary" /> : null}
              </DropdownMenu.Item>
            );
          })}
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
}