import { ScrollView, Text, View } from "react-native";

import { UserLoginLog } from "@/store/api/usersApi";
import { formatDate, formatTimeWithSeconds } from "@/utils/dateUtils";
import { reasonLabel } from "@/utils/loginUtils";

interface MobileLogsTableProps {
  logs: UserLoginLog[] | null | undefined;
}

export const MobileLogsTable = ({ logs }: MobileLogsTableProps) => {
  return (
    <View className="flex-1">
      <ScrollView
        className="flex-1"
        contentContainerStyle={{ paddingBottom: 16 }}
      >
        {logs?.map((log) => (
          <View key={log.id} className="mb-3 p-4 bg-white rounded-md shadow-sm">
            <Text className="text-base font-semibold">
              {log.name}{" "}
              <Text className="font-normal text-gray-600">({log.email})</Text>
            </Text>
            <Text className="text-sm text-gray-700 mt-1">
              Time: {formatDate(log.lastLoginAt)}{" "}
              {formatTimeWithSeconds(log.lastLoginAt)}
            </Text>
            <Text
              className="text-sm mt-1"
              style={{
                color: log.status === "FAILURE" ? "#F83434" : "#22C927",
              }}
            >
              Login activity: {log.activity}
              {log.status === "FAILURE" && reasonLabel(log.failureReason)
                ? ` - ${reasonLabel(log.failureReason)}`
                : ""}
            </Text>
          </View>
        ))}
      </ScrollView>
    </View>
  );
};