import type { Meta, StoryObj } from '@storybook/nextjs';
import React from 'react';

import { SimpleMediaPreview } from './SimpleMediaPreview';

const meta: Meta<typeof SimpleMediaPreview> = {
  title: 'Components/SimpleMediaPreview',
  component: SimpleMediaPreview,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: 'A media preview component that supports images, videos, and audio files with custom playback controls.',
      },
    },
  },
  tags: ['autodocs'],
  argTypes: {
    src: {
      control: { type: 'text' },
      description: 'The media source URL or File object',
    },
    alt: {
      control: { type: 'text' },
      description: 'Alternative text for images or display name for audio',
    },
    type: {
      control: { type: 'select' },
      options: ['image', 'video', 'audio', 'unknown'],
      description: 'Type of media (auto-detected if not provided)',
    },
    controls: {
      control: { type: 'boolean' },
      description: 'Show controls for video/audio',
    },
    autoplay: {
      control: { type: 'boolean' },
      description: 'Autoplay video/audio (muted only for video)',
    },
    loop: {
      control: { type: 'boolean' },
      description: 'Loop video/audio playback',
    },
    thumbnail: {
      control: { type: 'text' },
      description: 'Thumbnail URL for video/audio',
    },
    aspectRatio: {
      control: { type: 'select' },
      options: ['16/9', '4/3', '1/1', '9/16', 'auto'],
      description: 'Aspect ratio for responsive sizing',
    },
    width: {
      control: { type: 'number' },
      description: 'Width of the media container',
    },
    height: {
      control: { type: 'number' },
      description: 'Height of the media container',
    },
    loading: {
      control: { type: 'boolean' },
      description: 'Show loading state',
    },
  },
};

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

// Sample media URLs
const SAMPLE_IMAGE = 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop';
const SAMPLE_VIDEO = 'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4';
const SAMPLE_AUDIO = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';
const SAMPLE_THUMBNAIL = 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=400&h=400&fit=crop';

export const Image: Story = {
  args: {
    src: SAMPLE_IMAGE,
    alt: 'Mountain landscape',
  },
};

export const ImageWithAspectRatio: Story = {
  args: {
    src: SAMPLE_IMAGE,
    alt: 'Mountain landscape',
    aspectRatio: '16/9',
  },
};

export const ImageSquare: Story = {
  args: {
    src: SAMPLE_IMAGE,
    alt: 'Mountain landscape',
    aspectRatio: '1/1',
  },
};

export const ImageWithCustomSize: Story = {
  args: {
    src: SAMPLE_IMAGE,
    alt: 'Mountain landscape',
    width: 600,
    height: 400,
  },
};

export const Video: Story = {
  args: {
    src: SAMPLE_VIDEO,
    alt: 'Big Buck Bunny',
  },
};

export const VideoAutoplay: Story = {
  args: {
    src: SAMPLE_VIDEO,
    alt: 'Big Buck Bunny',
    autoplay: true,
    loop: true,
  },
};

export const VideoWithThumbnail: Story = {
  args: {
    src: SAMPLE_VIDEO,
    alt: 'Big Buck Bunny',
    thumbnail: SAMPLE_THUMBNAIL,
  },
};

export const VideoNoControls: Story = {
  args: {
    src: SAMPLE_VIDEO,
    alt: 'Big Buck Bunny',
    controls: false,
    autoplay: true,
    loop: true,
  },
};

export const Audio: Story = {
  args: {
    src: SAMPLE_AUDIO,
    alt: 'Sound Helix Song',
  },
};

export const AudioWithThumbnail: Story = {
  args: {
    src: SAMPLE_AUDIO,
    alt: 'Sound Helix Song',
    thumbnail: SAMPLE_THUMBNAIL,
  },
};

export const LoadingState: Story = {
  args: {
    src: SAMPLE_IMAGE,
    loading: true,
  },
};

export const ErrorState: Story = {
  args: {
    src: 'https://invalid-url.example.com/image.jpg',
    alt: 'Failed to load',
  },
};

export const UnknownType: Story = {
  args: {
    src: 'document.pdf',
    alt: 'Unknown file type',
  },
};

export const ForceImageType: Story = {
  args: {
    src: 'https://example.com/no-extension',
    type: 'image',
    alt: 'Forced image type',
  },
  parameters: {
    docs: {
      description: {
        story: 'Force a specific media type when auto-detection fails',
      },
    },
  },
};

export const FileUpload: Story = {
  render: () => {
    const [file, setFile] = React.useState<File | null>(null);

    return (
      <div style={{ width: '100%', maxWidth: '600px' }}>
        <input
          type="file"
          accept="image/*,video/*,audio/*"
          onChange={(e) => setFile(e.target.files?.[0] || null)}
          style={{ marginBottom: '20px' }}
        />
        {file && (
          <SimpleMediaPreview
            src={file}
            alt={file.name}
          />
        )}
      </div>
    );
  },
  parameters: {
    docs: {
      description: {
        story: 'Upload and preview local files',
      },
    },
  },
};

export const Gallery: Story = {
  render: () => (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px', width: '800px' }}>
      <SimpleMediaPreview
        src={SAMPLE_IMAGE}
        alt="Image 1"
        aspectRatio="1/1"
        onClick={() => alert('Image 1 clicked')}
      />
      <SimpleMediaPreview
        src={SAMPLE_VIDEO}
        alt="Video 1"
        aspectRatio="1/1"
        thumbnail={SAMPLE_THUMBNAIL}
      />
      <SimpleMediaPreview
        src={SAMPLE_AUDIO}
        alt="Audio 1"
        aspectRatio="1/1"
        thumbnail={SAMPLE_THUMBNAIL}
      />
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: 'Multiple media items in a grid layout',
      },
    },
  },
};

export const Responsive: Story = {
  render: () => (
    <div style={{ width: '100%', maxWidth: '800px' }}>
      <SimpleMediaPreview
        src={SAMPLE_VIDEO}
        alt="Responsive video"
        aspectRatio="16/9"
      />
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: 'Responsive media that maintains aspect ratio',
      },
    },
  },
};

export const ClickHandler: Story = {
  args: {
    src: SAMPLE_IMAGE,
    alt: 'Clickable image',
    onClick: () => alert('Image clicked!'),
  },
  parameters: {
    docs: {
      description: {
        story: 'Handle click events on media',
      },
    },
  },
};

export const PlayStateCallback: Story = {
  render: () => {
    const [isPlaying, setIsPlaying] = React.useState(false);

    return (
      <div style={{ width: '100%', maxWidth: '600px' }}>
        <SimpleMediaPreview
          src={SAMPLE_VIDEO}
          alt="Video with play state"
          onPlayStateChange={setIsPlaying}
        />
        <p style={{ marginTop: '16px', textAlign: 'center' }}>
          Status: {isPlaying ? '▶️ Playing' : '⏸️ Paused'}
        </p>
      </div>
    );
  },
  parameters: {
    docs: {
      description: {
        story: 'Track play/pause state changes',
      },
    },
  },
};