import {
  apiAddTripCrew,
  apiCreateCrew,
  apiGetCrew,
} from '@/services/slave/sgw/TripController';
import { ProForm, ProFormSelect } from '@ant-design/pro-components';
import {
  ModalForm,
  ProFormDatePicker,
  ProFormText,
} from '@ant-design/pro-form';
import { message } from 'antd';
import dayjs from 'dayjs';
import React, { useCallback, useState } from 'react';

interface AddCrewProps {
  tripId: string;
  visible: boolean;
  onVisibleChange: (visible: boolean) => void;
  onSuccess?: () => void;
}

interface FormValues {
  personal_id: string;
  name: string;
  phone: string;
  email?: string;
  birth_date: string;
  note?: string;
  address: string;
  role: string;
}

const AddCrew: React.FC<AddCrewProps> = ({
  tripId,
  visible,
  onVisibleChange,
  onSuccess,
}) => {
  const [form] = ProForm.useForm();
  const [loading, setLoading] = useState(false);

  const fetchCrew = async (personalId: string) => {
    if (!personalId) return;

    try {
      const crew = await apiGetCrew(personalId);
      if (crew) {
        form.setFieldsValue({
          name: crew.name,
          personal_id: crew.personal_id,
          birth_date: crew.birth_date
            ? crew.birth_date.toString().split('T')[0]
            : null,
          phone: crew.phone,
          address: crew.address,
        });
        message.success('Đã tìm thấy thuyền viên, dữ liệu được điền tự động');
      }
    } catch (error) {
      const err = error as { response?: { status: number } };
      if (err?.response?.status === 404) {
        // Không tìm thấy
        form.resetFields(['name', 'birth_date', 'phone', 'address']);
        form.setFieldValue('personal_id', personalId);

        message.info('Chưa có thuyền viên này, vui lòng nhập mới');
      } else {
        message.error('Lỗi khi kiểm tra thuyền viên');
      }
    }
  };

  // Debounce để tránh gọi API liên tục khi gõ
  const handlePersonalIdChange = useCallback(
    (() => {
      let timeoutId: NodeJS.Timeout;
      return (value: string) => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
          fetchCrew(value);
        }, 500);
      };
    })(),
    [],
  );

  const handleSubmit = async (values: FormValues) => {
    setLoading(true);
    try {
      const { personal_id, name, phone, email, birth_date, note, address } =
        values;

      const crewPayload: SgwModel.CrewCreateParams = {
        personal_id,
        name,
        phone,
        email,
        birth_date: birth_date
          ? dayjs(birth_date).format('YYYY-MM-DDT00:00:00[Z]')
          : undefined,
        note,
        address,
      };

      let crewId = personal_id;

      console.log('addTripCrew payload:', {
        trip_id: tripId,
        personal_id: crewId,
        role: values.role,
      });

      try {
        await apiGetCrew(personal_id);
      } catch (error) {
        const err = error as { response?: { status: number } };
        if (err?.response?.status === 404) {
          const newCrew = await apiCreateCrew(crewPayload);
          console.log('newCrew result:', newCrew);
          crewId = newCrew.personal_id || personal_id;
        } else {
          throw error;
        }
      }

      console.log('addTripCrew payload:', {
        trip_id: tripId,
        personal_id: personal_id,
        role: values.role,
      });

      await apiAddTripCrew({
        trip_id: tripId,
        personal_id: crewId,
        role: values.role,
      });

      message.success('Thêm thuyền viên vào chuyến thành công!');
      onSuccess?.();
      return true;
    } catch (e) {
      console.error(e);
      message.error('Có lỗi xảy ra khi thêm thuyền viên');
      return false;
    } finally {
      setLoading(false);
    }
  };

  return (
    <ModalForm
      title="Thêm thuyền viên"
      form={form}
      open={visible}
      modalProps={{
        onCancel: () => onVisibleChange(false),
        destroyOnClose: true,
      }}
      onOpenChange={onVisibleChange}
      onFinish={handleSubmit}
      submitter={{
        searchConfig: {
          submitText: 'Đồng ý',
        },
        submitButtonProps: {
          loading,
        },
      }}
    >
      <ProFormText
        name="personal_id"
        label="Số định danh"
        rules={[{ required: true, message: 'Vui lòng nhập số định danh' }]}
        fieldProps={{
          onChange: (e) => handlePersonalIdChange(e.target.value),
        }}
      />
      <ProFormText
        name="name"
        label="Họ và tên"
        rules={[{ required: true, message: 'Vui lòng nhập họ tên' }]}
      />
      <ProFormDatePicker
        name="birth_date"
        label="Ngày sinh"
        rules={[{ required: true, message: 'Vui lòng chọn ngày sinh' }]}
      />
      <ProFormText
        name="phone"
        label="Số điện thoại"
        rules={[{ required: true, message: 'Vui lòng nhập số điện thoại' }]}
      />
      <ProFormText name="address" label="Đị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ò' }]}
      />
    </ModalForm>
  );
};

export default AddCrew;
