import { useTheme } from '@/components/ThemeContext';
import { products_api } from '@/screens/home/lib/api';
import BottomSheet, {
  BottomSheetBackdrop,
  BottomSheetFlatList,
  BottomSheetScrollView,
} from '@gorhom/bottom-sheet';
import { useMutation, useQuery } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import { Image } from 'expo-image';
import { CheckIcon, ChevronRight, XIcon } from 'lucide-react-native';
import React, { Dispatch, SetStateAction, useCallback, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import CategorySelect from './CategorySelect';

interface FilterUIProps {
  back: () => void;
  onApply?: (data: any) => void;
  setStep: (value: 'filter' | 'items') => void;
  setFiltered: Dispatch<SetStateAction<any[]>>;
}

interface Category {
  id: number;
  name: string;
  code: string;
  external_id: string | null;
  level: number;
  is_leaf: boolean;
  icon_name: string | null;
}

interface Country {
  id: number;
  name: string;
  region: Region[];
}

interface Region {
  id: number;
  name: string;
  districts: District[];
}

interface District {
  id: number;
  name: string;
}

type SheetType = 'country' | 'region' | 'district' | 'category' | null;

export default function FilterUI({ back, onApply, setStep, setFiltered }: FilterUIProps) {
  const { isDark } = useTheme();
  const { t } = useTranslation();
  const bottomSheetRef = useRef<BottomSheet>(null);
  const snapPoints = useMemo(() => ['60%', '85%'], []);

  const [activeSheet, setActiveSheet] = useState<SheetType>(null);
  const [selectedCategories, setSelectedCategories] = useState<Category | null>(null);
  const [selectedCountry, setSelectedCountry] = useState<string>('all');
  const [selectedRegion, setSelectedRegion] = useState<string>('all');
  const [selectedDistrict, setSelectedDistrict] = useState<string>('all');

  const { data: countryResponse, isLoading } = useQuery({
    queryKey: ['country-detail'],
    queryFn: async () => products_api.getStates(),
    select: (res) => res.data?.data || [],
  });

  const { mutate, isPending } = useMutation({
    mutationFn: (params: any) => products_api.businessAbout(params),
    onSuccess: (data) => {
      setStep('items');
      setFiltered(data.data.data.results);
    },
    onError: (error: AxiosError) => console.log(error),
  });

  const handleApply = () => {
    const countryObj = countryResponse?.find((c) => c.id?.toString() === selectedCountry);
    const regionObj = countryObj?.region.find((r) => r.id?.toString() === selectedRegion);
    const districtObj = regionObj?.districts.find((d) => d.id?.toString() === selectedDistrict);

    mutate({
      country: countryObj?.name || '',
      region: regionObj?.name || '',
      district: districtObj?.name || '',
      types: selectedCategories ? selectedCategories.id : undefined,
    });
  };

  const regions = useMemo(() => {
    if (selectedCountry === 'all') return [];
    const country = countryResponse?.find((c) => c.id?.toString() === selectedCountry);
    return country?.region || [];
  }, [countryResponse, selectedCountry]);

  const districts = useMemo(() => {
    if (selectedRegion === 'all') return [];
    const region = regions.find((r) => r.id?.toString() === selectedRegion);
    return region?.districts || [];
  }, [regions, selectedRegion]);

  const openSheet = useCallback((type: SheetType) => {
    setActiveSheet(type);
    setTimeout(() => {
      bottomSheetRef.current?.snapToIndex(0);
    }, 100);
  }, []);

  const closeSheet = useCallback(() => {
    bottomSheetRef.current?.close();
    setTimeout(() => setActiveSheet(null), 300);
  }, []);

  const renderBackdrop = useCallback(
    (props: any) => (
      <BottomSheetBackdrop
        {...props}
        appearsOnIndex={0}
        disappearsOnIndex={-1}
        opacity={0.6}
        pressBehavior="close"
      />
    ),
    []
  );

  const getSelectedLabel = useCallback(
    (type: SheetType) => {
      switch (type) {
        case 'country':
          if (selectedCountry === 'all') return t('Barchasi');
          return (
            countryResponse?.find((c) => c.id?.toString() === selectedCountry)?.name || t('Tanlang')
          );
        case 'region':
          if (selectedRegion === 'all') return t('Barchasi');
          return regions.find((r) => r.id?.toString() === selectedRegion)?.name || t('Tanlang');
        case 'district':
          if (selectedDistrict === 'all') return t('Barchasi');
          return districts.find((d) => d.id?.toString() === selectedDistrict)?.name || t('Tanlang');
        case 'category':
          return selectedCategories?.name || t('Tanlang');
        default:
          return t('Tanlang');
      }
    },
    [
      selectedCountry,
      selectedRegion,
      selectedDistrict,
      selectedCategories,
      countryResponse,
      regions,
      districts,
      t,
    ]
  );

  const FilterButton = useCallback(
    ({
      label,
      value,
      onPress,
      disabled = false,
    }: {
      label: string;
      value: string;
      onPress: () => void;
      disabled?: boolean;
    }) => (
      <TouchableOpacity
        style={[
          styles.filterBtn,
          isDark ? styles.darkFilterBtn : styles.lightFilterBtn,
          disabled && styles.disabledBtn,
        ]}
        onPress={onPress}
        disabled={disabled}
        activeOpacity={0.7}
      >
        <View style={styles.filterBtnContent}>
          <Text style={[styles.filterLabel, isDark ? styles.darkText : styles.lightText]}>
            {label}
          </Text>
          <View style={styles.filterValueContainer}>
            <Text
              style={[
                styles.filterValue,
                isDark ? styles.darkValueText : styles.lightValueText,
                disabled && styles.disabledText,
              ]}
              numberOfLines={1}
            >
              {value}
            </Text>
            <ChevronRight size={20} color={isDark ? '#94a3b8' : '#64748b'} />
          </View>
        </View>
      </TouchableOpacity>
    ),
    [isDark]
  );

  const renderListItem = useCallback(
    ({
      item,
      onSelect,
      selectedId,
    }: {
      item: any;
      onSelect: (id: string) => void;
      selectedId: string;
    }) => {
      const isSelected = selectedId === (item.id?.toString() || 'all');
      const flagCode = item.flag ? item.flag.toLowerCase() : ''; // "uz"
      return (
        <TouchableOpacity
          style={[
            styles.listItem,
            isDark ? styles.darkListItem : styles.lightListItem,
            isSelected && styles.selectedListItem,
          ]}
          onPress={() => onSelect(item.id?.toString() || 'all')}
          activeOpacity={0.7}
        >
          <View
            style={{
              flexDirection: 'row',
              gap: 10,
              alignContent: 'center',
              alignItems: 'center',
            }}
          >
            {item.flag && (
              <Image
                source={{ uri: `https://flagcdn.com/w320/${flagCode}.png` }}
                style={{ width: 34, height: 20 }}
                resizeMode="cover" // objectFit o'rniga resizeMode ishlatildi
              />
            )}
            <Text
              style={[
                styles.listItemText,
                isDark ? styles.darkText : styles.lightText,
                isSelected && styles.selectedListItemText,
              ]}
            >
              {item.name}
            </Text>
          </View>
          {isSelected && (
            <View style={styles.checkmark}>
              <CheckIcon color={'#3b82f6'} strokeWidth={'2.5'} size={18} />
            </View>
          )}
        </TouchableOpacity>
      );
    },
    [isDark]
  );

  const renderSheetContent = useCallback(() => {
    if (activeSheet === 'category') {
      return (
        <BottomSheetScrollView
          contentContainerStyle={styles.scrollViewContent}
          showsVerticalScrollIndicator={false}
          bounces={true}
        >
          <CategorySelect
            selectedCategories={selectedCategories}
            setSelectedCategories={setSelectedCategories}
          />
        </BottomSheetScrollView>
      );
    }

    let data: any[] = [];
    let onSelect: (id: string) => void = () => { };
    let selectedId = '';

    switch (activeSheet) {
      case 'country':
        data = [{ id: 'all', name: t('Barchasi') }, ...(countryResponse || [])];
        onSelect = (id) => {
          setSelectedCountry(id);
          setSelectedRegion('all');
          setSelectedDistrict('all');
          closeSheet();
        };
        selectedId = selectedCountry;
        break;
      case 'region':
        data = [{ id: 'all', name: t('Barchasi') }, ...regions];
        onSelect = (id) => {
          setSelectedRegion(id);
          setSelectedDistrict('all');
          closeSheet();
        };
        selectedId = selectedRegion;
        break;
      case 'district':
        data = [{ id: 'all', name: t('Barchasi') }, ...districts];
        onSelect = (id) => {
          setSelectedDistrict(id);
          closeSheet();
        };
        selectedId = selectedDistrict;
        break;
    }

    return (
      <BottomSheetFlatList
        data={data}
        keyExtractor={(item: any) => item.id?.toString() || 'all'}
        contentContainerStyle={styles.listContainer}
        showsVerticalScrollIndicator={false}
        bounces={true}
        overScrollMode="always"
        renderItem={({ item }: { item: any }) => renderListItem({ item, onSelect, selectedId })}
      />
    );
  }, [
    activeSheet,
    selectedCategories,
    countryResponse,
    regions,
    districts,
    selectedCountry,
    selectedRegion,
    selectedDistrict,
    t,
    closeSheet,
    renderListItem,
  ]);

  const getSheetTitle = useCallback(() => {
    switch (activeSheet) {
      case 'country':
        return t('Davlat');
      case 'region':
        return t('Viloyat');
      case 'district':
        return t('Tuman');
      case 'category':
        return t('Sohalar');
      default:
        return '';
    }
  }, [activeSheet, t]);

  if (isLoading) {
    return (
      <View style={[styles.container, isDark ? styles.darkBg : styles.lightBg]}>
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#3b82f6" />
        </View>
      </View>
    );
  }

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={[styles.container, isDark ? styles.darkBg : styles.lightBg]}>
        {/* Header */}
        <View style={[styles.header, { borderBottomColor: isDark ? '#334155' : '#e2e8f0' }]}>
          <Text style={[styles.headerTitle, isDark ? styles.darkText : styles.lightText]}>
            {t('Filter')}
          </Text>
          <TouchableOpacity
            onPress={back}
            style={[styles.closeBtn, isDark ? styles.darkCloseBtn : styles.lightCloseBtn]}
          >
            <XIcon color={isDark ? '#f1f5f9' : '#0f172a'} size={20} />
          </TouchableOpacity>
        </View>

        {/* Filter Options */}
        <View style={styles.content}>
          <FilterButton
            label={t('Davlat')}
            value={getSelectedLabel('country')}
            onPress={() => openSheet('country')}
          />

          <FilterButton
            label={t('Viloyat')}
            value={getSelectedLabel('region')}
            onPress={() => openSheet('region')}
            disabled={selectedCountry === 'all' || regions.length === 0}
          />

          <FilterButton
            label={t('Tuman')}
            value={getSelectedLabel('district')}
            onPress={() => openSheet('district')}
            disabled={selectedRegion === 'all' || districts.length === 0}
          />

          <FilterButton
            label={t('Sohalar')}
            value={getSelectedLabel('category')}
            onPress={() => openSheet('category')}
          />
        </View>

        {/* Apply Button */}
        <View style={[styles.applyBtnWrapper, { borderTopColor: isDark ? '#334155' : '#e2e8f0' }]}>
          <TouchableOpacity
            style={[styles.applyBtn, isPending && styles.applyBtnDisabled]}
            onPress={handleApply}
            disabled={isPending}
            activeOpacity={0.8}
          >
            {isPending ? (
              <ActivityIndicator color="#ffffff" />
            ) : (
              <Text style={styles.applyBtnText}>{t("Natijalarni ko'rish")}</Text>
            )}
          </TouchableOpacity>
        </View>

        {/* Bottom Sheet */}
        <BottomSheet
          ref={bottomSheetRef}
          index={-1}
          snapPoints={snapPoints}
          enablePanDownToClose={true}
          enableDynamicSizing={false}
          enableOverDrag={false}
          onClose={() => setActiveSheet(null)}
          backdropComponent={renderBackdrop}
          backgroundStyle={[styles.bottomSheetBackground, isDark ? styles.darkBg : styles.lightBg]}
          handleIndicatorStyle={[
            styles.handleIndicator,
            isDark ? styles.darkHandleIndicator : styles.lightHandleIndicator,
          ]}
          android_keyboardInputMode="adjustResize"
          keyboardBehavior="interactive"
          keyboardBlurBehavior="restore"
        >
          <View style={[styles.sheetHeader, { borderBottomColor: isDark ? '#334155' : '#e2e8f0' }]}>
            <Text style={[styles.sheetTitle, isDark ? styles.darkText : styles.lightText]}>
              {getSheetTitle()}
            </Text>
            <TouchableOpacity onPress={closeSheet} style={styles.sheetCloseBtn}>
              <XIcon color={isDark ? '#94a3b8' : '#64748b'} size={20} />
            </TouchableOpacity>
          </View>
          {renderSheetContent()}
        </BottomSheet>
      </View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  darkBg: {
    backgroundColor: '#0f172a',
  },
  lightBg: {
    backgroundColor: '#f8fafc',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: '700',
  },
  closeBtn: {
    padding: 8,
    borderRadius: 8,
    borderWidth: 1,
  },
  darkCloseBtn: {
    backgroundColor: '#1e293b',
    borderColor: '#334155',
  },
  lightCloseBtn: {
    backgroundColor: '#ffffff',
    borderColor: '#e2e8f0',
  },
  content: {
    flex: 1,
    padding: 20,
    gap: 12,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  filterBtn: {
    padding: 16,
    borderRadius: 12,
    borderWidth: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
    elevation: 1,
  },
  darkFilterBtn: {
    backgroundColor: '#1e293b',
    borderColor: '#334155',
  },
  lightFilterBtn: {
    backgroundColor: '#ffffff',
    borderColor: '#e2e8f0',
  },
  disabledBtn: {
    opacity: 0.5,
  },
  filterBtnContent: {
    flexDirection: 'column',
    gap: 8, // 4 o'rniga 8 qildim
  },
  filterLabel: {
    fontSize: 13,
    fontWeight: '600',
    marginBottom: 2, // 4 o'rniga 2 qildim
  },
  filterValueContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    gap: 8, // ChevronRight va text orasida gap
  },
  filterValue: {
    fontSize: 15,
    fontWeight: '500',
    flex: 1,
  },

  darkText: {
    color: '#f1f5f9',
  },
  lightText: {
    color: '#0f172a',
  },
  darkValueText: {
    color: '#cbd5e1',
  },
  lightValueText: {
    color: '#64748b',
  },
  disabledText: {
    opacity: 0.5,
  },
  applyBtnWrapper: {
    padding: 20,
    borderTopWidth: 1,
  },
  applyBtn: {
    backgroundColor: '#3b82f6',
    padding: 16,
    borderRadius: 12,
    alignItems: 'center',
    shadowColor: '#3b82f6',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 5,
  },
  applyBtnDisabled: {
    opacity: 0.7,
  },
  applyBtnText: {
    color: '#ffffff',
    fontWeight: '700',
    fontSize: 16,
  },
  bottomSheetBackground: {
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 5,
  },
  handleIndicator: {
    width: 40,
    height: 4,
    borderRadius: 2,
  },
  darkHandleIndicator: {
    backgroundColor: '#475569',
  },
  lightHandleIndicator: {
    backgroundColor: '#cbd5e1',
  },
  sheetHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
  },
  sheetTitle: {
    fontSize: 18,
    fontWeight: '700',
  },
  sheetCloseBtn: {
    padding: 4,
  },
  listContainer: {
    padding: 16,
    paddingBottom: 40,
  },
  scrollViewContent: {
    padding: 16,
    paddingBottom: 40,
  },
  listItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    borderRadius: 12,
    marginBottom: 8,
    borderWidth: 1,
  },
  darkListItem: {
    backgroundColor: '#1e293b',
    borderColor: '#334155',
  },
  lightListItem: {
    backgroundColor: '#ffffff',
    borderColor: '#e2e8f0',
  },
  selectedListItem: {
    backgroundColor: '#3b82f6',
    borderColor: '#3b82f6',
  },
  listItemText: {
    fontSize: 15,
    fontWeight: '500',
  },
  selectedListItemText: {
    color: '#ffffff',
    fontWeight: '600',
  },
  checkmark: {
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center',
  },
  checkmarkText: {
    color: '#3b82f6',
    fontSize: 16,
    fontWeight: '700',
  },
});