import React, { useEffect } from 'react';
import { View, StyleSheet, Platform, Text, Image, TouchableOpacity } from 'react-native';
import { AMapSdk, MapView, Marker, MapType } from 'react-native-amap3d';
import LinearGradient from 'react-native-linear-gradient';
import { rpx } from '../../utils/rpx';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';

type RootStackParamList = {
  Home: undefined;
  DeviceList: undefined;
  DeviceMap: {
    sn: string;
  };
};

interface DeviceControlProps {
  defaultDevice: any;
}

type NavigationProp = StackNavigationProp<RootStackParamList>;

const MiniMap: React.FC<DeviceControlProps> = ({ defaultDevice }) => {
  const navigation = useNavigation<NavigationProp>();

  // 确保经纬度是数字类型，使用设备的实际定位
  const latitude = defaultDevice?.latitude ? parseFloat(defaultDevice.latitude) : 26.95500669;
  const longitude = defaultDevice?.longitude ? parseFloat(defaultDevice.longitude) : 120.32736769;
  // const address = defaultDevice?.location || '位置获取中...';
  // console.log(defaultDevice.latitude, defaultDevice.longitude, 'defaultDevice');
  // console.log(latitude, longitude, 'latitude, longitude');
  // 格式化更新时间
  const formatUpdateTime = (timeStr: string): string => {
    if (!timeStr) return '未知';
    
    const timestamp = new Date(timeStr).getTime();
    const now = Date.now();
    const diff = now - timestamp;
    
    if (diff < 60000) { // 小于1分钟
      return '刚刚';
    } else if (diff < 3600000) { // 小于1小时
      return `${Math.floor(diff / 60000)}分钟前`;
    } else if (diff < 86400000) { // 小于24小时
      return `${Math.floor(diff / 3600000)}小时前`;
    } else {
      return `${Math.floor(diff / 86400000)}天前`;
    }
  };

  const updateTime = defaultDevice?.lastLocationTime ? formatUpdateTime(defaultDevice.lastLocationTime) : '未知';

  const handleMapPress = () => {
    navigation.navigate('DeviceMap', {
      sn: defaultDevice?.sn || ''
    });
  };

  return (
   
    <View style={styles.container}>
       { defaultDevice&&(
      <MapView
      style={styles.map}
      mapType={MapType.Standard}
      zoomControlsEnabled={false}
      // scrollEnabled={false}
      // zoomEnabled={true}
      initialCameraPosition={{
        target: {
          latitude: latitude,
          longitude: longitude,
        },
        zoom: 15,
      }}
    >
      <Marker
        position={{
          latitude: latitude,
          longitude: longitude,
        }}
        icon={{ uri: "https://lxnapi.ccttiot.com/bike/img/static/uRx1B8B8acbquF2TO7Ry" }}
      />
    </MapView>
    )}
      
      
      <LinearGradient
        colors={[
          'rgba(255,255,255,1)',
          'rgba(255,255,255,0.9)',
          'rgba(255,255,255,0)',
        ]}
        locations={[0, 0.6, 1]}
        start={{ x: 0, y: 0 }}
        end={{ x: 0, y: 1 }}
        style={styles.mapTop}
        pointerEvents="box-none"
      >
        <TouchableOpacity 
          style={styles.contentContainer}
          onPress={handleMapPress}
          activeOpacity={0.8}
        >
          <View style={styles.cont_left}>
            <View style={styles.cont_left_top}>
              <Text style={styles.cont_left_top_txt}>
                上次车辆位置
              </Text>
              <Text style={styles.updata}>
                更新于 {updateTime}
              </Text>
            </View>
            {/* <Text style={styles.cont_left_bot} numberOfLines={2} ellipsizeMode="tail">
              {address}
            </Text> */}
          </View>
          <View style={styles.cont_right}>
            <Image
              source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uoWXZvZN5ynoS4CDFM4k' }}
              style={styles.rightIcon}
            />
          </View>
        </TouchableOpacity>
      </LinearGradient>
    </View>
  );
};

const styles = StyleSheet.create({
  contentContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: rpx(24),
    paddingTop: rpx(-20),
    height: '100%',
  },
  cont_left: {
    flex: 1,
    marginRight: rpx(20),
  },
  cont_left_top: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: rpx(8),
  },
  cont_left_top_txt: {
    fontWeight: '500',
    fontSize: rpx(36),
    color: '#3D3D3D',
    marginRight: rpx(12),
  },
  updata: {
    fontWeight: '400',
    fontSize: rpx(24),
    color: '#808080',
  },
  cont_left_bot: {
    fontWeight: '400',
    fontSize: rpx(24),
    color: '#3D3D3D',
  },
  cont_right: {
    width: rpx(48),
    height: rpx(48),
    justifyContent: 'center',
    alignItems: 'center',
  },
  rightIcon: {
    width: rpx(32),
    height: rpx(32),
  },
  container: {
    marginTop: rpx(44),
    width: rpx(688),
    height: rpx(380),
    borderRadius: rpx(20),
    overflow: 'hidden',
    position: 'relative',
  },
  mapTop: {
    position: 'absolute',
    left: rpx(0),
    top: rpx(0),
    width: rpx(688),
    height: rpx(160),
    zIndex: 999,
    elevation: 3,
  },
  map: {
    width: '100%',
    height: '100%',
    zIndex: 1,
  },
});

export default MiniMap;