import { useI18n } from "@/hooks/use-i18n";
import { useThemeContext } from "@/hooks/use-theme-context";
import React from "react";
import { StyleSheet, Text, View } from "react-native";

interface InfoSectionProps {
  fishingLog?: Model.FishingLog;
  stt?: number;
}

export const InfoSection: React.FC<InfoSectionProps> = ({
  fishingLog,
  stt,
}) => {
  const { t } = useI18n();
  const { colors } = useThemeContext();
  const styles = React.useMemo(() => createStyles(colors), [colors]);

  if (!fishingLog) {
    return null;
  }
  const infoItems = [
    {
      label: t("trip.infoSection.sttLabel"),
      value: `${t("trip.infoSection.haulPrefix")} ${stt}`,
    },
    {
      label: t("trip.infoSection.statusLabel"),
      value:
        fishingLog.status === 1
          ? t("trip.infoSection.statusCompleted")
          : t("trip.infoSection.statusPending"),
      isStatus: true,
    },
    {
      label: t("trip.infoSection.startTimeLabel"),
      value: fishingLog.start_at
        ? new Date(fishingLog.start_at).toLocaleString()
        : t("trip.infoSection.notUpdated"),
    },
    {
      label: t("trip.infoSection.endTimeLabel"),
      value:
        fishingLog.end_at.toString() !== "0001-01-01T00:00:00Z"
          ? new Date(fishingLog.end_at).toLocaleString()
          : "-",
    },
  ];

  return (
    <View style={styles.infoCard}>
      {infoItems.map((item, index) => (
        <View key={index} style={styles.infoRow}>
          <Text style={styles.infoLabel}>{item.label}</Text>
          {item.isStatus ? (
            <View
              style={[
                styles.statusBadge,
                item.value === t("trip.infoSection.statusCompleted")
                  ? styles.statusBadgeCompleted
                  : styles.statusBadgeInProgress,
              ]}
            >
              <Text style={styles.statusBadgeText}>{item.value}</Text>
            </View>
          ) : (
            <Text style={styles.infoValue}>{item.value}</Text>
          )}
        </View>
      ))}
    </View>
  );
};

const createStyles = (colors: any) =>
  StyleSheet.create({
    infoCard: {
      borderWidth: 1,
      borderColor: colors.border,
      borderRadius: 8,
      padding: 12,
      marginBottom: 12,
      backgroundColor: colors.surfaceSecondary,
    },
    infoRow: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      marginBottom: 8,
    },
    infoLabel: {
      fontSize: 14,
      fontWeight: "600",
      color: colors.textSecondary,
    },
    infoValue: {
      fontSize: 16,
      color: colors.text,
      paddingVertical: 8,
    },
    statusBadge: {
      paddingVertical: 4,
      paddingHorizontal: 12,
      borderRadius: 12,
      alignItems: "center",
      justifyContent: "center",
    },
    statusBadgeCompleted: {
      backgroundColor: colors.success,
    },
    statusBadgeInProgress: {
      backgroundColor: colors.warning,
    },
    statusBadgeText: {
      fontSize: 14,
      fontWeight: "600",
      color: "#fff",
    },
  });
