import React from 'react';
import { View, Text } from 'react-native';
import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { getStyles } from './orderTrackingScreen.styles';
import { Header, PrimaryButton } from '@components';
import { useAppTheme } from '@theme';
import { AppStackParamList } from '../../../navigation/appStack';

type OrderTrackingNavProp = StackNavigationProp<AppStackParamList, 'OrderTrackingScreen'>;
type OrderTrackingRouteProp = RouteProp<AppStackParamList, 'OrderTrackingScreen'>;

const MILESTONES = [
  { key: 'placed', label: 'Order Placed', time: '12:30 PM' },
  { key: 'confirmed', label: 'Confirmed', time: '12:32 PM' },
  { key: 'dispatched', label: 'Dispatched', time: '12:40 PM' },
  { key: 'delivered', label: 'Delivered', time: 'Pending' },
];

export const OrderTrackingScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const navigation = useNavigation<OrderTrackingNavProp>();
  const route = useRoute<OrderTrackingRouteProp>();
  const orderId = route.params?.orderId || 'ORD-123456';

  return (
    <View style={styles.container}>
      <Header title={`Track Order (${orderId})`} onBack={() => navigation.goBack()} />
      <View style={styles.content}>
        <View style={styles.timeline}>
          {MILESTONES.map((milestone, index) => (
            <View key={milestone.key} style={styles.milestoneRow}>
              <View style={styles.milestoneIndicator}>
                <View
                  style={[
                    styles.dot,
                    index <= 2 && styles.dotActive,
                    index === 2 && styles.dotCurrent,
                  ]}
                />
                {index < MILESTONES.length - 1 && (
                  <View
                    style={[
                      styles.line,
                      index < 2 && styles.lineActive,
                    ]}
                  />
                )}
              </View>
              <View style={styles.milestoneInfo}>
                <Text
                  style={[
                    styles.milestoneLabel,
                    index <= 2 && styles.milestoneLabelActive,
                  ]}
                >
                  {milestone.label}
                </Text>
                <Text style={styles.milestoneTime}>{milestone.time}</Text>
              </View>
            </View>
          ))}
        </View>
        <View style={styles.supportCard}>
          <PrimaryButton
            title="View Live Map"
            onPress={() => navigation.navigate('LiveTrackingScreen', { orderId })}
            style={{ marginBottom: 16 }}
          />
          <Text style={styles.supportTitle}>Need help?</Text>
          <Text style={styles.supportSubtext}>Contact support for assistance</Text>
          <PrimaryButton title="Contact Support" onPress={() => navigation.navigate('HelpSupportScreen')} />
        </View>
      </View>
    </View>
  );
};