import { IconSymbol } from "@/components/ui/icon-symbol";
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,
}) => {
  if (!crewData) return null;

  const infoItems = [
    { label: "Mã định danh", value: crewData.Person.personal_id },
    { label: "Họ và tên", value: crewData.Person.name },
    { label: "Chức vụ", value: crewData.role },
    {
      label: "Ngày sinh",
      value: crewData.Person.birth_date
        ? new Date(crewData.Person.birth_date).toLocaleDateString()
        : "Chưa cập nhật",
    },
    { label: "Số điện thoại", value: crewData.Person.phone || "Chưa cập nhật" },
    { label: "Địa chỉ", value: crewData.Person.address || "Chưa cập nhật" },
    {
      label: "Ngày vào làm",
      value: crewData.joined_at
        ? new Date(crewData.joined_at).toLocaleDateString()
        : "Chưa cập nhật",
    },
    { label: "Ghi chú", value: crewData.note || "Chưa cập nhật" },
    {
      label: "Tình trạng",
      value: crewData.left_at ? "Đã nghỉ" : "Đang làm việc",
    },
  ];

  return (
    <Modal
      visible={visible}
      animationType="slide"
      presentationStyle="pageSheet"
      onRequestClose={onClose}
    >
      <View style={styles.container}>
        {/* Header */}
        <View style={styles.header}>
          <Text style={styles.title}>Thông tin thuyền viên</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;