/*
 * File: FilterTabs.tsx
 * Description: Filter tabs component for patient status filtering
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
} from 'react-native';
import { theme } from '../../../theme/theme';
import Icon from 'react-native-vector-icons/Feather';

// ============================================================================
// INTERFACES
// ============================================================================

interface FilterTabsProps {
  selectedFilter: 'all' | 'processed' | 'pending' | 'error';
  onFilterChange: (filter: 'all' | 'processed' | 'pending' | 'error') => void;
  patientCounts: {
    all: number;
    processed: number;
    pending: number;
    error: number;
  };
}

interface FilterTab {
  id: 'all' | 'processed' | 'pending' | 'error';
  label: string;
  icon: string;
  color: string;
  activeColor: string;
}

// ============================================================================
// FILTER TABS COMPONENT
// ============================================================================

/**
 * FilterTabs Component
 * 
 * Purpose: Provide filtering options for patient list
 * 
 * Features:
 * - Multiple filter options (All, Processed, Pending, Error)
 * - Patient count display for each filter
 * - Visual indicators with icons and colors
 * - Horizontal scrollable layout
 * - Active state highlighting
 * - ER-focused design with medical priority colors
 */
const FilterTabs: React.FC<FilterTabsProps> = ({
  selectedFilter,
  onFilterChange,
  patientCounts,
}) => {
  // ============================================================================
  // TAB CONFIGURATION
  // ============================================================================

  const filterTabs: FilterTab[] = [
    {
      id: 'all',
      label: 'All Cases',
      icon: 'users',
      color: theme.colors.textSecondary,
      activeColor: theme.colors.primary,
    },
    {
      id: 'processed',
      label: 'Processed',
      icon: 'check-circle',
      color: theme.colors.success,
      activeColor: theme.colors.success,
    },
    {
      id: 'pending',
      label: 'Pending',
      icon: 'clock',
      color: theme.colors.warning,
      activeColor: theme.colors.warning,
    },
    {
      id: 'error',
      label: 'Error',
      icon: 'alert-triangle',
      color: theme.colors.error,
      activeColor: theme.colors.error,
    },
  ];

  // ============================================================================
  // UTILITY FUNCTIONS
  // ============================================================================

  /**
   * Get Patient Count for Filter
   * 
   * Purpose: Get the count of patients for a specific filter
   * 
   * @param filterId - Filter ID
   * @returns Number of patients for the filter
   */
  const getPatientCount = (filterId: string): number => {
    switch (filterId) {
      case 'all':
        return patientCounts.all;
      case 'processed':
        return patientCounts.processed;
      case 'pending':
        return patientCounts.pending;
      case 'error':
        return patientCounts.error;
      default:
        return 0;
    }
  };

  // ============================================================================
  // RENDER HELPERS
  // ============================================================================

  /**
   * Render Filter Tab
   * 
   * Purpose: Render individual filter tab
   * 
   * @param tab - Filter tab configuration
   */
  const renderFilterTab = (tab: FilterTab) => {
    const isSelected = selectedFilter === tab.id;
    const patientCount = getPatientCount(tab.id);
    const tabColor = isSelected ? tab.activeColor : tab.color;
    
    return (
      <TouchableOpacity
        key={tab.id}
        style={[
          styles.tab,
          isSelected && styles.tabSelected,
          isSelected && { borderBottomColor: tab.activeColor },
        ]}
        onPress={() => onFilterChange(tab.id)}
        activeOpacity={0.7}
      >
        {/* Tab Icon */}
        <Icon
          name={tab.icon}
          size={16}
          color={tabColor}
          style={styles.tabIcon}
        />
        
        {/* Tab Content */}
        <View style={styles.tabContent}>
          <Text
            style={[
              styles.tabLabel,
              isSelected && styles.tabLabelSelected,
              { color: tabColor },
            ]}
          >
            {tab.label}
          </Text>
          
          {/* Patient Count Badge */}
          <View
            style={[
              styles.countBadge,
              isSelected && styles.countBadgeSelected,
              { backgroundColor: isSelected ? tab.activeColor : theme.colors.backgroundAlt },
            ]}
          >
            <Text
              style={[
                styles.countText,
                isSelected && styles.countTextSelected,
                { color: isSelected ? theme.colors.background : tabColor },
              ]}
            >
              {patientCount}
            </Text>
          </View>
        </View>
        
        {/* Error Indicator */}
        {tab.id === 'error' && patientCount > 0 && (
          <View style={styles.errorIndicator}>
            <View style={styles.pulseDot} />
          </View>
        )}
      </TouchableOpacity>
    );
  };

  // ============================================================================
  // MAIN RENDER
  // ============================================================================

  return (
    <View style={styles.container}>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.scrollContent}
      >
        {filterTabs.map(renderFilterTab)}
      </ScrollView>
      
      {/* Active Filter Indicator */}
      <View style={styles.activeIndicator}>
        <View style={styles.indicatorLine} />
      </View>
    </View>
  );
};

// ============================================================================
// STYLES
// ============================================================================

const styles = StyleSheet.create({
  container: {
    marginBottom: theme.spacing.sm,
  },
  scrollContent: {
    paddingHorizontal: theme.spacing.xs,
  },
  
  // Tab Styles
  tab: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: theme.spacing.md,
    paddingVertical: theme.spacing.sm,
    marginHorizontal: theme.spacing.xs,
    borderRadius: 12,
    backgroundColor: theme.colors.backgroundAlt,
    borderBottomWidth: 3,
    borderBottomColor: 'transparent',
    position: 'relative',
    minWidth: 100,
  },
  tabSelected: {
    backgroundColor: theme.colors.background,
    shadowColor: theme.colors.shadow,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  tabIcon: {
    marginRight: theme.spacing.xs,
  },
  tabContent: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  tabLabel: {
    fontSize: 14,
    fontFamily: theme.typography.fontFamily.regular,
    flex: 1,
  },
  tabLabelSelected: {
    fontFamily: theme.typography.fontFamily.bold,
  },
  
  // Count Badge Styles
  countBadge: {
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 12,
    marginLeft: theme.spacing.xs,
    minWidth: 24,
    alignItems: 'center',
  },
  countBadgeSelected: {
    shadowColor: theme.colors.shadow,
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
    elevation: 1,
  },
  countText: {
    fontSize: 12,
    fontFamily: theme.typography.fontFamily.bold,
    textAlign: 'center',
  },
  countTextSelected: {
    color: theme.colors.background,
  },
  
  // Error Indicator
  errorIndicator: {
    position: 'absolute',
    top: 8,
    right: 8,
    width: 8,
    height: 8,
  },
  pulseDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: theme.colors.error,
    // Note: In a real app, you'd add animation here
  },
  
  // Active Filter Indicator
  activeIndicator: {
    marginTop: theme.spacing.xs,
    alignItems: 'center',
  },
  indicatorLine: {
    width: 40,
    height: 2,
    backgroundColor: theme.colors.primary,
    borderRadius: 1,
  },
});

export default FilterTabs;

/*
 * End of File: FilterTabs.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */