import {
  ArrowLeft,
  Briefcase,
  Building2,
  CheckCircle2,
  ChevronRight,
  Globe,
  MapPin,
  Package,
  Search,
  SlidersHorizontal,
} from 'lucide-react-native';
import React, { useState } from 'react';
import {
  FlatList,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

// --- TURLAR ---
type TabKey = 'products' | 'companies' | 'countries';
type FilterStep = 'filter' | 'items' | 'detail';

const FAKE_ITEMS = [
  { id: 1, company_name: 'Artel Electronics', industry: 'Maishiy texnika', country: 'UZ' },
  { id: 2, company_name: 'Toshkent City Mall', industry: 'Savdo', country: 'UZ' },
  { id: 3, company_name: 'Turkish Airlines', industry: 'Aviatsiya', country: 'TR' },
  { id: 4, company_name: 'Siemens AG', industry: 'Muhandislik', country: 'DE' },
];

export default function App() {
  const [filterVisible, setFilterVisible] = useState(false);
  const [activeTab, setActiveTab] = useState<TabKey>('products');
  const [searchQuery, setSearchQuery] = useState('');

  if (filterVisible) {
    return <FilterUI back={() => setFilterVisible(false)} />;
  }

  return (
    <SafeAreaView style={styles.container}>
      {/* Search Header */}
      <View style={styles.header}>
        <View style={styles.searchContainer}>
          <Search size={20} color="#94a3b8" style={styles.searchIcon} />
          <TextInput
            style={styles.searchInput}
            placeholder={`${activeTab === 'products' ? 'Mahsulot' : activeTab === 'companies' ? 'Kompaniya' : 'Davlat'} bo'yicha...`}
            value={searchQuery}
            onChangeText={setSearchQuery}
            placeholderTextColor="#94a3b8"
          />
        </View>
        <TouchableOpacity style={styles.filterButton} onPress={() => setFilterVisible(true)}>
          <SlidersHorizontal size={22} color="#fff" />
        </TouchableOpacity>
      </View>

      {/* Tabs */}
      <View style={styles.tabWrapper}>
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={styles.tabList}
        >
          {[
            {
              key: 'products',
              label: 'Mahsulotlar',
              icon: <Package size={18} color={activeTab === 'products' ? '#fff' : '#64748b'} />,
            },
            {
              key: 'companies',
              label: 'Kompaniyalar',
              icon: <Building2 size={18} color={activeTab === 'companies' ? '#fff' : '#64748b'} />,
            },
            {
              key: 'countries',
              label: 'Davlatlar',
              icon: <Globe size={18} color={activeTab === 'countries' ? '#fff' : '#64748b'} />,
            },
          ].map((tab) => (
            <TouchableOpacity
              key={tab.key}
              onPress={() => setActiveTab(tab.key as TabKey)}
              style={[styles.tabItem, activeTab === tab.key && styles.activeTabItem]}
            >
              {tab.icon}
              <Text style={[styles.tabText, activeTab === tab.key && styles.activeTabText]}>
                {tab.label}
              </Text>
            </TouchableOpacity>
          ))}
        </ScrollView>
      </View>

      {/* Main List */}
      <FlatList
        data={FAKE_ITEMS}
        keyExtractor={(item) => item.id.toString()}
        contentContainerStyle={styles.listContent}
        renderItem={({ item }) => (
          <TouchableOpacity style={styles.card}>
            <View style={styles.cardInfo}>
              <Text style={styles.cardTitle}>{item.company_name}</Text>
              <Text style={styles.cardSub}>{item.industry}</Text>
            </View>
            <ChevronRight size={20} color="#cbd5e1" />
          </TouchableOpacity>
        )}
      />
    </SafeAreaView>
  );
}

// --- FILTER UI KOMPONENTI ---
function FilterUI({ back }: { back: () => void }) {
  const [step, setStep] = useState<FilterStep>('filter');
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const handleBack = () => {
    if (step === 'items') setStep('filter');
    else if (step === 'detail') setStep('items');
    else back();
  };

  const renderFilter = () => (
    <View style={{ flex: 1 }}>
      <ScrollView contentContainerStyle={styles.scrollContent}>
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <MapPin size={20} color="#3b82f6" />
            <Text style={styles.sectionLabel}>Hududni tanlang</Text>
          </View>
          <View style={styles.selectionCard}>
            <TouchableOpacity style={styles.selectRow}>
              <View>
                <Text style={styles.selectLabel}>Davlat</Text>
                <Text style={styles.selectValue}>O'zbekiston</Text>
              </View>
              <ChevronRight size={20} color="#cbd5e1" />
            </TouchableOpacity>
            <View style={styles.divider} />
            <TouchableOpacity style={styles.selectRow}>
              <View>
                <Text style={styles.selectLabel}>Viloyat</Text>
                <Text style={styles.selectValue}>Barchasi</Text>
              </View>
              <ChevronRight size={20} color="#cbd5e1" />
            </TouchableOpacity>
          </View>
        </View>

        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <Briefcase size={20} color="#3b82f6" />
            <Text style={styles.sectionLabel}>Sanoat yo'nalishi</Text>
          </View>
          <View style={styles.industryGrid}>
            {['Texnologiya', 'Tibbiyot', 'Ta’lim', 'Qurilish'].map((item) => (
              <TouchableOpacity key={item} style={styles.industryTag}>
                <Text style={styles.industryTagText}>{item}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
      </ScrollView>

      <View style={styles.footer}>
        <TouchableOpacity onPress={() => setStep('items')} style={styles.applyButton}>
          <Text style={styles.applyButtonText}>Natijalarni ko'rish ({FAKE_ITEMS.length})</Text>
          <CheckCircle2 size={20} color="#fff" />
        </TouchableOpacity>
      </View>
    </View>
  );

  const renderItems = () => (
    <FlatList
      data={FAKE_ITEMS}
      keyExtractor={(item) => item.id.toString()}
      contentContainerStyle={{ padding: 16 }}
      renderItem={({ item }) => (
        <TouchableOpacity
          style={styles.resultCard}
          onPress={() => {
            setSelectedId(item.id);
            setStep('detail');
          }}
        >
          <View style={styles.iconCircle}>
            <Building2 size={22} color="#3b82f6" />
          </View>
          <View style={{ flex: 1, marginLeft: 12 }}>
            <Text style={styles.companyName}>{item.company_name}</Text>
            <Text style={styles.industryText}>{item.industry}</Text>
          </View>
          <ChevronRight size={20} color="#cbd5e1" />
        </TouchableOpacity>
      )}
    />
  );

  const renderDetail = () => {
    const item = FAKE_ITEMS.find((i) => i.id === selectedId);
    return (
      <View style={styles.detailCard}>
        <Text style={styles.detailTitle}>{item?.company_name}</Text>
        <View style={styles.badge}>
          <Text style={styles.badgeText}>{item?.industry}</Text>
        </View>
        <Text style={styles.detailDesc}>
          Bu yerda web-versiyadagi batafsil ma'lumotlar chiqadi.
        </Text>
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.navHeader}>
        <TouchableOpacity onPress={handleBack} style={styles.backButton}>
          <ArrowLeft size={24} color="#1e293b" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>
          {step === 'filter' ? 'Filtrlash' : step === 'items' ? 'Natijalar' : 'Batafsil'}
        </Text>
        <View style={{ width: 40 }} />
      </View>
      {step === 'filter' && renderFilter()}
      {step === 'items' && renderItems()}
      {step === 'detail' && renderDetail()}
    </SafeAreaView>
  );
}

// --- STILLAR ---
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#f8fafc' },
  header: {
    flexDirection: 'row',
    padding: 16,
    gap: 12,
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  searchContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f1f5f9',
    borderRadius: 12,
    paddingHorizontal: 12,
    height: 48,
  },
  searchIcon: { marginRight: 8 },
  searchInput: { flex: 1, fontSize: 16, color: '#1e293b' },
  filterButton: {
    backgroundColor: '#3b82f6',
    width: 48,
    height: 48,
    borderRadius: 12,
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 4,
  },
  tabWrapper: {
    backgroundColor: '#fff',
    paddingBottom: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#f1f5f9',
  },
  tabList: { paddingHorizontal: 16, gap: 10 },
  tabItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 10,
    backgroundColor: '#f1f5f9',
    gap: 8,
    marginRight: 10,
  },
  activeTabItem: { backgroundColor: '#3b82f6' },
  tabText: { fontSize: 14, fontWeight: '600', color: '#64748b' },
  activeTabText: { color: '#fff' },
  listContent: { padding: 16 },
  card: {
    backgroundColor: '#fff',
    padding: 16,
    borderRadius: 16,
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
    borderWidth: 1,
    borderColor: '#f1f5f9',
  },
  cardInfo: { flex: 1 },
  cardTitle: { fontSize: 16, fontWeight: '700', color: '#1e293b' },
  cardSub: { fontSize: 13, color: '#94a3b8' },
  navHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#f1f5f9',
  },
  backButton: { padding: 8, borderRadius: 12, backgroundColor: '#f1f5f9' },
  headerTitle: { fontSize: 18, fontWeight: '700', color: '#1e293b' },
  scrollContent: { padding: 16, paddingBottom: 100 },
  section: { marginBottom: 24 },
  sectionHeader: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 12 },
  sectionLabel: { fontSize: 15, fontWeight: '600', color: '#64748b' },
  selectionCard: {
    backgroundColor: '#fff',
    borderRadius: 16,
    paddingHorizontal: 16,
    borderWidth: 1,
    borderColor: '#e2e8f0',
  },
  selectRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 14,
  },
  selectLabel: { fontSize: 12, color: '#94a3b8' },
  selectValue: { fontSize: 15, fontWeight: '600', color: '#1e293b' },
  divider: { height: 1, backgroundColor: '#f1f5f9' },
  industryGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 10 },
  industryTag: {
    paddingHorizontal: 16,
    paddingVertical: 10,
    backgroundColor: '#fff',
    borderRadius: 12,
    borderWidth: 1,
    borderColor: '#e2e8f0',
  },
  industryTagText: { fontSize: 14, color: '#475569' },
  footer: {
    position: 'absolute',
    bottom: 0,
    width: '100%',
    padding: 20,
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#f1f5f9',
  },
  applyButton: {
    height: 56,
    backgroundColor: '#3b82f6',
    borderRadius: 16,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 10,
  },
  applyButtonText: { color: '#fff', fontSize: 16, fontWeight: '700' },
  resultCard: {
    backgroundColor: '#fff',
    padding: 16,
    borderRadius: 16,
    marginBottom: 12,
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#f1f5f9',
  },
  iconCircle: {
    width: 44,
    height: 44,
    borderRadius: 12,
    backgroundColor: '#eff6ff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  companyName: { fontSize: 16, fontWeight: '700' },
  industryText: { fontSize: 13, color: '#64748b' },
  detailCard: { margin: 16, padding: 20, backgroundColor: '#fff', borderRadius: 20 },
  detailTitle: { fontSize: 22, fontWeight: '800' },
  badge: {
    backgroundColor: '#eff6ff',
    alignSelf: 'flex-start',
    paddingHorizontal: 12,
    paddingVertical: 4,
    borderRadius: 8,
    marginVertical: 12,
  },
  badgeText: { color: '#3b82f6', fontWeight: '600' },
  detailDesc: { lineHeight: 22, color: '#475569' },
});
