/*
 * LanguageSwitcher — 다국어 전환 셀렉트(선 SVG 글로브 아이콘 자체 정의, 이모지 금지).
 * i18next 언어를 읽고/변경하며, 선택은 languagedetector가 localStorage에 지속화한다.
 * 자체 완결형(외부 CSS 비의존) — 공개 셸·로그인·AppShell 어디에나 배선 가능.
 *
 * AppShell 배선은 통합자 몫 — 여기서는 export만 제공한다.
 */
import { useTranslation } from 'react-i18next';
import type { CSSProperties } from 'react';
import { SUPPORTED_LANGS, LANG_LABELS } from '../../i18n';

/** 선 스타일 글로브 아이콘(fill:none·stroke:currentColor). */
function GlobeIcon({ size = 18 }: { size?: number }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.8}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      focusable="false"
    >
      <circle cx="12" cy="12" r="9" />
      <path d="M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18" />
    </svg>
  );
}

export interface LanguageSwitcherProps {
  /** 밝은 헤더(light) 또는 어두운 배경(dark) 대비 — 텍스트 색 결정. */
  variant?: 'light' | 'dark';
  className?: string;
  style?: CSSProperties;
}

export function LanguageSwitcher({ variant = 'light', className, style }: LanguageSwitcherProps) {
  const { i18n, t } = useTranslation();
  // resolvedLanguage 는 지역 변형을 축약한 실제 적용 언어.
  const current = (i18n.resolvedLanguage ?? i18n.language ?? 'ko').split('-')[0];
  const color = variant === 'dark' ? '#ffffff' : 'var(--color-neutral-700, #344054)';

  const wrapStyle: CSSProperties = {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 6,
    color,
    ...style,
  };

  const selectStyle: CSSProperties = {
    appearance: 'none',
    WebkitAppearance: 'none',
    MozAppearance: 'none',
    background: 'transparent',
    border: 'none',
    color: 'inherit',
    font: 'inherit',
    fontSize: 'var(--fs-caption, 13px)',
    fontWeight: 600,
    padding: '4px 2px',
    cursor: 'pointer',
    outline: 'none',
  };

  return (
    <label className={className} style={wrapStyle}>
      <GlobeIcon />
      <span className="sr-only" style={srOnly}>
        {t('lang.select')}
      </span>
      <select
        aria-label={t('lang.select')}
        value={current}
        onChange={(e) => void i18n.changeLanguage(e.target.value)}
        style={selectStyle}
      >
        {SUPPORTED_LANGS.map((code) => (
          <option key={code} value={code} style={{ color: '#1a1a1a' }}>
            {LANG_LABELS[code]}
          </option>
        ))}
      </select>
    </label>
  );
}

const srOnly: CSSProperties = {
  position: 'absolute',
  width: 1,
  height: 1,
  padding: 0,
  margin: -1,
  overflow: 'hidden',
  clip: 'rect(0,0,0,0)',
  whiteSpace: 'nowrap',
  border: 0,
};
