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

interface AddRetailReturnModalProps {
  open: boolean;
  onCancel: () => void;
  onSuccess: () => void;
  selectedLot: any;
}

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

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

  const handleSubmit = async (values: any) => {
    setLoading(true);
    try {
      await jwtAxios.post(ENDPOINTS.RETAIL_STOCK_RETURNS, {
        retailAllocationId: selectedLot.id || selectedLot.allocationId,
        purchaseId: selectedLot.purchaseId || selectedLot.purchase?.id,
        quantity: values.quantity,
        returnUnit: values.returnUnit,
        returnedBags: values.returnedBags,
        returnDate: values.returnDate.format('YYYY-MM-DD'),
        reason: values.reason,
        remarks: values.remarks,
      });
      message.success('Stock returned to wholesale lot successfully');
      onSuccess();
    } catch (err: any) {
      const errorMsg = err.response?.data?.error || err.response?.data?.message || 'Failed to return stock';
      message.error(errorMsg);
    } finally {
      setLoading(false);
    }
  };

  const remainingKg = selectedLot ? Number(selectedLot.remainingQuantity ?? selectedLot.totalAllocatedKg ?? 0) : 0;

  return (
    <Modal
      title={`Return Stock to Wholesale - Retail Lot: ${selectedLot?.lotNo}`}
      open={open}
      onCancel={onCancel}
      onOk={() => form.submit()}
      confirmLoading={loading}
      okText="Return Stock"
    >
      <div className="mb-4 p-3 bg-blue-50 rounded border border-blue-200">
        <div>Vegetable: <strong>{selectedLot?.vegetable?.name || selectedLot?.vegetableName || '-'}</strong></div>
        <div>Source Wholesale Lot: <strong>{selectedLot?.purchase?.lotNo || selectedLot?.purchaseLotNo || '-'}</strong></div>
        <div className="mt-1">
          Available Retail Stock:{' '}
          <Tag color={remainingKg > 0 ? 'green' : 'red'}>
            {remainingKg} KG
          </Tag>
        </div>
      </div>
      <Form form={form} layout="vertical" onFinish={handleSubmit}>
        {selectedLot?.unit && (selectedLot.unit === 'BAG' || selectedLot.unit === 'BOX') && (
          <Form.Item
            name="returnUnit"
            label="Return Type"
            rules={[{ required: true, message: 'Please select return type' }]}
          >
            <Select>
              <Select.Option value="KG">Return by KG only</Select.Option>
              <Select.Option value={selectedLot.unit}>Return by {selectedLot.unit}</Select.Option>
            </Select>
          </Form.Item>
        )}
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) => prevValues.returnUnit !== currentValues.returnUnit}
        >
          {({ getFieldValue }) => {
            const unit = getFieldValue('returnUnit');
            const isBoxOrBag = unit === 'BOX' || unit === 'BAG';

            return (
              <>
                {isBoxOrBag && (
                  <Form.Item
                    name="returnedBags"
                    label={`Return Quantity (Number of ${selectedLot?.unit}s)`}
                    rules={[
                      { required: true, message: `Number of ${selectedLot?.unit}s is required` },
                      () => ({
                        validator(_, value) {
                          if (value <= 0) return Promise.reject(new Error('Quantity must be greater than 0'));
                          if (selectedLot?.remainingBags && value > selectedLot.remainingBags) {
                            return Promise.reject(new Error(`Cannot exceed available retail stock (${selectedLot.remainingBags} ${selectedLot.unit})`));
                          }
                          return Promise.resolve();
                        },
                      }),
                    ]}
                  >
                    <InputNumber style={{ width: '100%' }} min={1} step={1} placeholder={`Enter ${selectedLot?.unit}s to return`} />
                  </Form.Item>
                )}
                <Form.Item
                  name="quantity"
                  label={isBoxOrBag ? "Total Return Quantity in KG" : "Return Quantity (KG)"}
                  rules={[
                    { required: true, message: 'Quantity is required' },
                    () => ({
                      validator(_, value) {
                        if (value <= 0) return Promise.reject(new Error('Quantity must be greater than 0'));
                        if (value > remainingKg) return Promise.reject(new Error(`Cannot exceed available retail stock (${remainingKg} KG)`));
                        return Promise.resolve();
                      },
                    }),
                  ]}
                >
                  <InputNumber style={{ width: '100%' }} min={0.01} step={0.01} placeholder="Enter KG to return to wholesale" />
                </Form.Item>
              </>
            );
          }}
        </Form.Item>
        <Form.Item
          name="returnDate"
          label="Return Date"
          rules={[{ required: true, message: 'Date is required' }]}
        >
          <DatePicker style={{ width: '100%' }} format="YYYY-MM-DD" />
        </Form.Item>
        <Form.Item name="reason" label="Reason">
          <Input placeholder="e.g. Excess retail stock, transferred back to cold store/wholesale" />
        </Form.Item>
        <Form.Item name="remarks" label="Remarks">
          <Input.TextArea rows={2} placeholder="Optional notes" />
        </Form.Item>
      </Form>
    </Modal>
  );
};