import { router } from 'expo-router';
import { Image, Text, StyleSheet, Pressable, View } from 'react-native';
import { Screen } from '../../src/components/Screen';
import { PrimaryButton } from '../../src/components/PrimaryButton';
import { NaviHeader } from '../../src/components/layout/NaviHeader';
import { naviAssets } from '../../src/assets/naviAssets';
import { color, radius, spacing, typography } from '../../src/theme';
import { naviTheme } from '../../src/theme/naviTheme';
import { useTranslation } from 'react-i18next';
import { useAuth } from '../../src/state/auth';
import { useLocale } from '../../src/state/locale';

export default function Profile() {
  const { t } = useTranslation();
  const clear = useAuth((s) => s.clear);
  const user = useAuth((s) => s.user);
  const isGuest = useAuth((s) => s.isGuest);
  const { locale, setLocale } = useLocale();

  return (
    <Screen>
      <NaviHeader variant="center" title={t('profile.title')} actions={[{ kind: 'settings', label: t('profile.settings'), onPress: () => router.push('/settings' as never) }]} />
      <View style={styles.card}>
        <Image source={naviAssets.profile.avatarSample} style={styles.avatar} resizeMode="cover" />
        <View style={styles.profileCopy}>
          <Text style={styles.name}>{isGuest ? t('profile.guestName') : user?.fullName ?? t('profile.welcomeName')}</Text>
          <Text style={styles.muted}>{user?.email ?? t('profile.guestBody')}</Text>
        </View>
      </View>

      {isGuest ? (
        <View style={styles.guestActions}>
          <PrimaryButton label={t('actions.signIn')} onPress={() => router.replace('/(auth)/login')} />
          <PrimaryButton label={t('auth.createAccount')} variant="secondary" onPress={() => router.replace('/(auth)/signup')} />
        </View>
      ) : null}

      <Section title={t('profile.preferences')}>
        <Row label={t('profile.language')} value={locale === 'en' ? 'English' : 'العربية'} onPress={() => setLocale(locale === 'en' ? 'ar' : 'en')} />
        <Row label={t('profile.notifications')} value={t('profile.notificationsOn')} onPress={() => router.push('/settings/notifications')} />
        <Row label={t('profile.paymentMethods')} onPress={() => router.push('/settings/payment-methods')} />
      </Section>

      <Section title={t('profile.support')}>
        <Row label={t('profile.helpSupport')} onPress={() => router.push('/help')} />
        <Row label={t('profile.privacyPolicy')} onPress={() => router.push('/legal/privacy')} />
      </Section>

      <PrimaryButton label={isGuest ? t('actions.exitGuestMode') : t('actions.logout')} variant="ghost" onPress={async () => { await clear(); router.replace('/(auth)/splash'); }} />
    </Screen>
  );
}

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

interface RowProps { label: string; value?: string; onPress?: () => void }
function Row({ label, value, onPress }: RowProps) {
  return (
    <Pressable style={styles.row} onPress={onPress} accessibilityRole="button">
      <Text style={styles.rowLabel}>{label}</Text>
      <Text style={styles.rowValue}>{value ?? '›'}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  card: {
    alignItems: 'center',
    backgroundColor: color.bg[0],
    borderRadius: radius.xl,
    flexDirection: 'row',
    gap: spacing[4],
    padding: spacing[5],
    ...naviTheme.shadows.card,
  },
  avatar: { borderRadius: 36, height: 72, width: 72 },
  profileCopy: { flex: 1, gap: spacing[1] },
  guestActions: { gap: spacing[3] },
  name: { fontSize: typography.scale.h2.size, fontWeight: '700', color: color.ink[900] },
  muted: { color: color.ink[500] },
  sectionTitle: { fontSize: typography.scale.h3.size, fontWeight: '600', color: color.ink[900], marginTop: spacing[4] },
  sectionList: { backgroundColor: color.bg[0], borderRadius: radius.lg, marginTop: spacing[2] },
  row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: spacing[4], borderBottomColor: color.border, borderBottomWidth: 1 },
  rowLabel: { color: color.ink[900] },
  rowValue: { color: color.ink[500] },
});