import { usePlaylistControls, usePlaybackAnimation } from '@waveform-playlist/browser';

function PlaybackButtons() {
  const { play, pause, stop, setCurrentTime } = usePlaylistControls();
  const { isPlaying, currentTime } = usePlaybackAnimation();

  return (
    <div>
      <button onClick={() => play()}>Play</button>
      <button onClick={pause} disabled={!isPlaying}>Pause</button>
      <button onClick={stop} disabled={!isPlaying}>Stop</button>
      <button onClick={() => setCurrentTime(0)}>Rewind</button>
      <div>Time: {currentTime.toFixed(2)}s</div>
    </div>
  );
}

const { play } = usePlaylistControls();
const { currentTimeRef } = usePlaybackAnimation();

// Play from current position
await play(currentTimeRef.current ?? 0);

// Play from 5 seconds
await play(5.0);

// Play selection for 10 seconds, then stop
await play(startTime, 10.0);

const { pause } = usePlaylistControls();
const { isPlaying } = usePlaybackAnimation();

if (isPlaying) {
  pause();
}

const { stop } = usePlaylistControls();

stop(); // Stops and resets to beginning

const { setCurrentTime } = usePlaylistControls();

// Jump to 10 seconds
setCurrentTime(10.0);

// Return to start
setCurrentTime(0);

import { 
  PlayButton, 
  PauseButton, 
  StopButton, 
  RewindButton,
  SkipBackwardButton,
  SkipForwardButton,
} from '@waveform-playlist/browser';

function Controls() {
  return (
    <div>
      <RewindButton />
      <SkipBackwardButton skipAmount={5} />
      <PlayButton />
      <PauseButton />
      <StopButton />
      <SkipForwardButton skipAmount={5} />
    </div>
  );
}

export const PlayButton: React.FC = () => {
  const { isPlaying, currentTimeRef } = usePlaybackAnimation();
  const { selectionStart, selectionEnd, isLoopEnabled } = usePlaylistState();
  const { play } = usePlaylistControls();

  const handleClick = async () => {
    const hasSelection = selectionStart !== selectionEnd && selectionEnd > selectionStart;

    if (hasSelection && !isLoopEnabled) {
      // Play selection region only, then stop
      const duration = selectionEnd - selectionStart;
      await play(selectionStart, duration);
    } else {
      // Play from current position (loop handled by Transport)
      await play(currentTimeRef.current ?? 0);
    }
  };

  return (
    <BaseControlButton onClick={handleClick} disabled={isPlaying}>
      Play
    </BaseControlButton>
  );
};

function CustomSkipControls() {
  const { currentTimeRef, isPlaying } = usePlaybackAnimation();
  const { play, setCurrentTime } = usePlaylistControls();

  const skipBackward = (seconds: number) => {
    const newTime = Math.max(0, (currentTimeRef.current ?? 0) - seconds);
    setCurrentTime(newTime);
    
    if (isPlaying) {
      play(newTime);
    }
  };

  const skipForward = (seconds: number) => {
    const newTime = (currentTimeRef.current ?? 0) + seconds;
    setCurrentTime(newTime);
    
    if (isPlaying) {
      play(newTime);
    }
  };

  return (
    <>
      <button onClick={() => skipBackward(10)}>-10s</button>
      <button onClick={() => skipBackward(30)}>-30s</button>
      <button onClick={() => skipForward(30)}>+30s</button>
      <button onClick={() => skipForward(60)}>+60s</button>
    </>
  );
}

interface PlaybackAnimationContextValue {
  isPlaying: boolean;                          // Whether audio is playing
  currentTime: number;                         // Current playback time (updated per render)
  currentTimeRef: RefObject<number>;           // Ref for RAF-based time reads
  playbackStartTimeRef: RefObject<number>;     // AudioContext time when playback started
  audioStartPositionRef: RefObject<number>;    // Audio position when playback started
  getPlaybackTime: () => number;               // Get current time (auto-wraps at loop boundaries)
}

function ToggleButton() {
  const { isPlaying } = usePlaybackAnimation();
  const { play, pause } = usePlaylistControls();

  const toggle = async () => {
    if (isPlaying) {
      pause();
    } else {
      await play();
    }
  };

  return (
    <button onClick={toggle}>
      {isPlaying ? 'Pause' : 'Play'}
    </button>
  );
}

function PlaySelection() {
  const { selectionStart, selectionEnd } = usePlaylistState();
  const { play } = usePlaylistControls();

  const playSelection = async () => {
    if (selectionEnd > selectionStart) {
      const duration = selectionEnd - selectionStart;
      await play(selectionStart, duration);
    }
  };

  return (
    <button onClick={playSelection}>
      Play Selection
    </button>
  );
}

import { LoopButton, SetLoopRegionButton } from '@waveform-playlist/browser';

function LoopControls() {
  const { isLoopEnabled, loopStart, loopEnd } = usePlaylistState();
  const { setLoopEnabled, setLoopRegion, clearLoopRegion } = usePlaylistControls();

  return (
    <div>
      <LoopButton />  {/* Toggle loop on/off */}
      <SetLoopRegionButton />  {/* Set loop from selection */}
      
      {/* Manual loop region */}
      <button onClick={() => setLoopRegion(5.0, 15.0)}>
        Loop 5s - 15s
      </button>
      <button onClick={clearLoopRegion}>
        Clear Loop
      </button>
      
      <div>Loop: {isLoopEnabled ? 'ON' : 'OFF'}</div>
      <div>Region: {loopStart.toFixed(2)}s - {loopEnd.toFixed(2)}s</div>
    </div>
  );
}