import { useNavigate } from 'react-router-dom'
import { useTheme, type ThemeMode } from '../contexts/ThemeContext'

const sectionStyle: React.CSSProperties = {
  background: 'var(--bg-3)',
  borderRadius: 10,
  padding: '16px 16px',
  display: 'flex',
  flexDirection: 'column',
  gap: 12,
}

const labelStyle: React.CSSProperties = {
  color: 'var(--ink-3)',
  fontSize: 11,
  fontFamily: 'var(--font-ui)',
  textTransform: 'uppercase',
  letterSpacing: 0.5,
}

const THEME_OPTIONS: { value: ThemeMode; label: string; icon: string }[] = [
  { value: 'dark',   label: 'Sombre',  icon: 'moon' },
  { value: 'light',  label: 'Clair',   icon: 'sun' },
  { value: 'system', label: 'Système', icon: 'circle-half-stroke' },
]

const FONT_LABELS: Record<string, string> = {
  '0.8': 'XS', '0.85': 'S', '0.9': 'S+',
  '0.95': 'M-', '1': 'M', '1.05': 'M+',
  '1.1': 'L-', '1.15': 'L', '1.2': 'L+',
  '1.25': 'XL', '1.3': 'XL+', '1.35': 'XXL', '1.4': 'XXL+',
}

export default function ConfigPage() {
  const navigate = useNavigate()
  const { theme, setTheme, fontScale, setFontScale } = useTheme()

  const scaleLabel = FONT_LABELS[String(fontScale)] ?? `${Math.round(fontScale * 100)}%`

  return (
    <div style={{ padding: '12px 16px 32px', maxWidth: 520, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
      {/* Titre */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <button
          onClick={() => navigate(-1)}
          style={{ background: 'var(--bg-4)', border: 'none', borderRadius: 8, width: 36, height: 36, cursor: 'pointer', color: 'var(--ink-2)', fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}
        >
          <i className="fa-solid fa-arrow-left" />
        </button>
        <h2 style={{ margin: 0, color: 'var(--ink-1)', fontFamily: 'var(--font-ui)', fontSize: 18, fontWeight: 600 }}>
          Paramètres
        </h2>
      </div>

      {/* Thème */}
      <div style={sectionStyle}>
        <div style={labelStyle}>Thème d'affichage</div>
        <div style={{ display: 'flex', gap: 8 }}>
          {THEME_OPTIONS.map(opt => {
            const active = theme === opt.value
            return (
              <button
                key={opt.value}
                onClick={() => setTheme(opt.value)}
                style={{
                  flex: 1,
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                  padding: '10px 6px',
                  borderRadius: 8,
                  border: active ? 'none' : '1px solid var(--bg-5)',
                  background: active ? 'var(--accent)' : 'var(--bg-4)',
                  color: active ? '#1d2021' : 'var(--ink-3)',
                  cursor: 'pointer',
                  fontFamily: 'var(--font-ui)',
                  fontSize: 12,
                  fontWeight: active ? 600 : 400,
                  minHeight: 64,
                  userSelect: 'none',
                }}
              >
                <i className={`fa-solid fa-${opt.icon}`} style={{ fontSize: 20 }} />
                {opt.label}
              </button>
            )
          })}
        </div>
      </div>

      {/* Taille du texte */}
      <div style={sectionStyle}>
        <div style={labelStyle}>Taille du texte</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ color: 'var(--ink-3)', fontFamily: 'var(--font-ui)', fontSize: 12, minWidth: 16, textAlign: 'center' }}>A</span>
          <input
            type="range"
            min={0.8}
            max={1.4}
            step={0.05}
            value={fontScale}
            onChange={e => setFontScale(parseFloat(e.target.value))}
            style={{ flex: 1, accentColor: 'var(--accent)', cursor: 'pointer' }}
          />
          <span style={{ color: 'var(--ink-3)', fontFamily: 'var(--font-ui)', fontSize: 20, minWidth: 16, textAlign: 'center' }}>A</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
          <span style={{ color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', fontSize: 13 }}>
            {scaleLabel} — {Math.round(fontScale * 100)}%
          </span>
          {fontScale !== 1 && (
            <button
              onClick={() => setFontScale(1)}
              style={{ padding: '3px 10px', borderRadius: 999, border: '1px solid var(--bg-5)', background: 'transparent', color: 'var(--ink-3)', cursor: 'pointer', fontFamily: 'var(--font-ui)', fontSize: 11 }}
            >Réinitialiser</button>
          )}
        </div>
        {/* Aperçu */}
        <div style={{ background: 'var(--bg-4)', borderRadius: 8, padding: '10px 12px' }}>
          <div style={{ color: 'var(--ink-1)', fontFamily: 'var(--font-ui)', fontSize: `${14 * fontScale}px`, lineHeight: 1.5 }}>
            Aperçu du texte principal
          </div>
          <div style={{ color: 'var(--ink-3)', fontFamily: 'var(--font-ui)', fontSize: `${12 * fontScale}px`, marginTop: 4 }}>
            Texte secondaire et labels
          </div>
        </div>
      </div>
    </div>
  )
}