'use client';

import { useState, useTransition } from 'react';
import { updateLeadStatus } from '@/app/vendor/leads/actions';

const STATUSES = ['new', 'contacted', 'won', 'lost', 'closed'];

export function LeadStatusSelect({ leadId, initialStatus }: { leadId: 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 updateLeadStatus(leadId, 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>
  );
}