import { useLayoutEffect, useRef, useState } from 'react';

import { SkeletonBone } from '@/components/layout/Skeleton';
import { MusicNoteIcon, PlayIcon, UserIcon } from '@/icons';

export default function SongTooltip({
  clipData,
  position,
}: {
  clipData: {
    title: string;
    playCount: number;
    imageS3Id: string;
    clipId: string;
    meta: {
      display_name?: string | null;
      display_tags?: string | null;
      user_id?: string | null;
      handle?: string | null;
    };
  };
  position: [number, number];
}) {
  const ref = useRef<HTMLDivElement>(null);
  const [pos, setPos] = useState(position);

  useLayoutEffect(() => {
    if (!ref.current || !position) {
      return;
    }

    const container = document.getElementById('sunoverse-container');
    if (!container) return setPos(position);

    const { width: cw, height: ch } = container.getBoundingClientRect();
    const { width: tw, height: th } = ref.current.getBoundingClientRect();

    setPos([
      Math.max(10, Math.min(position[0], cw - tw - 10)),
      Math.max(10, Math.min(position[1], ch - th - 10)),
    ]);
  }, [position, clipData]);

  return (
    <div>
      {clipData && (
        <div
          ref={ref}
          className='absolute z-[1000] max-w-md rounded-md border border-border-primary bg-background-primary/50 px-4 py-3 font-sans text-foreground-primary shadow-lg backdrop-blur-sm'
          style={{ transform: `translate(${pos[0]}px, ${pos[1]}px)` }}
        >
          <div className='flex gap-4'>
            <img
              className='inset-0 aspect-square h-28 w-28 rounded-md border-none bg-background-tertiary object-cover'
              src={`https://cdn2.suno.ai/${clipData?.imageS3Id}.jpeg`}
              draggable={false}
              alt='Song image'
            />

            <div>
              <div className='mb-2 text-lg leading-5 font-bold'>
                <a
                  className='hover:underline'
                  href={`/song/${clipData?.clipId}`}
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {clipData?.title || (
                    <span className='text-foreground-tertiary'>Untitled</span>
                  )}
                </a>
              </div>

              <div className='flex flex-col gap-1 text-sm'>
                <div className='flex gap-2'>
                  <UserIcon className='mt-[2px] size-4 shrink-0' />{' '}
                  {clipData?.meta?.display_name ? (
                    <a
                      className='hover:underline'
                      href={`/@${clipData?.meta?.handle}`}
                      target='_blank'
                      rel='noopener noreferrer'
                    >
                      {clipData?.meta?.display_name}
                    </a>
                  ) : (
                    <SkeletonBone className='h-5 w-24' />
                  )}
                </div>
                <div className='mb-1 flex gap-2 leading-4'>
                  <MusicNoteIcon className='mt-[2px] size-4 shrink-0' />{' '}
                  <div className='line-clamp-2'>
                    {clipData?.meta?.display_tags ?? (
                      <SkeletonBone className='h-5 w-24' />
                    )}
                  </div>
                </div>
                <div className='flex gap-2'>
                  <PlayIcon className='mt-[2px] size-4 shrink-0' />{' '}
                  {clipData?.playCount ?? <SkeletonBone className='h-5 w-24' />}{' '}
                  plays
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}