'use client';
import { Moon, Sun } from 'lucide-react';
import { useEffect, useState } from 'react';
import { t } from '@/i18n';

export const THEME_KEY = 'ca-theme';

/** Applied before first paint by the inline script in layout.tsx; here we only toggle and persist. */
export function ThemeToggle({ className }: { className?: string }) {
  const [dark, setDark] = useState<boolean | null>(null);
  useEffect(() => {
    setDark(document.documentElement.classList.contains('dark'));
    const mq = window.matchMedia('(prefers-color-scheme: dark)');
    const onChange = () => {
      if (!localStorage.getItem(THEME_KEY)) {
        document.documentElement.classList.toggle('dark', mq.matches);
        setDark(mq.matches);
      }
    };
    mq.addEventListener('change', onChange);
    return () => mq.removeEventListener('change', onChange);
  }, []);
  const toggle = () => {
    const next = !document.documentElement.classList.contains('dark');
    document.documentElement.classList.toggle('dark', next);
    try {
      localStorage.setItem(THEME_KEY, next ? 'dark' : 'light');
    } catch {
      /* private mode */
    }
    setDark(next);
  };
  return (
    <button type="button" onClick={toggle} className={`tap grid place-items-center rounded-sm text-ink-2 hover:bg-surface-2 hover:text-ink ${className ?? ''}`} aria-label={t('theme.toggle')} aria-pressed={dark ?? undefined} title={dark ? t('theme.light') : t('theme.dark')}>
      {dark ? <Sun size={18} aria-hidden /> : <Moon size={18} aria-hidden />}
    </button>
  );
}

/** Inline bootstrap: apply stored/system theme before paint (no flash). */
export const THEME_BOOT = `try{var k='${THEME_KEY}',s=localStorage.getItem(k),d=s?s==='dark':matchMedia('(prefers-color-scheme: dark)').matches;if(d)document.documentElement.classList.add('dark')}catch(e){}`;