// SearchResultsScreen.tsx
import { useTheme } from '@/components/ThemeContext';
import {
  Award,
  Building2,
  Calendar,
  ChevronLeft,
  DollarSign,
  Info,
  Mail,
  MapPin,
  Phone,
  User,
} from 'lucide-react-native';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FlatList, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

type TabType = 'entity' | 'entrepreneur' | 'trademark';

interface SearchResult {
  entity: any;
  entrepreneur: any;
  trademark: any;
}

interface SearchResultsScreenProps {
  searchData: SearchResult;
  onBack: () => void;
}

export default function SearchResultsScreen({ searchData, onBack }: SearchResultsScreenProps) {
  const { isDark } = useTheme();
  const { t } = useTranslation();
  const [activeTab, setActiveTab] = useState<TabType>('entity');

  const tabs = [
    {
      key: 'entity' as TabType,
      label: 'Korxonalar',
      icon: Building2,
      count:
        searchData.entity.name.total +
        searchData.entity.director.total +
        searchData.entity.founder.total,
    },
    {
      key: 'entrepreneur' as TabType,
      label: 'Tadbirkorlar',
      icon: User,
      count: searchData.entrepreneur.total,
    },
    {
      key: 'trademark' as TabType,
      label: 'Tovar belgilari',
      icon: Award,
      count: searchData.trademark.total,
    },
  ];

  const renderTabs = () => (
    <View style={styles.tabsContainer}>
      {tabs.map((tab) => {
        const Icon = tab.icon;
        const isActive = activeTab === tab.key;
        return (
          <TouchableOpacity
            key={tab.key}
            style={[
              styles.tab,
              isActive && styles.activeTab,
              {
                backgroundColor: isActive
                  ? isDark
                    ? '#3b82f6'
                    : '#3b82f6'
                  : isDark
                    ? '#1e293b'
                    : '#f1f5f9',
              },
            ]}
            onPress={() => setActiveTab(tab.key)}
          >
            <Icon size={18} color={isActive ? '#ffffff' : isDark ? '#94a3b8' : '#64748b'} />
            <Text
              style={[
                styles.tabText,
                { color: isActive ? '#ffffff' : isDark ? '#94a3b8' : '#64748b' },
              ]}
            >
              {tab.label}
            </Text>
            {tab.count > 0 && (
              <View style={[styles.badge, { backgroundColor: isActive ? '#60a5fa' : '#3b82f6' }]}>
                <Text style={styles.badgeText}>{tab.count > 9999 ? '9999+' : tab.count}</Text>
              </View>
            )}
          </TouchableOpacity>
        );
      })}
    </View>
  );

  const renderEntityCard = (item: any, variant: string) => (
    <View
      style={[
        styles.card,
        {
          backgroundColor: isDark ? '#1e293b' : '#ffffff',
          borderColor: isDark ? '#334155' : '#e2e8f0',
        },
      ]}
    >
      {/* Header */}
      <View style={styles.cardHeader}>
        <View
          style={[
            styles.statusBadge,
            { backgroundColor: item.activity_state === 1 ? '#22c55e' : '#ef4444' },
          ]}
        >
          <Text style={styles.statusText}>{item.activity_state === 1 ? 'Faol' : 'Faol emas'}</Text>
        </View>
        {variant && (
          <View style={[styles.variantBadge, { backgroundColor: isDark ? '#334155' : '#f1f5f9' }]}>
            <Text style={[styles.variantText, { color: isDark ? '#94a3b8' : '#64748b' }]}>
              {variant === 'director' ? 'Direktor' : variant === 'founder' ? "Ta'sischi" : 'Nomi'}
            </Text>
          </View>
        )}
      </View>

      {/* Company Name */}
      <Text style={[styles.cardTitle, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>{item.name}</Text>

      {/* INN */}
      <View style={styles.infoRow}>
        <Info size={16} color={isDark ? '#94a3b8' : '#64748b'} />
        <Text style={[styles.infoLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>INN:</Text>
        <Text style={[styles.infoValue, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
          {item.inn}
        </Text>
      </View>

      {/* Director */}
      {item.director && (
        <View style={styles.infoRow}>
          <User size={16} color={isDark ? '#94a3b8' : '#64748b'} />
          <Text style={[styles.infoLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>
            Direktor:
          </Text>
          <Text style={[styles.infoValue, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
            {item.director}
          </Text>
        </View>
      )}

      {/* Address */}
      {item.address && (
        <View style={styles.infoRow}>
          <MapPin size={16} color={isDark ? '#94a3b8' : '#64748b'} />
          <Text style={[styles.infoLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>Manzil:</Text>
          <Text
            style={[styles.infoValue, { color: isDark ? '#f1f5f9' : '#0f172a' }]}
            numberOfLines={2}
          >
            {item.address}
          </Text>
        </View>
      )}

      {/* Registration Date */}
      {item.registration_date && (
        <View style={styles.infoRow}>
          <Calendar size={16} color={isDark ? '#94a3b8' : '#64748b'} />
          <Text style={[styles.infoLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>
            Ro'yxatga olingan:
          </Text>
          <Text style={[styles.infoValue, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
            {new Date(item.registration_date).toLocaleDateString('uz-UZ')}
          </Text>
        </View>
      )}

      {/* Activity */}
      <View style={[styles.activityBox, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
        <Text style={[styles.activityCode, { color: isDark ? '#60a5fa' : '#3b82f6' }]}>
          {item.oked_code}
        </Text>
        <Text style={[styles.activityName, { color: isDark ? '#cbd5e1' : '#475569' }]}>
          {item.oked_name}
        </Text>
      </View>

      {/* Contact Info */}
      <View style={styles.contactRow}>
        {item.email && (
          <View style={styles.contactItem}>
            <Mail size={14} color={isDark ? '#94a3b8' : '#64748b'} />
            <Text style={[styles.contactText, { color: isDark ? '#94a3b8' : '#64748b' }]}>
              {item.email}
            </Text>
          </View>
        )}
        {item.phones?.length > 0 && (
          <View style={styles.contactItem}>
            <Phone size={14} color={isDark ? '#94a3b8' : '#64748b'} />
            <Text style={[styles.contactText, { color: isDark ? '#94a3b8' : '#64748b' }]}>
              {item.phones[0]}
            </Text>
          </View>
        )}
      </View>

      {/* Statutory Fund */}
      {item.statutory_fund && (
        <View style={styles.fundRow}>
          <DollarSign size={16} color={isDark ? '#94a3b8' : '#64748b'} />
          <Text style={[styles.fundLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>
            Ustav fondi:
          </Text>
          <Text style={[styles.fundValue, { color: isDark ? '#22c55e' : '#16a34a' }]}>
            {parseFloat(item.statutory_fund).toLocaleString('uz-UZ')} so'm
          </Text>
        </View>
      )}
    </View>
  );

  const renderEntrepreneurCard = (item: any) => (
    <View
      style={[
        styles.card,
        {
          backgroundColor: isDark ? '#1e293b' : '#ffffff',
          borderColor: isDark ? '#334155' : '#e2e8f0',
        },
      ]}
    >
      <View style={styles.entrepreneurHeader}>
        <View style={[styles.avatarCircle, { backgroundColor: isDark ? '#334155' : '#e2e8f0' }]}>
          <User size={32} color={isDark ? '#94a3b8' : '#64748b'} />
        </View>
        <View style={{ flex: 1 }}>
          <Text style={[styles.entrepreneurName, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
            {item.entrepreneur}
          </Text>
          <Text style={[styles.pinfl, { color: isDark ? '#94a3b8' : '#64748b' }]}>
            PINFL: {item.pinfl}
          </Text>
        </View>
      </View>

      {item.registration_date && (
        <View style={styles.infoRow}>
          <Calendar size={16} color={isDark ? '#94a3b8' : '#64748b'} />
          <Text style={[styles.infoLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>
            Ro'yxatga olingan:
          </Text>
          <Text style={[styles.infoValue, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
            {new Date(item.registration_date).toLocaleDateString('uz-UZ')}
          </Text>
        </View>
      )}

      {item.email && (
        <View style={styles.contactItem}>
          <Mail size={14} color={isDark ? '#94a3b8' : '#64748b'} />
          <Text style={[styles.contactText, { color: isDark ? '#94a3b8' : '#64748b' }]}>
            {item.email}
          </Text>
        </View>
      )}

      {item.phone && (
        <View style={styles.contactItem}>
          <Phone size={14} color={isDark ? '#94a3b8' : '#64748b'} />
          <Text style={[styles.contactText, { color: isDark ? '#94a3b8' : '#64748b' }]}>
            {item.phone}
          </Text>
        </View>
      )}
    </View>
  );

  const renderTrademarkCard = (item: any) => (
    <View
      style={[
        styles.card,
        {
          backgroundColor: isDark ? '#1e293b' : '#ffffff',
          borderColor: isDark ? '#334155' : '#e2e8f0',
        },
      ]}
    >
      <View style={styles.trademarkHeader}>
        {item.logo && (
          <Image source={{ uri: item.logo }} style={styles.trademarkLogo} resizeMode="contain" />
        )}
        <View style={{ flex: 1 }}>
          <Text style={[styles.trademarkName, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
            {item.transliteration}
          </Text>
          <View
            style={[
              styles.statusBadge,
              {
                backgroundColor:
                  item.status_name === 'COMPLETED'
                    ? '#22c55e'
                    : item.status_name === 'WAITING'
                      ? '#f59e0b'
                      : '#ef4444',
                alignSelf: 'flex-start',
              },
            ]}
          >
            <Text style={styles.statusText}>{item.status_name}</Text>
          </View>
        </View>
      </View>

      <View style={styles.infoRow}>
        <User size={16} color={isDark ? '#94a3b8' : '#64748b'} />
        <Text style={[styles.infoLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>
          Ariza beruvchi:
        </Text>
        <Text style={[styles.infoValue, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
          {item.applicant}
        </Text>
      </View>

      {item.registration_date && (
        <View style={styles.infoRow}>
          <Calendar size={16} color={isDark ? '#94a3b8' : '#64748b'} />
          <Text style={[styles.infoLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>
            Ro'yxatga olingan:
          </Text>
          <Text style={[styles.infoValue, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
            {new Date(item.registration_date).toLocaleDateString('uz-UZ')}
          </Text>
        </View>
      )}

      {item.relevance_date && (
        <View style={styles.infoRow}>
          <Calendar size={16} color={isDark ? '#94a3b8' : '#64748b'} />
          <Text style={[styles.infoLabel, { color: isDark ? '#94a3b8' : '#64748b' }]}>
            Amal qilish muddati:
          </Text>
          <Text style={[styles.infoValue, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
            {new Date(item.relevance_date).toLocaleDateString('uz-UZ')}
          </Text>
        </View>
      )}
    </View>
  );

  const renderContent = () => {
    switch (activeTab) {
      case 'entity':
        const allEntities = [
          ...searchData.entity.name.rows.map((r: any) => ({ ...r, variant: 'name' })),
          ...searchData.entity.director.rows.map((r: any) => ({ ...r, variant: 'director' })),
          ...searchData.entity.founder.rows.map((r: any) => ({ ...r, variant: 'founder' })),
        ];

        return (
          <FlatList
            data={allEntities}
            keyExtractor={(item, index) => `entity-${item.id}-${index}`}
            renderItem={({ item }) => renderEntityCard(item, item.variant)}
            contentContainerStyle={styles.listContent}
            showsVerticalScrollIndicator={false}
            ListEmptyComponent={
              <View style={styles.emptyState}>
                <Building2 size={48} color={isDark ? '#475569' : '#94a3b8'} />
                <Text style={[styles.emptyText, { color: isDark ? '#94a3b8' : '#64748b' }]}>
                  Korxonalar topilmadi
                </Text>
              </View>
            }
          />
        );

      case 'entrepreneur':
        return (
          <FlatList
            data={searchData.entrepreneur.rows}
            keyExtractor={(item) => `entrepreneur-${item.id}`}
            renderItem={({ item }) => renderEntrepreneurCard(item)}
            contentContainerStyle={styles.listContent}
            showsVerticalScrollIndicator={false}
            ListEmptyComponent={
              <View style={styles.emptyState}>
                <User size={48} color={isDark ? '#475569' : '#94a3b8'} />
                <Text style={[styles.emptyText, { color: isDark ? '#94a3b8' : '#64748b' }]}>
                  Tadbirkorlar topilmadi
                </Text>
              </View>
            }
          />
        );

      case 'trademark':
        return (
          <FlatList
            data={searchData.trademark.rows}
            keyExtractor={(item) => `trademark-${item.id}`}
            renderItem={({ item }) => renderTrademarkCard(item)}
            contentContainerStyle={styles.listContent}
            showsVerticalScrollIndicator={false}
            ListEmptyComponent={
              <View style={styles.emptyState}>
                <Award size={48} color={isDark ? '#475569' : '#94a3b8'} />
                <Text style={[styles.emptyText, { color: isDark ? '#94a3b8' : '#64748b' }]}>
                  Tovar belgilari topilmadi
                </Text>
              </View>
            }
          />
        );
    }
  };

  return (
    <SafeAreaView style={[styles.container, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity onPress={onBack} style={styles.backButton}>
          <ChevronLeft size={24} color={isDark ? '#f1f5f9' : '#0f172a'} />
        </TouchableOpacity>
        <Text style={[styles.headerTitle, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
          Qidiruv natijalari
        </Text>
        <View style={{ width: 24 }} />
      </View>

      {/* Tabs */}
      {renderTabs()}

      {/* Content */}
      {renderContent()}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  backButton: {
    padding: 4,
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '700',
  },
  tabsContainer: {
    flexDirection: 'row',
    paddingHorizontal: 16,
    gap: 8,
    marginBottom: 16,
  },
  tab: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 8,
    borderRadius: 12,
    gap: 6,
  },
  activeTab: {
    shadowColor: '#3b82f6',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 3,
  },
  tabText: {
    fontSize: 13,
    fontWeight: '600',
  },
  badge: {
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 10,
    minWidth: 20,
    alignItems: 'center',
  },
  badgeText: {
    color: '#ffffff',
    fontSize: 10,
    fontWeight: '700',
  },
  listContent: {
    paddingHorizontal: 16,
    paddingBottom: 24,
  },
  card: {
    borderRadius: 16,
    padding: 16,
    marginBottom: 12,
    borderWidth: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  cardHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 12,
  },
  statusBadge: {
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 8,
  },
  statusText: {
    color: '#ffffff',
    fontSize: 12,
    fontWeight: '600',
  },
  variantBadge: {
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 8,
  },
  variantText: {
    fontSize: 12,
    fontWeight: '600',
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: '700',
    marginBottom: 12,
  },
  infoRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    marginBottom: 8,
  },
  infoLabel: {
    fontSize: 13,
    fontWeight: '500',
  },
  infoValue: {
    fontSize: 13,
    fontWeight: '600',
    flex: 1,
  },
  activityBox: {
    padding: 12,
    borderRadius: 8,
    marginTop: 8,
    marginBottom: 8,
  },
  activityCode: {
    fontSize: 14,
    fontWeight: '700',
    marginBottom: 4,
  },
  activityName: {
    fontSize: 12,
    lineHeight: 18,
  },
  contactRow: {
    gap: 8,
    marginTop: 8,
  },
  contactItem: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
  },
  contactText: {
    fontSize: 12,
  },
  fundRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    marginTop: 12,
    paddingTop: 12,
    borderTopWidth: 1,
    borderTopColor: '#334155',
  },
  fundLabel: {
    fontSize: 13,
    fontWeight: '500',
  },
  fundValue: {
    fontSize: 14,
    fontWeight: '700',
  },
  entrepreneurHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    marginBottom: 16,
  },
  avatarCircle: {
    width: 56,
    height: 56,
    borderRadius: 28,
    alignItems: 'center',
    justifyContent: 'center',
  },
  entrepreneurName: {
    fontSize: 16,
    fontWeight: '700',
    marginBottom: 4,
  },
  pinfl: {
    fontSize: 12,
    fontWeight: '500',
  },
  trademarkHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    marginBottom: 16,
  },
  trademarkLogo: {
    width: 64,
    height: 64,
    borderRadius: 8,
  },
  trademarkName: {
    fontSize: 15,
    fontWeight: '700',
    marginBottom: 8,
  },
  emptyState: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 60,
  },
  emptyText: {
    fontSize: 16,
    fontWeight: '500',
    marginTop: 12,
  },
});