import type { Meta, StoryObj } from '@storybook/react';
import { VideoPlayer } from './VideoPlayer';

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

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

export const Default: Story = {
  args: {
    src: 'https://www.w3schools.com/html/mov_bbb.mp4',
    title: 'Big Buck Bunny',
    poster: 'https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217',
  },
  render: args => (
    <div className="p-8 max-w-3xl">
      <VideoPlayer {...args} />
    </div>
  ),
};

export const AutoPlay: Story = {
  args: {
    src: 'https://www.w3schools.com/html/mov_bbb.mp4',
    title: 'Auto Playing Video',
    autoPlay: true,
  },
  render: args => (
    <div className="p-8 max-w-3xl">
      <VideoPlayer {...args} />
    </div>
  ),
};

export const NoPoster: Story = {
  args: {
    src: 'https://www.w3schools.com/html/mov_bbb.mp4',
    title: 'Video Without Poster',
  },
  render: args => (
    <div className="p-8 max-w-3xl">
      <VideoPlayer {...args} />
    </div>
  ),
};

export const NoAutoFloat: Story = {
  args: {
    src: 'https://www.w3schools.com/html/mov_bbb.mp4',
    title: 'Video Without Auto-Float',
    enableAutoFloat: false,
  },
  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-3xl">
        <VideoPlayer {...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 - the player will NOT float.</p>
      </div>
    </div>
  ),
};

export const AutoFloat: Story = {
  args: {
    src: 'https://www.w3schools.com/html/mov_bbb.mp4',
    title: 'Floating Demo - Scroll 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 video and scroll down. The player will float to the corner automatically!
        </p>
      </div>
      <div className="max-w-3xl">
        <VideoPlayer {...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>
  ),
};