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

import React from 'react';
import { X, Activity } from 'lucide-react';
import { useAudio, VisualizerSettings } from '../../context/AudioContext';

interface VisualizerSettingsModalProps {
  onClose: () => void;
}

export const VisualizerSettingsModal: React.FC<
  VisualizerSettingsModalProps
> = ({ onClose }) => {
  const { visualizerSettings, setVisualizerSettings } = useAudio();

  const updateSetting = (key: keyof VisualizerSettings, value: any) => {
    setVisualizerSettings({ ...visualizerSettings, [key]: value });
  };

  const colors = ['#66FCF1', '#8A7EA4', '#36E5D1', '#E4B314', '#E63946'];

  return (
    <div className="absolute bottom-20 right-0 md:right-auto md:left-1/2 md:-translate-x-1/2 w-72 bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl z-50 animate-fadeIn overflow-hidden">
      <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
        <h3 className="font-bold text-white flex items-center gap-2 text-sm">
          <Activity className="w-4 h-4 text-kodo-steel" /> Visualizer
        </h3>
        <button onClick={onClose}>
          <X className="w-4 h-4 text-kodo-content-dim hover:text-white" />
        </button>
      </div>

      <div className="p-6 space-y-6">
        {/* Mode */}
        <div>
          <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
            Display Mode
          </label>
          <div className="grid grid-cols-2 gap-2">
            {['waveform', 'spectrogram', 'bars', 'off'].map((mode) => (
              <button
                key={mode}
                onClick={() => updateSetting('mode', mode)}
                className={`px-2 py-1.5 rounded text-xs font-bold capitalize transition-all border ${visualizerSettings.mode === mode ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-slate border-transparent text-kodo-content-dim hover:text-white'}`}
              >
                {mode}
              </button>
            ))}
          </div>
        </div>

        {/* Sensitivity */}
        <div>
          <div className="flex justify-between text-xs text-kodo-content-dim mb-1">
            <span>Sensitivity</span>
            <span>{visualizerSettings.sensitivity}%</span>
          </div>
          <input
            type="range"
            min="0"
            max="100"
            value={visualizerSettings.sensitivity}
            onChange={(e) =>
              updateSetting('sensitivity', Number(e.target.value))
            }
            className="w-full h-1 bg-kodo-steel rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-kodo-cyan [&::-webkit-slider-thumb]:rounded-full"
          />
        </div>

        {/* Color */}
        <div>
          <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
            Accent Color
          </label>
          <div className="flex gap-4">
            {colors.map((c) => (
              <div
                key={c}
                onClick={() => updateSetting('color', c)}
                className={`w-6 h-6 rounded-full cursor-pointer transition-opacity hover:opacity-80 ${visualizerSettings.color === c ? 'ring-2 ring-white ring-offset-2 ring-offset-kodo-graphite' : ''}`}
                style={{ backgroundColor: c }}
              ></div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};