import {
  apiUpdateCrew,
  apiUpdateTripCrew,
} from '@/services/slave/sgw/TripController';
import {
  ModalForm,
  ProFormDatePicker,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { useIntl } from '@umijs/max';
import { Form, message } from 'antd';
import dayjs from 'dayjs';
import React, { useEffect, useRef, useState } from 'react';

interface EditCrewProps {
  record: SgwModel.TripCrews;
  tripId: string;
  visible: boolean;
  onVisibleChange: (visible: boolean) => void;
  onSuccess?: () => void;
}

const EditCrew: React.FC<EditCrewProps> = ({
  record,
  tripId,
  visible,
  onVisibleChange,
  onSuccess,
}) => {
  const intl = useIntl();
  const formRef = useRef();
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible && record?.Person) {
      const birthDate = record.Person.birth_date
        ? dayjs(record.Person.birth_date)
        : null;

      form.setFieldsValue({
        personal_id: record.Person.personal_id,
        name: record.Person.name,
        phone: record.Person.phone,
        email: record.Person.email,
        birth_date: birthDate && birthDate.isValid() ? birthDate : null,
        address: record.Person.address,
        note: record.Person.note,
        role: record.role,
      });
    }
  }, [visible, record, form]);

  return (
    <ModalForm
      form={form}
      formRef={formRef}
      title={intl.formatMessage({
        id: 'pages.trips.crew.edit',
        defaultMessage: 'Edit Crew',
      })}
      width="600px"
      open={visible}
      modalProps={{ destroyOnClose: true }}
      onOpenChange={onVisibleChange}
      submitter={{
        searchConfig: {
          submitText: 'Cập nhật',
        },
        submitButtonProps: {
          loading,
        },
      }}
      onFinish={async (values) => {
        setLoading(true);
        try {
          // Update crew information
          const crewPayload: SgwModel.CrewUpdateParams = {
            name: values.name,
            phone: values.phone,
            email: values.email,
            birth_date:
              values.birth_date && dayjs(values.birth_date).isValid()
                ? dayjs(values.birth_date).format('YYYY-MM-DD')
                : undefined,
            address: values.address,
            note: values.note,
          };
          await apiUpdateCrew(record.Person.personal_id, crewPayload);

          // Update trip crew role
          const tripCrewPayload: SgwModel.TripCrewUpdateParams = {
            trip_id: tripId,
            personal_id: record.Person.personal_id,
            role: values.role,
          };
          await apiUpdateTripCrew(tripCrewPayload);

          message.success('Cập nhật thông tin thuyền viên thành công!');
          onSuccess?.();
          return true;
        } catch (e) {
          console.error(e);
          message.error('Cập nhật thông tin thất bại');
          return false;
        } finally {
          setLoading(false);
        }
      }}
    >
      <ProFormText
        name="personal_id"
        label="Mã định danh"
        disabled
        rules={[{ required: true, message: 'Vui lòng nhập mã định danh' }]}
      />

      <ProFormText
        name="name"
        label="Tên thuyền viên"
        placeholder="Nhập tên thuyền viên"
        rules={[{ required: true, message: 'Vui lòng nhập tên thuyền viên' }]}
      />

      <ProFormText
        name="phone"
        label="Số điện thoại"
        placeholder="Nhập số điện thoại"
        rules={[
          { pattern: /^[0-9]{10,11}$/, message: 'Số điện thoại không hợp lệ' },
        ]}
      />

      <ProFormText
        name="email"
        label="Email"
        placeholder="Nhập email"
        rules={[{ type: 'email', message: 'Email không hợp lệ' }]}
      />

      <ProFormDatePicker
        name="birth_date"
        label="Ngày sinh"
        placeholder="Chọn ngày sinh"
        fieldProps={{
          format: 'DD/MM/YYYY',
        }}
      />

      <ProFormText name="address" label="Địa chỉ" placeholder="Nhập địa chỉ" />

      <ProFormSelect
        name="role"
        label="Vai trò"
        placeholder="Chọn vai trò"
        options={[
          { label: 'Thuyền trưởng', value: 'captain' },
          { label: 'Thuyền viên', value: 'crew' },
        ]}
        rules={[{ required: true, message: 'Vui lòng chọn vai trò' }]}
      />

      <ProFormTextArea
        name="note"
        label="Ghi chú"
        placeholder="Nhập ghi chú"
        fieldProps={{
          rows: 3,
        }}
      />
    </ModalForm>
  );
};

export default EditCrew;
