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 AddSpoilageModalProps {
  open: boolean;
  onCancel: () => void;
  onSuccess: () => void;
  selectedLot: any;
}

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

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

  const handleSubmit = async (values: any) => {
    setLoading(true);
    try {
      await jwtAxios.post(ENDPOINTS.STOCK_SPOILAGE, {
        purchaseId: selectedLot.id,
        quantity: values.quantity,
        spoilageDate: values.spoilageDate.format('YYYY-MM-DD'),
        reason: values.reason,
        remarks: values.remarks,
      });
      message.success('Spoilage recorded successfully');
      onSuccess();
    } catch (err: any) {
      const errorMsg = err.response?.data?.error || err.response?.data?.message || 'Failed to record spoilage';
      message.error(errorMsg);
    } finally {
      setLoading(false);
    }
  };

  const isBagOnly = selectedLot && (selectedLot.unit === 'BAG' || selectedLot.unit === 'BOX');
  const remaining = selectedLot ? Number(isBagOnly ? selectedLot.remainingBags : selectedLot.remainingQuantity) : 0;
  const unitLabel = isBagOnly ? (selectedLot.unit === 'BOX' ? 'Boxes' : 'Bags') : 'Kg';

  return (
    <Modal
      title={`Mark Spoilage - Lot: ${selectedLot?.lotNo}`}
      open={open}
      onCancel={onCancel}
      onOk={() => form.submit()}
      confirmLoading={loading}
      okText="Submit Spoilage"
    >
      <div className="mb-4 text-gray-500">
        Vegetable: <strong>{selectedLot?.vegetable?.name}</strong> <br />
        Available Stock:{' '}
        <strong className={remaining > 0 ? 'text-green-600' : 'text-red-600'}>
          {remaining} {unitLabel}
        </strong>
      </div>
      <Form form={form} layout="vertical" onFinish={handleSubmit}>
        <Form.Item
          name="quantity"
          label={`Spoilage Quantity (${unitLabel})`}
          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 > remaining) return Promise.reject(new Error(`Cannot exceed remaining stock (${remaining})`));
                return Promise.resolve();
              },
            }),
          ]}
        >
          <InputNumber style={{ width: '100%' }} min={0.01} step={isBagOnly ? 1 : 0.01} />
        </Form.Item>
        <Form.Item
          name="spoilageDate"
          label="Spoilage 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. Rotten, damaged, pest" />
        </Form.Item>
        <Form.Item name="remarks" label="Remarks (Optional)">
          <Input.TextArea rows={2} />
        </Form.Item>
      </Form>
    </Modal>
  );
};