'use client';

import { FoxButton } from '@fox/core/components/fox-button';
import { FoxModal } from '@fox/core/components/fox-modal';
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 && (
        <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="fixed inset-0 z-50 flex items-center justify-center bg-scrim">
          <Spinner size="lg" tone="inverse" />
        </div>
      )}
    </>
  );
}