import { useCallback, useState } from 'react'
import { View, Text, ScrollView, StyleSheet, TouchableOpacity } from 'react-native'
import { router, useFocusEffect } from 'expo-router'
import { Feather } from '@expo/vector-icons'
import { useTheme } from '../../constants/ThemeContext'
import { type PrefMode } from '../../constants/ThemeContext'
import { type ThemeTokens } from '../../constants/ItmsTheme'
import { Card, Row, SectionTitle, Btn } from '../../components/ui'
import { API_BASE, ITMS_ENV } from '../../constants/Config'
import { itmsProfile, clearItmsSession, type ItmsProfile } from '../itmsApi'

/*
 * 내 정보 — 토큰에서 도출한 프로필(userName·roles·email·org) + 테마 모드 + 로그아웃.
 * ITMS 백엔드에는 preferences API 가 없어 테마는 로컬 저장만.
 */
export default function Me() {
  const { t, mode, setMode } = useTheme()
  const s = makeStyles(t)
  const [me, setMe] = useState<ItmsProfile | null>(null)

  useFocusEffect(useCallback(() => {
    let alive = true
    itmsProfile().then((p) => { if (alive) setMe(p) }).catch(() => { /* noop */ })
    return () => { alive = false }
  }, []))

  const logout = async () => {
    await clearItmsSession()
    router.replace('/login')
  }

  const modes: { key: PrefMode; label: string; icon: keyof typeof Feather.glyphMap }[] = [
    { key: 'light', label: '라이트', icon: 'sun' },
    { key: 'dark', label: '다크', icon: 'moon' },
    { key: 'system', label: '시스템', icon: 'smartphone' },
  ]

  return (
    <ScrollView style={s.wrap} contentContainerStyle={s.content}>
      <View style={s.profileHead}>
        <View style={s.avatar}><Text style={s.avatarText}>{(me?.userNm || 'I').slice(0, 1)}</Text></View>
        <Text style={s.name}>{me?.userNm || '-'}</Text>
        <Text style={s.sub}>{me?.userId ? `@${me.userId}` : ''}</Text>
        {me?.roles && me.roles.length > 0 && (
          <View style={s.roleRow}>
            {me.roles.map((r) => (
              <View key={r} style={s.roleBadge}><Text style={s.roleText}>{r.replace(/^ROLE_/, '')}</Text></View>
            ))}
          </View>
        )}
      </View>

      <SectionTitle style={s.mt}>계정 정보</SectionTitle>
      <Card>
        <Row label="아이디" value={me?.userId || '-'} />
        <Row label="이메일" value={me?.email || '-'} />
        <Row label="연락처" value={me?.phone || '-'} />
        <Row label="조직 ID" value={me?.orgId || '-'} />
      </Card>

      <SectionTitle style={s.mt}>화면 테마</SectionTitle>
      <View style={s.modeRow}>
        {modes.map((m) => {
          const on = mode === m.key
          return (
            <TouchableOpacity key={m.key} style={[s.modeCell, on && { borderColor: t.brand, backgroundColor: t.brand + '14' }]} onPress={() => setMode(m.key)}>
              <Feather name={m.icon} size={18} color={on ? t.brand : t.muted} />
              <Text style={[s.modeLbl, { color: on ? t.brand : t.muted }]}>{m.label}</Text>
            </TouchableOpacity>
          )
        })}
      </View>

      <SectionTitle style={s.mt}>앱 정보</SectionTitle>
      <Card>
        <Row label="서버" value={API_BASE} />
        <Row label="환경" value={ITMS_ENV} />
        <Row label="버전" value="1.0.0" />
      </Card>

      <View style={{ marginTop: 24 }}>
        <Btn label="로그아웃" kind="danger" icon="log-out" onPress={logout} />
      </View>
      <View style={{ height: 24 }} />
    </ScrollView>
  )
}

const makeStyles = (t: ThemeTokens) => StyleSheet.create({
  wrap: { flex: 1, backgroundColor: t.bg },
  content: { padding: 16 },
  profileHead: { alignItems: 'center', paddingVertical: 20 },
  avatar: { width: 72, height: 72, borderRadius: 36, backgroundColor: t.brand, justifyContent: 'center', alignItems: 'center' },
  avatarText: { color: t.onBrand, fontSize: 30, fontWeight: '900' },
  name: { color: t.text, fontSize: 20, fontWeight: '900', marginTop: 12 },
  sub: { color: t.muted, fontSize: 13, marginTop: 2 },
  roleRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginTop: 10, justifyContent: 'center' },
  roleBadge: { backgroundColor: t.brand + '1a', borderRadius: 8, paddingHorizontal: 10, paddingVertical: 4 },
  roleText: { color: t.brand, fontSize: 11, fontWeight: '800' },
  mt: { marginTop: 22 },
  modeRow: { flexDirection: 'row', gap: 10 },
  modeCell: { flex: 1, backgroundColor: t.card, borderRadius: 12, borderWidth: 1, borderColor: t.border, paddingVertical: 16, alignItems: 'center', gap: 6 },
  modeLbl: { fontSize: 12, fontWeight: '700' },
})