import { Pressable, StyleSheet } from "react-native";
import { useTranslation } from "react-i18next";
import SemiCircleProgress from "../../components/home/SemiCircleProgress";
import { Text, View } from "@/components/Themed";
import { useNavigation } from "expo-router";
import { useLayoutEffect, useState } from "react";
import { StatusBar } from "expo-status-bar";
import Profile from "../../components/home/Profile";
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 } from "react-native-maps";
import BatteryWarrantyCard from "@/components/home/BatteryWarrantyCars";
import CustomerSupportModal from "@/components/home/CustomerSupportModal";
import { useSelector } from "react-redux";
import { RootState } from "@/store";

export default function HomeScreen() {
  const { t } = useTranslation();
  const navigation = useNavigation();
  const [isSupportModalVisible, setIsSupportModalVisible] = useState(false);
  const { SoC, SoH, chargingState } = useSelector(
    (state: RootState) => state.telemetry
  );

  useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: () => (
        <View style={styles.headerTitleContainer}>
          <Text style={styles.title}>Yatri - NBX 600</Text>
          <Text style={styles.subtitle}>DL253C3602</Text>
        </View>
      ),
      headerRight: () => (
        <View style={styles.rightContainer}>
          <Pressable
            style={styles.iconContainer}
            onPress={() => setIsSupportModalVisible(true)}
          >
            <CustomerCareIcon />
          </Pressable>
          <Profile username="Vishal" textSize={16} boxSize={32} />
        </View>
      ),
    });
  }, [navigation]);

  return (
    <>
      <StatusBar style="dark" />
      <View style={styles.container}>
        <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="SoH" value={SoH} unit="%" />
          <MetricCard heading="Total Distance" value={20009} unit="km" />
        </View>
        <PaymentDueCard
          label="Payment Due"
          amount="$2,000"
          onPress={() => {}}
        />
        <View style={styles.mapContainer}>
          <MapView
            style={styles.mapStyle}
            initialRegion={{
              latitude: 28.54,
              longitude: 77.32,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
            }}
            // customMapStyle={mapStyle}
          >
            <Marker
              draggable
              coordinate={{
                latitude: 37.78825,
                longitude: -122.4324,
              }}
              anchor={{ x: 0.5, y: 0.5 }}
              onDragEnd={(e) => alert(JSON.stringify(e.nativeEvent.coordinate))}
              title={"Test Marker"}
              description={"This is a description of the marker"}
            />
          </MapView>
        </View>

        <BatteryWarrantyCard
          totalWarrantyYears={8}
          batteryPurchaseEpoch={Math.floor(
            new Date("2023-06-30").getTime() / 1000
          )}
        />
      </View>
      <CustomerSupportModal
        visible={isSupportModalVisible}
        onClose={() => setIsSupportModalVisible(false)}
      />
    </>
  );
}

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({
  mapContainer: {
    flex: 1,
    borderRadius: 10,
    overflow: "hidden",
  },
  mapStyle: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  metrics: {
    flexDirection: "row",
    justifyContent: "space-between",
    backgroundColor: "#F3F5F8",
  },
  container: {
    flex: 1,
    backgroundColor: "#F3F5F8",
    padding: 16,
    gap: 16,
  },
  iconContainer: {
    backgroundColor: "#fff",
  },
  headerTitleContainer: {
    flexDirection: "column",
    backgroundColor: "#fff",
  },
  title: {
    fontSize: 14,
    color: "#6B7280",
    fontWeight: "500",
  },
  subtitle: {
    fontSize: 18,
    color: "#111827",
    fontWeight: "700",
  },
  rightContainer: {
    flexDirection: "row",
    alignItems: "center",
    paddingRight: 16,
    gap: 8,
    backgroundColor: "#fff",
  },
  badge: {
    backgroundColor: "#FEE2E2",
    borderRadius: 20,
    width: 30,
    height: 30,
    justifyContent: "center",
    alignItems: "center",
  },
  badgeText: {
    color: "#DC2626",
    fontWeight: "700",
  },
});