import {
  Pressable,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
} from "react-native";
import { useTranslation } from "react-i18next";
import SemiCircleProgress from "../../components/home/SemiCircleProgress";
import { Text, View } from "react-native";
import { useNavigation } from "expo-router";
import { useEffect, useLayoutEffect, useState } from "react";
import { StatusBar } from "expo-status-bar";
import CustomerCareIcon from "../../assets/icons/customer-care.svg";
import ServiceReminderCard from "@/components/home/ServiceReminderCard";
import MetricCard from "@/components/home/MetricCard";
import PaymentDueCard from "@/components/home/PaymentDueCard";
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";
import BatteryWarrantyCard from "@/components/home/BatteryWarrantyCars";
import CustomerSupportModal from "@/components/home/CustomerSupportModal";
import { useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/store";
import LocationOff from "@/assets/icons/location_off.svg";
import { Linking } from "react-native";
import { useRouter } from "expo-router";
import ProfileImage from "@/components/home/Profile";
import { calculateBearing, calculateDistance } from "@/utils/Map";
import { useDispatch } from "react-redux";
import RefreshIcon from "@/assets/icons/refresh.svg";
import { disconnectSocket, initSocket } from "@/services/socket";
import { setTelemetryError, setTelemetryLoading } from "@/store/telemetrySlice";

export default function HomeScreen() {
  const { t } = useTranslation();
  const navigation = useNavigation();
  const [isSupportModalVisible, setIsSupportModalVisible] = useState(false);
  const { SoC, SoH, chargingState, lat, lon, loading, error, totalDistance } =
    useSelector((state: RootState) => state.telemetry);
  const { data } = useSelector((state: RootState) => state.user);
  const [prevPosition, setPrevPosition] = useState<{
    lat: number;
    lon: number;
  } | null>(null);
  const [bearing, setBearing] = useState<number>(0);
  const dispatch = useDispatch<AppDispatch>();
  const vehicle =
    Array.isArray(data?.vehicles) && data.vehicles.length > 0
      ? data.vehicles[0]
      : null;
  const battery =
    Array.isArray(data?.batteries) && data.batteries.length > 0
      ? data.batteries[0]
      : null;

  const model = vehicle?.model ?? "---";
  const chasisNumber = vehicle?.chasis_number ?? "---";
  const warrantyStartDate = data?.batteries[0]?.warranty_start_date || null;
  const warrantyEndDate = data?.batteries[0]?.warranty_end_date || null;

  useEffect(() => {
    if (lat && lon) {
      if (prevPosition) {
        // Calculate bearing between prev and current position
        const newBearing = calculateBearing(
          prevPosition.lat,
          prevPosition.lon,
          lat,
          lon
        );
        setBearing(newBearing);
      }
      setPrevPosition({ lat, lon }); // Update previous position
    }
  }, [lat, lon]);

  useEffect(() => {
    if (lat && lon) {
      if (prevPosition) {
        const distance = calculateDistance(
          prevPosition.lat,
          prevPosition.lon,
          lat,
          lon
        );
        if (distance > 5) {
          // Only update bearing if moved >5 meters
          const newBearing = calculateBearing(
            prevPosition.lat,
            prevPosition.lon,
            lat,
            lon
          );
          setBearing(newBearing);
        }
      }
      setPrevPosition({ lat, lon });
    }
  }, [lat, lon]);
  const router = useRouter();

  useLayoutEffect(() => {
    navigation.setOptions({
      headerStyle: {
        backgroundColor: "#F3F5F8",
      },
      headerTitle: () => (
        <View style={styles.headerTitleContainer}>
          <Text style={styles.title}>{model}</Text>
          <Text style={styles.subtitle}>{chasisNumber}</Text>
        </View>
      ),
      headerRight: () => (
        <View style={styles.rightContainer}>
          <Pressable onPress={() => handleManualRefresh()}>
            <RefreshIcon width={50} height={50} />
          </Pressable>
          <Pressable
            style={styles.supportButton}
            onPress={() => {
              console.log("Support Pressed");
              setIsSupportModalVisible(true);
            }}
          >
            <CustomerCareIcon width={50} height={50} />
          </Pressable>
          <Pressable
            onPress={() => {
              router.push("/user/profile");
            }}
          >
            <ProfileImage
              username={data?.name || "Vec"}
              onClick={() => router.push("/user/profile")}
              textSize={20}
              boxSize={40}
            />
          </Pressable>
        </View>
      ),
    });
  }, [navigation, data, model, chasisNumber]);

  const openInGoogleMaps = () => {
    const url = `https://www.google.com/maps/search/?api=1&query=${lat},${lon}`;
    Linking.openURL(url).catch((err) =>
      console.error("Failed to open Google Maps:", err)
    );
  };

  const handleManualRefresh = async () => {
    dispatch(setTelemetryLoading());

    try {
      disconnectSocket();
      await initSocket();
    } catch (err) {
      console.error("Refresh failed", err);
      dispatch(setTelemetryError("Refresh failed"));
    }
  };

  return (
    <View style={{ flex: 1, backgroundColor: "#F3F5F8" }}>
      <StatusBar style="dark" />
      <ScrollView contentContainerStyle={styles.container} style={{ flex: 1 }}>
        <ServiceReminderCard
          type="info"
          message="Service will be due in 3 days"
          subMessage="Service Reminder"
        />
        <View style={styles.iconContainer}>
          <SemiCircleProgress progress={SoC} status={chargingState} />
        </View>
        <View style={styles.metrics}>
          <MetricCard heading={t("home.battery-health")} value={SoH} unit="%" />
          <MetricCard
            heading={t("home.total-distance")}
            value={totalDistance}
            unit="km"
          />
        </View>
        <PaymentDueCard
          label="Payment Due"
          amount="$2,000"
          onPress={() => {
            alert("le is number pe bhej de 8685846459");
          }}
        />
        <View style={styles.map}>
          {loading ? (
            <View style={styles.errorContainer}>
              <LocationOff />
              <Text style={styles.errorText}>Fetching Location...</Text>
            </View>
          ) : lat != null && lon != null ? (
            <>
              <View style={styles.mapContainer}>
                <MapView
                  provider={PROVIDER_GOOGLE}
                  style={styles.mapStyle}
                  region={{
                    latitude: lat,
                    longitude: lon,
                    latitudeDelta: 0.0922,
                    longitudeDelta: 0.0421,
                  }}
                  // customMapStyle={mapStyle}
                  userInterfaceStyle="light"
                >
                  <Marker
                    draggable
                    coordinate={{
                      latitude: lat,
                      longitude: lon,
                    }}
                    rotation={bearing}
                    anchor={{ x: 0.5, y: 0.5 }}
                    tracksViewChanges={false}
                    image={require("../../assets/images/marker.png")}
                  />
                </MapView>
              </View>
              <TouchableOpacity>
                <Text
                  style={styles.viewLocationText}
                  onPress={openInGoogleMaps}
                >
                  View Vehicle Location
                </Text>
              </TouchableOpacity>
            </>
          ) : (
            error && (
              <View style={styles.errorContainer}>
                <LocationOff />
                <Text style={styles.errorText}>Error fetching location</Text>
              </View>
            )
          )}
        </View>
        {warrantyEndDate && warrantyStartDate && (
          <BatteryWarrantyCard
            warrantyStartDate={warrantyStartDate}
            warrantyEndDate={warrantyEndDate}
          />
        )}
      </ScrollView>
      <CustomerSupportModal
        visible={isSupportModalVisible}
        onClose={() => setIsSupportModalVisible(false)}
      />
    </View>
  );
}

const mapStyle = [
  { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
  { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
  { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
  {
    featureType: "administrative.locality",
    elementType: "labels.text.fill",
    stylers: [{ color: "#d59563" }],
  },
  {
    featureType: "poi",
    elementType: "labels.text.fill",
    stylers: [{ color: "#d59563" }],
  },
  {
    featureType: "poi.park",
    elementType: "geometry",
    stylers: [{ color: "#263c3f" }],
  },
  {
    featureType: "poi.park",
    elementType: "labels.text.fill",
    stylers: [{ color: "#6b9a76" }],
  },
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [{ color: "#38414e" }],
  },
  {
    featureType: "road",
    elementType: "geometry.stroke",
    stylers: [{ color: "#212a37" }],
  },
  {
    featureType: "road",
    elementType: "labels.text.fill",
    stylers: [{ color: "#9ca5b3" }],
  },
  {
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [{ color: "#746855" }],
  },
  {
    featureType: "road.highway",
    elementType: "geometry.stroke",
    stylers: [{ color: "#1f2835" }],
  },
  {
    featureType: "road.highway",
    elementType: "labels.text.fill",
    stylers: [{ color: "#f3d19c" }],
  },
  {
    featureType: "transit",
    elementType: "geometry",
    stylers: [{ color: "#2f3948" }],
  },
  {
    featureType: "transit.station",
    elementType: "labels.text.fill",
    stylers: [{ color: "#d59563" }],
  },
  {
    featureType: "water",
    elementType: "geometry",
    stylers: [{ color: "#17263c" }],
  },
  {
    featureType: "water",
    elementType: "labels.text.fill",
    stylers: [{ color: "#515c6d" }],
  },
  {
    featureType: "water",
    elementType: "labels.text.stroke",
    stylers: [{ color: "#17263c" }],
  },
];

const styles = StyleSheet.create({
  errorText: {
    color: "#565F70",
    fontWeight: "400",
    fontSize: 16,
    textAlign: "center",
  },
  errorContainer: {
    height: 255,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#FCFCFC",
    gap: 8,
  },
  viewLocationText: {
    color: "#388E3C",
    fontWeight: "600",
    fontSize: 16,
    textAlign: "center",
    marginTop: 8,
  },
  map: {
    padding: 12,
    borderRadius: 10,
    overflow: "hidden",
    backgroundColor: "#fff",
  },
  mapContainer: {
    height: 255,
  },
  mapStyle: {
    width: "100%",
    height: "100%",
    borderRadius: 10,
  },
  metrics: {
    flexDirection: "row",
    justifyContent: "space-between",
    backgroundColor: "#F3F5F8",
  },
  container: {
    padding: 16,
    gap: 16,
    paddingBottom: 110,
  },
  iconContainer: {
    backgroundColor: "#FCFCFC",
  },
  supportButton: {
    backgroundColor: "#F3F5F8",
  },
  headerTitleContainer: {
    flexDirection: "column",
    backgroundColor: "#F3F5F8",
  },
  title: {
    fontSize: 14,
    color: "#6B7280",
    fontWeight: "500",
  },
  subtitle: {
    fontSize: 18,
    color: "#111827",
    fontWeight: "700",
  },
  rightContainer: {
    flexDirection: "row",
    alignItems: "center",
    paddingRight: 16,
    gap: 4,
    backgroundColor: "#F3F5F8",
  },
  badge: {
    backgroundColor: "#FEE2E2",
    borderRadius: 20,
    width: 30,
    height: 30,
    justifyContent: "center",
    alignItems: "center",
  },
  badgeText: {
    color: "#DC2626",
    fontWeight: "700",
  },
});