'use client';
import { useRouter } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { useState, useRef, useEffect } from 'react';
import { setUserLocale } from '@/lib/locale';
import type { Locale } from '@/i18n/config';

export function LanguageSwitcher({ currentLocale }: { currentLocale: Locale }) {
  const [open, setOpen] = useState(false);
  const router = useRouter();
  const t = useTranslations('nav');
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  const handleSwitch = async (locale: Locale) => {
    setOpen(false);
    if (locale === currentLocale) return;
    await setUserLocale(locale);
    router.refresh();
  };

  return (
    <div className="lang-switcher" ref={ref}>
      <button
        className="lang-trigger"
        onClick={() => setOpen(!open)}
        aria-label={t('language')}
      >
        {currentLocale === 'zh' ? '中文' : 'English'}
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M6 9l6 6 6-6" />
        </svg>
      </button>
      {open && (
        <div className="lang-dropdown">
          <button
            className={`lang-option ${currentLocale === 'zh' ? 'active' : ''}`}
            onClick={() => handleSwitch('zh')}
          >
            中文
          </button>
          <button
            className={`lang-option ${currentLocale === 'en' ? 'active' : ''}`}
            onClick={() => handleSwitch('en')}
          >
            English
          </button>
        </div>
      )}
    </div>
  );
}