import ImageWithFallback from '@/components/image/ImageWithFallback';
import useClip from '@/hooks/useClip';

type UserMessageProps = {
  text: string;
  referenceClipId?: string;
  referenceLyrics?: string;
  referenceStyles?: string;
};

type MessageClipReferenceProps = {
  referenceClipId: string;
};

const MessageClipReference = ({
  referenceClipId,
}: MessageClipReferenceProps) => {
  const refClip = useClip(referenceClipId);
  return (
    <div className='flex max-w-[200px] flex-row items-center gap-2 rounded border border-border-primary-glass bg-background-glass-thin px-2 py-1 text-xs shadow-glass-highlight backdrop-blur-md'>
      <ImageWithFallback
        className='h-4 w-4 rounded-[2px]'
        src={refClip?.clip?.image_url}
        alt={refClip?.clip?.title || 'Clip Image'}
      />
      <span className='line-clamp-1'>{refClip?.clip?.title || 'Untitled'}</span>
    </div>
  );
};

const MessageLyricsReference = ({
  referenceLyrics,
}: {
  referenceLyrics: string;
}) => {
  return (
    <div className='max-w-[200px] rounded border border-border-primary-glass bg-background-glass-thin p-2 text-xs shadow-glass-highlight backdrop-blur-md'>
      <span className='line-clamp-2 break-words'>{referenceLyrics}</span>
    </div>
  );
};

const MessageStylesReference = ({
  referenceStyles,
}: {
  referenceStyles: string;
}) => {
  return (
    <div className='max-w-[200px] rounded border border-border-primary-glass bg-background-glass-thin p-2 text-xs shadow-glass-highlight backdrop-blur-md'>
      <span className='line-clamp-2 break-words'>{referenceStyles}</span>
    </div>
  );
};

export const UserMessage = ({
  text,
  referenceClipId,
  referenceLyrics,
  referenceStyles,
}: UserMessageProps) => {
  return (
    <div className='flex max-w-[600px] flex-col items-end gap-1'>
      {referenceClipId ? (
        <MessageClipReference referenceClipId={referenceClipId} />
      ) : null}
      {referenceLyrics ? (
        <MessageLyricsReference referenceLyrics={referenceLyrics} />
      ) : null}
      {referenceStyles ? (
        <MessageStylesReference referenceStyles={referenceStyles} />
      ) : null}
      <div className='rounded-lg bg-background-glass-thin px-3 py-2 backdrop-blur-md'>
        {text}
      </div>
    </div>
  );
};