import { useTheme } from '@/components/ThemeContext';
import { formatNumber, formatPhone, normalizeDigits } from '@/constants/formatPhone';
import { user_api } from '@/screens/profile/lib/api';
import { UserInfoResponseData } from '@/screens/profile/lib/type';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useRouter } from 'expo-router';
import { ArrowLeft, Edit2, Plus } from 'lucide-react-native';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
  ActivityIndicator,
  Image,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View
} from 'react-native';
import { Toast } from 'toastify-react-native';

export default function PersonalInfoScreen() {
  const router = useRouter();
  const queryClient = useQueryClient();
  const { isDark } = useTheme();
  const { t } = useTranslation();

  const theme = {
    background: isDark ? '#0f172a' : '#f8fafc',
    cardBg: isDark ? '#1e293b' : '#ffffff',
    text: isDark ? '#f8fafc' : '#0f172a',
    textSecondary: isDark ? '#94a3b8' : '#64748b',
    textTertiary: isDark ? '#64748b' : '#94a3b8',
    inputBg: isDark ? '#1e293b' : '#f1f5f9',
    inputBorder: isDark ? '#334155' : '#e2e8f0',
    primary: '#3b82f6',
    chipBg: isDark ? '#1e293b' : '#e0e7ff',
    chipText: isDark ? '#f8fafc' : '#4338ca',
    divider: isDark ? '#334155' : '#cbd5e1',
    placeholder: isDark ? '#64748b' : '#94a3b8',
  };

  const [isEditing, setIsEditing] = useState(false);
  const [editData, setEditData] = useState<UserInfoResponseData | null>(null);
  const [phone, setPhone] = useState('');
  const [focused, setFocused] = useState(false);
  const [showCategories, setShowCategories] = useState(false);
  const [selectedCategories, setSelectedCategories] = useState<any[]>([]);

  const { data: me, isLoading } = useQuery({
    queryKey: ['get_me'],
    queryFn: () => user_api.getMe(),
  });

  useEffect(() => {
    if (me?.data.data) {
      setEditData(me.data);

      const rawPhone = normalizeDigits(me.data.data.phone || '');
      setPhone(rawPhone.startsWith('998') ? rawPhone.slice(3) : rawPhone);

      setSelectedCategories(me.data.data.activate_types ?? []);
    }
  }, [me]);

  const updateMutation = useMutation({
    mutationFn: (body: any) => user_api.updateMe(body),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['get_me'] });
      setIsEditing(false);
      setShowCategories(false);
      Toast.success(t("Ma'lumotlar yangilandi"));
    },
    onError: () => {
      Toast.error(t('Yangilashda xatolik yuz berdi'));
    },
  });

  const handleSave = () => {
    if (!editData) return;

    updateMutation.mutate({
      first_name: editData.data.first_name,
      phone: normalizeDigits(phone),
      person_type: editData.data.person_type,
      industries: editData.data.activate_types,
      activate_types: editData.data.activate_types.map((e) => e.id),

      company_name: editData.data.company_name,
      stir: editData.data.stir,
      director_full_name: editData.data.director_full_name,
      address: editData.data.address,
      gender: editData.data.gender,
      age: editData.data.age,
    });
  };

  const removeCategory = (id: number) => {
    setSelectedCategories((prev) => prev.filter((c) => c.id !== id));
  };

  if (isLoading) {
    return (
      <View style={[styles.container, { backgroundColor: theme.background }]}>
        <View style={styles.topHeader}>
          <Pressable onPress={() => setIsEditing(false)}>
            <ArrowLeft color={theme.text} />
          </Pressable>
          <Text style={[styles.headerTitle, { color: theme.text }]}>{t('Tahrirlash')}</Text>
          <Pressable onPress={handleSave}>
            <Text style={[styles.saveButton, { color: theme.primary }]}>{t('Saqlash')}</Text>
          </Pressable>
        </View>
        <ActivityIndicator size={'large'} />
      </View>
    );
  }

  if (isEditing && editData) {
    const genderOptions: { label: string; value: 'male' | 'female' }[] = [
      { label: t('Erkak'), value: 'male' },
      { label: t('Ayol'), value: 'female' },
    ];

    return (
      <View style={[styles.container, { backgroundColor: theme.background }]}>
        <View style={styles.topHeader}>
          <Pressable onPress={() => setIsEditing(false)}>
            <ArrowLeft color={theme.text} />
          </Pressable>
          <Text style={[styles.headerTitle, { color: theme.text }]}>{t('Tahrirlash')}</Text>
          <Pressable onPress={handleSave}>
            {updateMutation.isPending ? (
              <ActivityIndicator size={'small'} />
            ) : (
              <Text style={[styles.saveButton, { color: theme.primary }]}>{t('Saqlash')}</Text>
            )}
          </Pressable>
        </View>

        <ScrollView style={styles.content}>
          <View style={styles.editSection}>
            {/* First Name */}
            <Text style={[styles.label, { color: theme.textSecondary }]}>{t('Ism')}</Text>
            <TextInput
              style={[styles.input, { backgroundColor: theme.inputBg, color: theme.text }]}
              value={editData?.data.first_name}
              onChangeText={(text) =>
                setEditData((prev) => prev && { ...prev, data: { ...prev.data, first_name: text } })
              }
              placeholderTextColor={theme.placeholder}
            />

            {/* Phone */}
            <Text style={[styles.label, { color: theme.textSecondary }]}>
              {t('Telefon raqami')}
            </Text>
            <View style={[styles.phoneInputContainer, { backgroundColor: theme.inputBg }]}>
              <View style={styles.prefixContainer}>
                <Text
                  style={[styles.prefix, { color: theme.text }, focused && styles.prefixFocused]}
                >
                  +998
                </Text>
                <View style={[styles.divider, { backgroundColor: theme.divider }]} />
              </View>
              <TextInput
                style={[styles.phoneInput, { color: theme.text }]}
                value={formatPhone(phone)}
                onChangeText={(text) => setPhone(normalizeDigits(text))}
                onFocus={() => setFocused(true)}
                onBlur={() => setFocused(false)}
                keyboardType="numeric"
                placeholder="90 123 45 67"
                maxLength={12}
                placeholderTextColor={theme.placeholder}
              />
            </View>

            {/* Age */}
            <Text style={[styles.label, { color: theme.textSecondary }]}>{t('Yoshi')}</Text>
            <TextInput
              style={[styles.input, { backgroundColor: theme.inputBg, color: theme.text }]}
              value={editData?.data.age?.toString() || ''}
              placeholder="18"
              keyboardType="numeric"
              onChangeText={(text) =>
                setEditData(
                  (prev) => prev && { ...prev, data: { ...prev.data, age: Number(text) } }
                )
              }
              placeholderTextColor={theme.placeholder}
            />

            {/* Gender as buttons */}
            <Text style={[styles.label, { color: theme.textSecondary }]}>{t('Jinsi')}</Text>
            <View style={{ flexDirection: 'row', gap: 12, marginTop: 4 }}>
              {genderOptions.map((option) => {
                const isSelected = editData.data.gender === option.value;
                return (
                  <TouchableOpacity
                    key={option.value}
                    onPress={() =>
                      setEditData((prev) =>
                        prev ? { ...prev, data: { ...prev.data, gender: option.value } } : prev
                      )
                    }
                    style={{
                      flex: 1,
                      paddingVertical: 12,
                      borderRadius: 12,
                      alignItems: 'center',
                      backgroundColor: isSelected ? theme.primary : theme.inputBg,
                    }}
                  >
                    <Text style={{ color: isSelected ? '#fff' : theme.text }}>{option.label}</Text>
                  </TouchableOpacity>
                );
              })}
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }
  /* ===================== VIEW MODE ===================== */
  return (
    <View style={[styles.container, { backgroundColor: theme.background }]}>
      <View style={styles.topHeader}>
        <Pressable onPress={() => router.push('/profile')}>
          <ArrowLeft color={theme.text} />
        </Pressable>
        <Text style={[styles.headerTitle, { color: theme.text }]}>{t("Shaxsiy ma'lumotlar")}</Text>
        <Pressable onPress={() => setIsEditing(true)}>
          <Edit2 color={theme.primary} />
        </Pressable>
      </View>

      <ScrollView style={styles.content}>
        <View style={[styles.infoCard, { backgroundColor: theme.cardBg }]}>
          <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('Ism')}</Text>
          <Text style={[styles.infoValue, { color: theme.text }]}>{me?.data.data.first_name}</Text>

          <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('Yoshi')}</Text>
          <Text style={[styles.infoValue, { color: theme.text }]}>
            {me?.data.data.age ? me?.data.data.age : t("Noma'lum")}
          </Text>

          <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('Jinsi')}</Text>
          <Text style={[styles.infoValue, { color: theme.text }]}>
            {me?.data.data.gender ? t(me?.data.data.gender) : t("Noma'lum")}
          </Text>

          <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>
            {t('Telefon raqami')}
          </Text>
          <Text style={[styles.infoValue, { color: theme.text }]}>
            {me && formatNumber(me?.data.data.phone)}
          </Text>
        </View>

        {me?.data.data.person_type !== 'employee' && (
          <View style={[styles.infoCard, { backgroundColor: theme.cardBg }]}>
            <Text style={[styles.sectionTitle, { color: theme.textTertiary }]}>
              {t('Kompaniya')}
            </Text>

            {me?.data.data.company_image && (
              <Image source={{ uri: me.data.data.company_image }} style={styles.companyImage} />
            )}

            <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('Nomi')}</Text>
            <Text style={[styles.infoValue, { color: theme.text }]}>
              {me?.data.data.company_name}
            </Text>

            <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('STIR')}</Text>
            <Text style={[styles.infoValue, { color: theme.text }]}>{me?.data.data.stir}</Text>

            <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('Direktor')}</Text>
            <Text style={[styles.infoValue, { color: theme.text }]}>
              {me?.data.data.director_full_name}
            </Text>
            {me?.data.data.address && (
              <>
                <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>
                  {t('Manzil')}
                </Text>
                <Text style={[styles.infoValue, { color: theme.text }]}>
                  {me?.data.data.address}
                </Text>
              </>
            )}
          </View>
        )}
        <View style={styles.section}>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'flex-start',
              justifyContent: 'space-between',
            }}
          >
            <Text style={[styles.sectionTitle, { color: theme.textTertiary }]}>
              {t('Faoliyat sohalari')}
            </Text>
            <Plus
              color={theme.primary}
              size={24}
              onPress={() => router.push('/profile/categories')}
            />
          </View>
          <View style={styles.fieldsContainer}>
            {me?.data.data.activate_types.map((field: any) => (
              <View key={field.id} style={[styles.fieldChip, { backgroundColor: theme.chipBg }]}>
                <Text style={[styles.fieldText, { color: theme.chipText }]}>{field.name}</Text>
              </View>
            ))}
          </View>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingBottom: 30,
  },
  fieldsContainer: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginBottom: 20 },
  fieldChip: {
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 16,
  },
  fieldText: { fontSize: 14, fontWeight: '600' },
  section: {
    padding: 10,
    marginTop: 0,
  },
  content: {
    padding: 16,
  },
  loadingText: {
    textAlign: 'center',
    marginTop: 40,
  },
  infoCard: {
    borderRadius: 20,
    padding: 16,
    marginBottom: 16,
  },
  infoLabel: {
    fontSize: 13,
    marginTop: 8,
  },
  infoValue: {
    fontSize: 16,
    fontWeight: '600',
  },
  sectionTitle: {
    fontWeight: '700',
    fontSize: 16,
    marginBottom: 12,
  },
  editSection: {
    gap: 12,
  },
  label: {
    fontSize: 13,
  },
  input: {
    borderRadius: 14,
    padding: 14,
  },
  phoneInputContainer: {
    flexDirection: 'row',
    borderRadius: 14,
    padding: 14,
  },
  phoneInput: {
    flex: 1,
  },
  saveButton: {
    fontSize: 16,
    fontWeight: '600',
  },
  companyImage: {
    width: 90,
    height: 90,
    borderRadius: 45,
    alignSelf: 'center',
    marginBottom: 12,
  },
  topHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 16,
    alignItems: 'center',
  },
  headerTitle: { fontSize: 18, fontWeight: '700' },
  prefixContainer: { flexDirection: 'row', alignItems: 'center', marginRight: 12 },
  prefix: { fontSize: 17, fontWeight: '600' },
  prefixFocused: {},
  divider: { width: 1, height: 24, marginLeft: 12 },
});