BaaS_Driver_Android_App/app/(tabs)/my-battery.tsx

import { RootState } from "@/store";
import React from "react";
import { View, Text, StyleSheet, ScrollView } from "react-native";
import { useSelector } from "react-redux";
const BatteryDetails = () => {
  const { data } = useSelector((state: RootState) => state.user);

  const model = data?.batteries[0]?.battery_model ?? "---";
  const batteryId = data?.batteries[0]?.battery_id ?? "---";
  const bmsId = data?.batteries[0]?.bms_id ?? "---";
  const warrantyStartDate = data?.batteries[0]?.warranty_start_date ?? "---";
  const warrantyEndDate = data?.batteries[0]?.warranty_end_date ?? "---";
  const vimId = data?.batteries[0]?.vim_id ?? "---";
  const serialNumber = data?.batteries[0]?.serial_no ?? "---";
  const chargerUid = data?.batteries[0]?.charger_uid ?? "---";
  const start = new Date(warrantyStartDate);
  const end = new Date(warrantyEndDate);
  const now = new Date();

  const totalDuration = end.getTime() - start.getTime();
  const elapsed = now.getTime() - start.getTime();
  const remaining = Math.max(end.getTime() - now.getTime(), 0);

  const progress = Math.min(elapsed / totalDuration, 1);

  const yearsLeft = Math.floor(remaining / (365.25 * 24 * 60 * 60 * 1000));
  const monthsLeft = Math.floor(
    (remaining % (365.25 * 24 * 60 * 60 * 1000)) / (30.44 * 24 * 60 * 60 * 1000)
  );
  const daysLeft = Math.floor(
    (remaining % (30.44 * 24 * 60 * 60 * 1000)) / (24 * 60 * 60 * 1000)
  );

  const formatDate = (date: Date): string =>
    date.toLocaleDateString("en-GB", {
      day: "2-digit",
      month: "short",
      year: "numeric",
    });

  return (
    <ScrollView contentContainerStyle={styles.container}>
      {/* Battery Card */}
      <View style={styles.card}>
        <View style={styles.cardHeader}>
          <Text style={styles.cardTitle}>Battery</Text>
          <View style={styles.badge}>
            <Text style={styles.badgeText}>In Warranty</Text>
          </View>
        </View>
        <View style={styles.divider} />
        <InfoRow label="Model" value={model} />
        <InfoRow label="Battery ID" value={batteryId} />
        <InfoRow label="BMS ID" value={bmsId} />
      </View>

      {/* Warranty Details */}
      <View style={styles.card}>
        <Text style={styles.cardTitle}>Battery Warranty Details</Text>
        <View style={styles.divider} />
        <InfoRow label="Start Date" value={formatDate(start)} />
        <InfoRow label="End Date" value={formatDate(end)} />
        <InfoRow
          label="Duration Left"
          value={`${yearsLeft} years, ${monthsLeft} months, ${daysLeft} days`}
        />
        <View style={styles.progressBarBackground}>
          <View
            style={[
              styles.progressBarFill,
              { width: `${(1 - progress) * 100}%` },
            ]}
          />
        </View>
      </View>

      {/* VIM Details */}
      <View style={styles.card}>
        <Text style={styles.cardTitle}>VIM Details</Text>
        <View style={styles.divider} />
        <InfoRow label="VIM ID" value={vimId} />
        <InfoRow label="Serial Number" value={serialNumber} />
      </View>

      {/* Charger Details */}
      <View style={styles.card}>
        <Text style={styles.cardTitle}>Charger Details</Text>
        <View style={styles.divider} />
        <InfoRow label="UID" value={chargerUid} />
      </View>
    </ScrollView>
  );
};

type InfoRowProps = {
  label: string;
  value: string;
};

const InfoRow: React.FC<InfoRowProps> = ({ label, value }) => (
  <View style={styles.infoRow}>
    <Text style={styles.label}>{label}</Text>
    <Text style={styles.value}>{value}</Text>
  </View>
);

export default BatteryDetails;

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#F3F5F8",
    padding: 16,
  },
  card: {
    backgroundColor: "#FCFCFC",
    borderRadius: 8,
    padding: 12,
    marginBottom: 16,
  },
  cardHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  cardTitle: {
    fontSize: 14,
    fontWeight: "600",
    color: "#252A34",
  },
  badge: {
    backgroundColor: "#DAF5ED",
    paddingVertical: 2,
    paddingHorizontal: 8,
    borderRadius: 4,
  },
  badgeText: {
    fontSize: 12,
    fontWeight: "500",
    color: "#006C4D",
  },
  divider: {
    height: 1,
    backgroundColor: "#e5e9f0",
    marginVertical: 12,
  },
  infoRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingVertical: 4,
  },
  label: {
    fontSize: 14,
    color: "#252A34",
  },
  value: {
    fontSize: 14,
    fontWeight: "600",
    color: "#252A34",
  },
  progressBarBackground: {
    height: 8,
    backgroundColor: "#E5E9F0",
    borderRadius: 10,
    overflow: "hidden",
    marginTop: 16,
  },
  progressBarFill: {
    height: 8,
    backgroundColor: "#00825B",
    borderRadius: 10,
  },
});