import { useTranslation } from 'react-i18next';

import { useVoiceConnectionStore } from '@/stores/voiceConnection';

/**
 * Подсказка «вы говорите с выключенным микрофоном» (AGENT.md 7.14).
 *
 * Появляется по сигналу SDK не чаще одного раза в 5 секунд и живёт несколько
 * секунд; показывает её оболочка приложения, чтобы подсказку было видно с
 * любого экрана, а не только из голосовой комнаты.
 */
export function VoiceSpeakingNotice() {
  const { t } = useTranslation();
  const visible = useVoiceConnectionStore((state) => state.speakingWhileMuted);
  const dismiss = useVoiceConnectionStore((state) => state.dismissSpeakingWarning);

  if (!visible) {
    return null;
  }

  return (
    <div
      role="status"
      aria-live="polite"
      data-testid="voice-speaking-notice"
      className="pointer-events-auto fixed bottom-24 left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded-[var(--radius-md)] border border-warning/60 bg-surface-2 px-3 py-2 text-sm shadow-[var(--shadow-3)]"
    >
      <span aria-hidden="true">🎤</span>
      <p>{t('voice.speakingWhileMuted')}</p>
      <button
        type="button"
        aria-label={t('common.dismiss')}
        title={t('common.dismiss')}
        onClick={dismiss}
        className="rounded-[var(--radius-sm)] px-1 text-fg-muted transition-colors duration-[var(--duration-fast)] hover:bg-surface-3 hover:text-fg"
      >
        <span aria-hidden="true">✕</span>
      </button>
    </div>
  );
}