'use client';

import { Alert } from '@/components/ui/alert';
import { Spinner } from '@/components/ui/spinner';
import { Toast } from '@/components/ui/toast';
import { useFeedback } from '@/app/_hooks/use-feedback';

/**
 * FeedbackProvider의 상태를 design 레인의 Toast·Alert·Spinner 비주얼에 연결만 하는 역할 —
 * 위치·스택·표시 타이머 등 정책은 FeedbackProvider가 가지고, 이 컴포넌트는 마운트만 담당한다.
 */
export function FeedbackHost() {
  const { toasts, alert, spinnerCount, hideAlert } = useFeedback();

  return (
    <>
      {toasts.length > 0 && (
        <div className="fixed inset-x-0 top-4 z-50 flex flex-col items-center gap-2 px-4">
          {toasts.map((toast) => (
            <Toast key={toast.id} variant={toast.variant}>
              {toast.message}
            </Toast>
          ))}
        </div>
      )}

      {alert && (
        <Alert
          variant={alert.variant}
          title={alert.title}
          actions={
            alert.actions ?? (
              <button
                type="button"
                onClick={hideAlert}
                className="rounded-md bg-primary px-4 py-2 text-body-md text-on-primary"
              >
                확인
              </button>
            )
          }
        >
          {alert.message}
        </Alert>
      )}

      {spinnerCount > 0 && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-scrim">
          <Spinner size="lg" tone="inverse" />
        </div>
      )}
    </>
  );
}