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 CrewMember {
  id: string;
  maDinhDanh: string;
  ten: string;
  chucVu: string;
  ngaySinh?: string;
  cccd?: string;
  soDienThoai?: string;
  diaChi?: string;
  ngayVaoLam?: string;
  trinhDoChuyenMon?: string;
  bangCap?: string;
  tinhTrang?: string;
}

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

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

  const infoItems = [
    { label: "Mã định danh", value: crewData.maDinhDanh },
    { label: "Họ và tên", value: crewData.ten },
    { label: "Chức vụ", value: crewData.chucVu },
    { label: "Ngày sinh", value: crewData.ngaySinh || "Chưa cập nhật" },
    { label: "CCCD/CMND", value: crewData.cccd || "Chưa cập nhật" },
    { label: "Số điện thoại", value: crewData.soDienThoai || "Chưa cập nhật" },
    { label: "Địa chỉ", value: crewData.diaChi || "Chưa cập nhật" },
    { label: "Ngày vào làm", value: crewData.ngayVaoLam || "Chưa cập nhật" },
    {
      label: "Trình độ chuyên môn",
      value: crewData.trinhDoChuyenMon || "Chưa cập nhật",
    },
    { label: "Bằng cấp", value: crewData.bangCap || "Chưa cập nhật" },
    { label: "Tình trạng", value: crewData.tinhTrang || "Đ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;