import React from 'react';
import { View, Text, ScrollView } from 'react-native';
import { useAppTheme } from '@theme';
import { WalletIcon } from '@icons';
import { useAppSelector } from '@store';
import { formatCurrency } from '@utils/formatters';
import { getStyles } from './earningsScreen.styles';

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

  const { todayEarnings, completedCount, onlineMinutes } = useAppSelector((state) => state.earnings);
  const { jobHistory } = useAppSelector((state) => state.job);

  // Default mock jobs history if none completed yet
  const defaultHistory: { orderId: string; time: string; amount: number; paymentType: 'online' | 'cod'; }[] = [
    { orderId: '#ORD125487', time: '12:35 PM', amount: 78.0, paymentType: 'online' },
    { orderId: '#ORD125422', time: '11:15 AM', amount: 65.0, paymentType: 'cod' },
    { orderId: '#ORD125389', time: '09:40 AM', amount: 120.0, paymentType: 'online' },
    { orderId: '#ORD125310', time: 'Yesterday', amount: 85.0, paymentType: 'online' },
  ];

  const displayHistory = jobHistory.length > 0 
    ? jobHistory.map(job => ({
        orderId: job.orderId,
        time: job.deliveredAt ? new Date(job.deliveredAt).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}) : 'Delivered',
        amount: job.amount,
        paymentType: job.paymentType,
      })).concat(defaultHistory)
    : defaultHistory;

  const formatOnlineTime = (mins: number) => {
    const hours = Math.floor(mins / 60);
    const remainingMins = mins % 60;
    return `${hours}h ${remainingMins < 10 ? `0${remainingMins}` : remainingMins}m`;
  };

  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
        <View style={styles.headerContainer}>
          <Text style={styles.title}>Earnings</Text>
        </View>

        {/* Total Earnings Card */}
        <View style={styles.summaryCard}>
          <Text style={styles.summaryTitle}>Today's Earnings</Text>
          <Text style={styles.totalAmount}>{formatCurrency(todayEarnings)}</Text>
          
          <View style={styles.statsRow}>
            <View style={styles.statBox}>
              <Text style={styles.statVal}>{completedCount}</Text>
              <Text style={styles.statLabel}>Deliveries</Text>
            </View>

            <View style={styles.statDivider} />

            <View style={styles.statBox}>
              <Text style={styles.statVal}>{formatOnlineTime(onlineMinutes)}</Text>
              <Text style={styles.statLabel}>Online Time</Text>
            </View>

            <View style={styles.statDivider} />

            <View style={styles.statBox}>
              <Text style={styles.statVal}>₹78.50</Text>
              <Text style={styles.statLabel}>Avg / Order</Text>
            </View>
          </View>
        </View>

        {/* Recent Deliveries List */}
        <View style={styles.listSection}>
          <Text style={styles.sectionTitle}>Recent Deliveries</Text>
          
          {displayHistory.map((item, index) => (
            <View key={index} style={styles.earningItem}>
              <View style={styles.itemLeft}>
                <View style={styles.iconContainer}>
                  <WalletIcon size={20} color={colors.primary} />
                </View>
                <View>
                  <Text style={styles.orderIdText}>{item.orderId}</Text>
                  <Text style={styles.timeText}>{item.time}</Text>
                </View>
              </View>

              <View style={styles.itemRight}>
                <Text style={styles.itemAmount}>+{formatCurrency(item.amount)}</Text>
                <View style={styles.paymentBadge}>
                  <Text style={styles.paymentText}>{item.paymentType.toUpperCase()}</Text>
                </View>
              </View>
            </View>
          ))}
        </View>
      </ScrollView>
    </View>
  );
};

export default EarningsScreen;