import type { Meta, StoryObj } from '@storybook/react';
import { WaveformDisplay } from './WaveformDisplay';
import { http, HttpResponse } from 'msw';

const mockWaveformData = {
  version: 2,
  channels: 1,
  sample_rate: 800,
  samples_per_pixel: 1,
  bits: 32,
  length: 200,
  data: Array.from({ length: 200 }, (_, i) =>
    Math.sin(i * 0.1) * 0.5 + Math.sin(i * 0.05) * 0.3 + Math.random() * 0.2
  ),
};

const meta: Meta<typeof WaveformDisplay> = {
  title: 'Player/WaveformDisplay',
  component: WaveformDisplay,
  parameters: {
    layout: 'padded',
    msw: {
      handlers: [
        http.get('*/tracks/:trackId/waveform', () => {
          return HttpResponse.json(mockWaveformData);
        }),
      ],
    },
  },
  decorators: [
    (Story) => (
      <div className="w-full max-w-2xl bg-background p-4 rounded-lg">
        <Story />
      </div>
    ),
  ],
};

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

export const Default: Story = {
  args: {
    trackId: 'mock-track-1',
    currentTime: 0,
    duration: 180,
  },
};

export const WithProgress: Story = {
  args: {
    trackId: 'mock-track-1',
    currentTime: 90,
    duration: 180,
  },
};

export const Seekable: Story = {
  args: {
    trackId: 'mock-track-1',
    currentTime: 45,
    duration: 180,
    onSeek: (time: number) => console.log('Seek to', time),
  },
};

export const Loading: Story = {
  args: {
    trackId: 'loading-track',
    currentTime: 0,
    duration: 180,
  },
  parameters: {
    msw: {
      handlers: [
        http.get('*/tracks/:trackId/waveform', async () => {
          await new Promise((resolve) => setTimeout(resolve, 999999));
          return HttpResponse.json(mockWaveformData);
        }),
      ],
    },
  },
};

export const Error: Story = {
  args: {
    trackId: 'error-track',
    currentTime: 60,
    duration: 180,
  },
  parameters: {
    msw: {
      handlers: [
        http.get('*/tracks/:trackId/waveform', () => {
          return new HttpResponse(null, { status: 404 });
        }),
      ],
    },
  },
};

export const CustomHeight: Story = {
  args: {
    trackId: 'mock-track-1',
    currentTime: 30,
    duration: 120,
    height: 80,
  },
};