'use client';

/**
 * HybridCompactPlayer - Single-row audio player
 *
 * Designed for tight spaces: play/pause + waveform + timer.
 * No cover art, no volume slider, no skip buttons.
 *
 * @example
 * <HybridCompactPlayer src="https://example.com/audio.mp3" title="Rain & Thunder" />
 *
 * @example
 * // Lazy-loaded (preferred in app)
 * <LazyHybridCompactPlayer src={url} autoPlay />
 */

import { type ReactNode } from 'react';
import { Play, Pause, Loader2 } from 'lucide-react';
import { cn } from '@djangocfg/ui-core';
import { Button } from '../../_shared';

import { HybridAudioProvider } from '../context/HybridAudioProvider';
import { HybridWaveform } from './HybridWaveform';
import { useHybridAudioContext } from '../context/HybridAudioProvider';
import { formatTime } from '../utils';

// =============================================================================
// TYPES
// =============================================================================

export interface HybridCompactPlayerProps {
  /** Audio source URL */
  src: string;
  /** Track title (shown as tooltip / aria-label) */
  title?: string;
  /** Auto-play on load */
  autoPlay?: boolean;
  /** Loop playback */
  loop?: boolean;
  /** Initial volume (0-1) */
  initialVolume?: number;
  /** Waveform visualization mode */
  waveformMode?: 'frequency' | 'static';
  /** Show timer */
  showTimer?: boolean;
  /** Button size — 'sm' (h-6 w-6) | 'md' (h-8 w-8, default) */
  buttonSize?: 'sm' | 'md';
  /** Additional class name */
  className?: string;
  /** Callbacks */
  onPlay?: () => void;
  onPause?: () => void;
  onEnded?: () => void;
  onError?: (error: Error) => void;
}

// =============================================================================
// COMPONENT
// =============================================================================

export function HybridCompactPlayer({
  src,
  title,
  autoPlay = false,
  loop = false,
  initialVolume = 1,
  waveformMode = 'frequency',
  showTimer = true,
  buttonSize = 'md',
  className,
  onPlay,
  onPause,
  onEnded,
  onError,
}: HybridCompactPlayerProps): ReactNode {
  return (
    <HybridAudioProvider
      src={src}
      autoPlay={autoPlay}
      loop={loop}
      initialVolume={initialVolume}
      onPlay={onPlay}
      onPause={onPause}
      onEnded={onEnded}
      onError={onError}
    >
      <HybridCompactPlayerInner
        title={title}
        waveformMode={waveformMode}
        showTimer={showTimer}
        buttonSize={buttonSize}
        className={className}
      />
    </HybridAudioProvider>
  );
}

// =============================================================================
// INNER (needs context)
// =============================================================================

const BUTTON_SIZE = {
  sm: 'h-6 w-6',
  md: 'h-8 w-8',
} as const;

interface InnerProps {
  title?: string;
  waveformMode: 'frequency' | 'static';
  showTimer: boolean;
  buttonSize: 'sm' | 'md';
  className?: string;
}

function HybridCompactPlayerInner({ title, waveformMode, showTimer, buttonSize, className }: InnerProps) {
  const { state, controls } = useHybridAudioContext();
  const isLoading = !state.isReady;

  return (
    <div className={cn('flex items-center gap-2 w-full', className)}>
      {/* Play / Pause */}
      <Button
        variant="ghost"
        size="icon"
        className={cn(BUTTON_SIZE[buttonSize], 'flex-shrink-0')}
        onClick={controls.togglePlay}
        disabled={!state.isReady && !isLoading}
        title={title ?? (state.isPlaying ? 'Pause' : 'Play')}
        aria-label={state.isPlaying ? 'Pause' : 'Play'}
      >
        {isLoading ? (
          <Loader2 className="h-3.5 w-3.5 animate-spin" />
        ) : state.isPlaying ? (
          <Pause className="h-3.5 w-3.5" />
        ) : (
          <Play className="h-3.5 w-3.5 ml-0.5" />
        )}
      </Button>

      {/* Waveform */}
      <div className="flex-1 min-w-0">
        <HybridWaveform
          mode={waveformMode}
          height={32}
          barWidth={2}
          barGap={1}
          className={cn(isLoading && 'opacity-40')}
        />
      </div>

      {/* Timer */}
      {showTimer && (
        <span className="text-[11px] text-muted-foreground tabular-nums flex-shrink-0">
          {formatTime(state.currentTime)}
          <span className="text-muted-foreground/50"> / </span>
          {formatTime(state.duration)}
        </span>
      )}
    </div>
  );
}

export default HybridCompactPlayer;
