/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { observer } from 'mobx-react-lite';
import { useCallback, useEffect, useMemo } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import ImageWithFallback from '@/components/image/ImageWithFallback';
import { useFetchClip } from '@/hooks/useClip';
import { useContextSelector } from '@/hooks/useContextSelector';
import { CloseIcon, PauseIcon, PlayIcon, TrashIcon } from '@/icons';
import { ContextType } from '@/logging/contextTypes';
import type { Clip } from '@/state/clipStore';
import { LARGE_IMAGE } from '@/utils/constants';

import CreateFormContext from '../../v2/CreateFormContext';
import { ConditionTypes } from '../../v2/types';

export const SampleCard = observer(() => {
  const { clips, queue, playbar } = useStores();
  const fetchClip = useFetchClip();

  const untimedConditions = useContextSelector(
    CreateFormContext,
    (context) => context.state.global.untimedConditions
  );

  const removeSampleClip = useContextSelector(
    CreateFormContext,
    (context) => context.removeSampleClip
  );

  const clearSampleClips = useContextSelector(
    CreateFormContext,
    (context) => context.clearSampleClips
  );

  // Get sample clips from individual clip IDs
  const sampleClipIds = useMemo(
    () => untimedConditions[ConditionTypes.SAMPLE]?.clipIds || [],
    [untimedConditions[ConditionTypes.SAMPLE]?.clipIds]
  );

  const uniqueClipIds = useMemo(() => {
    return Array.from(new Set(sampleClipIds)).slice(0, 10);
  }, [sampleClipIds]);

  // Get clip data from store
  const sampleClips = uniqueClipIds
    .map((clipId) => clips.clipById?.[clipId])
    .filter(Boolean); // Remove any undefined clips

  // Track missing clips that need to be fetched
  const missingClipIds = useMemo(
    () => uniqueClipIds.filter((clipId) => !clips.clipById?.[clipId]),
    [uniqueClipIds, clips.clipById]
  );

  // Fetch missing clips
  useEffect(() => {
    missingClipIds.forEach((clipId) => {
      fetchClip(clipId, false); // Don't poll, just fetch once
    });
  }, [missingClipIds, fetchClip]);

  const handlePlayClip = useCallback(
    (clip: Clip, index: number) => {
      const isCurrentlyPlaying =
        playbar.isPlaying &&
        queue.isPlayingAt({
          contextType: ContextType.Create,
          contextId: 'sample',
          queueType: 'context',
          index,
        });

      if (isCurrentlyPlaying) {
        playbar.togglePlay();
      } else {
        // Set up playlist context with sample clips
        queue.setPlayContext({
          contextType: ContextType.Create,
          contextId: 'sample',
          clips: sampleClips,
          currentIndex: index,
        });
        playbar.playClip(clip);
      }
    },
    [queue, playbar, sampleClips]
  );

  const handleRemoveClip = useCallback(
    (clipId: string) => {
      removeSampleClip(clipId);
    },
    [removeSampleClip]
  );

  const handleClearAll = useCallback(() => {
    clearSampleClips();
  }, [clearSampleClips]);

  // Early return if no sample clips - must be after all hooks
  if (!uniqueClipIds.length) {
    return null;
  }

  return (
    <div className='relative w-full overflow-hidden rounded-[16px]'>
      <div className='flex w-full flex-col'>
        {/* Header with title and clear button */}
        <div className='flex items-center justify-between bg-white/[0.04] px-4 pt-4 pb-2'>
          <div className='text-[16px] leading-[24px] font-medium text-white'>
            Sample{' '}
            <span className='text-[12px] leading-[16px] font-normal tracking-[0.24px] text-accent-brand'>
              ({sampleClips.length}/10)
            </span>
          </div>
          <div
            className='size-4 cursor-pointer'
            onClick={handleClearAll}
            title='Clear all sample'
            role='button'
            aria-label='Clear all sample clips'
            tabIndex={0}
            onKeyDown={(e) => {
              if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                handleClearAll();
              }
            }}
          >
            <TrashIcon className='size-full text-foreground-primary' />
          </div>
        </div>

        {/* Individual song list */}
        <div className='flex w-full flex-col'>
          {sampleClips.map((clip, index) => {
            const isCurrentlyPlaying =
              playbar.isPlaying &&
              queue.isPlayingAt({
                contextType: ContextType.Create,
                contextId: 'sample',
                queueType: 'context',
                index,
              });

            return (
              <div
                key={clip.id}
                className='flex h-14 items-center justify-between bg-white/[0.04] px-4 py-0'
              >
                <div className='flex min-w-0 flex-1 items-center gap-2'>
                  {/* Song artwork */}
                  <div
                    className='group relative size-10 flex-shrink-0 cursor-pointer overflow-hidden rounded-[12px] bg-black/50'
                    onClick={() => handlePlayClip(clip, index)}
                    title={`Play "${clip.title}"`}
                  >
                    <ImageWithFallback
                      imageSize={LARGE_IMAGE}
                      className='h-full w-full object-cover'
                      src={clip.image_url}
                      alt={`Cover art for ${clip.title}`}
                    />
                    {/* Play/Pause button overlay */}
                    <div className='absolute top-1/2 left-1/2 size-4 -translate-x-1/2 -translate-y-1/2'>
                      {isCurrentlyPlaying ? (
                        <PauseIcon className='h-4 w-4 text-white' />
                      ) : (
                        <PlayIcon className='h-4 w-4 text-white' />
                      )}
                    </div>
                  </div>

                  {/* Song title */}
                  <div className='min-w-0 truncate text-[14px] leading-[22px] font-medium text-foreground-primary'>
                    {clip.title || `Untitled Song ${index + 1}`}
                  </div>
                </div>

                {/* Remove individual song button */}
                <div
                  className='size-4 flex-shrink-0 cursor-pointer'
                  onClick={() => handleRemoveClip(clip.id)}
                  title='Remove this song'
                  role='button'
                  aria-label={`Remove ${clip.title || `Untitled Song ${index + 1}`} from sample`}
                  tabIndex={0}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                      e.preventDefault();
                      handleRemoveClip(clip.id);
                    }
                  }}
                >
                  <CloseIcon className='size-full text-foreground-primary' />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
});