sgw-owner-app/components/diary/TripDetailSections/AlertsSection.tsx

import React from "react";
import { View, Text, StyleSheet, Platform } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useThemeContext } from "@/hooks/use-theme-context";
import { useI18n } from "@/hooks/use-i18n";
import SectionCard from "./SectionCard";

interface AlertsSectionProps {
  alerts?: Model.Alarm[];
}

export default function AlertsSection({ alerts = [] }: AlertsSectionProps) {
  const { t } = useI18n();
  const { colors } = useThemeContext();

  const getAlertLevelColor = (level?: number) => {
    const isDark =
      colors.background === "#1C1C1E" ||
      colors.background === "#000000" ||
      colors.background?.toLowerCase().includes("1c1c1e");

    switch (level) {
      case 0: // Bình thường - Blue/Info
        return isDark
          ? { bg: "#172554", text: "#93C5FD" } // Dark blue
          : { bg: "#DBEAFE", text: "#1E40AF" };
      case 1: // Warning - Yellow
        return isDark
          ? { bg: "#422006", text: "#FCD34D" } // Dark amber
          : { bg: "#FEF3C7", text: "#92400E" };
      case 2: // Error - Red
        return isDark
          ? { bg: "#450A0A", text: "#FCA5A5" } // Dark red
          : { bg: "#FEE2E2", text: "#991B1B" };
      case 3: // SOS - Critical Red
        return isDark
          ? { bg: "#7F1D1D", text: "#FFFFFF" } // Dark critical
          : { bg: "#DC2626", text: "#FFFFFF" };
      default: // Default - Gray
        return isDark
          ? { bg: "#374151", text: "#D1D5DB" } // Dark gray
          : { bg: "#F3F4F6", text: "#4B5563" };
    }
  };

  const formatTime = (timestamp?: number) => {
    if (!timestamp) return "--";
    const date = new Date(timestamp * 1000);
    return date.toLocaleString("vi-VN");
  };

  return (
    <SectionCard
      title={t("diary.tripDetail.alerts")}
      icon="warning-outline"
      count={alerts.length}
      collapsible
      //defaultExpanded={alerts.length > 0}
      defaultExpanded
    >
      {alerts.length === 0 ? (
        <View style={styles.emptyContainer}>
          <Ionicons
            name="checkmark-circle-outline"
            size={40}
            color={colors.success || "#22C55E"}
          />
          <Text style={[styles.emptyText, { color: colors.textSecondary }]}>
            {t("diary.tripDetail.noAlerts")}
          </Text>
        </View>
      ) : (
        <View style={styles.list}>
          {alerts.map((alert, index) => {
            const levelColor = getAlertLevelColor(alert.level);
            return (
              <View
                key={alert.id || index}
                style={[styles.alertItem, { backgroundColor: levelColor.bg }]}
              >
                <View style={styles.alertHeader}>
                  <View style={styles.alertInfo}>
                    <Ionicons
                      name={alert.level === 1 ? "alert-circle" : "warning"}
                      size={18}
                      color={levelColor.text}
                    />
                    <Text
                      style={[styles.alertName, { color: levelColor.text }]}
                    >
                      {alert.name || t("diary.tripDetail.unknownAlert")}
                    </Text>
                  </View>
                  {alert.confirmed && (
                    <View
                      style={[
                        styles.confirmedBadge,
                        { backgroundColor: colors.success || "#22C55E" },
                      ]}
                    >
                      <Text style={styles.confirmedText}>
                        {t("diary.tripDetail.confirmed")}
                      </Text>
                    </View>
                  )}
                </View>
                <Text style={[styles.alertTime, { color: levelColor.text }]}>
                  {formatTime(alert.time)}
                </Text>
              </View>
            );
          })}
        </View>
      )}
    </SectionCard>
  );
}

const styles = StyleSheet.create({
  emptyContainer: {
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 24,
    gap: 8,
  },
  emptyText: {
    fontSize: 14,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  list: {
    gap: 10,
  },
  alertItem: {
    padding: 12,
    borderRadius: 8,
  },
  alertHeader: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 4,
  },
  alertInfo: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
    flex: 1,
  },
  alertName: {
    fontSize: 14,
    fontWeight: "600",
    flex: 1,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  alertTime: {
    fontSize: 12,
    marginLeft: 26,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  confirmedBadge: {
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 4,
  },
  confirmedText: {
    color: "#FFFFFF",
    fontSize: 11,
    fontWeight: "600",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
});