import React, { useEffect, useState } from 'react';
import { Modal, Form, InputNumber, DatePicker, Input, message } from 'antd';
import dayjs from 'dayjs';
import jwtAxios from '../../api/axiosInstance';
import { ENDPOINTS } from '../../api/endpoints';

interface AddSaleReturnModalProps {
  open: boolean;
  onCancel: () => void;
  onSuccess: () => void;
  selectedItem: any; // A SaleItem from the viewRecord.items
}

export const AddSaleReturnModal: React.FC<AddSaleReturnModalProps> = ({
  open,
  onCancel,
  onSuccess,
  selectedItem,
}) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (open && selectedItem) {
      form.resetFields();
      form.setFieldsValue({
        returnDate: dayjs(),
      });
    }
  }, [open, selectedItem, form]);

  const handleSubmit = async (values: any) => {
    setLoading(true);
    try {
      const url = ENDPOINTS.SALE_ITEM_RETURN(selectedItem.id);
      await jwtAxios.post(url, {
        quantity: values.quantity,
        returnDate: values.returnDate.format('YYYY-MM-DD'),
        reason: values.reason,
        remarks: values.remarks,
      });
      message.success('Sale Return processed successfully');
      onSuccess();
    } catch (err: any) {
      const errorMsg = err.response?.data?.error || err.response?.data?.message || 'Failed to process return';
      message.error(errorMsg);
    } finally {
      setLoading(false);
    }
  };

  const soldAs = selectedItem?.saleUnit || 'KG';
  const isBagOnly = soldAs !== 'KG' && Number(selectedItem?.quantity || 0) <= 0;
  const totalQty = selectedItem ? (isBagOnly ? Number(selectedItem.bags) : Number(selectedItem.quantity)) : 0;
  const maxReturnable = totalQty;

  return (
    <Modal
      title={`Return Sale Item - ${selectedItem?.purchase?.vegetable?.name}`}
      open={open}
      onCancel={onCancel}
      onOk={() => form.submit()}
      confirmLoading={loading}
      okText="Process Return"
      okButtonProps={{ disabled: maxReturnable <= 0 }}
    >
      <div className="mb-4 text-gray-500">
        Lot No: <strong>{selectedItem?.purchase?.lotNo}</strong> <br />
        Sold as: <strong>{soldAs}</strong> <br />
        Max returnable:{' '}
        <strong className={maxReturnable <= 0 ? 'text-red-500' : 'text-green-600'}>
          {maxReturnable} {isBagOnly ? (soldAs === 'BOX' ? 'Boxes' : 'Bags') : 'KG'}
        </strong>
      </div>
      <Form form={form} layout="vertical" onFinish={handleSubmit}>
        <Form.Item
          name="quantity"
          label={isBagOnly ? `Return Quantity (${soldAs === 'BOX' ? 'Boxes' : 'Bags'})` : "Return Quantity (Kg)"}
          rules={[
            { required: true, message: 'Quantity is required' },
          ]}
        >
          <InputNumber className='w-full!' min={0.01} />
        </Form.Item>
        <Form.Item
          name="returnDate"
          label="Return Date"
          rules={[{ required: true, message: 'Date is required' }]}
        >
          <DatePicker style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item name="reason" label="Reason (Optional)">
          <Input placeholder="e.g. Bad quality, Customer rejected" />
        </Form.Item>
        <Form.Item name="remarks" label="Remarks (Optional)">
          <Input.TextArea rows={2} />
        </Form.Item>
      </Form>
    </Modal>
  );
};