import React, { useState, useEffect } from 'react';
import { View, Text, Alert } from 'react-native';
import { useAppTheme } from '@theme';
import { PrimaryButton, LocationRow } from '@components';
import { useAppDispatch, useAppSelector } from '@store';
import { acceptJobThunk, rejectJobThunk } from '@store/commonReducers/job';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { AppStackParamList } from '@navigation/navigationTypes';
import { RouteNames } from '@utils/constants';
import { formatCurrency } from '@utils/formatters';
import { getStyles } from './newJobRequestScreen.styles';

export const NewJobRequestScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const dispatch = useAppDispatch();
  const navigation = useNavigation<NativeStackNavigationProp<AppStackParamList>>();

  const newJobOffer = useAppSelector((state) => state.job.newJobOffer);
  const [secondsLeft, setSecondsLeft] = useState(15);

  useEffect(() => {
    if (secondsLeft <= 0) {
      handleReject();
      return;
    }
    const timer = setInterval(() => {
      setSecondsLeft((prev) => prev - 1);
    }, 1000);
    return () => clearInterval(timer);
  }, [secondsLeft]);

  const handleAccept = () => {
    if (newJobOffer?.jobId) {
      dispatch(acceptJobThunk(newJobOffer.jobId));
    }
    Alert.alert('Job Accepted', 'Heading to Cafe Coffee Day pickup location.', [
      {
        text: 'OK',
        onPress: () => navigation.navigate(RouteNames.OrderAccepted),
      },
    ]);
  };

  const handleReject = () => {
    if (newJobOffer?.jobId) {
      dispatch(rejectJobThunk(newJobOffer.jobId));
    }
    navigation.navigate(RouteNames.BottomTabs, { screen: RouteNames.Dashboard });
  };

  if (!newJobOffer) return null;

  return (
    <View style={styles.container}>
      <View style={styles.modalContent}>
        {/* Header Row with Title and Countdown */}
        <View style={styles.headerRow}>
          <Text style={styles.modalTitle}>New Delivery Request</Text>
          <View style={styles.timerContainer}>
            <Text style={styles.timerText}>{secondsLeft}s</Text>
          </View>
        </View>

        {/* Route Details Card */}
        <View style={styles.routeContainer}>
          <LocationRow
            type="pickup"
            name="Cafe Coffee Day"
            address={newJobOffer.pickupAddress}
          />
          <View style={styles.spacer} />
          <LocationRow
            type="drop"
            name="Rohit Sharma"
            address={newJobOffer.dropAddress}
          />
        </View>

        {/* Earnings & Distance Details */}
        <View style={styles.detailsRow}>
          <View style={styles.detailBox}>
            <Text style={styles.detailLabel}>Estimated Earnings</Text>
            <Text style={styles.detailValue}>{formatCurrency(newJobOffer.amount)}</Text>
          </View>

          <View style={styles.divider} />

          <View style={styles.detailBox}>
            <Text style={styles.detailLabel}>Distance</Text>
            <Text style={styles.detailValue}>{newJobOffer.distance} km</Text>
          </View>
        </View>

        {/* Button Actions */}
        <View style={styles.btnRow}>
          <PrimaryButton
            title="Reject"
            onPress={handleReject}
            style={styles.rejectBtn}
            textStyle={{ color: colors.text }}
          />
          <PrimaryButton
            title="Accept"
            onPress={handleAccept}
            style={styles.acceptBtn}
          />
        </View>
      </View>
    </View>
  );
};

export default NewJobRequestScreen;