'use client';

import styled from '@emotion/styled';
import { noop } from 'lodash-es';
import { observer } from 'mobx-react-lite';
import { usePathname, useRouter } from 'next/navigation';
import { useCallback, useEffect, useRef, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { SongMeta } from '@/app/(root)/create/createV2/componentsQ3/common';
import { ModalTypes } from '@/components/modal/constants/ModalTypes';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import { toast } from '@/components/toast/Toast';
import { useModalContext } from '@/context/ModalContext';
import { useContextSelector } from '@/hooks/useContextSelector';
import { useRemastersForClip } from '@/hooks/useRemasters';
import { useSongRename } from '@/hooks/useSongRename';
import {
  CheckIcon,
  CheckboxIcon,
  CheckboxOutlineIcon,
  CloseIcon,
  EditIcon,
  InfoIcon,
  PauseIcon,
  PlayIcon,
  RotateReverseIcon,
  SlidersIcon,
} from '@/icons';
import { Clip, isDisliked } from '@/state/clipStore';
import { RemasterModelType } from '@/state/sessionStore';
import { getClipTitle } from '@/utils/clip';
import {
  DEFAULT_VARIATIONS_MODEL,
  MAX_TITLE_CHARS,
  SMALL_IMAGE,
} from '@/utils/constants';
import { eventLogger } from '@/utils/event-logger';
import { ActionName } from '@/utils/event-names';

import CreateAudioDisplay from '../../app/(root)/create/createV2/componentsQ3/CreateAudioDisplay';
import { useUrlAudioSampler } from '../../app/(root)/create/createV2/componentsQ3/useUrlAudioSampler';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '../button/Button';
import { ClipBrowserRegistryContext } from '../clipBrowser/useClipBrowserRegistry';
import {
  AutoClipPlaybackProvider,
  useClipPlaybackContext,
} from '../clipBrowser/useClipPlayback';
import TimeReadout from '../edit2025/TimeReadout';
import ImageWithFallback from '../image/ImageWithFallback';
import Link from '../link/Link';
import SelectorV2, { SelectorV2Option } from '../select/SelectorV2';
import { Tooltip } from '../tooltip/Tooltip';
import Modal from './Modal';
import RemasterItem from './RemasterItem';
import { RemasterPlayCountProvider } from './RemasterPlayCountContext';

const SongArtworkContainer = styled.div`
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;

  img {
    opacity: 0.5;
  }
`;

const SongPlayIcon = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
`;

const SongTitle = styled.div`
  font-size: 12px;
  color: var(--color-foreground-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const SongTimeReadout = styled.div`
  font-size: 12px;
  color: var(--color-foreground-inactive);
`;

const SongTextWrapper = styled.div`
  display: flex;
  flex-direction: column;
`;

const TitleEditWrapper = styled.div<{ editable?: boolean }>`
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  padding: 0;
  transition: background-color 0.15s ease;
  min-width: 0;
  flex-shrink: 1;

  ${({ editable }) =>
    editable &&
    `
      &:hover {
        background-color: var(--color-background-fog-thin);

        .edit-icon-wrapper {
          width: 20px;
          opacity: 1;
        }
      }
    `}
`;

const EditButton = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 24px;
  border-radius: 4px;
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  background-color: transparent;
  color: var(--color-foreground-primary);
  transition:
    width 0.15s ease,
    opacity 0.15s ease,
    background-color 0.15s ease;
  > * {
    opacity: 0.5;
  }
  &:hover {
    > * {
      opacity: 1;
    }
  }
`;

const TitleInput = styled.input`
  font-size: 12px;
  line-height: 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-foreground-primary);
  border-radius: 0;
  padding: 2px 0;
  color: var(--color-foreground-primary);
  outline: none;
  min-width: 50px;

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
`;

const HiddenTextMeasure = styled.span`
  position: absolute;
  visibility: hidden;
  white-space: pre;
  font-size: 12px;
  line-height: 14px;
  padding: 2px 0;
  pointer-events: none;
`;

const EditActionButton = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
  background-color: var(--color-background-glass-thin);
  color: var(--color-foreground-primary);

  &:hover:not(:disabled) {
    background-color: var(--color-background-glass-thick);
  }

  &:active:not(:disabled) {
    background-color: var(--color-background-smoke-thick);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
`;

const RemasterClipPlayback = ({
  clip,
  sharedTimestampRef,
}: {
  clip: Clip;
  sharedTimestampRef: React.MutableRefObject<number>;
}) => {
  const {
    isPlaying,
    onPlayClick,
    getCurrentProgress,
    setCurrentProgress,
    isLoadedIntoPlayer,
  } = useClipPlaybackContext();
  const sampleAudio = useUrlAudioSampler(clip?.id, clip?.status);
  const frameCountRef = useRef<number>(0);
  const pathname = usePathname();
  const { session } = useStores();
  const isOwnClip = clip && clip.user_id === session.user?.id;
  const editable = Boolean(isOwnClip);

  const {
    isEditing,
    editedTitle,
    isSaving,
    inputRef,
    measureRef,
    handleEditClick,
    handleSave,
    handleCancel,
    handleInputChange,
    handleInputKeyDown,
  } = useSongRename({ clip, editable, source: 'remasterModal' });

  const getPlaybackTime = useCallback(() => {
    return getCurrentProgress() * (clip.metadata?.duration ?? 0);
  }, [getCurrentProgress, clip.metadata?.duration]);

  const setPlaybackTime = useCallback(
    (time: number) => {
      setCurrentProgress(
        (clip.metadata?.duration ?? 0) > 0
          ? Math.max(0, Math.min(1, time / (clip.metadata?.duration ?? 0)))
          : 0
      );
    },
    [setCurrentProgress, clip.metadata?.duration]
  );

  useEffect(() => {
    if (isPlaying && session.flags?.['remaster-modal-updates']) {
      const interval = setInterval(() => {
        sharedTimestampRef.current = getPlaybackTime();
      }, 100);
      return () => clearInterval(interval);
    }
  }, [isPlaying, getPlaybackTime, sharedTimestampRef, session.flags]);

  useEffect(() => {
    if (
      sharedTimestampRef.current > 0 &&
      clip.metadata?.duration &&
      session.flags?.['remaster-modal-updates']
    ) {
      setPlaybackTime(sharedTimestampRef.current);
    }
  }, [
    clip.id,
    setPlaybackTime,
    clip.metadata?.duration,
    sharedTimestampRef,
    session.flags,
  ]);

  const handleToggle = useCallback(() => {
    onPlayClick();
  }, [onPlayClick]);

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        handleToggle();
      }
    },
    [handleToggle]
  );

  return (
    <div className='flex flex-col gap-4'>
      <div className='flex items-center gap-3 rounded-lg bg-background-fog-thin p-4'>
        {session.flags?.['remaster-modal-updates'] ? (
          <>
            <SongArtworkContainer
              onClick={handleToggle}
              onKeyDown={handleKeyDown}
              role='button'
              tabIndex={0}
              aria-label={isPlaying ? 'Pause audio' : 'Play audio'}
            >
              <ImageWithFallback
                src={clip.image_url ?? ''}
                alt={getClipTitle(clip)}
                imageSize={SMALL_IMAGE}
                className='h-full w-full bg-background-primary object-cover'
                style={{ borderRadius: 'var(--border-radius)' }}
              />
              <SongPlayIcon>
                {isPlaying ? <PauseIcon /> : <PlayIcon />}
              </SongPlayIcon>
            </SongArtworkContainer>
            <SongTextWrapper>
              {isEditing && (
                <HiddenTextMeasure ref={measureRef}>
                  {editedTitle}
                </HiddenTextMeasure>
              )}
              {isEditing ? (
                <div className='flex items-center gap-[1px]'>
                  <TitleInput
                    ref={inputRef}
                    value={editedTitle}
                    onChange={handleInputChange}
                    onKeyDown={handleInputKeyDown}
                    onClick={(e) => e.stopPropagation()}
                    onMouseDown={(e) => e.stopPropagation()}
                    maxLength={MAX_TITLE_CHARS}
                    disabled={isSaving}
                  />
                  <EditActionButton
                    type='button'
                    onClick={handleSave}
                    onMouseDown={(e) => e.stopPropagation()}
                    aria-label='Save title'
                    disabled={isSaving}
                  >
                    {isSaving ? (
                      <SpinnerSVG className='h-3 w-3' />
                    ) : (
                      <CheckIcon className='h-3 w-3' />
                    )}
                  </EditActionButton>
                  <EditActionButton
                    type='button'
                    onClick={handleCancel}
                    onMouseDown={(e) => e.stopPropagation()}
                    aria-label='Cancel editing'
                    disabled={isSaving}
                  >
                    <CloseIcon className='h-3 w-3' />
                  </EditActionButton>
                </div>
              ) : (
                <TitleEditWrapper editable={editable}>
                  <SongTitle>
                    <Link
                      href={`/song/${clip.id}`}
                      target={pathname === '/studio' ? '_blank' : undefined}
                      onClick={(e) => e.stopPropagation()}
                      className='hover:underline'
                    >
                      {getClipTitle(clip)}
                    </Link>
                  </SongTitle>
                  {editable && (
                    <Tooltip label='Edit title'>
                      <EditButton
                        type='button'
                        className='edit-icon-wrapper'
                        onClick={handleEditClick}
                        onMouseDown={(e) => e.stopPropagation()}
                        aria-label='Edit title'
                      >
                        <EditIcon className='h-4 w-4' />
                      </EditButton>
                    </Tooltip>
                  )}
                </TitleEditWrapper>
              )}
              <SongTimeReadout>
                <TimeReadout
                  leftAlign
                  getCurrentTime={getPlaybackTime}
                  songEndSeconds={clip.metadata?.duration ?? 0}
                />
              </SongTimeReadout>
            </SongTextWrapper>
          </>
        ) : (
          <SongMeta
            title={getClipTitle(clip)}
            artworkUrl={clip.image_url ?? ''}
            duration={clip.metadata?.duration ?? 0}
            getPlaybackTime={getPlaybackTime}
            isPlaying={isPlaying}
            play={onPlayClick}
            pause={onPlayClick}
          />
        )}
      </div>

      <div className='relative'>
        {!isLoadedIntoPlayer && (
          <Button
            onClick={() => onPlayClick()}
            className='absolute top-0 left-0 z-10 flex h-full w-full items-center justify-center bg-background-primary/50'
            icon={<RotateReverseIcon />}
          >
            Listen
          </Button>
        )}
        <CreateAudioDisplay
          isPlaying={isPlaying}
          sampleAudio={sampleAudio}
          getCurrentProgress={() =>
            getPlaybackTime() / (clip.metadata?.duration ?? 1)
          }
          setCurrentProgress={(progress: number) =>
            setPlaybackTime(progress * (clip.metadata?.duration ?? 0))
          }
          frameCountRef={frameCountRef}
          height={80}
        />
      </div>
    </div>
  );
};

const RemasterModal: React.FC = observer(() => {
  const { session, clips } = useStores();
  const { closeModal, getModalData } = useModalContext();
  const pathname = usePathname();
  const router = useRouter();
  const sharedTimestampRef = useRef<number>(0);

  const modalData = getModalData(ModalTypes.REMASTER_MODAL) as
    | { clipId?: string }
    | undefined;
  const clip = modalData?.clipId
    ? (clips.getClipById(modalData.clipId) as Clip)
    : undefined;

  // Fetch remasters for the selected clip
  const remastersQuery = useRemastersForClip({
    parentClipId: clip?.id || '',
    enabled: !!clip?.id && clip.id.length > 0,
  });

  const remasters = remastersQuery.clips || [];
  const isLoadingRemasters = remastersQuery.isLoading;

  const remasterModels = session.getRemasterModelTypes();

  const displayModels: RemasterModelType[] =
    remasterModels.length > 0 ? remasterModels : [];

  const sortedModels = [...displayModels].sort((a, b) => {
    const getVersionNumber = (modelKey: string) => {
      const match = modelKey.match(/v(\d+(?:\.\d+)?)/);
      return match ? parseFloat(match[1]) : 0;
    };
    return getVersionNumber(b.external_key) - getVersionNumber(a.external_key);
  });

  const [selectedModel, setSelectedModel] = useState(
    sortedModels?.[0]?.external_key || DEFAULT_VARIATIONS_MODEL
  );
  const [variationsStrength, setVariationsStrength] = useState<
    'subtle' | 'normal' | 'high'
  >('normal');
  const [hideDisliked, setHideDisliked] = useState(true);

  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        e.preventDefault();
        e.stopPropagation();
        closeModal(ModalTypes.REMASTER_MODAL);
      }
    };
    window.addEventListener('keydown', handleEscape, true);
    return () => window.removeEventListener('keydown', handleEscape, true);
  }, [closeModal]);

  const remasterModelOptions = sortedModels.map((model: RemasterModelType) => ({
    value: model.external_key,
    title: model.name,
    ListComponent: () => (
      <div className='flex items-center justify-between rounded-md p-2 px-2 py-1 transition-colors duration-150 hover:bg-background-tertiary'>
        <h3 className='-mt-1 flex-1 pb-1'>{model.name}</h3>
      </div>
    ),
  }));

  const clipCreated = useContextSelector(
    ClipBrowserRegistryContext,
    (context) => context?.clipCreated || noop
  );

  const [isLoading, setIsLoading] = useState(false);

  return (
    <RemasterPlayCountProvider>
      <Modal
        title={'Remaster'}
        width={800}
        onClose={() => closeModal(ModalTypes.REMASTER_MODAL)}
        closeButtonProps={{
          variant: ButtonVariant.Primary,
        }}
        titleClassName='font-sans font-bold text-2xl pt-2'
        contentWrapperClasses={
          session.flags?.['remaster-modal-updates']
            ? 'bg-background-primary h-[90vh] overflow-hidden'
            : 'bg-background-primary max-h-[90vh] sm:max-h-none'
        }
        wrapperClasses={
          session.flags?.['remaster-modal-updates']
            ? 'h-auto'
            : 'h-auto max-h-[80vh] overflow-y-auto sm:max-h-none sm:overflow-visible'
        }
        className='bg-background-fog-dense px-4 sm:px-0'
        withHorizontalPadding={true}
      >
        <div className='flex flex-col justify-stretch gap-4 pb-4 sm:gap-6 sm:pb-8'>
          {clip ? (
            <>
              {displayModels.length > 0 ? (
                <div className='flex flex-col gap-4 rounded-[20px] bg-background-fog-thin px-4 py-4'>
                  <AutoClipPlaybackProvider clip={clip}>
                    <RemasterClipPlayback
                      clip={clip}
                      sharedTimestampRef={sharedTimestampRef}
                    />
                  </AutoClipPlaybackProvider>

                  <div className='flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-2'>
                    <div className='flex items-center gap-2'>
                      <span className='text-sm font-bold'>Model</span>
                      <SelectorV2
                        menuClassName={`z-5000000 ${selectedModel?.includes('chirp-dorado') ? 'w-26' : 'w-20'}`}
                        value={selectedModel}
                        onSetValue={(modelKey: string) => {
                          setSelectedModel(modelKey);
                        }}
                        variant={ButtonVariant.Standard}
                        className={`${selectedModel?.includes('chirp-dorado') ? 'w-26' : 'w-20'} bg-background-fog-thin`}
                        options={remasterModelOptions as SelectorV2Option[]}
                      />
                    </div>

                    {(selectedModel?.includes('chirp-carp') ||
                      selectedModel?.includes('chirp-dorado')) && (
                      <div className='flex items-center gap-2'>
                        <span className='text-sm font-bold'>
                          Variations strength
                        </span>
                        <Tooltip
                          label='Controls how much your song is transformed'
                          placement='top'
                        >
                          <InfoIcon className='h-4 w-4 opacity-50' />
                        </Tooltip>

                        {/* Desktop: Buttons */}
                        <div className='hidden gap-1 sm:flex'>
                          {(['subtle', 'normal', 'high'] as const).map(
                            (strength) => (
                              <Button
                                key={strength}
                                size={ButtonSize.Mini}
                                shape={ButtonShape.Rounded}
                                variant={
                                  variationsStrength === strength
                                    ? ButtonVariant.Primary
                                    : ButtonVariant.Tertiary
                                }
                                onClick={() => setVariationsStrength(strength)}
                              >
                                {strength.charAt(0).toUpperCase() +
                                  strength.slice(1)}
                              </Button>
                            )
                          )}
                        </div>

                        {/* Mobile: Dropdown */}
                        <div className='flex sm:hidden'>
                          <SelectorV2
                            menuClassName='z-5000000 w-32'
                            value={variationsStrength}
                            onSetValue={(strength: string) => {
                              setVariationsStrength(
                                strength as 'subtle' | 'normal' | 'high'
                              );
                            }}
                            variant={ButtonVariant.Standard}
                            className='w-32 bg-background-fog-thin'
                            options={[
                              {
                                value: 'subtle',
                                title: 'Subtle',
                                ListComponent: () => (
                                  <div className='rounded-md p-2 hover:bg-background-tertiary'>
                                    Subtle
                                  </div>
                                ),
                              },
                              {
                                value: 'normal',
                                title: 'Normal',
                                ListComponent: () => (
                                  <div className='rounded-md p-2 hover:bg-background-tertiary'>
                                    Normal
                                  </div>
                                ),
                              },
                              {
                                value: 'high',
                                title: 'High',
                                ListComponent: () => (
                                  <div className='rounded-md p-2 hover:bg-background-tertiary'>
                                    High
                                  </div>
                                ),
                              },
                            ]}
                          />
                        </div>
                      </div>
                    )}

                    <div className='flex justify-center sm:justify-end'>
                      <Button
                        size={ButtonSize.Small}
                        shape={ButtonShape.Pill}
                        variant={ButtonVariant.Aura}
                        disabled={isLoading}
                        iconStart={
                          isLoading ? (
                            <SpinnerSVG className='h-3 w-3' />
                          ) : (
                            <SlidersIcon />
                          )
                        }
                        className='w-full sm:w-auto'
                        onClick={async () => {
                          if (!session.flags?.['remaster-modal-updates']) {
                            closeModal(ModalTypes.REMASTER_MODAL);
                          }
                          try {
                            if (clip) {
                              toast({
                                title: 'Remastering clip...',
                                status: 'info',
                                duration: 10000,
                                isClosable: true,
                              });

                              setIsLoading(true);

                              try {
                                const remasteredClips =
                                  await clips.upsampleClip(
                                    clip,
                                    selectedModel,
                                    undefined,
                                    undefined,
                                    selectedModel?.includes('chirp-carp') ||
                                      selectedModel?.includes('chirp-dorado')
                                      ? variationsStrength
                                      : undefined
                                  );

                                eventLogger.logAudioActionEvent(
                                  false,
                                  ActionName.upsampleClip,
                                  clip,
                                  session,
                                  pathname
                                );

                                if (
                                  pathname !== '/create' &&
                                  !session.flags?.['remaster-modal-updates']
                                ) {
                                  router.push(`/create`);
                                }

                                if (remasteredClips) {
                                  remasteredClips.forEach(clipCreated);
                                }

                                if (session.flags?.['remaster-modal-updates']) {
                                  // Refetch remasters list to show the new remaster
                                  await remastersQuery.refetch();
                                }

                                toast({
                                  title: 'Clip remastered successfully!',
                                  status: 'success',
                                  duration: 3000,
                                  isClosable: true,
                                });
                              } finally {
                                setIsLoading(false);
                              }
                            } else {
                              toast({
                                title: 'Test Mode',
                                description: `Selected model: ${selectedModel}`,
                                status: 'info',
                                duration: 3000,
                                isClosable: true,
                              });
                            }
                          } catch (error) {
                            toast({
                              title: 'Error remastering clip',
                              description: 'Please try again',
                              status: 'error',
                              duration: 5000,
                              isClosable: true,
                            });
                          }
                        }}
                      >
                        Remaster
                      </Button>
                    </div>
                  </div>
                </div>
              ) : (
                <div className='rounded-[20px] bg-background-fog-thin px-4 py-4'>
                  <span className='text-foreground-secondary'>
                    No remaster models available. Please check your session
                    data.
                  </span>
                </div>
              )}

              {/* Remasters List - Only show if there are remasters or loading */}
              {(isLoadingRemasters || remasters.length > 0) &&
                session.flags?.['remaster-modal-updates'] && (
                  <div className='flex flex-col justify-stretch gap-4 rounded-[20px]'>
                    <div className='flex items-center justify-between'>
                      <h3 className='text-lg font-bold'>
                        Previous Remasters
                        {remasters.length > 0 && (
                          <span className='ml-2 text-sm font-normal text-foreground-tertiary'>
                            ({remasters.length})
                          </span>
                        )}
                      </h3>
                      <button
                        onClick={() => setHideDisliked(!hideDisliked)}
                        className='flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 transition-colors hover:bg-background-fog-thin'
                        aria-label='Toggle hide disliked songs'
                      >
                        {hideDisliked ? (
                          <CheckboxIcon className='h-5 w-5 text-foreground-primary' />
                        ) : (
                          <CheckboxOutlineIcon className='h-5 w-5 text-foreground-primary' />
                        )}
                        <span className='text-sm'>Hide Disliked</span>
                      </button>
                    </div>

                    {isLoadingRemasters ? (
                      <div className='flex items-center justify-center py-8'>
                        <div className='h-6 w-6 animate-spin rounded-full border-2 border-current border-t-transparent' />
                        <span className='ml-2 text-sm text-foreground-secondary'>
                          Loading remasters...
                        </span>
                      </div>
                    ) : (
                      <div
                        className='space-y-3 overflow-y-auto'
                        style={{
                          maxHeight: 'calc(90vh - 435px)',
                        }}
                      >
                        {remasters
                          .filter((remaster: Clip) => {
                            const freshClip = clips.getClipById(
                              remaster.id
                            ) as Clip;
                            if (!freshClip) return true;
                            return hideDisliked ? !isDisliked(freshClip) : true;
                          })
                          .map((remaster: Clip) => (
                            <RemasterItem
                              key={remaster.id}
                              clipId={remaster.id}
                              sharedTimestampRef={sharedTimestampRef}
                            />
                          ))}
                      </div>
                    )}
                  </div>
                )}
            </>
          ) : (
            <>
              <div className='text-foreground-secondary'>No clip selected</div>
              {displayModels.length > 0 ? (
                <div className='flex flex-row items-center gap-4 rounded-[20px] bg-background-fog-thin px-4 py-4'>
                  <span className='font-bold'>
                    Available Models ({displayModels.length})
                  </span>
                  <div className='flex flex-1 flex-row-reverse'>
                    <SelectorV2
                      menuClassName={`z-5000000`}
                      value={selectedModel}
                      onSetValue={(modelKey: string) => {
                        setSelectedModel(modelKey);
                      }}
                      variant={ButtonVariant.Standard}
                      className={'bg-background-fog-thin'}
                      options={remasterModelOptions as SelectorV2Option[]}
                    />
                  </div>
                </div>
              ) : (
                <div className='rounded-[20px] bg-background-fog-thin px-4 py-4'>
                  <span className='text-foreground-secondary'>
                    No remaster models available. Please check your session
                    data.
                  </span>
                </div>
              )}
            </>
          )}
        </div>
      </Modal>
    </RemasterPlayCountProvider>
  );
});

export default RemasterModal;