import React, { useState, useEffect, useCallback } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  RefreshControl,
  FlatList,
} from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import type { AppDispatch } from '@/store/store';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Container, LoadingSpinner, ErrorState } from '@/shared/components/ui';
import { useTheme } from '@/shared/styles/useTheme';
import { fetchZohoPeopleData } from '../store/hrSlice';
import {
  selectZohoPeopleLoading,
  selectZohoPeopleError,
  selectAttendanceReport,
  selectEmployeeForms,
  selectHolidays,
  selectLeaveData,
} from '../store/selectors';

const ZohoPeopleDataScreen: React.FC = () => {
  const { colors, fonts, spacing, shadows } = useTheme();
  const dispatch = useDispatch<AppDispatch>();
  const [selectedTab, setSelectedTab] = useState<'employees' | 'attendance' | 'leaves' | 'holidays'>('employees');
  const [refreshing, setRefreshing] = useState(false);

  // Redux selectors
  const attendanceReport = useSelector(selectAttendanceReport);
  const employeeForms = useSelector(selectEmployeeForms);
  const holidays = useSelector(selectHolidays);
  const leaveData = useSelector(selectLeaveData);
  const loading = useSelector(selectZohoPeopleLoading);
  const error = useSelector(selectZohoPeopleError);

  // Fetch data using Redux
  const fetchData = useCallback(async (showRefresh = false) => {
    try {
      if (showRefresh) {
        setRefreshing(true);
      }
      await dispatch(fetchZohoPeopleData()).unwrap();
    } catch (err) {
      console.error('Error fetching Zoho People data:', err);
    } finally {
      setRefreshing(false);
    }
  }, [dispatch]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  const handleRefresh = useCallback(() => {
    fetchData(true);
  }, [fetchData]);

  const handleRetry = useCallback(() => {
    fetchData();
  }, [fetchData]);

  // Loading state
  if (loading && !employeeForms?.length && !attendanceReport?.length) {
    return <LoadingSpinner />;
  }

  // Error state
  if (error) {
    return <ErrorState onRetry={handleRetry} />;
  }

  // Tab configuration
  const tabs = [
    { key: 'employees', label: 'Employees', icon: 'people', count: employeeForms?.length || 0 },
    { key: 'attendance', label: 'Attendance', icon: 'schedule', count: attendanceReport?.length || 0 },
    { key: 'leaves', label: 'Leaves', icon: 'event-available', count: leaveData?.length || 0 },
    { key: 'holidays', label: 'Holidays', icon: 'event', count: holidays?.length || 0 },
  ] as const;

  const renderEmployeeCard = useCallback((item: any) => (
    <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
      <View style={styles.cardHeader}>
        <View style={styles.cardTitleContainer}>
          <Icon name="person" size={20} color={colors.primary} />
          <Text style={[styles.cardTitle, { color: colors.text, fontFamily: fonts.bold }]}>
            {item.FirstName} {item.LastName}
          </Text>
        </View>
        <View style={[styles.statusBadge, { backgroundColor: item.Employeestatus === 'Active' ? '#E9FAF2' : '#FEF2F2' }]}>
          <Text style={[styles.statusText, { color: item.Employeestatus === 'Active' ? '#10B981' : '#EF4444', fontFamily: fonts.medium }]}>
            {item.Employeestatus}
          </Text>
        </View>
      </View>
      
      <View style={styles.cardContent}>
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Employee ID:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.EmployeeID}
          </Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Department:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.Department || 'N/A'}
          </Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Role:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.Role || 'N/A'}
          </Text>
        </View>
        
        {item.EmailID && (
          <View style={styles.infoRow}>
            <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Email:</Text>
            <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>{item.EmailID}</Text>
          </View>
        )}
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Experience:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.Experience || 'N/A'} years
          </Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Date of Joining:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.Dateofjoining || 'N/A'}
          </Text>
        </View>
      </View>
    </View>
  ), [colors, fonts]);

  const renderAttendanceCard = useCallback((item: any) => {
    const today = new Date();
    const todayISO = today.toISOString().split('T')[0];
    const todayFormatted = todayISO.split('-').reverse().join('-');
    const todayAttendance = item.attendanceDetails?.[todayFormatted] || item.attendanceDetails?.[todayISO];
    
    return (
      <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
        <View style={styles.cardHeader}>
          <View style={styles.cardTitleContainer}>
            <Icon name="schedule" size={20} color={colors.primary} />
            <Text style={[styles.cardTitle, { color: colors.text, fontFamily: fonts.bold }]}>
              {item.employeeDetails['first name']} {item.employeeDetails['last name']}
            </Text>
          </View>
          <View style={[styles.statusBadge, { backgroundColor: getAttendanceStatusColor(todayAttendance?.Status) }]}>
            <Text style={[styles.statusText, { color: colors.text, fontFamily: fonts.medium }]}>
              {todayAttendance?.Status || 'No Data'}
            </Text>
          </View>
        </View>
        
        <View style={styles.cardContent}>
          <View style={styles.infoRow}>
            <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Employee ID:</Text>
            <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
              {item.employeeDetails.erecno}
            </Text>
          </View>
          
          {todayAttendance && (
            <>
              <View style={styles.infoRow}>
                <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>First In:</Text>
                <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
                  {todayAttendance.FirstIn || 'N/A'}
                </Text>
              </View>
              
              <View style={styles.infoRow}>
                <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Last Out:</Text>
                <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
                  {todayAttendance.LastOut || 'N/A'}
                </Text>
              </View>
              
              <View style={styles.amountRow}>
                <View style={styles.amountItem}>
                  <Text style={[styles.amountLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Working Hours:</Text>
                  <Text style={[styles.amountValue, { color: colors.primary, fontFamily: fonts.bold }]}>
                    {todayAttendance.WorkingHours || '00:00'}
                  </Text>
                </View>
                <View style={styles.amountItem}>
                  <Text style={[styles.amountLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Total Hours:</Text>
                  <Text style={[styles.amountValue, { color: '#10B981', fontFamily: fonts.bold }]}>
                    {todayAttendance.TotalHours || '00:00'}
                  </Text>
                </View>
              </View>
            </>
          )}
        </View>
      </View>
    );
  }, [colors, fonts]);

  const renderLeaveCard = useCallback((item: any) => (
    <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
      <View style={styles.cardHeader}>
        <View style={styles.cardTitleContainer}>
          <Icon name="event-available" size={20} color={colors.primary} />
          <Text style={[styles.cardTitle, { color: colors.text, fontFamily: fonts.bold }]}>
            {item.Employee_ID}
          </Text>
        </View>
        <View style={[styles.statusBadge, { backgroundColor: getLeaveStatusColor(item.ApprovalStatus) }]}>
          <Text style={[styles.statusText, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.ApprovalStatus}
          </Text>
        </View>
      </View>
      
      <View style={styles.cardContent}>
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Leave Type:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.Leavetype}
          </Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>From:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.From || 'N/A'}
          </Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>To:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.To || 'N/A'}
          </Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Days Taken:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.Daystaken} days
          </Text>
        </View>
        
        {item.Reasonforleave && (
          <View style={styles.infoRow}>
            <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Reason:</Text>
            <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
              {item.Reasonforleave}
            </Text>
          </View>
        )}
      </View>
    </View>
  ), [colors, fonts]);

  const renderHolidayCard = useCallback((item: any) => (
    <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
      <View style={styles.cardHeader}>
        <View style={styles.cardTitleContainer}>
          <Icon name="event" size={20} color={colors.primary} />
          <Text style={[styles.cardTitle, { color: colors.text, fontFamily: fonts.bold }]}>
            {item.Name}
          </Text>
        </View>
        <View style={[styles.statusBadge, { backgroundColor: getHolidayTypeColor(item) }]}>
          <Text style={[styles.statusText, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.isRestrictedHoliday ? 'Restricted' : item.isHalfday ? 'Half Day' : 'Full Day'}
          </Text>
        </View>
      </View>
      
      <View style={styles.cardContent}>
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Date:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.Date || 'N/A'}
          </Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Location:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.LocationName || 'All Locations'}
          </Text>
        </View>
        
        <View style={styles.infoRow}>
          <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Shift:</Text>
          <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
            {item.ShiftName || 'N/A'}
          </Text>
        </View>
        
        {item.Remarks && (
          <View style={styles.infoRow}>
            <Text style={[styles.infoLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>Remarks:</Text>
            <Text style={[styles.infoValue, { color: colors.text, fontFamily: fonts.medium }]}>
              {item.Remarks}
            </Text>
          </View>
        )}
      </View>
    </View>
  ), [colors, fonts]);

  const renderTabContent = useCallback(() => {
    const commonFlatListProps = {
      showsVerticalScrollIndicator: false,
      contentContainerStyle: styles.listContainer,
      refreshControl: (
        <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
      ),
      removeClippedSubviews: true,
      maxToRenderPerBatch: 10,
      windowSize: 10,
      initialNumToRender: 10,
    };

    switch (selectedTab) {
      case 'employees':
        return (
          <FlatList
            data={employeeForms || []}
            renderItem={({ item }) => renderEmployeeCard(item)}
            keyExtractor={(_, index) => `emp-${index}`}
            {...commonFlatListProps}
          />
        );
      case 'attendance':
        return (
          <FlatList
            data={attendanceReport || []}
            renderItem={({ item }) => renderAttendanceCard(item)}
            keyExtractor={(_, index) => `att-${index}`}
            {...commonFlatListProps}
          />
        );
      case 'leaves':
        return (
          <FlatList
            data={leaveData || []}
            renderItem={({ item }) => renderLeaveCard(item)}
            keyExtractor={(_, index) => `leave-${index}`}
            {...commonFlatListProps}
          />
        );
      case 'holidays':
        return (
          <FlatList
            data={holidays || []}
            renderItem={({ item }) => renderHolidayCard(item)}
            keyExtractor={(_, index) => `hol-${index}`}
            {...commonFlatListProps}
          />
        );
      default:
        return null;
    }
  }, [selectedTab, employeeForms, attendanceReport, leaveData, holidays, refreshing, handleRefresh, renderEmployeeCard, renderAttendanceCard, renderLeaveCard, renderHolidayCard]);

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      {/* Fixed Header */}
      <View style={styles.header}>
        <Text style={[styles.title, { color: colors.text, fontFamily: fonts.bold }]}>
          Zoho People Data
        </Text>
        <TouchableOpacity onPress={handleRefresh} disabled={refreshing}>
          <Icon name="refresh" size={24} color={colors.primary} />
        </TouchableOpacity>
      </View>

      {/* Fixed Tabs */}
      <View style={styles.tabsContainer}>
        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
          <View style={styles.tabs}>
            {tabs.map((tab) => (
              <TouchableOpacity
                key={tab.key}
                style={[
                  styles.tab,
                  selectedTab === tab.key && { backgroundColor: colors.primary },
                ]}
                onPress={() => setSelectedTab(tab.key)}
                activeOpacity={0.8}
              >
                <Icon
                  name={tab.icon}
                  size={20}
                  color={selectedTab === tab.key ? colors.surface : colors.textLight}
                />
                <Text
                  style={[
                    styles.tabText,
                    {
                      color: selectedTab === tab.key ? colors.surface : colors.textLight,
                      fontFamily: fonts.medium,
                    },
                  ]}
                >
                  {tab.label}
                </Text>
                <View
                  style={[
                    styles.countBadge,
                    { backgroundColor: selectedTab === tab.key ? colors.surface : colors.primary },
                  ]}
                >
                  <Text
                    style={[
                      styles.countText,
                      {
                        color: selectedTab === tab.key ? colors.primary : colors.surface,
                        fontFamily: fonts.bold,
                      },
                    ]}
                  >
                    {tab.count}
                  </Text>
                </View>
              </TouchableOpacity>
            ))}
          </View>
        </ScrollView>
      </View>

      {/* Scrollable Content */}
      <View style={styles.content}>
        {renderTabContent()}
      </View>
    </View>
  );
};

// Helper functions to get status colors
const getAttendanceStatusColor = (status: string): string => {
  const statusColors: Record<string, string> = {
    present: '#E9FAF2',
    absent: '#FEF2F2',
    weekend: '#F3F4F6',
    '': '#F3F4F6',
  };
  return statusColors[status?.toLowerCase()] || '#F3F4F6';
};

const getLeaveStatusColor = (status: string): string => {
  const statusColors: Record<string, string> = {
    approved: '#E9FAF2',
    pending: '#FEF3C7',
    rejected: '#FEF2F2',
    draft: '#F3F4F6',
  };
  return statusColors[status?.toLowerCase()] || '#F3F4F6';
};

const getHolidayTypeColor = (holiday: any): string => {
  if (holiday.isRestrictedHoliday) return '#FEF3C7';
  if (holiday.isHalfday) return '#E0F2FE';
  return '#E9FAF2';
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  title: {
    fontSize: 24,
  },
  tabsContainer: {
    backgroundColor: '#FFFFFF',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#E5E7EB',
  },
  tabs: {
    flexDirection: 'row',
    paddingHorizontal: 16,
  },
  tab: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 10,
    marginRight: 8,
    borderRadius: 20,
    backgroundColor: '#F1F5F9',
  },
  tabText: {
    marginLeft: 6,
    fontSize: 14,
  },
  countBadge: {
    marginLeft: 6,
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 10,
    minWidth: 20,
    alignItems: 'center',
  },
  countText: {
    fontSize: 12,
  },
  content: {
    flex: 1,
  },
  listContainer: {
    paddingHorizontal: 16,
    paddingBottom: 20,
  },
  card: {
    borderRadius: 12,
    borderWidth: 1,
    padding: 16,
    marginBottom: 12,
    ...StyleSheet.flatten({
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 4,
      elevation: 3,
    }),
  },
  cardHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 12,
  },
  cardTitleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  cardTitle: {
    fontSize: 16,
    marginLeft: 8,
  },
  statusBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  statusText: {
    fontSize: 12,
    textTransform: 'capitalize',
  },
  cardContent: {
    gap: 8,
  },
  infoRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  infoLabel: {
    fontSize: 14,
    flex: 1,
  },
  infoValue: {
    fontSize: 14,
    textAlign: 'right',
    flex: 1,
  },
  amountRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 8,
    paddingTop: 8,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: '#E5E7EB',
  },
  amountItem: {
    flex: 1,
    alignItems: 'center',
  },
  amountLabel: {
    fontSize: 12,
    marginBottom: 4,
  },
  amountValue: {
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default ZohoPeopleDataScreen;
