import React, { useState } from 'react';
import {
  ActivityIndicator,
  Image,
  Alert,
  Linking,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { useQuery } from '@tanstack/react-query';
import { api, USE_MOCK } from '@/api';
import { AppBar } from '@/components/AppBar';
import { Avatar, Badge, Button, Card, SectionTitle } from '@/components/ui';
import { useAuth } from '@/auth/AuthContext';
import { LanguagePreference, useI18n } from '@/i18n';
import { colors, fontSize, radii, spacing } from '@/theme';

// Both stores check these open a real page before accepting a build.
const PRIVACY_URL = 'https://casadoc.app/privacy';
const TERMS_URL = 'https://casadoc.app/terms';

export default function ProfileScreen() {
  const { user, signOut, deleteAccount } = useAuth();
  const router = useRouter();
  const { t, preference, setPreference } = useI18n();
  const [signingOut, setSigningOut] = useState(false);
  const [deleting, setDeleting] = useState(false);

  const propsQuery = useQuery({ queryKey: ['properties'], queryFn: () => api.properties.list() });

  const fullName = [user?.firstName, user?.lastName].filter(Boolean).join(' ') || user?.email || '—';
  const initials = ((user?.firstName?.[0] ?? '') + (user?.lastName?.[0] ?? '')).toUpperCase() || 'U';

  const languageOptions: { value: LanguagePreference; label: string; sub?: string }[] = [
    { value: 'system', label: t('profile.languageSystem'), sub: t('profile.languageSystemSub') },
    { value: 'en', label: 'English' },
    { value: 'it', label: 'Italiano' },
  ];

  // Both stores require in-app deletion, with the consequences spelled out.
  function confirmDelete() {
    Alert.alert(t('profile.deleteConfirmTitle'), t('profile.deleteConfirmBody'), [
      { text: t('common.cancel'), style: 'cancel' },
      {
        text: t('profile.deleteConfirmCta'),
        style: 'destructive',
        onPress: async () => {
          setDeleting(true);
          try {
            await deleteAccount();
          } catch (e: any) {
            Alert.alert(t('profile.deleteFailed'), e?.message ?? t('common.tryAgain'));
          } finally {
            setDeleting(false);
          }
        },
      },
    ]);
  }

  async function onSignOut() {
    setSigningOut(true);
    try {
      await signOut();
    } finally {
      setSigningOut(false);
    }
  }

  return (
    <View style={{ flex: 1, backgroundColor: colors.bgApp }}>
      <AppBar title={t('profile.title')} large />
      <ScrollView contentContainerStyle={styles.body}>
        <Card style={{ padding: spacing[5] }}>
          <View style={styles.hero}>
            {user?.avatar ? (
              <Image source={{ uri: user.avatar }} style={styles.heroAvatar} />
            ) : (
              <Avatar initials={initials} size={60} />
            )}
            <View style={{ flex: 1 }}>
              <Text style={styles.name}>{fullName}</Text>
              <Text style={styles.email}>{user?.email}</Text>
              <View style={{ flexDirection: 'row', marginTop: 8 }}>
                <Badge
                  label={t('properties.count', { count: propsQuery.data?.length ?? 0 })}
                  tone="info"
                />
              </View>
            </View>
          </View>
        </Card>

        {/* Language */}
        <SectionTitle title={t('profile.language')} />
        <Card style={{ padding: 0 }}>
          {languageOptions.map((opt, i) => {
            const selected = preference === opt.value;
            return (
              <React.Fragment key={opt.value}>
                {i > 0 ? <Divider /> : null}
                <Pressable
                  style={styles.row}
                  onPress={() => setPreference(opt.value)}
                  accessibilityRole="radio"
                  accessibilityState={{ selected }}
                >
                  <View style={styles.rowIcon}>
                    <Ionicons
                      name={opt.value === 'system' ? 'phone-portrait-outline' : 'language-outline'}
                      size={18}
                      color={colors.teal600}
                    />
                  </View>
                  <View style={{ flex: 1 }}>
                    <Text style={styles.rowTitle}>{opt.label}</Text>
                    {opt.sub ? <Text style={styles.rowSub}>{opt.sub}</Text> : null}
                  </View>
                  <View style={[styles.radio, selected && styles.radioOn]}>
                    {selected ? <View style={styles.radioDot} /> : null}
                  </View>
                </Pressable>
              </React.Fragment>
            );
          })}
        </Card>

        {/* Account */}
        <SectionTitle title={t('profile.account')} />
        <Card style={{ padding: 0 }}>
          <Pressable style={styles.row} onPress={() => router.push('/profile/edit')}>
            <View style={styles.rowIcon}>
              <Ionicons name="person-outline" size={18} color={colors.teal600} />
            </View>
            <View style={{ flex: 1 }}>
              <Text style={styles.rowTitle}>{t('profile.personalDetails')}</Text>
              <Text style={styles.rowSub}>{t('profile.personalDetailsSub')}</Text>
            </View>
            <Ionicons name="chevron-forward" size={18} color={colors.slate400} />
          </Pressable>
          <Divider />
          <Pressable style={styles.row} onPress={() => router.push('/profile/password')}>
            <View style={styles.rowIcon}>
              <Ionicons name="lock-closed-outline" size={18} color={colors.teal600} />
            </View>
            <View style={{ flex: 1 }}>
              <Text style={styles.rowTitle}>{t('profile.security')}</Text>
              <Text style={styles.rowSub}>{t('profile.securitySub')}</Text>
            </View>
            <Ionicons name="chevron-forward" size={18} color={colors.slate400} />
          </Pressable>
        </Card>

        {/* Legal — store listings require these to be reachable. */}
        <SectionTitle title={t('profile.legal')} />
        <Card style={{ padding: 0 }}>
          <Pressable style={styles.row} onPress={() => Linking.openURL(PRIVACY_URL)}>
            <View style={styles.rowIcon}>
              <Ionicons name="shield-checkmark-outline" size={18} color={colors.teal600} />
            </View>
            <Text style={[styles.rowTitle, { flex: 1 }]}>{t('profile.privacy')}</Text>
            <Ionicons name="open-outline" size={18} color={colors.slate400} />
          </Pressable>
          <Divider />
          <Pressable style={styles.row} onPress={() => Linking.openURL(TERMS_URL)}>
            <View style={styles.rowIcon}>
              <Ionicons name="document-text-outline" size={18} color={colors.teal600} />
            </View>
            <Text style={[styles.rowTitle, { flex: 1 }]}>{t('profile.terms')}</Text>
            <Ionicons name="open-outline" size={18} color={colors.slate400} />
          </Pressable>
        </Card>

        {USE_MOCK ? <Text style={styles.demo}>{t('profile.demoMode')}</Text> : null}

        <SectionTitle title={t('profile.dangerZone')} />
        <Pressable style={styles.dangerRow} onPress={deleting ? undefined : confirmDelete}>
          <View style={styles.dangerIcon}>
            <Ionicons name="trash-outline" size={18} color={colors.danger600} />
          </View>
          <View style={{ flex: 1 }}>
            <Text style={styles.dangerTitle}>{t('profile.deleteAccount')}</Text>
            <Text style={styles.rowSub}>{t('profile.deleteAccountSub')}</Text>
          </View>
          {deleting ? <ActivityIndicator color={colors.danger600} /> : null}
        </Pressable>

        <Button
          title={t('profile.signOut')}
          variant="ghost"
          icon="log-out-outline"
          block
          loading={signingOut}
          onPress={onSignOut}
          style={{ marginTop: spacing[5] }}
        />
      </ScrollView>
    </View>
  );
}

function Divider() {
  return <View style={styles.divider} />;
}

const styles = StyleSheet.create({
  body: { padding: spacing[4], paddingBottom: spacing[9] },
  heroAvatar: { width: 60, height: 60, borderRadius: 30, backgroundColor: colors.surfaceSunken },
  hero: { flexDirection: 'row', alignItems: 'center', gap: spacing[4] },
  name: { fontSize: fontSize.lg, fontWeight: '700', color: colors.ink },
  email: { fontSize: fontSize.sm, color: colors.textMuted, marginTop: 2 },
  row: { flexDirection: 'row', alignItems: 'center', gap: spacing[3], padding: spacing[4] },
  rowIcon: {
    width: 38,
    height: 38,
    borderRadius: 10,
    backgroundColor: colors.teal50,
    alignItems: 'center',
    justifyContent: 'center',
  },
  rowTitle: { fontSize: fontSize.base, fontWeight: '600', color: colors.ink },
  rowSub: { fontSize: fontSize.xs, color: colors.textMuted, marginTop: 2 },
  divider: { height: 1, backgroundColor: colors.border, marginLeft: 58 },
  radio: {
    width: 22,
    height: 22,
    borderRadius: 11,
    borderWidth: 2,
    borderColor: colors.borderStrong,
    alignItems: 'center',
    justifyContent: 'center',
  },
  radioOn: { borderColor: colors.teal600 },
  radioDot: { width: 10, height: 10, borderRadius: 5, backgroundColor: colors.teal600 },
  dangerRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing[3],
    padding: spacing[4],
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderColor: '#f0c2c9',
    borderRadius: radii.lg,
  },
  dangerIcon: {
    width: 38,
    height: 38,
    borderRadius: 10,
    backgroundColor: colors.dangerBg,
    alignItems: 'center',
    justifyContent: 'center',
  },
  dangerTitle: { fontSize: fontSize.base, fontWeight: '700', color: colors.danger600 },
  demo: { textAlign: 'center', color: colors.textMuted2, fontSize: fontSize.xs, marginTop: spacing[5] },
});