'use client';

import { useEffect, useRef, useState } from 'react';
import { mountAnnouncementBridge, type AnnouncementPayload } from '@/lib/a11y/announce';

interface RegionState {
  polite: string;
  assertive: string;
  politeSeq: number;
  assertiveSeq: number;
}

type AnnouncementRegion = 'polite' | 'assertive';

const INITIAL_STATE: RegionState = {
  polite: '',
  assertive: '',
  politeSeq: 0,
  assertiveSeq: 0,
};

export function AnnouncementRegionHost() {
  const [state, setState] = useState<RegionState>(INITIAL_STATE);
  const queuesRef = useRef<Record<AnnouncementRegion, string[]>>({
    polite: [],
    assertive: [],
  });
  const frameRef = useRef<Record<AnnouncementRegion, number | null>>({
    polite: null,
    assertive: null,
  });

  useEffect(() => {
    const queues = queuesRef.current;
    const frames = frameRef.current;
    const flushRegion = (region: AnnouncementRegion) => {
      if (frames[region] !== null) return;
      frames[region] = window.requestAnimationFrame(() => {
        frames[region] = null;
        const messages = queues[region].splice(0);
        if (messages.length === 0) return;

        const seqKey = region === 'assertive' ? 'assertiveSeq' : 'politeSeq';
        setState((prev) => ({
          ...prev,
          [region]: messages.join(' '),
          [seqKey]: prev[seqKey] + 1,
        }));

        if (queues[region].length > 0) flushRegion(region);
      });
    };

    mountAnnouncementBridge(({ message, politeness }: Required<AnnouncementPayload>) => {
      const region = politeness === 'assertive' ? 'assertive' : 'polite';
      queues[region].push(message);
      flushRegion(region);
    });

    return () => {
      for (const region of ['polite', 'assertive'] as const) {
        const frame = frames[region];
        if (frame !== null) window.cancelAnimationFrame(frame);
        frames[region] = null;
        queues[region] = [];
      }
      mountAnnouncementBridge(null);
    };
  }, []);

  return (
    <>
      <div
        key={`polite-${state.politeSeq}`}
        className="sr-only"
        role="status"
        aria-live="polite"
        aria-atomic="true"
        data-testid="announcement-region-polite"
      >
        {state.polite}
      </div>
      <div
        key={`assertive-${state.assertiveSeq}`}
        className="sr-only"
        aria-live="assertive"
        aria-atomic="true"
        data-testid="announcement-region-assertive"
      >
        {state.assertive}
      </div>
    </>
  );
}