import { useTheme } from '@/components/ThemeContext';
import { TabKey } from '@/types';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';

interface SearchTabsProps {
  value: TabKey;
  onChange: (tab: TabKey) => void;
}

export default function SearchTabs({ value, onChange }: SearchTabsProps) {
  const { isDark } = useTheme();
  const { t } = useTranslation();

  const tabs: { key: TabKey; label: string }[] = [
    { key: 'products', label: 'Tovar va xizmatlar' },
    { key: 'companies', label: 'Yuridik shaxslar' },
    { key: 'countries', label: 'Davlatlar' },
  ];

  const renderTab = ({ item }: { item: { key: TabKey; label: string } }) => {
    const isActive = value === item.key;
    return (
      <TouchableOpacity
        style={[
          styles.tab,
          isDark ? styles.darkTab : styles.lightTab,
          isActive && styles.activeTab,
        ]}
        onPress={() => onChange(item.key)}
        activeOpacity={0.8}
      >
        <Text
          style={[
            styles.tabText,
            isDark ? styles.darkTabText : styles.lightTabText,
            isActive && styles.activeTabText,
          ]}
        >
          {t(item.label)}
        </Text>
      </TouchableOpacity>
    );
  };

  return (
    <View style={[styles.shadowWrapper]}>
      <View style={[styles.wrapper, isDark ? styles.darkWrapper : styles.lightWrapper]}>
        <FlatList
          data={tabs}
          renderItem={renderTab}
          keyExtractor={(item) => item.key}
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={styles.container}
          ItemSeparatorComponent={() => <View style={{ width: 10 }} />}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  shadowWrapper: {
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
    elevation: 2,
  },

  wrapper: {
    borderRadius: 12,
    overflow: 'hidden', // ENDI ISHLAYDI
  },

  darkWrapper: {
    backgroundColor: '#0f172a',
  },
  lightWrapper: {
    backgroundColor: '#ffffff',
  },
  container: {
    paddingHorizontal: 2,
    paddingVertical: 2,
    overflow: 'hidden',
  },
  tab: {
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 12,
    overflow: 'hidden',
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
    elevation: 1,
  },
  darkTab: {
    backgroundColor: '#1e293b',
  },
  lightTab: {
    backgroundColor: '#f8fafc',
  },
  activeTab: {
    backgroundColor: '#3b82f6',
    shadowColor: '#3b82f6',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 3,
  },
  tabText: {
    fontSize: 14,
    fontWeight: '500',
  },
  darkTabText: {
    color: '#cbd5e1',
  },
  lightTabText: {
    color: '#64748b',
  },
  activeTabText: {
    color: '#ffffff',
    fontWeight: '600',
  },
});