import Express_diagnistika from '@/assets/images/Express_diagnistika.png';
import { useTheme } from '@/components/ThemeContext';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { Image } from 'expo-image';
import { router } from 'expo-router';
import { ChevronLeft, XIcon } from 'lucide-react-native';
import React, { useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ActivityIndicator, FlatList, Modal, Text, TouchableOpacity, View } from 'react-native';
import { RefreshControl } from 'react-native-gesture-handler';
import { SafeAreaView } from 'react-native-safe-area-context';
import { WebView } from 'react-native-webview';
import { eservices_api } from '../lib/api';

const dark = {
  bg: '#0f172a',
  card: '#1f2937',
  border: '#1e293b',
  muted: '#334155',
  text: '#f8fafc',
  subText: '#cbd5f5',
};

export default function EServicesCategoryScreen() {
  const { isDark } = useTheme();
  const { t } = useTranslation();
  const [modalVisible, setModalVisible] = useState(false);
  const webviewRef = useRef<WebView>(null);
  const [webUrl, setWebUrl] = React.useState<string | null>(null);
  const [refreshing, setRefreshing] = useState(false);
  const queryClient = useQueryClient();

  const { data, isLoading } = useQuery({
    queryKey: ['goverment_category'],
    queryFn: () => eservices_api.category(),
  });

  const onRefresh = async () => {
    setRefreshing(true);
    try {
      await queryClient.refetchQueries({ queryKey: ['goverment_category'] });
    } finally {
      setRefreshing(false);
    }
  };

  if (isLoading) {
    return (
      <View className="flex-1 items-center justify-center">
        <ActivityIndicator size="large" />
      </View>
    );
  }

  const staticCategory = {
    id: 0,
    name: 'Express Diagnostika',
    image: Express_diagnistika,
    url: 'https://myorg.uz/ru',
  };

  const categories = [staticCategory, ...(data?.data?.data?.results ?? [])];

  const handlePress = (item: any) => {
    if (item.id === 0 && item.url) {
      setWebUrl(item.url);
      setModalVisible(true);
      return;
    }

    router.push({
      pathname: '/(dashboard)/e-service/e-services-category',
      params: {
        categoryId: item.id,
        categoryName: item.name,
      },
    });
  };

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: isDark ? dark.bg : '#f8fafc',
        padding: 16,
      }}
    >
      <FlatList
        data={categories}
        keyExtractor={(item) => `${item.id}-${item.name}`}
        contentContainerStyle={{ gap: 12 }}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            tintColor={isDark ? '#f8fafc' : '#020617'}
            colors={['#3b82f6']}
          />
        }
        ListHeaderComponent={() => (
          <View>
            <Text
              style={{
                fontSize: 22,
                fontWeight: '800',
                color: isDark ? dark.text : '#020617',
              }}
            >
              {t('Davlat xizmatlari kategoriyalari')}
            </Text>

            <Text
              style={{
                fontSize: 14,
                marginTop: 4,
                color: isDark ? dark.subText : '#64748b',
              }}
            >
              {t('Kerakli xizmat turini tanlang')}
            </Text>
          </View>
        )}
        renderItem={({ item }) => (
          <TouchableOpacity
            activeOpacity={0.7}
            onPress={() => handlePress(item)}
            style={{
              backgroundColor: isDark ? dark.card : '#ffffff',
              padding: 14,
              borderRadius: 16,
              flexDirection: 'row',
              alignItems: 'center',
              borderWidth: isDark ? 1 : 0,
              borderColor: isDark ? dark.border : 'transparent',
            }}
          >
            <View
              style={{
                width: 120,
                height: 70,
                borderRadius: 12,
                backgroundColor: isDark ? dark.muted : '#e2e8f0',
                alignItems: 'center',
                justifyContent: 'center',
                marginRight: 14,
                overflow: 'hidden',
              }}
            >
              {item.image ? (
                <Image
                  source={item.image}
                  style={{ width: '100%', height: '100%' }}
                  contentFit="contain"
                />
              ) : (
                <Text style={{ fontWeight: '700', color: dark.text }}>{item.name[0]}</Text>
              )}
            </View>

            <View style={{ flex: 1 }}>
              <Text
                numberOfLines={2}
                style={{
                  fontSize: 16,
                  fontWeight: item.id === 0 ? '700' : '600',
                  color: isDark ? dark.text : '#020617',
                }}
              >
                {item.name}
              </Text>

              {item.id === 0 && (
                <Text
                  style={{
                    fontSize: 13,
                    marginTop: 4,
                    color: dark.subText,
                  }}
                >
                  Tezkor va qulay xizmat
                </Text>
              )}
            </View>
          </TouchableOpacity>
        )}
      />
      <Modal visible={modalVisible} animationType="slide">
        <SafeAreaView
          style={{
            flex: 1,
            backgroundColor: isDark ? '#0f172a' : '#f8fafc',
          }}
        >
          {/* WebView Header */}
          <View
            style={{
              flexDirection: 'row',
              paddingHorizontal: 16,
              paddingVertical: 12,
              backgroundColor: isDark ? '#1e293b' : '#f8fafc',
              alignItems: 'center',
              justifyContent: 'space-between',
              borderBottomWidth: 1,
              borderBottomColor: isDark ? '#334155' : '#e2e8f0',
            }}
          >
            <TouchableOpacity
              onPress={() => webviewRef.current?.goBack()}
              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
            >
              <ChevronLeft size={28} color={isDark ? '#f1f5f9' : '#0f172a'} />
            </TouchableOpacity>

            <Text
              style={{
                flex: 1,
                textAlign: 'center',
                fontSize: 16,
                fontWeight: '600',
                color: isDark ? '#f1f5f9' : '#0f172a',
              }}
              numberOfLines={1}
            >
              {webUrl}
            </Text>

            <TouchableOpacity
              onPress={() => setModalVisible(false)}
              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
            >
              <XIcon size={28} color={isDark ? '#f1f5f9' : '#0f172a'} />
            </TouchableOpacity>
          </View>

          {/* WebView */}
          {webUrl && (
            <WebView
              ref={webviewRef}
              originWhitelist={['*']}
              javaScriptEnabled
              domStorageEnabled
              onShouldStartLoadWithRequest={(request) => {
                // iOS va Android uchun barcha URLlarni WebView ichida ochish
                return true;
              }}
              source={{ uri: webUrl }}
              style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#f8fafc' }}
              startInLoadingState
              renderLoading={() => (
                <ActivityIndicator color="#3b82f6" size="large" style={{ flex: 1 }} />
              )}
            />
          )}
        </SafeAreaView>
      </Modal>
    </View>
  );
}