// Team-wide support waits. Customer-wait tickets never enter this queue.
function supportWaitMinutes(since, now = Date.now()) {
  const start = Date.parse(since);
  return Number.isFinite(start) ? Math.max(0, Math.floor((now - start) / 60000)) : 0;
}
function supportWaitColor(minutes) {
  return minutes >= 120 ? 'rgb(var(--hd-wait-long))' : minutes >= 60 ? 'rgb(var(--hd-wait-medium))' : 'rgb(var(--hd-wait-short))';
}
function supportWaitDuration(minutes) {
  return `${minutes >= 60 ? `${Math.floor(minutes / 60)} ч ` : ''}${minutes % 60} мин`;
}
function supportWaitingDialogs(conversations) {
  return conversations.filter(c => c.status === 'waiting' && c.waitingReason === 'manual')
    .sort((a, b) => (Date.parse(a.waitingSince) || 0) - (Date.parse(b.waitingSince) || 0)
      || String(a.id).localeCompare(String(b.id)));
}
function TeamWaiting({ conversations, onOpenDialog }) {
  const [now, setNow] = React.useState(Date.now());
  const [config, setConfig] = React.useState(null);
  const [listOpen, setListOpen] = React.useState(false);
  const [toastOpen, setToastOpen] = React.useState(false);
  const bucket = React.useRef(null);
  const root = React.useRef(null);
  const trigger = React.useRef(null);
  const closeButton = React.useRef(null);
  const items = supportWaitingDialogs(conversations);
  const count = items.length;
  React.useEffect(() => {
    let live = true;
    const load = () => window.apiFetch('GET', '/api/waiting-reminders/config').then(value => {
      if (live) setConfig({ interval: value.intervalSeconds * 1000, offset: value.serverTime * 1000 - Date.now() });
    }).catch(() => {});
    load();
    const retry = setInterval(load, 60000);
    const tick = setInterval(() => setNow(Date.now()), 15000);
    return () => { live = false; clearInterval(retry); clearInterval(tick); };
  }, []);
  React.useEffect(() => {
    if (!count) {
      bucket.current = null;
      setToastOpen(false);
      setListOpen(false);
      return;
    }
    if (!config) return;
    const next = Math.floor((now + config.offset) / config.interval);
    if (bucket.current !== null && bucket.current !== next) setToastOpen(true);
    bucket.current = next;
  }, [count, now, config]);
  React.useEffect(() => {
    if (!listOpen) return;
    closeButton.current?.focus();
    const dismiss = event => {
      if (event.type === 'keydown' && event.key === 'Escape') {
        setListOpen(false); trigger.current?.focus();
      } else if (event.type === 'pointerdown' && !root.current?.contains(event.target)) setListOpen(false);
    };
    document.addEventListener('keydown', dismiss);
    document.addEventListener('pointerdown', dismiss);
    return () => { document.removeEventListener('keydown', dismiss); document.removeEventListener('pointerdown', dismiss); };
  }, [listOpen]);
  if (!count) return null;
  const longest = items[0];
  const mins = supportWaitMinutes(longest.waitingSince, now);
  const color = supportWaitColor(mins);
  return <div ref={root} className="relative min-w-0">
    <button ref={trigger} type="button" aria-expanded={listOpen} aria-controls="team-waiting-list"
      onClick={() => setListOpen(value => !value)} style={{color, borderColor: color}}
      className="border rounded-full px-3 py-1 text-xs text-left">
      Ждут ответа: {count} · дольше всех {supportWaitDuration(mins)}
    </button>
    {listOpen && <section id="team-waiting-list" aria-label="Клиенты ждут ответа" className="absolute right-0 top-full mt-2 w-[460px] max-w-[calc(100vw-24px)] max-h-[70vh] overflow-auto bg-[rgb(var(--hd-surface))] border border-[rgb(var(--hd-border))] rounded-xl shadow-2xl z-50">
      <div className="p-4 flex justify-between"><strong>Ждут ответа: {count}</strong><button ref={closeButton} type="button" onClick={() => { setListOpen(false); trigger.current?.focus(); }} aria-label="Закрыть список">✕</button></div>
      {items.map(item => <div key={item.id} className="p-4 border-t border-[rgb(var(--hd-border))]">
        <div className="flex justify-between gap-3"><strong>{item.name || item.username || item.id}</strong><span style={{color: supportWaitColor(supportWaitMinutes(item.waitingSince, now))}}>{supportWaitDuration(supportWaitMinutes(item.waitingSince, now))}</span></div>
        <div className="text-xs text-[rgb(var(--hd-secondary-alt))] mt-1">{item.waitingDetail || 'Причина не указана'} · На ожидании у {item.waitingOperator || item.assignedOperator || 'оператора без имени'}</div>
        <button type="button" onClick={() => { setListOpen(false); onOpenDialog(item.id); }} className="mt-3 px-3 py-2 rounded-lg bg-[#2f6fe0] text-white text-xs">Открыть чат</button>
      </div>)}
    </section>}
    {toastOpen && <aside role="status" aria-live="polite" className="fixed bottom-6 right-6 w-[380px] max-w-[calc(100vw-32px)] bg-[rgb(var(--hd-surface))] border border-[rgb(var(--hd-border-strong))] rounded-xl p-4 shadow-2xl z-50">
      <div className="flex justify-between gap-3"><strong>Ждут ответа: {count}</strong><button type="button" aria-label="Закрыть напоминание" onClick={() => setToastOpen(false)}>✕</button></div>
      <p className="text-sm text-[rgb(var(--hd-secondary-alt))] mt-2">Дольше всех — {longest.name || longest.username || longest.id}: {supportWaitDuration(mins)}</p>
      <button type="button" onClick={() => { setToastOpen(false); setListOpen(true); }} className="mt-3 px-3 py-2 rounded-lg bg-[#2f6fe0] text-white text-xs">Открыть список</button>
    </aside>}
  </div>;
}