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

import { ThumbnailSelector } from './ThumbnailSelector';

const meta: Meta<typeof ThumbnailSelector> = {
  title: 'Components/Video/ThumbnailSelector',
  component: ThumbnailSelector,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'A component for selecting video thumbnails with a timeline scrubber. Features real-time thumbnail generation, preview display, and smooth timeline interaction.',
      },
    },
  },
  tags: ['autodocs'],
  argTypes: {
    videoUrl: {
      control: 'text',
      description: 'URL of the video to generate thumbnails from',
    },
    videoDuration: {
      control: 'number',
      description: 'Duration of the video in milliseconds',
    },
    thumbnailTimestamp: {
      control: 'number',
      description: 'Current timestamp for the thumbnail',
    },
    onThumbnailTimestampChange: {
      action: 'onThumbnailTimestampChange',
      description:
        'Callback function called when the thumbnail timestamp changes',
    },
    className: {
      control: 'text',
      description: 'Additional CSS classes to apply',
    },
    showPreview: {
      control: 'boolean',
      description: 'Whether to show the thumbnail preview',
    },
    showLabels: {
      control: 'boolean',
      description: 'Whether to show time labels and descriptions',
    },
  },
};

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

// Mock video URLs for different test scenarios
const MOCK_VIDEO_URLS = {
  short: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4',
  long: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  medium: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4',
};

const MOCK_VIDEO_DURATIONS = {
  short: 30000, // 30 seconds
  medium: 120000, // 2 minutes
  long: 596000, // ~10 minutes
};

const InteractiveDemo = (args: any) => {
  const [thumbnailTimestamp, setThumbnailTimestamp] = useState(5000); // Start at 5 seconds

  const handleThumbnailTimestampChange = (timestamp: number) => {
    setThumbnailTimestamp(timestamp);
  };

  return (
    <div className='w-full max-w-2xl'>
      <div className='mb-4 rounded-lg bg-background-secondary p-4'>
        <h3 className='mb-2 font-semibold'>Thumbnail Controls</h3>
        <div className='flex items-center gap-4'>
          <span className='text-sm text-foreground-secondary'>
            Current: {Math.round(thumbnailTimestamp / 1000)}s
          </span>
          <button
            onClick={() => setThumbnailTimestamp(0)}
            className='rounded bg-accent-blue px-3 py-1 text-sm text-white hover:bg-blue-600'
            type='button'
          >
            Start
          </button>
          <button
            onClick={() =>
              setThumbnailTimestamp((args.videoDuration || 30000) / 4)
            }
            className='rounded bg-accent-green px-3 py-1 text-sm text-white hover:bg-green-600'
            type='button'
          >
            25%
          </button>
          <button
            onClick={() =>
              setThumbnailTimestamp((args.videoDuration || 30000) / 2)
            }
            className='rounded bg-accent-yellow px-3 py-1 text-sm text-white hover:bg-yellow-600'
            type='button'
          >
            50%
          </button>
          <button
            onClick={() =>
              setThumbnailTimestamp((args.videoDuration || 30000) * 0.75)
            }
            className='rounded bg-accent-orange px-3 py-1 text-sm text-white hover:bg-orange-600'
            type='button'
          >
            75%
          </button>
          <button
            onClick={() => setThumbnailTimestamp(args.videoDuration || 30000)}
            className='rounded bg-accent-red px-3 py-1 text-sm text-white hover:bg-red-600'
            type='button'
          >
            End
          </button>
        </div>
      </div>
      <ThumbnailSelector
        videoUrl={args.videoUrl || MOCK_VIDEO_URLS.short}
        videoDuration={args.videoDuration || MOCK_VIDEO_DURATIONS.short}
        thumbnailTimestamp={thumbnailTimestamp}
        onThumbnailTimestampChange={handleThumbnailTimestampChange}
        className={args.className}
        showPreview={args.showPreview}
        showLabels={args.showLabels}
      />
    </div>
  );
};

export const Default: Story = {
  render: InteractiveDemo,
  args: {
    videoUrl: MOCK_VIDEO_URLS.short,
    videoDuration: MOCK_VIDEO_DURATIONS.short,
    showPreview: true,
    showLabels: true,
  },
};

export const ShortVideo: Story = {
  render: InteractiveDemo,
  args: {
    videoUrl: MOCK_VIDEO_URLS.short,
    videoDuration: MOCK_VIDEO_DURATIONS.short,
    showPreview: true,
    showLabels: true,
  },
  parameters: {
    docs: {
      description: {
        story:
          'A short video thumbnail selector (30 seconds) for testing basic functionality.',
      },
    },
  },
};

export const MediumVideo: Story = {
  render: InteractiveDemo,
  args: {
    videoUrl: MOCK_VIDEO_URLS.medium,
    videoDuration: MOCK_VIDEO_DURATIONS.medium,
    showPreview: true,
    showLabels: true,
  },
  parameters: {
    docs: {
      description: {
        story:
          'A medium-length video thumbnail selector (2 minutes) for testing performance.',
      },
    },
  },
};

export const LongVideo: Story = {
  render: InteractiveDemo,
  args: {
    videoUrl: MOCK_VIDEO_URLS.long,
    videoDuration: MOCK_VIDEO_DURATIONS.long,
    showPreview: true,
    showLabels: true,
  },
  parameters: {
    docs: {
      description: {
        story:
          'A long video thumbnail selector (10 minutes) for testing performance and memory usage.',
      },
    },
  },
};

export const WithoutPreview: Story = {
  render: InteractiveDemo,
  args: {
    videoUrl: MOCK_VIDEO_URLS.short,
    videoDuration: MOCK_VIDEO_DURATIONS.short,
    showPreview: false,
    showLabels: true,
  },
  parameters: {
    docs: {
      description: {
        story:
          'Thumbnail selector without the preview image, showing only the timeline controls.',
      },
    },
  },
};

export const WithoutLabels: Story = {
  render: InteractiveDemo,
  args: {
    videoUrl: MOCK_VIDEO_URLS.short,
    videoDuration: MOCK_VIDEO_DURATIONS.short,
    showPreview: true,
    showLabels: false,
  },
  parameters: {
    docs: {
      description: {
        story:
          'Thumbnail selector without time labels, showing only the preview and timeline.',
      },
    },
  },
};

export const Minimal: Story = {
  render: InteractiveDemo,
  args: {
    videoUrl: MOCK_VIDEO_URLS.short,
    videoDuration: MOCK_VIDEO_DURATIONS.short,
    showPreview: false,
    showLabels: false,
  },
  parameters: {
    docs: {
      description: {
        story: 'Minimal thumbnail selector with only the timeline scrubber.',
      },
    },
  },
};

export const WithoutVideo: Story = {
  render: InteractiveDemo,
  args: {
    videoUrl: '',
    videoDuration: 0,
    showPreview: true,
    showLabels: true,
  },
  parameters: {
    docs: {
      description: {
        story:
          'Thumbnail selector in a state where no video is loaded, showing loading state.',
      },
    },
  },
};

export const CustomStyling: Story = {
  render: InteractiveDemo,
  args: {
    videoUrl: MOCK_VIDEO_URLS.short,
    videoDuration: MOCK_VIDEO_DURATIONS.short,
    showPreview: true,
    showLabels: true,
    className: 'border-2 border-purple-500 rounded-lg p-4 bg-purple-50',
  },
  parameters: {
    docs: {
      description: {
        story:
          'Thumbnail selector with custom CSS classes for styling customization.',
      },
    },
  },
};

const DifferentStartPositionsDemo = () => {
  const [thumbnailTimestamp, setThumbnailTimestamp] = useState(15000); // Start at 15 seconds

  const handleThumbnailTimestampChange = (timestamp: number) => {
    setThumbnailTimestamp(timestamp);
  };

  return (
    <div className='w-full max-w-2xl space-y-4'>
      <div className='rounded-lg bg-gray-100 p-4'>
        <h3 className='mb-2 font-semibold'>
          Thumbnail Selector with Different Start Position
        </h3>
        <p className='text-sm text-gray-600'>
          This selector starts at 15 seconds to test thumbnail generation with
          different initial positions.
        </p>
      </div>
      <ThumbnailSelector
        videoUrl={MOCK_VIDEO_URLS.medium}
        videoDuration={MOCK_VIDEO_DURATIONS.medium}
        thumbnailTimestamp={thumbnailTimestamp}
        onThumbnailTimestampChange={handleThumbnailTimestampChange}
        showPreview={true}
        showLabels={true}
      />
    </div>
  );
};

export const DifferentStartPositions: Story = {
  render: DifferentStartPositionsDemo,
  parameters: {
    docs: {
      description: {
        story:
          'Thumbnail selector starting at different timestamp positions to test thumbnail generation.',
      },
    },
  },
};

const PerformanceTestDemo = () => {
  const [thumbnailTimestamp, setThumbnailTimestamp] = useState(0);
  const [isGenerating, setIsGenerating] = useState(false);

  const handleThumbnailTimestampChange = (timestamp: number) => {
    setThumbnailTimestamp(timestamp);
    setIsGenerating(true);
    // Simulate thumbnail generation delay
    setTimeout(() => setIsGenerating(false), 500);
  };

  return (
    <div className='w-full max-w-2xl space-y-4'>
      <div className='rounded-lg bg-gray-100 p-4'>
        <h3 className='mb-2 font-semibold'>Performance Test</h3>
        <p className='text-sm text-gray-600'>
          This selector is optimized for performance with efficient thumbnail
          generation.
          {isGenerating && (
            <span className='ml-2 text-accent-blue'>
              Generating thumbnail...
            </span>
          )}
        </p>
      </div>
      <ThumbnailSelector
        videoUrl={MOCK_VIDEO_URLS.long}
        videoDuration={MOCK_VIDEO_DURATIONS.long}
        thumbnailTimestamp={thumbnailTimestamp}
        onThumbnailTimestampChange={handleThumbnailTimestampChange}
        showPreview={true}
        showLabels={true}
      />
    </div>
  );
};

export const PerformanceTest: Story = {
  render: PerformanceTestDemo,
  parameters: {
    docs: {
      description: {
        story:
          'Performance-optimized thumbnail selector with efficient thumbnail generation.',
      },
    },
  },
};