'use client';

/**
 * PriorityBoundary Component
 * Enterprise FinTech Platform
 *
 * Wraps components with priority-based Suspense boundaries.
 * Enables progressive hydration and rendering.
 */

import React from 'react';
import { createPriorityLoader, type Priority } from '@/lib/priority-loader';

interface PriorityBoundaryProps {
  priority: Priority;
  children: React.ReactNode;
  fallback?: React.ReactNode;
  className?: string;
  name?: string;
}

export function PriorityBoundary({
  priority,
  children,
  fallback,
  className = '',
  name,
}: PriorityBoundaryProps) {
  const loader = React.useMemo(
    () =>
      createPriorityLoader({
        priority,
        suspenseId: name,
      }),
    [priority, name]
  );

  return (
    <div className={`priority-boundary priority-${priority} ${className}`} data-priority={priority}>
      {priority === 0 ? (
        <React.Suspense fallback={null}>{children}</React.Suspense>
      ) : (
        <React.Suspense fallback={fallback || loader.fallback}>
          {children}
        </React.Suspense>
      )}
    </div>
  );
}

interface ProgressiveContainerProps {
  children: [React.ReactNode, React.ReactNode, React.ReactNode, React.ReactNode];
  className?: string;
}

export function ProgressiveContainer({
  children: [p0, p1, p2, p3],
  className = '',
}: ProgressiveContainerProps) {
  return (
    <div className={`progressive-container ${className}`}>
      <PriorityBoundary priority={0} name="progressive-p0">
        {p0}
      </PriorityBoundary>
      <div className="priority-layer priority-1">
        <PriorityBoundary priority={1} name="progressive-p1" fallback={null}>
          {p1}
        </PriorityBoundary>
      </div>
      <div className="priority-layer priority-2">
        <PriorityBoundary priority={2} name="progressive-p2" fallback={null}>
          {p2}
        </PriorityBoundary>
      </div>
      <div className="priority-layer priority-3">
        <PriorityBoundary priority={3} name="progressive-p3" fallback={null}>
          {p3}
        </PriorityBoundary>
      </div>
    </div>
  );
}