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 LocationMap from "@/components/home/LocationMap";
import BatteryWarrantyCard from "@/components/home/BatteryWarrantyCars";
import CustomerSupportModal from "@/components/home/CustomerSupportModal";

export default function HomeScreen() {
  const { t } = useTranslation();
  const navigation = useNavigation();
  const [isSupportModalVisible, setIsSupportModalVisible] = useState(false);

  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={90} status={1} />
        </View>
        <View style={styles.metrics}>
          <MetricCard heading="SoH" value="90%" />
          <MetricCard heading="Total Distance" value="20009 km" />
        </View>
        <PaymentDueCard
          label="Payment Due"
          amount="$2,000"
          onPress={() => {}}
        />
        {/* <LocationMap latitude={12.9716} longitude={77.5946} /> */}
        <BatteryWarrantyCard
          totalWarrantyYears={8}
          batteryPurchaseEpoch={Math.floor(
            new Date("2023-06-30").getTime() / 1000
          )}
        />
      </View>
      <CustomerSupportModal
        visible={isSupportModalVisible}
        onClose={() => setIsSupportModalVisible(false)}
      />
    </>
  );
}

const styles = StyleSheet.create({
  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",
  },
});