'use client';

import { SUPPORTED_LOCALES, useTranslation, type Locale } from '@/lib/i18n';
import type { TranslationKey } from '@/lib/i18n';

const LABEL_KEYS: Record<Locale, TranslationKey> = {
  zh: 'language.zh',
  en: 'language.en',
  ja: 'language.ja',
};

const NATIVE_LABEL: Record<Locale, string> = {
  zh: '简体中文',
  en: 'English',
  ja: '日本語',
};

export default function LanguageSection() {
  const { locale, setLocale, t } = useTranslation();

  return (
    <div>
      <div style={{ marginBottom: '20px' }}>
        <div style={{ fontSize: '15px', fontWeight: 600, color: '#1a1a2e', marginBottom: '4px' }}>
          {t('language.title')}
        </div>
        <div style={{ fontSize: '13px', color: '#6b7280' }}>
          {t('language.description')}
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
        {SUPPORTED_LOCALES.map(code => {
          const isActive = code === locale;
          return (
            <button
              key={code}
              onClick={() => setLocale(code)}
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                padding: '12px 14px',
                border: isActive ? '1.5px solid #5c5fbc' : '1px solid #e5e7eb',
                borderRadius: '10px',
                background: isActive ? '#f0f0fb' : '#fff',
                cursor: 'pointer',
                textAlign: 'left',
                transition: 'background 0.15s, border-color 0.15s',
              }}
              onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = '#fafafa'; }}
              onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = '#fff'; }}
            >
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                <span style={{ fontSize: '14px', fontWeight: 600, color: '#1a1a2e' }}>
                  {NATIVE_LABEL[code]}
                </span>
                <span style={{ fontSize: '12px', color: '#6b7280', marginTop: 2 }}>
                  {t(LABEL_KEYS[code])}
                </span>
              </div>
              {isActive && (
                <span aria-hidden style={{ color: '#5c5fbc', fontSize: '16px', fontWeight: 700 }}>✓</span>
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
}