'use client';

/**
 * Lazy-loaded AudioPlayer Components
 *
 * Heavy WaveSurfer.js (~200KB) is loaded only when component is rendered.
 * Use this for automatic code-splitting with Suspense fallback.
 *
 * For direct imports without lazy loading, use:
 * import { HybridAudioPlayer } from '@djangocfg/ui-tools/audio'
 */

import { createLazyComponent, LoadingFallback } from '../../components';
import type {
  HybridAudioPlayerProps,
  HybridSimplePlayerProps,
  HybridCompactPlayerProps,
} from './components';

// ============================================================================
// Re-export types
// ============================================================================

export type { HybridAudioPlayerProps, HybridSimplePlayerProps, HybridCompactPlayerProps };

// ============================================================================
// Audio Loading Fallback
// ============================================================================

function AudioLoadingFallback() {
  return (
    <div className="flex items-center justify-center p-6 bg-muted/30 rounded-lg">
      <div className="flex flex-col items-center gap-2">
        <div className="relative">
          <div className="h-10 w-10 animate-spin rounded-full border-4 border-muted border-t-primary" />
          <div className="absolute inset-0 flex items-center justify-center">
            <svg
              className="h-5 w-5 text-muted-foreground"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
              />
            </svg>
          </div>
        </div>
        <span className="text-sm text-muted-foreground">Loading audio player...</span>
      </div>
    </div>
  );
}

// ============================================================================
// Lazy Components
// ============================================================================

/**
 * LazyHybridAudioPlayer - Lazy-loaded full-featured audio player
 *
 * Automatically shows loading state while WaveSurfer loads (~200KB)
 */
export const LazyHybridAudioPlayer = createLazyComponent<HybridAudioPlayerProps>(
  () => import('./components').then((mod) => ({ default: mod.HybridAudioPlayer })),
  {
    displayName: 'LazyHybridAudioPlayer',
    fallback: <AudioLoadingFallback />,
  }
);

/**
 * LazyHybridSimplePlayer - Lazy-loaded simple audio player
 *
 * Automatically shows loading state while WaveSurfer loads (~200KB)
 */
export const LazyHybridSimplePlayer = createLazyComponent<HybridSimplePlayerProps>(
  () => import('./components').then((mod) => ({ default: mod.HybridSimplePlayer })),
  {
    displayName: 'LazyHybridSimplePlayer',
    fallback: <AudioLoadingFallback />,
  }
);

/**
 * LazyHybridCompactPlayer - Lazy-loaded compact single-row audio player
 *
 * Use in tight spaces: play/pause + waveform + timer in one line.
 */
export const LazyHybridCompactPlayer = createLazyComponent<HybridCompactPlayerProps>(
  () => import('./components').then((mod) => ({ default: mod.HybridCompactPlayer })),
  {
    displayName: 'LazyHybridCompactPlayer',
    fallback: (
      <div className="flex items-center gap-2 h-8 px-1 animate-pulse">
        <div className="h-8 w-8 rounded-md bg-muted flex-shrink-0" />
        <div className="flex-1 h-4 rounded bg-muted" />
        <div className="h-3 w-12 rounded bg-muted flex-shrink-0" />
      </div>
    ),
  }
);
