import { IconSymbol } from "@/components/ui/icon-symbol";
import { useI18n } from "@/hooks/use-i18n";
import React from "react";
import { Modal, ScrollView, Text, TouchableOpacity, View } from "react-native";
import styles from "./style/CrewDetailModal.styles";

// ---------------------------
// 🧩 Interface
// ---------------------------

interface CrewDetailModalProps {
  visible: boolean;
  onClose: () => void;
  crewData: Model.TripCrews | null;
}

// ---------------------------
// 👤 Component Modal
// ---------------------------
const CrewDetailModal: React.FC<CrewDetailModalProps> = ({
  visible,
  onClose,
  crewData,
}) => {
  const { t } = useI18n();

  if (!crewData) return null;

  const infoItems = [
    {
      label: t("trip.crewDetailModal.personalId"),
      value: crewData.Person.personal_id,
    },
    { label: t("trip.crewDetailModal.fullName"), value: crewData.Person.name },
    { label: t("trip.crewDetailModal.role"), value: crewData.role },
    {
      label: t("trip.crewDetailModal.birthDate"),
      value: crewData.Person.birth_date
        ? new Date(crewData.Person.birth_date).toLocaleDateString()
        : t("trip.crewDetailModal.notUpdated"),
    },
    {
      label: t("trip.crewDetailModal.phone"),
      value: crewData.Person.phone || t("trip.crewDetailModal.notUpdated"),
    },
    {
      label: t("trip.crewDetailModal.address"),
      value: crewData.Person.address || t("trip.crewDetailModal.notUpdated"),
    },
    {
      label: t("trip.crewDetailModal.joinedDate"),
      value: crewData.joined_at
        ? new Date(crewData.joined_at).toLocaleDateString()
        : t("trip.crewDetailModal.notUpdated"),
    },
    {
      label: t("trip.crewDetailModal.note"),
      value: crewData.note || t("trip.crewDetailModal.notUpdated"),
    },
    {
      label: t("trip.crewDetailModal.status"),
      value: crewData.left_at
        ? t("trip.crewDetailModal.resigned")
        : t("trip.crewDetailModal.working"),
    },
  ];

  return (
    <Modal
      visible={visible}
      animationType="slide"
      presentationStyle="pageSheet"
      onRequestClose={onClose}
    >
      <View style={styles.container}>
        {/* Header */}
        <View style={styles.header}>
          <Text style={styles.title}>{t("trip.crewDetailModal.title")}</Text>
          <TouchableOpacity onPress={onClose} style={styles.closeButton}>
            <View style={styles.closeIconButton}>
              <IconSymbol name="xmark" size={28} color="#fff" />
            </View>
          </TouchableOpacity>
        </View>

        {/* Content */}
        <ScrollView style={styles.content}>
          <View style={styles.infoCard}>
            {infoItems.map((item, index) => (
              <View key={index} style={styles.infoRow}>
                <Text style={styles.infoLabel}>{item.label}</Text>
                <Text style={styles.infoValue}>{item.value}</Text>
              </View>
            ))}
          </View>
        </ScrollView>
      </View>
    </Modal>
  );
};

export default CrewDetailModal;