import { Button } from '@/components/ui/button';
import { useAppearance } from '@/hooks/use-appearance';
import { Moon, Sun } from 'lucide-react';
import { HTMLAttributes, useEffect, useMemo, useState } from 'react';

export default function AppearanceToggleDropdown({ className = '', ...props }: HTMLAttributes<HTMLDivElement>) {
  const { appearance, updateAppearance } = useAppearance();
  const [prefersDark, setPrefersDark] = useState<boolean>(() => {
    if (typeof window === 'undefined') {
      return false;
    }
    return window.matchMedia('(prefers-color-scheme: dark)').matches;
  });
  const [documentLang, setDocumentLang] = useState<string>(() => (typeof document !== 'undefined' ? document.documentElement.lang ?? '' : ''));

  useEffect(() => {
    if (typeof window === 'undefined') return;

    const media = window.matchMedia('(prefers-color-scheme: dark)');
    const handleChange = (event: MediaQueryListEvent) => setPrefersDark(event.matches);
    setPrefersDark(media.matches);
    media.addEventListener('change', handleChange);

    return () => media.removeEventListener('change', handleChange);
  }, []);

  useEffect(() => {
    if (typeof document === 'undefined') return;
    const observer = new MutationObserver(() => setDocumentLang(document.documentElement.lang ?? ''));
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] });
    return () => observer.disconnect();
  }, []);

  const resolvedAppearance = appearance === 'system' ? (prefersDark ? 'dark' : 'light') : appearance;
  const isDark = resolvedAppearance === 'dark';
  const Icon = isDark ? Moon : Sun;

  const { ariaLabel, title } = useMemo(() => {
    const isGerman = documentLang.toLowerCase().startsWith('de');
    if (isDark) {
      return {
        ariaLabel: isGerman ? 'Zum hellen Modus wechseln' : 'Switch to light mode',
        title: isGerman ? 'Zum hellen Modus wechseln' : 'Switch to light mode',
      };
    }
    return {
      ariaLabel: isGerman ? 'Zum dunklen Modus wechseln' : 'Switch to dark mode',
      title: isGerman ? 'Zum dunklen Modus wechseln' : 'Switch to dark mode',
    };
  }, [documentLang, isDark]);

  const handleToggle = () => {
    updateAppearance(isDark ? 'light' : 'dark');
  };

  return (
    <div className={className} {...props}>
      <Button
        variant="ghost"
        size="icon"
        className="h-9 w-9 rounded-md"
        type="button"
        onClick={handleToggle}
        aria-pressed={isDark}
        aria-label={ariaLabel}
        title={title}
      >
        <Icon className="h-5 w-5" aria-hidden />
      </Button>
    </div>
  );
}