// EditTrip Component - Edit trip information
import { apiUpdateTrip } from '@/services/slave/sgw/TripController';
import {
  ModalForm,
  ProCard,
  ProForm,
  ProFormDatePicker,
  ProFormDependency,
  ProFormList,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Form, message, Typography } from 'antd';
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
import { useEffect } from 'react';

dayjs.extend(utc);
dayjs.extend(timezone);

interface EditTripProps {
  id: string;
  ship_id?: string;
  record?: SgwModel.Trip;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSuccess?: () => void;
}

const EditTrip: React.FC<EditTripProps> = ({
  id,
  ship_id,
  record,
  open,
  onOpenChange,
  onSuccess,
}) => {
  const [form] = Form.useForm();
  const { homeports, getHomeportsByProvinceCode } = useModel(
    'slave.sgw.useHomePorts',
  );

  useEffect(() => {
    getHomeportsByProvinceCode();
  }, [getHomeportsByProvinceCode]);

  console.log('record', record);

  useEffect(() => {
    if (record && open) {
      form.setFieldsValue({
        ...record,
        ship_id,
        departure_port_id: record.departure_port_id,
        arrival_port_id: record.arrival_port_id,
      });
    }
  }, [record, open, ship_id, form]);

  return (
    <ModalForm
      title="Chỉnh sửa chuyến đi"
      form={form}
      open={open}
      onOpenChange={onOpenChange}
      modalProps={{
        destroyOnClose: true,
        width: 1500,
      }}
      onFinish={async (values) => {
        try {
          if (!values.departure_port_id) {
            message.error('Vui lòng chọn cảng khởi hành!');
            return false;
          }
          if (!values.arrival_port_id) {
            message.error('Vui lòng chọn cảng cập bến!');
            return false;
          }
          console.log('Form values on submit:', values);
          const params = {
            name: values.name,
            departure_time: dayjs(values.departure_time).utc().format(),
            departure_port_id: values.departure_port_id,
            arrival_time: dayjs(values.arrival_time).utc().format(),
            arrival_port_id: values.arrival_port_id,
            fishing_ground_codes: Array.isArray(values.fishing_ground_codes)
              ? values.fishing_ground_codes
                  .map((code: string | number) => Number(code))
                  .filter((n: number) => !isNaN(n))
              : [],
            fishing_gears: values.fishing_gears,
            trip_cost: values.trip_cost,
          };
          await apiUpdateTrip(id, params);
          message.success('Cập nhật chuyến đi thành công');
          onSuccess?.();
          return true;
        } catch (e) {
          console.error(e);
          message.error('Cập nhật thất bại');
          return false;
        }
      }}
      layout="horizontal"
    >
      <ProCard split="vertical">
        {/* Bên trái: Ngư cụ + chi phí */}
        <ProCard colSpan="50%">
          {/* Danh sách ngư cụ */}
          <ProForm.Group title="Danh sách ngư cụ">
            <ProFormList
              name="fishing_gears"
              creatorButtonProps={{ creatorButtonText: 'Thêm ngư cụ' }}
              copyIconProps={{ tooltipText: 'Sao chép' }}
              deleteIconProps={{ tooltipText: 'Xóa' }}
            >
              <ProFormDependency name={['name', 'number']}>
                {() => (
                  <div style={{ marginBottom: 16 }}>
                    <div style={{ display: 'flex', marginBottom: 4 }}>
                      <Typography.Text
                        strong
                        style={{ width: 200, marginRight: 8 }}
                      >
                        Tên
                      </Typography.Text>
                      <Typography.Text strong style={{ width: 200 }}>
                        Số lượng
                      </Typography.Text>
                    </div>
                    <div style={{ display: 'flex' }}>
                      <ProFormText
                        name="name"
                        fieldProps={{
                          style: { width: 200, marginRight: 8 },
                          placeholder: 'Tên',
                        }}
                        rules={[{ required: true }]}
                      />
                      <ProFormText
                        name="number"
                        fieldProps={{
                          style: { width: 200 },
                          placeholder: 'Số lượng',
                        }}
                        rules={[{ required: true }]}
                      />
                    </div>
                  </div>
                )}
              </ProFormDependency>
            </ProFormList>
          </ProForm.Group>

          {/* Danh sách chi phí */}
          <ProForm.Group title="Chi phí nguyên liệu">
            <ProFormList
              name="trip_cost"
              creatorButtonProps={{ creatorButtonText: 'Thêm nguyên liệu' }}
              copyIconProps={{ tooltipText: 'Sao chép' }}
              deleteIconProps={{ tooltipText: 'Xóa' }}
            >
              <ProFormDependency
                name={['type', 'amount', 'unit', 'cost_per_unit', 'total_cost']}
              >
                {() => (
                  <div style={{ marginBottom: 16 }}>
                    <div style={{ display: 'flex', marginBottom: 4 }}>
                      <Typography.Text
                        strong
                        style={{ width: 120, marginRight: 8 }}
                      >
                        Loại
                      </Typography.Text>
                      <Typography.Text
                        strong
                        style={{ width: 100, marginRight: 8 }}
                      >
                        Số lượng
                      </Typography.Text>
                      <Typography.Text
                        strong
                        style={{ width: 100, marginRight: 8 }}
                      >
                        Đơn vị
                      </Typography.Text>
                      <Typography.Text
                        strong
                        style={{ width: 100, marginRight: 8 }}
                      >
                        Chi phí
                      </Typography.Text>
                      <Typography.Text strong style={{ width: 100 }}>
                        Tổng chi phí
                      </Typography.Text>
                    </div>
                    <div style={{ display: 'flex' }}>
                      <ProFormSelect
                        name="type"
                        placeholder="Chọn loại"
                        fieldProps={{ style: { width: 120, marginRight: 8 } }}
                        options={[
                          { label: 'Nhiên liệu', value: 'fuel' },
                          { label: 'Lương thuyền viên', value: 'crew_salary' },
                          { label: 'Lương thực', value: 'food' },
                          { label: 'Muối đá', value: 'salt_ice' },
                        ]}
                      />
                      <ProFormText
                        name="amount"
                        fieldProps={{ style: { width: 100, marginRight: 8 } }}
                      />
                      <ProFormText
                        name="unit"
                        fieldProps={{ style: { width: 100, marginRight: 8 } }}
                      />
                      <ProFormText
                        name="cost_per_unit"
                        fieldProps={{ style: { width: 100, marginRight: 8 } }}
                      />
                      <ProFormText
                        name="total_cost"
                        fieldProps={{ style: { width: 100 } }}
                      />
                    </div>
                  </div>
                )}
              </ProFormDependency>
            </ProFormList>
          </ProForm.Group>
        </ProCard>

        {/* Bên phải: Thông tin chuyến đi */}
        <ProCard colSpan="50%" bodyStyle={{ padding: '0 24px' }}>
          <ProFormText
            name="name"
            label="Tên chuyến đi"
            rules={[{ required: true }]}
          />

          <ProForm.Group title="Thời gian chuyến đi">
            <ProFormDatePicker
              name="departure_time"
              showTime
              label="Bắt đầu"
              rules={[{ required: true }]}
            />
            <ProFormDatePicker
              name="arrival_time"
              showTime
              label="Kết thúc"
              rules={[{ required: true }]}
            />
          </ProForm.Group>

          <ProForm.Group title="Cảng">
            <ProFormSelect
              name="departure_port_id"
              label="Cảng khởi hành"
              width="md"
              placeholder="Chọn cảng khởi hành"
              options={
                Array.isArray(homeports)
                  ? homeports.map((p) => ({ label: p.name, value: p.id }))
                  : []
              }
              rules={[
                { required: true, message: 'Vui lòng chọn cảng khởi hành' },
              ]}
              showSearch
            />

            <ProFormSelect
              name="arrival_port_id"
              label="Cảng cập bến"
              width="md"
              placeholder="Chọn cảng cập bến"
              options={
                Array.isArray(homeports)
                  ? homeports.map((p) => ({ label: p.name, value: p.id }))
                  : []
              }
              rules={[
                { required: true, message: 'Vui lòng chọn cảng cập bến' },
              ]}
              showSearch
            />
          </ProForm.Group>

          <ProForm.Group title="Thông tin cơ bản">
            <ProFormSelect
              name="fishing_ground_codes"
              label="Ô khai thác"
              fieldProps={{ mode: 'tags', style: { width: '100%' } }}
            />
          </ProForm.Group>
        </ProCard>
      </ProCard>
    </ModalForm>
  );
};

export default EditTrip;