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: string;
    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(Number(item.amount))}
                </Text>
                <View style={styles.paymentBadge}>
                  <Text style={styles.paymentText}>
                    {item.paymentType.toUpperCase()}
                  </Text>
                </View>
              </View>
            </View>
          ))}
        </View>
      </ScrollView>
    </View>
  );
};

export default EarningsScreen;