import { BASE_URL } from '@/api/URLs';
import { useTheme } from '@/components/ThemeContext';
import { products_api } from '@/screens/home/lib/api';
import { CompanyResponse } from '@/screens/home/lib/types';
import { BottomSheetBackdrop, BottomSheetModal, BottomSheetScrollView } from '@gorhom/bottom-sheet';
import { useInfiniteQuery } from '@tanstack/react-query';
import { Building2, ChevronRight, MapPin, Package } from 'lucide-react-native';
import React, { useCallback, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
  ActivityIndicator,
  Dimensions,
  FlatList,
  Image,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

const { width: SCREEN_WIDTH } = Dimensions.get('window');

export default function CompanyList({ query }: { query: string }) {
  const { isDark } = useTheme();
  const { t } = useTranslation();
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
  const [selectedCompany, setSelectedCompany] = useState<CompanyResponse | null>(null);

  const PAGE_SIZE = 10;

  const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useInfiniteQuery({
      queryKey: ['company-list', query],
      queryFn: async ({ pageParam = 1 }) => {
        const response = await products_api.getCompany({
          page: pageParam,
          page_size: PAGE_SIZE,
          search: query,
        });
        return response.data.data;
      },
      getNextPageParam: (lastPage) =>
        lastPage.current_page < lastPage.total_pages ? lastPage.current_page + 1 : undefined,
      initialPageParam: 1,
    });

  const allCompanies = data?.pages.flatMap((page) => page.results) ?? [];

  const handlePresentModal = useCallback((company: CompanyResponse) => {
    setSelectedCompany(company);
    bottomSheetModalRef.current?.present();
  }, []);

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

  if (isLoading) {
    return (
      <View style={styles.center}>
        <ActivityIndicator size="large" color="#3b82f6" />
      </View>
    );
  }

  if (isError) {
    return (
      <View style={styles.center}>
        <Text style={{ color: '#f87171' }}>{t('Xatolik yuz berdi')}</Text>
      </View>
    );
  }

  return (
    <>
      <FlatList
        data={allCompanies}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <TouchableOpacity
            style={[styles.card, isDark ? styles.darkCard : styles.lightCard]}
            activeOpacity={0.8}
            onPress={() => handlePresentModal(item)}
          >
            <View style={styles.cardHeader}>
              <Building2 size={22} color="#3b82f6" />
              <Text style={[styles.cardTitle, isDark ? styles.darkText : styles.lightText]}>
                {item.company_name}
              </Text>
              <ChevronRight size={20} color={isDark ? '#64748b' : '#94a3b8'} />
            </View>
            <View style={styles.cardLocation}>
              <MapPin size={16} color={isDark ? '#64748b' : '#94a3b8'} />
              <Text
                style={[styles.cardLocationText, isDark ? styles.darkSubText : styles.lightSubText]}
              >
                {item.country_name}, {item.region_name}
              </Text>
            </View>
          </TouchableOpacity>
        )}
        onEndReached={() => hasNextPage && !isFetchingNextPage && fetchNextPage()}
        onEndReachedThreshold={0.4}
        ListFooterComponent={
          isFetchingNextPage ? <ActivityIndicator color="#3b82f6" style={{ margin: 20 }} /> : null
        }
        showsVerticalScrollIndicator={false}
      />

      <BottomSheetModal
        ref={bottomSheetModalRef}
        index={0}
        snapPoints={['60%', '90%']}
        backdropComponent={renderBackdrop}
        handleIndicatorStyle={{ backgroundColor: '#94a3b8', width: 50 }}
        backgroundStyle={{
          backgroundColor: isDark ? '#0f172a' : '#ffffff',
          borderRadius: 24,
        }}
        enablePanDownToClose
      >
        <BottomSheetScrollView contentContainerStyle={styles.sheetContent}>
          {selectedCompany && (
            <>
              <View style={styles.sheetHeader}>
                <Building2 size={28} color="#3b82f6" />
                <Text style={[styles.sheetTitle, isDark ? styles.darkText : styles.lightText]}>
                  {selectedCompany.company_name}
                </Text>
                <View style={styles.sheetLocation}>
                  <MapPin size={16} color={isDark ? '#64748b' : '#94a3b8'} />
                  <Text
                    style={[
                      styles.sheetLocationText,
                      isDark ? styles.darkSubText : styles.lightSubText,
                    ]}
                  >
                    {selectedCompany.country_name}, {selectedCompany.region_name},{' '}
                    {selectedCompany.district_name}
                  </Text>
                </View>
              </View>

              <View style={[styles.divider, isDark ? styles.darkDivider : styles.lightDivider]} />

              {selectedCompany.product_service_company &&
                selectedCompany.product_service_company.length > 0 && (
                  <>
                    <Text
                      style={[
                        styles.sectionLabel,
                        isDark ? styles.darkSubText : styles.lightSubText,
                      ]}
                    >
                      {t('Mahsulotlar')} ({selectedCompany.product_service_company.length})
                    </Text>
                    {selectedCompany.product_service_company.map((product) => (
                      <View
                        key={product.id}
                        style={[
                          styles.productCard,
                          isDark ? styles.darkProductCard : styles.lightProductCard,
                        ]}
                      >
                        <View
                          style={[
                            styles.productImage,
                            isDark ? styles.darkProductImage : styles.lightProductImage,
                          ]}
                        >
                          {product.files?.[0]?.file ? (
                            <Image
                              source={{ uri: BASE_URL + product.files[0].file }}
                              style={styles.productImg}
                            />
                          ) : (
                            <Package size={28} color={isDark ? '#64748b' : '#94a3b8'} />
                          )}
                        </View>
                        <View style={styles.productInfo}>
                          <Text
                            style={[
                              styles.productTitle,
                              isDark ? styles.darkText : styles.lightText,
                            ]}
                          >
                            {product.title}
                          </Text>
                          <Text
                            style={[
                              styles.productDesc,
                              isDark ? styles.darkSubText : styles.lightSubText,
                            ]}
                          >
                            {product.description || 'Tavsif mavjud emas.'}
                          </Text>
                        </View>
                      </View>
                    ))}
                  </>
                )}
            </>
          )}
        </BottomSheetScrollView>
      </BottomSheetModal>
    </>
  );
}

const CARD_WIDTH = SCREEN_WIDTH - 32;

const styles = StyleSheet.create({
  center: { flex: 1, justifyContent: 'center', alignItems: 'center' },

  // --- Company Card ---
  card: {
    width: CARD_WIDTH - 4,
    marginLeft: 2,
    borderRadius: 16,
    padding: 16,
    marginBottom: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.2,
    shadowRadius: 8,
    elevation: 2,
  },
  darkCard: {
    backgroundColor: '#1e293b',
  },
  lightCard: {
    backgroundColor: '#ffffff',
  },
  cardHeader: { flexDirection: 'row', alignItems: 'center', gap: 10, marginBottom: 6 },
  cardTitle: { fontSize: 17, fontWeight: '700', flex: 1 },
  darkText: {
    color: '#f1f5f9',
  },
  lightText: {
    color: '#0f172a',
  },
  cardLocation: { flexDirection: 'row', alignItems: 'center', gap: 6 },
  cardLocationText: { fontSize: 13 },
  darkSubText: {
    color: '#64748b',
  },
  lightSubText: {
    color: '#94a3b8',
  },

  // --- Bottom Sheet ---
  sheetContent: { padding: 20, paddingBottom: 40 },
  sheetHeader: { alignItems: 'center', marginBottom: 20 },
  sheetTitle: {
    fontSize: 22,
    fontWeight: '800',
    marginTop: 8,
    textAlign: 'center',
  },
  sheetLocation: { flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 6 },
  sheetLocationText: { fontSize: 14 },
  divider: { height: 1, marginBottom: 16 },
  darkDivider: {
    backgroundColor: '#334155',
  },
  lightDivider: {
    backgroundColor: '#e2e8f0',
  },
  sectionLabel: {
    fontSize: 14,
    fontWeight: '700',
    textTransform: 'uppercase',
    marginBottom: 12,
  },

  // --- Product Card ---
  productCard: {
    flexDirection: 'row',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    gap: 16,
    alignItems: 'flex-start',
  },
  darkProductCard: {
    backgroundColor: '#1e293b',
  },
  lightProductCard: {
    backgroundColor: '#f8fafc',
  },
  productImage: {
    width: 60,
    height: 60,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
    borderWidth: 1,
  },
  darkProductImage: {
    backgroundColor: '#0f172a',
    borderColor: '#334155',
  },
  lightProductImage: {
    backgroundColor: '#ffffff',
    borderColor: '#e2e8f0',
  },
  productImg: { width: '100%', height: '100%', borderRadius: 8 },
  productInfo: { flex: 1 },
  productTitle: { fontSize: 15, fontWeight: '700' },
  productDesc: { fontSize: 13, marginTop: 2 },
});