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 './liveTrackingScreen.styles';
import { Header, PrimaryButton } from '@components';
import { useAppTheme } from '@theme';
import { AppStackParamList } from '../../../navigation/appStack';

type LiveTrackingNavProp = StackNavigationProp<AppStackParamList, 'LiveTrackingScreen'>;
type LiveTrackingRouteProp = RouteProp<AppStackParamList, 'LiveTrackingScreen'>;

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

  return (
    <View style={styles.container}>
      <Header title="Live Tracking" onBack={() => navigation.goBack()} />
      <View style={styles.mapPlaceholder}>
        <Text style={styles.mapIcon}>🗺️</Text>
        <Text style={styles.mapText}>Live Map</Text>
        <Text style={styles.mapSubtext}>
          Delivery partner location tracking for {orderId}
        </Text>
        <View style={styles.blinkingBadge}>
          <Text style={styles.blinkingText}>● Live</Text>
        </View>
      </View>
      <View style={styles.agentSheet}>
        <PrimaryButton
          title="Simulate Order Delivered"
          onPress={() => navigation.navigate('OrderDeliveredScreen', { orderId })}
          style={{ marginBottom: 16 }}
        />
        <Text style={styles.agentName}>Rahul Sharma</Text>
        <Text style={styles.agentRating}>⭐ 4.8</Text>
        <Text style={styles.agentVehicle}>KA-01-AB-1234 • Honda Activa</Text>
        <View style={styles.agentActions}>
          <PrimaryButton
            title="Call"
            onPress={() => {}}
            style={{ flex: 1, marginRight: 8 }}
          />
          <PrimaryButton
            title="Message"
            onPress={() => {}}
            style={{ flex: 1, marginLeft: 8 }}
          />
        </View>
      </View>
    </View>
  );
};