import React from 'react'
import { View, Text, Switch, StyleSheet, ScrollView } from 'react-native'
import { COLORS } from '../../constants/Config'
import { useTheme } from '../../contexts/ThemeContext'
import { useFontScale } from '../../contexts/FontContext'

export default function AccessibilityScreen() {
  const { isDark, toggleTheme } = useTheme()
  const { fontScale: scale, setFontScale: setScale } = useFontScale()

  return (
    <ScrollView style={{ flex: 1, backgroundColor: isDark ? COLORS.gnbBg : COLORS.bg }}>
      <Text style={[s.header, isDark && { color: '#fff' }]}>접근성 설정</Text>

      <Section title="시각">
        <Row label="다크 모드" isDark={isDark}>
          <Switch value={isDark} onValueChange={toggleTheme} />
        </Row>
        <Row label="글자 크기" isDark={isDark}>
          <View style={s.scaleRow}>
            {([1.0, 1.2, 1.5] as const).map(v => (
              <Text
                key={v}
                style={[s.scaleBtn, scale === v && s.scaleBtnActive]}
                onPress={() => setScale(v)}
              >{v === 1.0 ? '기본' : v === 1.2 ? '크게' : '매우 크게'}</Text>
            ))}
          </View>
        </Row>
      </Section>

      <Section title="미리보기">
        <View style={[s.previewBox, isDark && { backgroundColor: '#2d3748' }]}>
          <Text style={[s.previewText, { fontSize: 14 * scale }, isDark && { color: '#fff' }]}>
            이 텍스트는 현재 접근성 설정이 적용된 예시입니다.
          </Text>
          <Text style={[s.previewSub, { fontSize: 12 * scale }, isDark && { color: '#aaa' }]}>
            서비스 요청 · 인시던트 · 배포 이력
          </Text>
        </View>
      </Section>
    </ScrollView>
  )
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <View style={s.section}>
      <Text style={s.sectionTitle}>{title}</Text>
      {children}
    </View>
  )
}

function Row({ label, isDark, children }: { label: string; isDark: boolean; children: React.ReactNode }) {
  return (
    <View style={[s.row, isDark && { borderBottomColor: '#4a5568' }]}>
      <Text style={[s.rowLabel, isDark && { color: '#e2e8f0' }]}>{label}</Text>
      {children}
    </View>
  )
}

const s = StyleSheet.create({
  header:       { fontSize: 22, fontWeight: '800', color: COLORS.text, padding: 16, paddingBottom: 8 },
  section:      { backgroundColor: '#fff', marginHorizontal: 12, marginBottom: 12, borderRadius: 12, overflow: 'hidden', elevation: 1 },
  sectionTitle: { fontSize: 12, color: COLORS.muted, fontWeight: '700', paddingHorizontal: 16, paddingTop: 12, paddingBottom: 4, textTransform: 'uppercase', letterSpacing: 1 },
  row:          { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 14, borderBottomWidth: 1, borderBottomColor: COLORS.light },
  rowLabel:     { fontSize: 15, color: COLORS.text },
  scaleRow:     { flexDirection: 'row', gap: 8 },
  scaleBtn:     { paddingHorizontal: 10, paddingVertical: 6, borderRadius: 6, backgroundColor: COLORS.light, fontSize: 12, color: COLORS.muted },
  scaleBtnActive:{ backgroundColor: COLORS.accent, color: '#fff', fontWeight: '700' },
  previewBox:   { margin: 12, padding: 16, backgroundColor: COLORS.bg, borderRadius: 10 },
  previewText:  { fontWeight: '600', color: COLORS.text, marginBottom: 4 },
  previewSub:   { color: COLORS.muted },
})