import { observer } from 'mobx-react-lite';
import { ComponentProps, useMemo } from 'react';
import { twMerge } from 'tailwind-merge';

import { useStores } from '@/app/(root)/AppProviders';

import AuraTag from '../tag/AuraTag';
import SelectorV2, { SelectorOption, SelectorV2Option } from './SelectorV2';

const publicLyricsModelOptions = [
  {
    isDefault: true,
    value: 'remi-v1',
    title: 'ReMi lyrics model',
    ListComponent: () => (
      <SelectorOption>
        <h3 className='-mt-1 pb-1'>
          ReMi{' '}
          <span className='relative top-1 inline-block'>
            <AuraTag
              label='Beta'
              auraImage='https://cdn-o.suno.com/auras/Aura-13.jpg'
            />
          </span>
        </h3>
        <p className='opacity-60'>
          Our newest, most creative model. May generate content that some find
          offensive.
        </p>
      </SelectorOption>
    ),
  },
  {
    value: 'default',
    title: 'Classic lyrics model',
    ListComponent: () => (
      <SelectorOption>
        <h3 className='pb-1'>Classic</h3>
        <p className='opacity-60'>
          Follows prompts closely and takes fewer risks.
        </p>
      </SelectorOption>
    ),
  },
] as SelectorV2Option[];

export const cowriteLyricsModelOptions = [
  {
    disabled: true,
    value: 'remi-v1',
    title: 'ReMi lyrics model',
    ListComponent: () => (
      <SelectorOption>
        <h3 className='-mt-1 pb-1'>
          ReMi{' '}
          <span className='relative top-1 inline-block'>
            <AuraTag
              label='Not available in Cowrite Editor'
              auraImage='https://cdn-o.suno.com/auras/Aura-13.jpg'
            />
          </span>
        </h3>
        <p className='opacity-60'>
          Our newest, most creative model. May generate content that some find
          offensive.
        </p>
      </SelectorOption>
    ),
  },
  {
    isDefault: true,
    value: 'default',
    title: 'Classic lyrics model',
    ListComponent: () => (
      <SelectorOption>
        <h3 className='pb-1'>Classic</h3>
        <p className='opacity-60'>
          Follows prompts closely and takes fewer risks.
        </p>
      </SelectorOption>
    ),
  },
] as SelectorV2Option[];

const devLyricsModelOptions = [
  { value: 'ft-v1', title: 'ft-v1' },
  { value: 'dusanbot2', title: 'DusanBot2' },
  { value: 'remi-v1', title: 'ReMi' },
  { value: 'lorenzo-v1', title: 'Lorenzo' },
  { value: 'gemini-2.0', title: 'Gemini 2.0' },
  { value: 'claude-sonnet', title: 'Claude Sonnet 3.7' },
  { value: 'claude-sonnet-4', title: 'Claude Sonnet 4' },
  { value: 'gpt-5.1', title: 'GPT-5.1' },
].map(({ title, value }) => ({
  value,
  title,
  ListComponent: () => (
    <SelectorOption>
      <h3 className='pb-1'>
        {title}{' '}
        <span className='relative top-1 inline-block'>
          <AuraTag
            label='Dev'
            auraImage='https://cdn-o.suno.com/auras/Aura-13.jpg'
          />
        </span>
      </h3>
      <p className='opacity-60'>{value}</p>
    </SelectorOption>
  ),
})) as SelectorV2Option[];

const LyricsModelSelector = observer(
  ({
    menuClassName,
    className,
    options,
    ...restProps
  }: {
    menuClassName?: string;
    options?: SelectorV2Option[];
  } & Omit<ComponentProps<typeof SelectorV2>, 'options'>) => {
    const { session } = useStores();
    const configsEnabled = session.flags?.['configs'];
    const lyricsModelOptions = useMemo(
      () =>
        [
          ...publicLyricsModelOptions,
          ...(configsEnabled ? devLyricsModelOptions : []),
        ] as SelectorV2Option[],
      [configsEnabled]
    );
    return (
      <SelectorV2
        {...restProps}
        className={twMerge('overflow-hidden whitespace-nowrap', className)}
        menuClassName={twMerge('text-sm w-80', menuClassName)}
        options={options || lyricsModelOptions}
      />
    );
  }
);

export default LyricsModelSelector;