import React, { useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { useAppTheme } from '@theme';
import { OrderCard, EmptyState } from '@components';
import { useAppSelector } from '@store';
import { ClipboardIcon } from '@icons';
import { getStyles } from './jobsScreen.styles';

export const JobsScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  const [activeTab, setActiveTab] = useState<'active' | 'history'>('active');
  const { activeJob, jobHistory } = useAppSelector((state) => state.job);

  // Default history mock jobs
  const defaultHistory = [
    {
      pickupName: 'Cafe Coffee Day',
      pickupAddress: 'MG Road, Bengaluru',
      dropName: 'Rohit Sharma',
      dropAddress: 'Koramangala 4th Block, Bengaluru',
      amount: 78.0,
      distance: 1.2,
      itemCount: 2,
      paymentType: 'online',
    },
    {
      pickupName: 'Pizza Hut',
      pickupAddress: 'Indiranagar, Bengaluru',
      dropName: 'Aishwarya Sen',
      dropAddress: 'Domlur Stage 2, Bengaluru',
      amount: 95.0,
      distance: 3.8,
      itemCount: 3,
      paymentType: 'cod',
    },
    {
      pickupName: 'Burgers & Co',
      pickupAddress: 'Koramangala 5th Block',
      dropName: 'Sameer Khan',
      dropAddress: 'HSR Layout Sector 3, Bengaluru',
      amount: 110.0,
      distance: 4.5,
      itemCount: 1,
      paymentType: 'online',
    },
  ];

  return (
    <View style={styles.container}>
      <View style={styles.headerContainer}>
        <Text style={styles.title}>Jobs</Text>
      </View>

      {/* Tabs Selector */}
      <View style={styles.tabBar}>
        <TouchableOpacity
          style={[styles.tab, activeTab === 'active' && styles.tabActive]}
          activeOpacity={0.8}
          onPress={() => setActiveTab('active')}
        >
          <Text style={[styles.tabText, activeTab === 'active' && styles.tabTextActive]}>
            Active / Upcoming
          </Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[styles.tab, activeTab === 'history' && styles.tabActive]}
          activeOpacity={0.8}
          onPress={() => setActiveTab('history')}
        >
          <Text style={[styles.tabText, activeTab === 'history' && styles.tabTextActive]}>
            History
          </Text>
        </TouchableOpacity>
      </View>

      <ScrollView contentContainerStyle={styles.listContainer} showsVerticalScrollIndicator={false}>
        {activeTab === 'active' ? (
          // Active job tab
          activeJob ? (
            <View style={styles.cardWrapper}>
              <OrderCard
                pickupName={activeJob.pickupName}
                pickupAddress={activeJob.pickupAddress}
                dropName={activeJob.dropName}
                dropAddress={activeJob.dropAddress}
                amount={activeJob.amount}
                distance={activeJob.distance}
                itemCount={activeJob.itemCount}
                paymentType={activeJob.paymentType}
              />
            </View>
          ) : (
            <View style={styles.emptyStateContainer}>
              <ClipboardIcon size={48} color={colors.placeholder} />
              <Text style={styles.emptyStateText}>No active deliveries right now</Text>
            </View>
          )
        ) : (
          // History tab
          <View>
            {jobHistory.length > 0
              ? jobHistory.map((job, idx) => (
                  <View key={idx} style={styles.cardWrapper}>
                    <OrderCard
                      pickupName={job.pickupName}
                      pickupAddress={job.pickupAddress}
                      dropName={job.dropName}
                      dropAddress={job.dropAddress}
                      amount={job.amount}
                      distance={job.distance}
                      itemCount={job.itemCount}
                      paymentType={job.paymentType}
                    />
                  </View>
                ))
              : defaultHistory.map((job, idx) => (
                  <View key={idx} style={styles.cardWrapper}>
                    <OrderCard
                      pickupName={job.pickupName}
                      pickupAddress={job.pickupAddress}
                      dropName={job.dropName}
                      dropAddress={job.dropAddress}
                      amount={job.amount}
                      distance={job.distance}
                      itemCount={job.itemCount}
                      paymentType={job.paymentType}
                    />
                  </View>
                ))}
          </View>
        )}
      </ScrollView>
    </View>
  );
};

export default JobsScreen;