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

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

export const AddRetailSpoilageModal: React.FC<AddRetailSpoilageModalProps> = ({
  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.RETAIL_STOCK_SPOILAGE, {
        retailAllocationId: selectedLot.id || selectedLot.allocationId,
        lotNo: selectedLot.lotNo,
        quantity: values.quantity,
        spoilageDate: values.spoilageDate.format('YYYY-MM-DD'),
        reason: values.reason,
        remarks: values.remarks,
      });
      message.success('Retail stock spoilage recorded successfully');
      onSuccess();
    } catch (err: any) {
      const errorMsg = err.response?.data?.error || err.response?.data?.message || 'Failed to record retail spoilage';
      message.error(errorMsg);
    } finally {
      setLoading(false);
    }
  };

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

  return (
    <Modal
      title={`Mark Retail Spoilage - Retail Lot: ${selectedLot?.lotNo}`}
      open={open}
      onCancel={onCancel}
      onOk={() => form.submit()}
      confirmLoading={loading}
      okText="Submit Spoilage"
    >
      <div className="mb-4 p-3 bg-gray-50 rounded border border-gray-200">
        <div>Vegetable: <strong>{selectedLot?.vegetable?.name || selectedLot?.vegetableName || '-'}</strong></div>
        <div>Supplier: <strong>{selectedLot?.supplier?.name || selectedLot?.cashSupplierName || selectedLot?.supplierName || '-'}</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}>
        <Form.Item
          name="quantity"
          label="Spoilage 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 remaining retail stock (${remainingKg} KG)`));
                return Promise.resolve();
              },
            }),
          ]}
        >
          <InputNumber style={{ width: '100%' }} min={0.01} step={0.01} placeholder="Enter spoiled KG" />
        </Form.Item>
        <Form.Item
          name="spoilageDate"
          label="Spoilage 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. Overripe, damaged, display spoilage" />
        </Form.Item>
        <Form.Item name="remarks" label="Remarks">
          <Input.TextArea rows={2} placeholder="Optional notes" />
        </Form.Item>
      </Form>
    </Modal>
  );
};