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 battery = data?.batteries?.[0];

  const start = battery?.warranty_start_date
    ? new Date(battery.warranty_start_date)
    : null;
  const end = battery?.warranty_end_date
    ? new Date(battery.warranty_end_date)
    : null;
  const now = new Date();

  let progress = 0;
  let durationText = "---";

  if (
    start &&
    end &&
    !isNaN(start.getTime()) &&
    !isNaN(end.getTime()) &&
    now < end
  ) {
    const totalDuration = end.getTime() - start.getTime();
    const elapsed = now.getTime() - start.getTime();
    const remaining = Math.max(end.getTime() - now.getTime(), 0);

    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)
    );

    durationText = `${yearsLeft} years, ${monthsLeft} months, ${daysLeft} days`;
  }

  const formatDate = (date?: Date | null): string =>
    date && !isNaN(date.getTime())
      ? date.toLocaleDateString("en-GB", {
          day: "2-digit",
          month: "short",
          year: "numeric",
        })
      : "---";

  const isInWarranty =
    start &&
    end &&
    now >= start &&
    now <= end &&
    !isNaN(start.getTime()) &&
    !isNaN(end.getTime());

  return (
    <ScrollView contentContainerStyle={styles.container}>
      {/* Battery Card */}
      <View style={styles.card}>
        <View style={styles.cardHeader}>
          <Text style={styles.cardTitle}>Battery</Text>
          {isInWarranty && (
            <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={durationText} />
        {start && end && !isNaN(start.getTime()) && !isNaN(end.getTime()) && (
          <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,
  },
});
