import { useEffect, useState } from 'react';
import { api } from '@/lib/api';

export default function SlotSelect({ value, onChange, required = false, disabled = false }) {
  const [slots, setSlots] = useState([]);

  useEffect(() => {
    api('/api/settings')
      .then((data) => setSlots(data.slots || []))
      .catch(() => setSlots([]));
  }, []);

  useEffect(() => {
    if (!value || !slots.length) return;
    if (slots.some((slot) => slot.label === value)) return;
    const match = slots.find((slot) => slot.start === String(value).slice(0, 5));
    if (match) onChange(match.label);
  }, [slots, value, onChange]);

  const known = slots.some((slot) => slot.label === value);

  return (
    <select className="form-select" value={value || ''} onChange={(e) => onChange(e.target.value)} required={required} disabled={disabled}>
      <option value="">Select slot</option>
      {value && !known ? <option value={value}>{value}</option> : null}
      {slots.map((slot) => (
        <option key={slot.label} value={slot.label}>{slot.label}</option>
      ))}
    </select>
  );
}