import {useEffect,useState} from 'react';
import {request} from './api';

type Availability={online:boolean;vehicleType:string;warning:string};
export function CourierAvailability({courier,refreshKey}:{courier:number;refreshKey?:string}){
 const [data,setData]=useState<Availability|null>(null),[error,setError]=useState(''),[busy,setBusy]=useState(true),[version,setVersion]=useState(0);
 useEffect(()=>{const c=new AbortController();setBusy(true);setData(null);setError('');
  request<Availability>(`/master-data/couriers/${courier}/availability`,{signal:c.signal}).then(v=>{if(!c.signal.aborted)setData(v);}).catch(e=>{if(!c.signal.aborted)setError(e.message);}).finally(()=>{if(!c.signal.aborted)setBusy(false);});
  return()=>c.abort();
 },[courier,refreshKey,version]);
 return <section className="business-section" aria-label="Verbindungsstatus des Transporteurs"><h3>Derzeit online</h3>
  {busy&&<p role="status">Status wird geladen …</p>}{error&&<p className="alert error" role="alert">{error}</p>}
  {data&&<><p role="status"><strong>{data.online?'Ja':'Nein'}</strong>{data.online&&data.vehicleType&&` · ${data.vehicleType}`}</p>{data.warning&&<p role="status">{data.warning}</p>}</>}
  <p className="form-hint">Gespeicherter Verbindungsstatus. Eine vorgemerkte Geräte-Abmeldung ist erst nach Rückmeldung des Geräts wirksam.</p>
  <button type="button" className="button" disabled={busy} onClick={()=>setVersion(v=>v+1)}>Verbindungsstatus aktualisieren</button>
 </section>;
}