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

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { CloseIcon, MicrophoneIcon, PlusIcon, RotateRightIcon } from '@/icons';

import { ChatInputBarReferences } from './ChatInputBarReferences';
import { Reference, ReferenceType } from './ReferenceTypes';

const meta: Meta = {
  title: 'chat/ChatInputBar',
  parameters: {
    layout: 'fullscreen',
  },
  decorators: [
    (Story) => (
      <div className='flex min-h-screen items-end justify-center bg-background-primary p-8'>
        <div className='w-full max-w-[1024px]'>
          <Story />
        </div>
      </div>
    ),
  ],
};

export default meta;
type Story = StoryObj;

// Mock references
const mockLyricsReference: Reference = {
  id: '1',
  type: ReferenceType.LYRICS,
  message: 'I love the way you move, dancing in the moonlight',
  selectionOverlayRange: { start: 0, end: 48 },
  toolCallId: 'mock-tool-call-1',
};

const mockStylesReference: Reference = {
  id: '2',
  type: ReferenceType.STYLES,
  message: 'electronic, synthwave, upbeat',
  selectionOverlayRange: { start: 0, end: 29 },
  toolCallId: 'mock-tool-call-2',
};

const mockClipReference: Reference = {
  id: '3',
  type: ReferenceType.CLIP,
  clipId: 'clip-123',
  title: 'My Awesome Track',
  imageUrl:
    'https://cdn1.suno.ai/image_c90f5f5e-5a61-4f52-96dc-4cc6a08df6e1.jpeg',
};

const mockAudioReference: Reference = {
  id: '4',
  type: ReferenceType.AUDIO_FILE,
  fileName: 'demo-audio.mp3',
  audioBuffer: null as unknown as AudioBuffer,
};

const mockChoices = [
  'Make it more upbeat',
  'Add a guitar solo',
  'Change the tempo to 120 BPM',
  'Make it sound like 80s pop',
];

// Action buttons component
const ActionButtons = () => (
  <div className='flex min-h-[32px] items-center px-4 py-3'>
    {/* Plus button */}
    <div className='flex w-[32px] flex-shrink-0 items-end justify-center'>
      <Button
        variant={ButtonVariant.Tertiary}
        size={ButtonSize.Medium}
        shape={ButtonShape.Pill}
        icon={PlusIcon}
        className='bg-background-fog-thin p-2 transition-colors duration-150 hover:bg-white/2 active:bg-white/3'
        onClick={() => console.log('Plus clicked')}
      />
    </div>

    {/* Spacer */}
    <div className='flex flex-1 items-end' />

    {/* Microphone button */}
    <div className='flex w-[32px] flex-shrink-0 items-end justify-center'>
      <MicrophoneIcon
        onClick={() => console.log('Microphone clicked')}
        aria-label='Start voice transcription'
        className='h-6 w-6 cursor-pointer text-foreground-inactive'
      />
    </div>
  </div>
);

export const Empty: Story = {
  render: () => (
    <div className='flex flex-col rounded-2xl bg-background-fog-thin backdrop-blur-lg'>
      <div className='flex flex-1 items-end px-4 pt-4 pb-0'>
        <div className='w-full py-2 text-foreground-inactive'>
          Ask me anything...
        </div>
      </div>
      <ActionButtons />
    </div>
  ),
};

export const WithSuggestions: Story = {
  render: () => (
    <div className='flex flex-col gap-0'>
      {/* Suggestion pills */}
      <div className='scrollbar-hide flex h-auto w-full flex-nowrap gap-2 overflow-x-auto overflow-y-hidden rounded-none px-0 py-3'>
        {mockChoices.map((choice, index) => (
          <Button
            key={`${choice}-${index}`}
            className='animate-[fade-in_300ms_ease-out_forwards] border border-border-primary-glass !bg-transparent px-3 py-2 font-mono text-[10px] font-light whitespace-nowrap text-foreground-secondary uppercase opacity-0 shadow-[0_4px_12px_rgba(0,0,0,0.15)] backdrop-blur-lg'
            variant={ButtonVariant.Standard}
            size={ButtonSize.Mini}
            shape={ButtonShape.Pill}
            onClick={() => console.log('Choice clicked:', choice)}
          >
            {choice}
          </Button>
        ))}
      </div>
      <div className='flex flex-col rounded-2xl bg-background-fog-thin backdrop-blur-lg'>
        <div className='flex flex-1 items-end px-4 pt-4 pb-0'>
          <div className='w-full py-2 text-foreground-inactive'>
            Ask me anything...
          </div>
        </div>
        <ActionButtons />
      </div>
    </div>
  ),
};

export const WithLyricsReference: Story = {
  render: () => (
    <div className='flex flex-col rounded-2xl bg-background-fog-thin backdrop-blur-lg'>
      <div className='px-2 pt-2 pb-0'>
        <ChatInputBarReferences
          references={[mockLyricsReference]}
          onRemoveReference={(id) => console.log('Remove reference:', id)}
        />
      </div>
      <div className='flex flex-1 items-end px-4 pt-4 pb-0'>
        <div className='w-full py-2 text-foreground-inactive'>
          Ask me anything...
        </div>
      </div>
      <ActionButtons />
    </div>
  ),
};

export const WithStylesReference: Story = {
  render: () => (
    <div className='flex flex-col rounded-2xl bg-background-fog-thin backdrop-blur-lg'>
      <div className='px-2 pt-2 pb-0'>
        <ChatInputBarReferences
          references={[mockStylesReference]}
          onRemoveReference={(id) => console.log('Remove reference:', id)}
        />
      </div>
      <div className='flex flex-1 items-end px-4 pt-4 pb-0'>
        <div className='w-full py-2 text-foreground-inactive'>
          Ask me anything...
        </div>
      </div>
      <ActionButtons />
    </div>
  ),
};

export const WithClipReference: Story = {
  render: () => (
    <div className='flex flex-col rounded-2xl bg-background-fog-thin backdrop-blur-lg'>
      <div className='px-2 pt-2 pb-0'>
        <ChatInputBarReferences
          references={[mockClipReference]}
          onRemoveReference={(id) => console.log('Remove reference:', id)}
        />
      </div>
      <div className='flex flex-1 items-end px-4 pt-4 pb-0'>
        <div className='w-full py-2 text-foreground-inactive'>
          Ask me anything...
        </div>
      </div>
      <ActionButtons />
    </div>
  ),
};

export const WithAudioReference: Story = {
  render: () => (
    <div className='flex flex-col rounded-2xl bg-background-fog-thin backdrop-blur-lg'>
      <div className='px-2 pt-2 pb-0'>
        <ChatInputBarReferences
          references={[mockAudioReference]}
          onRemoveReference={(id) => console.log('Remove reference:', id)}
        />
      </div>
      <div className='flex flex-1 items-end px-4 pt-4 pb-0'>
        <div className='w-full py-2 text-foreground-inactive'>
          Ask me anything...
        </div>
      </div>
      <ActionButtons />
    </div>
  ),
};

export const WithAudioUploading: Story = {
  render: () => (
    <div className='flex flex-col rounded-2xl bg-background-fog-thin backdrop-blur-lg'>
      <div className='px-2 pt-2 pb-0'>
        <div className='flex flex-col gap-2 rounded-lg bg-white/[0.04]'>
          <div className='pr-4 pl-2'>
            <div className='flex min-h-[48px] min-w-0 flex-row items-center gap-2 overflow-hidden'>
              {/* Artwork + Title container */}
              <div className='flex min-w-0 flex-shrink-0 items-center gap-2'>
                {/* Placeholder artwork */}
                <div className='relative h-8 w-8 flex-shrink-0 rounded-md bg-background-fog-thin' />

                {/* Title */}
                <div className='min-w-0 overflow-hidden'>
                  <div className='truncate font-mono text-[10px] font-light text-foreground-secondary uppercase'>
                    AUDIO_1.MP3
                  </div>
                </div>
              </div>

              {/* 16px gap before progress bar */}
              <div className='w-4 flex-shrink-0' />

              {/* Progress bar - Updated to match Figma design */}
              <div className='flex-1 overflow-hidden'>
                <div className='h-[12px] w-full overflow-hidden rounded-full bg-background-fog-thin'>
                  <div className='h-full w-[14px] rounded-full bg-accent-pink' />
                </div>
              </div>

              {/* 16px gap before close button */}
              <div className='w-4 flex-shrink-0' />

              {/* Close button */}
              <div className='flex flex-shrink-0 items-center'>
                <Button
                  variant={ButtonVariant.Tertiary}
                  size={ButtonSize.Small}
                  shape={ButtonShape.Rounded}
                  icon={CloseIcon}
                  iconClassName='m-0 p-0 w-4 h-4 text-foreground-tertiary transition-all duration-150 hover:drop-shadow-[0_0_2px_currentColor]'
                  className='rounded-md bg-transparent p-0 transition-all duration-150 hover:bg-transparent active:bg-transparent'
                  style={{ margin: 0, padding: 0 }}
                  onClick={() => console.log('Remove reference')}
                  aria-label='Remove reference'
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className='flex flex-1 items-end px-4 pt-4 pb-0'>
        <div className='w-full py-2 text-foreground-inactive'>
          Ask me anything...
        </div>
      </div>
      <ActionButtons />
    </div>
  ),
};

export const WithAudioError: Story = {
  render: () => (
    <div className='flex flex-col rounded-2xl bg-background-fog-thin backdrop-blur-lg'>
      <div className='px-2 pt-2 pb-0'>
        <div className='flex flex-col gap-2 rounded-lg bg-white/[0.04]'>
          <div className='px-2 py-2'>
            <div className='flex min-w-0 flex-row items-center gap-4 overflow-hidden'>
              {/* Artwork + Title container */}
              <div className='flex min-w-0 flex-1 items-center gap-2'>
                {/* Placeholder artwork with rotate icon overlay */}
                <div className='relative h-8 w-8 flex-shrink-0 rounded-md bg-background-fog-thin'>
                  <button
                    className='absolute inset-0 flex cursor-pointer items-center justify-center transition-opacity hover:opacity-80'
                    onClick={() => console.log('Open file selection')}
                    aria-label='Retry upload'
                  >
                    <RotateRightIcon className='h-6 w-6 text-foreground-primary' />
                  </button>
                </div>

                {/* Title and error message */}
                <div className='flex min-w-0 flex-col gap-[2px]'>
                  <div className='truncate font-mono text-[10px] leading-[12px] font-normal tracking-[0.2px] text-foreground-primary'>
                    AUDIO_1.MP3
                  </div>
                  <div className='truncate font-mono text-[10px] leading-[12px] font-normal tracking-[0.2px] text-accent-error'>
                    ERROR UPLOADING
                  </div>
                </div>
              </div>

              {/* Close button */}
              <div className='flex flex-shrink-0 items-center'>
                <Button
                  variant={ButtonVariant.Tertiary}
                  size={ButtonSize.Small}
                  shape={ButtonShape.Rounded}
                  icon={CloseIcon}
                  iconClassName='m-0 p-0 w-4 h-4 text-foreground-tertiary transition-all duration-150 hover:drop-shadow-[0_0_2px_currentColor]'
                  className='rounded-md bg-transparent p-0 transition-all duration-150 hover:bg-transparent active:bg-transparent'
                  style={{ margin: 0, padding: 0 }}
                  onClick={() => console.log('Remove reference')}
                  aria-label='Remove reference'
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className='flex flex-1 items-end px-4 pt-4 pb-0'>
        <div className='w-full py-2 text-foreground-inactive'>
          Ask me anything...
        </div>
      </div>
      <ActionButtons />
    </div>
  ),
};