/*
 * [모바일] 관람객(B2C) 마이 — 내정보·내 티켓·내 주차권·언어·서버 상태·로그아웃.
 * 운영(B2B) 더보기(SCR-M3 more)의 관람객 경량판. 공통 키(more.*) 재사용 + vmy.* 최소 신설.
 */
import { Ionicons } from '@expo/vector-icons';
import { router } from 'expo-router';
import React, { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { Avatar } from '../../components/Avatar';
import { Card } from '../../components/Card';
import { LanguageSelector } from '../../components/LanguageSelector';
import { useAuth } from '../../context/AuthContext';
import { api, isDegraded } from '../../lib/api';
import { API_BASE } from '../../lib/config';
import type { HealthDto } from '../../lib/types';
import { colors, radius, spacing, touch, type } from '../../theme';

export default function VisitorMyScreen() {
  const { t } = useTranslation();
  const { user, signOut } = useAuth();
  const [health, setHealth] = useState<string>(t('common.loading'));

  const checkHealth = useCallback(async () => {
    try {
      const res = await api.get<HealthDto>('/health', { anonymous: true });
      setHealth(res?.status === 'UP' ? t('more.statusUp') : (res?.status ?? t('common.unknown')));
    } catch (e) {
      setHealth(isDegraded(e) ? t('more.statusDown') : t('common.error'));
    }
  }, [t]);

  useEffect(() => {
    checkHealth();
  }, [checkHealth]);

  async function onSignOut() {
    await signOut();
    router.replace('/login');
  }

  return (
    <ScrollView contentContainerStyle={styles.scroll}>
      {/* 내 정보 진입 */}
      <Pressable
        onPress={() => router.push('/profile')}
        accessibilityRole="button"
        accessibilityLabel={t('more.openProfile')}
      >
        <Card>
          <View style={styles.meRow}>
            <Avatar name={user?.displayName} size={48} />
            <View style={{ flex: 1, marginLeft: 12 }}>
              <Text style={styles.name}>{user?.displayName ?? t('common.user')}</Text>
              <Text style={styles.meta}>{t('more.accountGeneral')}</Text>
            </View>
            <Ionicons name="chevron-forward" size={20} color={colors.neutral500} />
          </View>
        </Card>
      </Pressable>

      {/* 바로가기 — 내 티켓 · 내 주차권 */}
      <NavRow
        icon="ticket-outline"
        title={t('vmy.tickets')}
        desc={t('vmy.ticketsDesc')}
        onPress={() => router.push('/(visitor)/tickets')}
      />
      <NavRow
        icon="car-outline"
        title={t('vmy.parking')}
        desc={t('vmy.parkingDesc')}
        onPress={() => router.push('/(visitor)/onsite')}
      />

      {/* 언어 */}
      <LanguageSelector />

      {/* 서버 상태 */}
      <Card>
        <Row label={t('more.apiServer')} value={API_BASE} />
        <View style={styles.divider} />
        <Pressable style={styles.healthRow} onPress={checkHealth}>
          <Row label={t('more.serverStatus')} value={health} />
          <Ionicons name="refresh" size={18} color={colors.primary600} />
        </Pressable>
      </Card>

      <Pressable style={styles.signOut} onPress={onSignOut}>
        <Ionicons name="log-out-outline" size={20} color={colors.error} />
        <Text style={styles.signOutText}>{t('more.signOut')}</Text>
      </Pressable>

      <Text style={styles.version}>{t('more.version')}</Text>
    </ScrollView>
  );
}

function NavRow({
  icon,
  title,
  desc,
  onPress,
}: {
  icon: keyof typeof Ionicons.glyphMap;
  title: string;
  desc: string;
  onPress: () => void;
}) {
  return (
    <Pressable style={styles.navRow} onPress={onPress}>
      <View style={styles.navIcon}>
        <Ionicons name={icon} size={22} color={colors.primary600} />
      </View>
      <View style={{ flex: 1 }}>
        <Text style={styles.navTitle}>{title}</Text>
        <Text style={styles.navDesc}>{desc}</Text>
      </View>
      <Ionicons name="chevron-forward" size={20} color={colors.neutral500} />
    </Pressable>
  );
}

function Row({ label, value }: { label: string; value: string }) {
  return (
    <View style={styles.row}>
      <Text style={styles.rowLabel}>{label}</Text>
      <Text style={styles.rowValue} numberOfLines={1}>
        {value}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  scroll: { padding: spacing.md, gap: spacing.md, paddingBottom: 40 },
  meRow: { flexDirection: 'row', alignItems: 'center' },
  name: { fontSize: type.h3.fontSize, fontWeight: '700', color: colors.neutral900 },
  meta: { marginTop: 4, color: colors.neutral500, fontSize: type.caption.fontSize },
  navRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    backgroundColor: colors.white,
    borderWidth: 1,
    borderColor: colors.neutral200,
    borderRadius: radius.md,
    padding: spacing.md,
  },
  navIcon: {
    width: 40,
    height: 40,
    borderRadius: radius.sm,
    backgroundColor: colors.primary050,
    alignItems: 'center',
    justifyContent: 'center',
  },
  navTitle: { fontSize: type.h3.fontSize, fontWeight: '600', color: colors.neutral900 },
  navDesc: { fontSize: type.caption.fontSize, color: colors.neutral500 },
  row: { flexDirection: 'row', justifyContent: 'space-between', gap: 12, paddingVertical: 4 },
  rowLabel: { color: colors.neutral500, fontSize: type.body.fontSize },
  rowValue: { flex: 1, textAlign: 'right', color: colors.neutral900, fontSize: type.body.fontSize },
  divider: { height: 1, backgroundColor: colors.neutral200, marginVertical: 6 },
  healthRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
  signOut: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    minHeight: touch.min,
    borderRadius: radius.sm,
    borderWidth: 1,
    borderColor: colors.error,
  },
  signOutText: { color: colors.error, fontSize: type.h3.fontSize, fontWeight: '600' },
  version: { textAlign: 'center', color: colors.neutral500, fontSize: type.caption.fontSize },
});