import React, { useEffect } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  SafeAreaView,
  StatusBar,
  ActivityIndicator,
} from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../store/rootReducer"; // Adjust path as needed
import { getUserDetails } from "../../store/userSlice";
import { AppDispatch } from "@/store";
import Header from "@/components/common/Header";

interface MyVehicleScreenProps {
  navigation?: any; // Replace with proper navigation type
}

const MyVehicleScreen: React.FC<MyVehicleScreenProps> = ({ navigation }) => {
  const dispatch = useDispatch<AppDispatch>();
  const {
    data: userData,
    loading,
    error,
  } = useSelector((state: RootState) => state.user);

  useEffect(() => {
    // Fetch user details when component mounts
    if (!userData) {
      dispatch(getUserDetails());
    }
  }, [dispatch, userData]);

  // Get the first vehicle from the user data
  const vehicle = userData?.vehicles?.[0];

  if (loading) {
    return (
      <SafeAreaView style={styles.container}>
        <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#25324B" />
          <Text style={styles.loadingText}>Loading vehicle details...</Text>
        </View>
      </SafeAreaView>
    );
  }

  if (error) {
    return (
      <SafeAreaView style={styles.container}>
        <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
        <View style={styles.errorContainer}>
          <Text style={styles.errorText}>Error: {error}</Text>
        </View>
      </SafeAreaView>
    );
  }

  return (
    <>
      <Header title="My Vehicle" showBackButton={true} />
      <View style={styles.content}>
        <View style={styles.itemContainer}>
          {/* OEM - Model */}
          <View style={styles.item}>
            <Text style={styles.label}>OEM - Model</Text>
            <Text style={styles.value}>
              {vehicle?.model ? `Yatri - ${vehicle.model}` : "--"}
            </Text>
          </View>

          <View style={styles.divider} />

          {/* Chassis Number */}
          <View style={styles.item}>
            <Text style={styles.label}>Chassis Number</Text>
            <Text style={styles.value}>{vehicle?.chasis_number || "--"}</Text>
          </View>

          <View style={styles.divider} />

          {/* Vehicle ID */}
          <View style={styles.item}>
            <Text style={styles.label}>Vehicle ID</Text>
            <Text style={styles.value}>
              {vehicle?.vehicle_id ? vehicle.vehicle_id.toString() : "--"}
            </Text>
          </View>
        </View>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ffffff",
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: "#f0f0f0",
  },
  backButton: {
    marginRight: 12,
    padding: 4,
  },
  backIcon: {
    width: 24,
    height: 24,
    justifyContent: "center",
    alignItems: "center",
  },
  backIconText: {
    fontSize: 20,
    fontWeight: "600",
    color: "#25324B",
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: "600",
    color: "#25324B",
  },
  content: {
    flex: 1,
    paddingHorizontal: 16,
    paddingTop: 16,
  },
  itemContainer: {
    backgroundColor: "#FCFCFC",
    borderRadius: 8,
    overflow: "hidden",
  },
  item: {
    paddingHorizontal: 16,
    paddingVertical: 16,
  },
  label: {
    fontSize: 14,
    color: "#25324B",
    fontWeight: "400",
    marginBottom: 4,
    lineHeight: 20,
  },
  value: {
    fontSize: 14,
    color: "#25324B",
    fontWeight: "600",
    lineHeight: 20,
  },
  divider: {
    height: 1,
    backgroundColor: "#E5E9F0",
    marginHorizontal: 16,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  loadingText: {
    marginTop: 16,
    fontSize: 16,
    color: "#25324B",
  },
  errorContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 16,
  },
  errorText: {
    fontSize: 16,
    color: "#FF6B6B",
    textAlign: "center",
  },
});

export default MyVehicleScreen;