admin / Bid-Sentinel

import { useState } from "react";
import { updateBidStatus } from "../api/client";

const OPTIONS = ["Pending", "Bid", "No Bid"];

const COLORS = {
  Pending: "bg-slate-100 text-slate-700 border-slate-300",
  Bid: "bg-green-50 text-green-700 border-green-300",
  "No Bid": "bg-red-50 text-red-700 border-red-300",
};

export default function BidStatusSelect({ tender, onChange }) {
  const [status, setStatus] = useState(tender.bid_status);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState(false);

  async function handleChange(e) {
    const next = e.target.value;
    const previous = status;
    setStatus(next); // optimistic update
    setSaving(true);
    setError(false);
    try {
      const updated = await updateBidStatus(tender.id, next);
      onChange?.(updated);
    } catch {
      setStatus(previous); // rollback on failure
      setError(true);
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className="flex items-center gap-2">
      <select
        value={status}
        onChange={handleChange}
        disabled={saving}
        className={`rounded-md border px-2 py-1 text-sm font-medium outline-none transition focus:ring-2 focus:ring-brand/30 ${COLORS[status] || ""}`}
      >
        {OPTIONS.map((opt) => (
          <option key={opt} value={opt}>
            {opt}
          </option>
        ))}
      </select>
      {saving && <span className="text-xs text-slate-400">saving…</span>}
      {error && <span className="text-xs text-red-500">failed</span>}
    </div>
  );
}