import { defineStory, useBoolean, useSelect } from '@djangocfg/playground';
import { HybridSimplePlayer, HybridCompactPlayer, HybridAudioProvider, HybridAudioPlayer, AudioReactiveCover } from './index';

export default defineStory({
  title: 'Tools/Audio Player',
  component: HybridSimplePlayer,
  description: 'Audio player with waveform visualization and reactive effects.',
});

// CORS-friendly audio samples from Wikimedia Commons (Access-Control-Allow-Origin: *)
const AUDIO_SAMPLES = {
  sample1: 'https://upload.wikimedia.org/wikipedia/commons/4/4e/BWV_543-fugue.ogg',
  sample2: 'https://upload.wikimedia.org/wikipedia/commons/c/c4/Muriel-Nguyen-Xuan-Chopin-valse-opus64-1.ogg',
  sample3: 'https://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg',
};

export const Interactive = () => {
  const [track] = useSelect('track', {
    options: ['sample1', 'sample2', 'sample3'] as const,
    defaultValue: 'sample1',
    label: 'Track',
    description: 'Select audio track',
  });

  const [showWaveform] = useBoolean('showWaveform', {
    defaultValue: true,
    label: 'Show Waveform',
    description: 'Display audio waveform visualization',
  });

  const [showControls] = useBoolean('showControls', {
    defaultValue: true,
    label: 'Show Controls',
    description: 'Display playback controls',
  });

  const [coverVariant] = useSelect('coverVariant', {
    options: ['spotlight', 'glow', 'orbs', 'mesh', 'none'] as const,
    defaultValue: 'spotlight',
    label: 'Cover Effect',
    description: 'Reactive cover animation style',
  });

  return (
    <div className="max-w-md space-y-6">
      <HybridAudioProvider src={AUDIO_SAMPLES[track]}>
        {coverVariant !== 'none' && (
          <AudioReactiveCover variant={coverVariant}>
            <img
              src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400"
              alt="Album cover"
              className="w-full h-full object-cover"
            />
          </AudioReactiveCover>
        )}
        <HybridAudioPlayer showWaveform={showWaveform} showControls={showControls} />
      </HybridAudioProvider>
    </div>
  );
};

export const Simple = () => (
  <div className="max-w-2xl">
    <HybridSimplePlayer
      src={AUDIO_SAMPLES.sample1}
      title="Sample Track 1"
    />
  </div>
);

export const WithWaveform = () => (
  <div className="max-w-2xl">
    <HybridAudioProvider src={AUDIO_SAMPLES.sample2}>
      <HybridAudioPlayer showWaveform showControls />
    </HybridAudioProvider>
  </div>
);

export const WithReactiveCover = () => (
  <div className="max-w-md">
    <HybridAudioProvider src={AUDIO_SAMPLES.sample3}>
      <div className="space-y-4">
        <AudioReactiveCover variant="glow">
          <img
            src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400"
            alt="Album cover"
            className="w-full h-full object-cover"
          />
        </AudioReactiveCover>
        <HybridAudioPlayer showControls />
      </div>
    </HybridAudioProvider>
  </div>
);

export const Multiple = () => (
  <div className="max-w-2xl space-y-4">
    <HybridSimplePlayer src={AUDIO_SAMPLES.sample1} title="Track 1" />
    <HybridSimplePlayer src={AUDIO_SAMPLES.sample2} title="Track 2" />
    <HybridSimplePlayer src={AUDIO_SAMPLES.sample3} title="Track 3" />
  </div>
);

export const Compact = () => (
  <div className="max-w-sm space-y-2">
    <p className="text-sm text-muted-foreground mb-3">
      Single-row player — ideal for lists, sidebars, and tight spaces.
    </p>
    <HybridCompactPlayer src={AUDIO_SAMPLES.sample1} title="Rain & Thunder" />
    <HybridCompactPlayer src={AUDIO_SAMPLES.sample2} title="Ambient Loop" />
    <HybridCompactPlayer src={AUDIO_SAMPLES.sample3} title="City Noise" />
  </div>
);

export const CompactNoTimer = () => (
  <div className="max-w-xs">
    <HybridCompactPlayer
      src={AUDIO_SAMPLES.sample1}
      title="Without timer"
      showTimer={false}
    />
  </div>
);

export const CompactSmall = () => (
  <div className="max-w-sm space-y-2">
    <p className="text-sm text-muted-foreground mb-3">
      Small button size — for inline use in lists and cards.
    </p>
    <HybridCompactPlayer src={AUDIO_SAMPLES.sample1} title="Track 1" buttonSize="sm" />
    <HybridCompactPlayer src={AUDIO_SAMPLES.sample2} title="Track 2" buttonSize="sm" waveformMode="static" />
    <HybridCompactPlayer src={AUDIO_SAMPLES.sample3} title="Track 3" buttonSize="sm" showTimer={false} />
  </div>
);
