import { ProColumns, ProTable } from '@ant-design/pro-components';
import React from 'react';

interface TripCrewsProps {
  crew?: API.TripCrews[];
}

const TripCrews: React.FC<TripCrewsProps> = ({ crew }) => {
  console.log('TripCrews received crew:', crew);

  const crew_columns: ProColumns<API.TripCrews>[] = [
    {
      title: <div style={{ textAlign: 'center' }}>Mã định danh</div>,
      dataIndex: ['Person', 'personal_id'], // 👈 lấy từ Person.personal_id
      align: 'center',
    },
    {
      title: <div style={{ textAlign: 'center' }}>Tên</div>,
      dataIndex: ['Person', 'name'], // 👈 lấy từ Person.name
      align: 'center',
    },
    {
      title: <div style={{ textAlign: 'center' }}>Chức vụ</div>,
      dataIndex: 'role',
      align: 'center',
      render: (val: any) => {
        switch (val) {
          case 'captain':
            return <span style={{ color: 'blue' }}>Thuyền trưởng</span>;
          case 'crew':
            return <span style={{ color: 'green' }}>Thuyền viên</span>;
          default:
            return <span>{val}</span>;
        }
      },
    },
    {
      title: <div style={{ textAlign: 'center' }}>Email</div>,
      dataIndex: ['Person', 'email'], // 👈 lấy từ Person.email
      align: 'center',
    },
    {
      title: <div style={{ textAlign: 'center' }}>Số điện thoại</div>,
      dataIndex: ['Person', 'phone'], // 👈 lấy từ Person.phone
      align: 'center',
    },
    {
      title: <div style={{ textAlign: 'center' }}>Ngày sinh</div>,
      dataIndex: ['Person', 'birth_date'], // birth_date là date of birth
      align: 'center',
      render: (birth_date: any) => {
        if (!birth_date) return '-';
        const date = new Date(birth_date);
        return date.toLocaleDateString('vi-VN'); // 👉 tự động ra dd/mm/yyyy
      },
    },
    {
      title: <div style={{ textAlign: 'center' }}>Địa chỉ</div>,
      dataIndex: ['Person', 'address'], // 👈 lấy từ Person.address
      align: 'center',
    },
  ];

  return (
    <ProTable<API.TripCrews>
      style={{ width: '90%' }}
      columns={crew_columns}
      dataSource={crew}
      search={false}
      rowKey={(record, idx: any) => record.Person.personal_id || idx.toString()}
      pagination={{
        pageSize: 5,
        showSizeChanger: true,
        showTotal: (total, range) => `${range[0]}-${range[1]} trên ${total}`,
      }}
      options={false}
      bordered
      size="middle"
      scroll={{ x: 600 }}
    />
  );
};

export default TripCrews;
