'use client';

/**
 * Theme Toggle Component
 *
 * Smooth animated Sun / Moon switcher supporting light and dark mode.
 * Automatically synchronizes across all mounted instances on the page via useSyncExternalStore.
 * Perfectly sized to h-9 w-9 to match the LanguageSwitcher height.
 */

import React, { useSyncExternalStore } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Sun, Moon } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useIsMounted } from '@/hooks/useIsMounted';

interface ThemeToggleProps {
  className?: string;
  themeStyle?: 'dark' | 'light';
}

function subscribeTheme(callback: () => void) {
  if (typeof window === 'undefined') return () => {};
  window.addEventListener('theme-change', callback);
  window.addEventListener('storage', callback);
  return () => {
    window.removeEventListener('theme-change', callback);
    window.removeEventListener('storage', callback);
  };
}

function getThemeSnapshot(): boolean {
  if (typeof document === 'undefined') return false;
  return document.documentElement.classList.contains('dark');
}

function getThemeServerSnapshot(): boolean {
  return false;
}

export function ThemeToggle({ className }: ThemeToggleProps) {
  const mounted = useIsMounted();
  const isDark = useSyncExternalStore(subscribeTheme, getThemeSnapshot, getThemeServerSnapshot);

  const toggleTheme = () => {
    const nextDark = !isDark;
    if (nextDark) {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    }
    window.dispatchEvent(new Event('theme-change'));
  };

  if (!mounted) {
    return (
      <div
        className={cn(
          'w-9 h-9 shrink-0 rounded-xl border border-border bg-surface-soft flex items-center justify-center opacity-50',
          className
        )}
      />
    );
  }

  return (
    <button
      onClick={toggleTheme}
      type="button"
      className={cn(
        'relative w-9 h-9 shrink-0 rounded-xl border flex items-center justify-center transition-all cursor-pointer overflow-hidden',
        'bg-surface-soft hover:bg-surface border-border text-muted hover:text-ink shadow-2xs',
        'dark:bg-zinc-900 dark:hover:bg-zinc-800 dark:border-zinc-800 dark:text-zinc-300 dark:hover:text-white',
        className
      )}
      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
      title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
    >
      <AnimatePresence mode="wait" initial={false}>
        {isDark ? (
          <motion.div
            key="moon"
            initial={{ scale: 0.5, rotate: -90, opacity: 0 }}
            animate={{ scale: 1, rotate: 0, opacity: 1 }}
            exit={{ scale: 0.5, rotate: 90, opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="flex items-center justify-center text-amber-300"
          >
            <Moon className="w-4 h-4" />
          </motion.div>
        ) : (
          <motion.div
            key="sun"
            initial={{ scale: 0.5, rotate: 90, opacity: 0 }}
            animate={{ scale: 1, rotate: 0, opacity: 1 }}
            exit={{ scale: 0.5, rotate: -90, opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="flex items-center justify-center text-amber-500"
          >
            <Sun className="w-4 h-4" />
          </motion.div>
        )}
      </AnimatePresence>
    </button>
  );
}

export default ThemeToggle;