veza/apps/web/src/components/player/PlayerControls.tsx

import React, { useState } from 'react';
import {
  Play,
  Pause,
  SkipBack,
  SkipForward,
  Shuffle,
  Repeat,
  Volume2,
  VolumeX,
  Gauge,
  SlidersHorizontal,
} from 'lucide-react';
import { useAudio } from '../../context/AudioContext';
import { PlaybackSpeedModal } from './PlaybackSpeedModal';
import { VisualizerSettingsModal } from './VisualizerSettingsModal';

interface PlayerControlsProps {
  layout?: 'compact' | 'full';
}

export const PlayerControls: React.FC<PlayerControlsProps> = ({
  layout = 'compact',
}) => {
  const {
    isPlaying,
    togglePlay,
    nextTrack,
    prevTrack,
    shuffle,
    toggleShuffle,
    repeatMode,
    toggleRepeat,
    volume,
    setVolume,
    isMuted,
    toggleMute,
    playbackRate: _playbackRate,
  } = useAudio();

  const [showSpeed, setShowSpeed] = useState(false);
  const [showVisualizer, setShowVisualizer] = useState(false);

  return (
    <div
      className={`flex items-center ${layout === 'full' ? 'justify-between w-full max-w-4xl' : 'justify-center gap-4'}`}
    >
      {/* 1. Playback Modifiers */}
      <div className="flex items-center gap-4 relative">
        <button
          className={`transition-colors hover:text-white ${shuffle ? 'text-kodo-cyan' : 'text-kodo-content-dim'}`}
          onClick={toggleShuffle}
          title="Shuffle"
        >
          <Shuffle className={layout === 'full' ? 'w-5 h-5' : 'w-4 h-4'} />
        </button>
        <button
          className={`transition-colors hover:text-white relative ${repeatMode !== 'off' ? 'text-kodo-cyan' : 'text-kodo-content-dim'}`}
          onClick={toggleRepeat}
          title="Repeat"
        >
          <Repeat className={layout === 'full' ? 'w-5 h-5' : 'w-4 h-4'} />
          {repeatMode === 'one' && (
            <span className="absolute -top-1 -right-1 text-[8px] font-bold">
              1
            </span>
          )}
        </button>
      </div>

      {/* 2. Main Transport */}
      <div className="flex items-center gap-6">
        <button
          className="text-kodo-content-dim hover:text-white transition-colors"
          onClick={prevTrack}
        >
          <SkipBack
            className={
              layout === 'full'
                ? 'w-8 h-8 fill-current'
                : 'w-5 h-5 fill-current'
            }
          />
        </button>
        <button
          onClick={togglePlay}
          className={`${layout === 'full' ? 'w-14 h-14' : 'w-10 h-10'} rounded-full bg-white text-black flex items-center justify-center transition-opacity duration-200 hover:opacity-90`}
        >
          {isPlaying ? (
            <Pause
              className={
                layout === 'full'
                  ? 'w-6 h-6 fill-current'
                  : 'w-5 h-5 fill-current'
              }
            />
          ) : (
            <Play
              className={
                layout === 'full'
                  ? 'w-6 h-6 fill-current ml-1'
                  : 'w-5 h-5 fill-current ml-1'
              }
            />
          )}
        </button>
        <button
          className="text-kodo-content-dim hover:text-white transition-colors"
          onClick={nextTrack}
        >
          <SkipForward
            className={
              layout === 'full'
                ? 'w-8 h-8 fill-current'
                : 'w-5 h-5 fill-current'
            }
          />
        </button>
      </div>

      {/* 3. Volume & Speed */}
      <div className="flex items-center gap-4 relative">
        {layout === 'full' && (
          <>
            <button
              className={`text-kodo-content-dim hover:text-kodo-gold transition-colors ${showSpeed ? 'text-kodo-gold' : ''}`}
              onClick={() => {
                setShowSpeed(!showSpeed);
                setShowVisualizer(false);
              }}
              title="Playback Speed"
            >
              <Gauge className="w-5 h-5" />
            </button>
            <button
              className={`text-kodo-content-dim hover:text-white transition-colors ${showVisualizer ? 'text-kodo-cyan' : ''}`}
              onClick={() => {
                setShowVisualizer(!showVisualizer);
                setShowSpeed(false);
              }}
              title="Visualizer Settings"
            >
              <SlidersHorizontal className="w-5 h-5" />
            </button>
          </>
        )}

        {/* Volume */}
        <div className="flex items-center gap-2 group w-24">
          <button
            onClick={toggleMute}
            className="text-kodo-content-dim hover:text-white"
          >
            {isMuted || volume === 0 ? (
              <VolumeX className="w-4 h-4" />
            ) : (
              <Volume2 className="w-4 h-4" />
            )}
          </button>
          <div
            className="flex-1 h-1 bg-kodo-steel rounded-full cursor-pointer relative"
            onClick={(e) => {
              const rect = e.currentTarget.getBoundingClientRect();
              setVolume(((e.clientX - rect.left) / rect.width) * 100);
            }}
          >
            <div
              className={`absolute top-0 left-0 h-full bg-white rounded-full ${isMuted ? 'opacity-50' : 'opacity-100'}`}
              style={{ width: `${isMuted ? 0 : volume}%` }}
            ></div>
          </div>
        </div>

        {/* Modals Positioned Relative */}
        {showSpeed && (
          <PlaybackSpeedModal onClose={() => setShowSpeed(false)} />
        )}
        {showVisualizer && (
          <VisualizerSettingsModal onClose={() => setShowVisualizer(false)} />
        )}
      </div>
    </div>
  );
};