'use client';

import { useState, useTransition } from 'react';
import { updateOrderItemShippingStatus } from '@/app/vendor/orders/actions';

const STATUSES = ['pending', 'processing', 'shipped', 'delivered'];

export function OrderStatusSelect({
  orderId,
  itemId,
  initialStatus,
}: {
  orderId: number;
  itemId: number;
  initialStatus: string;
}) {
  const [value, setValue] = useState(initialStatus);
  const [error, setError] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  return (
    <div className="text-right">
      <select
        value={value}
        disabled={isPending}
        onChange={(e) => {
          const next = e.target.value;
          const previous = value;
          setValue(next);
          setError(null);
          startTransition(async () => {
            const result = await updateOrderItemShippingStatus(orderId, itemId, next);
            if (result?.error) {
              setValue(previous);
              setError(result.error);
            }
          });
        }}
        className="rounded-md border-navy-100 text-xs font-semibold capitalize focus:border-gold-500 focus:ring-gold-500"
      >
        {STATUSES.map((status) => (
          <option key={status} value={status}>
            {status}
          </option>
        ))}
      </select>
      {error && <p className="mt-1 text-[11px] text-red-600">{error}</p>}
    </div>
  );
}