import type { Meta, StoryObj } from '@storybook/react';
import { AudioPlayer } from './AudioPlayer';
import React, { useState } from 'react';
import { Button } from '../../ui/button';

const meta: Meta<typeof AudioPlayer> = {
  title: 'Media/AudioPlayer',
  component: AudioPlayer,
  parameters: {
    layout: 'fullscreen',
  },
};

export default meta;
type Story = StoryObj<typeof AudioPlayer>;

export const Card: Story = {
  args: {
    variant: 'card',
    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
    title: 'Ambient Soundscape',
    artist: 'Nature Sounds Vol. 1',
  },
  render: args => (
    <div className="p-8 max-w-md">
      <AudioPlayer {...args} />
    </div>
  ),
};

export const GlobalBar: Story = {
  args: {
    variant: 'bar',
    isOpen: true,
    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
    title: 'Quarterly Results Briefing',
    subtitle: 'Podcast episode #42 • 15MB',
  },
  render: args => {
    const [open, setOpen] = useState(args.isOpen);
    return (
      <div className="min-h-screen bg-muted/20 p-8">
        <Button onClick={() => setOpen(!open)}>{open ? 'Close Player' : 'Open Player'}</Button>
        <AudioPlayer {...args} isOpen={open} onClose={() => setOpen(false)} />
      </div>
    );
  },
};

export const AutoFloat: Story = {
  args: {
    variant: 'card',
    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3',
    title: 'Floating Demo',
    artist: 'Scroll down to see it float',
  },
  render: args => (
    <div className="p-8">
      <div className="mb-8 p-4 bg-primary/10 rounded-lg">
        <p className="text-sm">
          Play the audio and scroll down. The player will float to the corner automatically!
        </p>
      </div>
      <div className="max-w-md">
        <AudioPlayer {...args} />
      </div>
      <div className="h-[200vh] mt-8 bg-gradient-to-b from-transparent to-muted/50 p-8">
        <h3 className="text-xl font-bold">Scroll more...</h3>
        <p className="mt-4 text-muted-foreground">
          Keep scrolling to trigger the floating behavior.
        </p>
      </div>
    </div>
  ),
};

export const PodcastStyle: Story = {
  args: {
    variant: 'bar',
    colorVariant: 'primary',
    isOpen: true,
    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3',
    title: 'Podcast: O Futuro da IA na UI',
    subtitle: 'Episódio 42 • 45 min permanecendo',
  },
  render: args => {
    const [open, setOpen] = useState(args.isOpen);
    return (
      <div className="min-h-screen bg-slate-50 p-8">
        <div className="max-w-2xl mx-auto space-y-6">
          <h1 className="text-3xl font-bold">Xertica Podcast</h1>
          <p className="text-muted-foreground">
            Experimente o novo player consolidado em modo "Branded".
          </p>
          <Button onClick={() => setOpen(!open)}>
            {open ? 'Fechar Player' : 'Abrir Podcast Player'}
          </Button>
        </div>
        <AudioPlayer {...args} isOpen={open} onClose={() => setOpen(false)} />
      </div>
    );
  },
};

export const NoAutoFloat: Story = {
  args: {
    variant: 'card',
    enableAutoFloat: false,
    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3',
    title: 'Static Player',
    artist: 'This one will not float',
  },
  render: args => (
    <div className="p-8">
      <div className="mb-8 p-4 bg-yellow-50 border border-yellow-200 rounded-lg text-yellow-800">
        <p className="text-sm font-medium">Auto-float disabled via `enableAutoFloat={false}`.</p>
      </div>
      <div className="max-w-md">
        <AudioPlayer {...args} />
      </div>
      <div className="h-[100vh] mt-8" />
    </div>
  ),
};