// components/admin/StatusUpdateForm.jsx

import { useState } from 'react';
import { useUpdateOrderStatusMutation } from '../../features/orders/ordersAPI';

const StatusUpdateForm = ({ orderId, currentStatus }) => {
  const [status, setStatus] = useState(currentStatus);
  const [trackingNumber, setTrackingNumber] = useState('');
  const [notes, setNotes] = useState('');
  
  const [updateStatus, { isLoading }] = useUpdateOrderStatusMutation();

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      await updateStatus({
       id: orderId,  
        status,
        trackingNumber,
        notes,
      }).unwrap();

      alert('Status updated successfully!');
      setTrackingNumber('');
      setNotes('');
    } catch (error) {
      alert('Failed to update status');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="bg-white rounded-lg shadow p-6">
      <h3 className="font-bold text-lg mb-4">Update Order Status</h3>

      <div className="space-y-4">
        {/* Status Dropdown */}
        <div>
          <label className="block text-sm font-medium mb-2">
            New Status
          </label>
          <select
            value={status}
            onChange={(e) => setStatus(e.target.value)}
            className="w-full border rounded-lg px-3 py-2"
          >
            <option value="PENDING">Pending</option>
            <option value="CONFIRMED">Confirmed</option>
            <option value="PROCESSING">Processing</option>
            <option value="SHIPPED">Shipped</option>
            <option value="DELIVERED">Delivered</option>
            <option value="CANCELLED">Cancelled</option>
          </select>
        </div>

        {/* Tracking Number (show for SHIPPED status) */}
        {status === 'SHIPPED' && (
          <div>
            <label className="block text-sm font-medium mb-2">
              Tracking Number
            </label>
            <input
              type="text"
              value={trackingNumber}
              onChange={(e) => setTrackingNumber(e.target.value)}
              placeholder="TRK123456789"
              className="w-full border rounded-lg px-3 py-2"
            />
          </div>
        )}

        {/* Notes */}
        <div>
          <label className="block text-sm font-medium mb-2">
            Notes (Optional)
          </label>
          <textarea
            value={notes}
            onChange={(e) => setNotes(e.target.value)}
            placeholder="Add any notes about this status change..."
            rows={3}
            className="w-full border rounded-lg px-3 py-2"
          />
        </div>

        {/* Submit Button */}
        <button
          type="submit"
          disabled={isLoading || status === currentStatus}
          className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 disabled:bg-gray-300"
        >
          {isLoading ? 'Updating...' : 'Update Status'}
        </button>
      </div>
    </form>
  );
};


export default StatusUpdateForm;