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

import Button from '@/components/button/Button';

import { PickCoverModal } from './PickCoverModal';

const meta: Meta<typeof PickCoverModal> = {
  title: 'Components/Modal/PickCoverModal',
  component: PickCoverModal,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'A modal component for selecting a cover frame from a video timeline. Users can scrub through the video timeline and select a specific frame to use as the cover image.',
      },
    },
  },
  tags: ['autodocs'],
  argTypes: {
    isOpen: {
      control: 'boolean',
      description: 'Controls whether the modal is open or closed',
    },
    onClose: {
      action: 'onClose',
      description: 'Callback function called when the modal is closed',
    },
    onSave: {
      action: 'onSave',
      description:
        'Callback function called when the user saves their cover selection',
    },
    videoUrl: {
      control: 'text',
      description: 'URL of the video to display in the modal',
    },
    videoDuration: {
      control: 'number',
      description: 'Duration of the video in milliseconds',
    },
    currentTimestamp: {
      control: 'number',
      description: 'Current timestamp position in the video timeline',
    },
    onTimestampChange: {
      action: 'onTimestampChange',
      description: 'Callback function called when the timestamp changes',
    },
    uploadId: {
      control: 'text',
      description: 'Upload ID for generating thumbnails',
    },
  },
};

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

// Mock video URL - using a sample video for demo purposes
const MOCK_VIDEO_URL =
  'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4';
const MOCK_VIDEO_DURATION = 30000; // 30 seconds in milliseconds
const MOCK_UPLOAD_ID = 'mock-upload-123';

const InteractiveDemo = (args: any) => {
  const [isOpen, setIsOpen] = useState(false);
  const [currentTimestamp, setCurrentTimestamp] = useState(5000); // Start at 5 seconds

  const handleClose = () => {
    setIsOpen(false);
  };

  const handleSave = (timestamp: number, thumbnailS3Id?: string) => {
    console.log('Saving cover:', { timestamp, thumbnailS3Id });
    setIsOpen(false);
  };

  const handleTimestampChange = (timestamp: number) => {
    setCurrentTimestamp(timestamp);
  };

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Pick Cover Modal</Button>
      <PickCoverModal
        isOpen={isOpen}
        onClose={handleClose}
        onSave={handleSave}
        videoUrl={MOCK_VIDEO_URL}
        videoDuration={MOCK_VIDEO_DURATION}
        currentTimestamp={currentTimestamp}
        onTimestampChange={handleTimestampChange}
        uploadId={MOCK_UPLOAD_ID}
        {...args}
      />
    </>
  );
};

export const Default: Story = {
  render: InteractiveDemo,
  args: {
    isOpen: false,
  },
};

const AlwaysOpenDemo = (args: any) => {
  const [currentTimestamp, setCurrentTimestamp] = useState(10000); // Start at 10 seconds

  const handleSave = (timestamp: number, thumbnailS3Id?: string) => {
    console.log('Saving cover:', { timestamp, thumbnailS3Id });
  };

  const handleTimestampChange = (timestamp: number) => {
    setCurrentTimestamp(timestamp);
  };

  return (
    <PickCoverModal
      isOpen={true}
      onClose={() => {}}
      onSave={handleSave}
      videoUrl={MOCK_VIDEO_URL}
      videoDuration={MOCK_VIDEO_DURATION}
      currentTimestamp={currentTimestamp}
      onTimestampChange={handleTimestampChange}
      uploadId={MOCK_UPLOAD_ID}
      {...args}
    />
  );
};

export const AlwaysOpen: Story = {
  render: AlwaysOpenDemo,
  args: {},
  parameters: {
    docs: {
      description: {
        story:
          'The modal in an always-open state for easier testing and development.',
      },
    },
  },
};

export const WithCustomVideo: Story = {
  render: InteractiveDemo,
  args: {
    isOpen: false,
    videoUrl:
      'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    videoDuration: 596000, // ~10 minutes
  },
  parameters: {
    docs: {
      description: {
        story:
          'The modal with a different video source for testing various video formats and durations.',
      },
    },
  },
};

export const ShortVideo: Story = {
  render: InteractiveDemo,
  args: {
    isOpen: false,
    videoUrl: MOCK_VIDEO_URL,
    videoDuration: 5000, // 5 seconds
    currentTimestamp: 1000, // Start at 1 second
  },
  parameters: {
    docs: {
      description: {
        story: 'The modal with a short video duration to test edge cases.',
      },
    },
  },
};

export const LongVideo: Story = {
  render: InteractiveDemo,
  args: {
    isOpen: false,
    videoUrl: MOCK_VIDEO_URL,
    videoDuration: 600000, // 10 minutes
    currentTimestamp: 300000, // Start at 5 minutes
  },
  parameters: {
    docs: {
      description: {
        story:
          'The modal with a long video duration to test performance and timeline scrubbing.',
      },
    },
  },
};

export const WithoutVideo: Story = {
  render: InteractiveDemo,
  args: {
    isOpen: false,
    videoUrl: '',
    videoDuration: 0,
    currentTimestamp: 0,
  },
  parameters: {
    docs: {
      description: {
        story:
          'The modal in a state where no video is loaded, showing the loading/error state.',
      },
    },
  },
};

// Story for testing different starting timestamps
const DifferentStartPositionsDemo = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [currentTimestamp, setCurrentTimestamp] = useState(15000); // Start at 15 seconds

  const handleClose = () => {
    setIsOpen(false);
  };

  const handleSave = (timestamp: number, thumbnailS3Id?: string) => {
    console.log('Saving cover:', { timestamp, thumbnailS3Id });
    setIsOpen(false);
  };

  const handleTimestampChange = (timestamp: number) => {
    setCurrentTimestamp(timestamp);
  };

  return (
    <div className='space-y-4'>
      <div className='flex gap-2'>
        <Button onClick={() => setIsOpen(true)}>Open Modal (15s start)</Button>
      </div>
      <PickCoverModal
        isOpen={isOpen}
        onClose={handleClose}
        onSave={handleSave}
        videoUrl={MOCK_VIDEO_URL}
        videoDuration={MOCK_VIDEO_DURATION}
        currentTimestamp={currentTimestamp}
        onTimestampChange={handleTimestampChange}
        uploadId={MOCK_UPLOAD_ID}
      />
    </div>
  );
};

export const DifferentStartPositions: Story = {
  render: DifferentStartPositionsDemo,
  parameters: {
    docs: {
      description: {
        story:
          'The modal starting at different timestamp positions to test timeline behavior.',
      },
    },
  },
};