'use client';

import { useEffect, useRef } from 'react';
import { FoxButton } from '@fox/core/components/fox-button';
import { FoxModal } from '@fox/core/components/fox-modal';
import { FoxToast } from '@fox/core/components/fox-toast';
import { Spinner } from '@/components/ui/spinner';
import { useFeedback } from '@/app/_hooks/use-feedback';
import styles from './feedback-host.module.scss';

/**
 * FeedbackProvider의 상태를 @fox 비주얼(Toast·Modal·Spinner)에 연결만 하는 역할 —
 * 위치·스택·표시 타이머 등 정책은 FeedbackProvider가 가지고, 이 컴포넌트는 마운트만 담당한다.
 *
 * 계열(success/danger/…)은 색으로 드러나지 않는다 — @fox 시안의 토스트가 하나뿐이라
 * (`_fox-toast.scss`) 모양이 갈리지 않는다. 대신 `danger`만 `urgent`로 올려 보조기술이
 * 읽던 것을 끊고 바로 읽게 한다.
 */
export function FeedbackHost() {
  const { toasts, alert, spinnerCount, hideAlert } = useFeedback();
  const toastLayerRef = useRef<HTMLDivElement>(null);
  const hasToasts = toasts.length > 0;

  // 모달 위에서도 보이도록 top layer에 얹는다(feedback-host.module.scss의 이슈 주석 참고).
  useEffect(() => {
    const layer = toastLayerRef.current;
    if (!layer || typeof layer.showPopover !== 'function') {
      return;
    }

    const isOpen = layer.matches(':popover-open');
    if (hasToasts && !isOpen) {
      layer.showPopover();
    } else if (!hasToasts && isOpen) {
      layer.hidePopover();
    }
  }, [hasToasts]);

  return (
    <>
      <div ref={toastLayerRef} popover="manual" className={styles.toastLayer}>
        {toasts.map((toast) => (
          <FoxToast
            key={toast.id}
            message={toast.message}
            urgent={toast.variant === 'danger'}
          />
        ))}
      </div>

      {alert && (
        <FoxModal
          open
          size="sm"
          title={alert.title}
          onClose={hideAlert}
          actions={
            alert.actions ?? (
              <FoxButton
                type="primary"
                size="md"
                label="확인"
                onAction={hideAlert}
              />
            )
          }
        >
          {alert.message}
        </FoxModal>
      )}

      {spinnerCount > 0 && (
        <div className={styles.spinnerOverlay}>
          <Spinner size="lg" tone="inverse" />
        </div>
      )}
    </>
  );
}