import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import clsx from 'clsx';
import React, {
  Dispatch,
  SetStateAction,
  memo,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';

import Button, { ButtonShape, ButtonVariant } from '@/components/button/Button';
import {
  ContextMenuItem,
  ContextMenuTrigger,
} from '@/components/contextMenu/ContextMenu';
import { useSynchronizingStateHistory } from '@/components/edit2025/useStateHistory';
import LyricsGenerateModal from '@/components/lyricsCowriteModal/LyricsGenerateModal';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import { useContextSelector } from '@/hooks/useContextSelector';
import useRegenerateLyrics from '@/hooks/useRegenerateLyrics';
import {
  ArrowUpIcon,
  BookmarkOutlineIcon,
  CloseIcon,
  CollapseContentIcon,
  DiscardIcon,
  EditUndoIcon,
  ExpandContentIcon,
  FourStarIcon,
  LibraryIcon,
  LyricsModelIcon,
  WandIcon,
} from '@/icons';
import { SavedPromptSchema } from '@/state/createV2Store';
import {
  MAX_CUSTOM_PROMPT_CHARS,
  MAX_CUSTOM_PROMPT_CHARS_LONG,
  MAX_CUSTOM_PROMPT_CHARS_LONGEST,
} from '@/utils/constants';
import { encodeTimeFormat } from '@/utils/utils';

import CreateFormContext from '../../v2/CreateFormContext';
import {
  ConditionTypes,
  CreateModes,
  ExtendCondition,
  LyricsInputModes,
} from '../../v2/types';
import { modelValidForMumbleMode } from '../../v2/utils';
import CreateCard from './CreateCard';
import CreateTextarea from './CreateTextarea';
import { CollapsibleCardTitle } from './common';
import { CreateTheme, bigSpace, smallButton, smallSpace } from './themes';
import useResizer, {
  RESIZABLE_CONTAINER_CLASS_NAME,
  ResizerHandle,
} from './useResizer';

interface LyricsCardProps {
  disabled?: boolean;
  title?: string;
  placeholder?: string;
  selectedLyrics?: string;

  lyrics: string;
  setLyrics: Dispatch<SetStateAction<string>>;

  clearLyrics?: () => void;

  expanded: boolean;
  setExpanded: Dispatch<SetStateAction<boolean>>;

  lyricsInputHeight?: number;
  setLyricsInputHeight?: Dispatch<SetStateAction<number>>;

  mode?: LyricsInputModes;

  showLibraryButton?: boolean;
  showUndoButtonOnly?: boolean;

  model?: string;

  headerContentHidden?: boolean;

  onRegenerateLyrics?: (
    promptInput: string,
    selectionOverlayRange: {
      start: number;
      end: number;
    } | null,
    setSelectionOverlayRange: Dispatch<
      SetStateAction<{
        start: number;
        end: number;
      } | null>
    >
  ) => void;
  isRegeneratingLyrics?: boolean;

  onSavePrompt: () => void;
  canSavePrompt: boolean;
  nested?: boolean;
  fixed?: boolean;

  styleOverrides?: React.CSSProperties;
}

const LyricsContent = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 16px ${bigSpace}px 16px;
  overflow: hidden;
`;

const TextareaWrapper = styled.div`
  position: relative;
  flex-grow: 1;
`;

const Footer = styled.div<{ opaque: boolean; blockAllPointerEvents: boolean }>`
  padding: 0 ${bigSpace}px ${bigSpace}px ${bigSpace}px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: ${smallSpace}px;
  pointer-events: ${({ opaque, blockAllPointerEvents }) =>
    opaque && !blockAllPointerEvents ? 'auto' : 'none'};
  background-color: ${({ opaque }) =>
    opaque ? 'var(--color-background-secondary)' : 'transparent'};
  button,
  [onclick],
  [onpointerdown],
  [onpointerup],
  [onpointermove],
  [onpointercancel],
  [onpointerleave],
  [onpointerenter] {
    pointer-events: ${({ blockAllPointerEvents }) =>
      blockAllPointerEvents ? 'none' : 'auto'};
  }
`;

// becomes transparent when we have content. right side is less likely to overlap something important, and we have extra padding at the bottom of the text.
const LeftSideWrapper = styled.div<{
  hideContent: boolean;
  shadeContent: boolean;
}>`
  display: flex;
  align-items: center;
  gap: ${smallSpace}px;
  opacity: ${({ hideContent, shadeContent }) =>
    hideContent ? 0 : shadeContent ? 0.25 : 1};
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  &:hover {
    opacity: ${({ shadeContent }) => (shadeContent ? 1 : '')};
  }
  > * {
    pointer-events: ${({ hideContent }) => (hideContent ? 'none' : 'auto')};
  }
`;

const PromptInputWrapper = styled.div<{ showing: boolean }>`
  transition:
    opacity 0.15s ease-in-out,
    transform 0.15s ease-in-out;
  transform: translateY(${({ showing }) => (showing ? 0 : '8px')});
  opacity: ${({ showing }) => (showing ? 1 : 0)};
  pointer-events: ${({ showing }) => (showing ? 'auto' : 'none')};
  border-radius: 8px;
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  background-color: var(--color-background-tertiary);
  padding: 8px;
  min-height: ${smallButton}px;
  display: grid;
  grid-template-columns: 1fr ${smallButton}px;
  gap: ${smallSpace}px;
  input {
    border: none;
    outline: none;
    background-color: transparent;
    color: var(--color-foreground-primary);
    font-size: 14px;
    padding-left: ${smallSpace}px;
  }
`;

const CharacterCount = styled.span<{ isOverLimit: boolean }>`
  color: ${({ isOverLimit }) =>
    isOverLimit
      ? 'var(--color-accent-error)'
      : 'var(--color-foreground-secondary)'};
  text-shadow: 0 6px 20px rgba(0, 0, 0, 1);
`;

const EMPTY_STYLES: React.CSSProperties = {};

const LyricsCard: React.FC<LyricsCardProps> = memo(function LyricsCard({
  disabled = false,
  title,
  placeholder,
  selectedLyrics,

  lyrics,
  setLyrics,

  clearLyrics,

  expanded: inputExpanded,
  setExpanded,

  lyricsInputHeight,
  setLyricsInputHeight,

  mode = LyricsInputModes.MANUAL,

  showLibraryButton,
  showUndoButtonOnly = false,

  onSavePrompt,
  canSavePrompt,

  onRegenerateLyrics,
  isRegeneratingLyrics,

  model,

  headerContentHidden,
  nested,

  fixed = false,
  styleOverrides = EMPTY_STYLES,
}) {
  const [popout, setPopout] = useState(false);
  const expanded = popout || inputExpanded;

  const [showingPromptInput, setShowingPromptInput] = useState(false);
  const [promptInputValue, setPromptInputValue] = useState('');
  const [selectionOverlayRange, setSelectionOverlayRange] = useState<{
    start: number;
    end: number;
  } | null>(null);
  const promptInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (showingPromptInput) {
      promptInputRef.current?.focus();
    }
  }, [showingPromptInput]);

  // Handle Esc key to close expanded lyrics panel
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        if (showingPromptInput) {
          event.preventDefault();
          setShowingPromptInput(false);
        } else if (popout) {
          event.preventDefault();
          setPopout(false);
        }
      }
    };

    if (expanded) {
      document.addEventListener('keydown', handleKeyDown);
      return () => {
        document.removeEventListener('keydown', handleKeyDown);
      };
    }
  }, [popout, showingPromptInput, setShowingPromptInput]);

  const maxLength = useMemo(() => {
    if (!model) return MAX_CUSTOM_PROMPT_CHARS;
    if (
      model.includes('auk') ||
      model.includes('bluejay') ||
      model.includes('crow')
    ) {
      return MAX_CUSTOM_PROMPT_CHARS_LONGEST;
    }
    return ['v3-5', 'v4', 'v3p5'].some((version: string) => {
      return model.includes(version);
    })
      ? MAX_CUSTOM_PROMPT_CHARS_LONG
      : MAX_CUSTOM_PROMPT_CHARS;
  }, [model]);

  const {
    state: undoableLyrics,
    setState: setUndoableLyrics,
    undo,
    canUndo,
    handleKeyboardEvent,
  } = useSynchronizingStateHistory(lyrics, setLyrics);

  const currentText = undoableLyrics;
  const currentTextLength = currentText.length;

  const hasContent = currentTextLength > 0;
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  const shouldShowCounter = useMemo(() => {
    return currentTextLength >= maxLength * 0.8;
  }, [currentTextLength, maxLength]);

  const receiveResizerRef = useResizer({
    height: lyricsInputHeight ?? 120,
    setHeight: setLyricsInputHeight,
    minHeight: 120,
    fullHeight: popout,
    resizeTargetRef: textareaRef,
  });

  const fallbackPreview = useMemo(() => {
    if (selectedLyrics === undefined) return '';
    return selectedLyrics ? selectedLyrics : '';
  }, [selectedLyrics]);

  const subtitle = useMemo(() => {
    return (
      lyrics.replace(/\n/g, ' / ') || fallbackPreview.replace(/\n/g, ' / ')
    );
  }, [lyrics, fallbackPreview]);

  const finalPlaceholder = useMemo(() => {
    if (fallbackPreview) return fallbackPreview;
    if (placeholder) return placeholder;
    if (mode === LyricsInputModes.INSTRUMENTAL)
      return 'Instrumental - lyrics disabled';
    return 'Write some lyrics or a prompt — or leave blank for instrumental';
  }, [fallbackPreview, placeholder, mode]);

  const theme = useTheme() as CreateTheme;

  const [lyricsGenerateModalOpen, setLyricsGenerateModalOpen] = useState(false);

  const headerMode = useMemo(() => {
    if (showingPromptInput) {
      return 'ALL_BUTTONS_WITH_PROMPT_CLOSER' as const;
    }
    if (expanded && mode === LyricsInputModes.MANUAL) {
      if (hasContent) {
        return 'ALL_BUTTONS_WITH_PROMPT_OPENER' as const;
      } else {
        return 'PROMPT_OPENER_ONLY' as const;
      }
    } else {
      return 'EMPTY' as const;
    }
  }, [showingPromptInput, mode, hasContent, expanded]);

  const showFirstThreeButtons = [
    'ALL_BUTTONS_WITH_PROMPT_OPENER',
    'ALL_BUTTONS_WITH_PROMPT_CLOSER',
  ].includes(headerMode);

  const textareaDisabled =
    disabled ||
    !expanded ||
    mode === LyricsInputModes.INSTRUMENTAL ||
    lyricsGenerateModalOpen;

  const handleClearLyrics = useCallback(() => {
    if (!clearLyrics) {
      setLyrics('');
    } else {
      clearLyrics();
    }
    setShowingPromptInput(false);
  }, [clearLyrics, setShowingPromptInput, setLyrics]);

  return (
    <CreateCard
      nested={nested}
      disabled={disabled}
      popout={popout}
      title={
        <CollapsibleCardTitle
          title={title ?? 'Lyrics'}
          subtitle={subtitle}
          expanded={expanded}
        />
      }
      collapsible={!fixed}
      className={RESIZABLE_CONTAINER_CLASS_NAME}
      style={styleOverrides}
      expanded={expanded}
      setExpanded={setExpanded}
      headerContentHidden={headerContentHidden || headerMode === 'EMPTY'}
      headerContent={
        disabled ? null : (
          <>
            <Button
              shape={ButtonShape.Pill}
              className={clsx(theme.tailwind.bigButtonPadding, {
                'pointer-events-none opacity-0': !showFirstThreeButtons,
              })}
              icon={<EditUndoIcon className='h-4 w-4' />}
              aria-label='Undo lyrics changes'
              onClick={undo}
              disabled={!canUndo || !showFirstThreeButtons}
            />
            {!showUndoButtonOnly ? (
              <>
                <Button
                  shape={ButtonShape.Pill}
                  className={clsx(theme.tailwind.bigButtonPadding, {
                    'pointer-events-none opacity-0': !showFirstThreeButtons,
                  })}
                  icon={<BookmarkOutlineIcon className='h-4 w-4' />}
                  aria-label='Save lyrics prompt'
                  onClick={onSavePrompt}
                  disabled={!canSavePrompt || !showFirstThreeButtons}
                />
                <Button
                  shape={ButtonShape.Pill}
                  className={clsx(theme.tailwind.bigButtonPadding, {
                    'pointer-events-none opacity-0': !showFirstThreeButtons,
                  })}
                  disabled={!showFirstThreeButtons}
                  icon={DiscardIcon}
                  aria-label='Clear lyrics'
                  onClick={() => {
                    handleClearLyrics();
                    setShowingPromptInput(false);
                  }}
                />
                {headerMode === 'ALL_BUTTONS_WITH_PROMPT_CLOSER' ? (
                  <Button
                    shape={ButtonShape.Pill}
                    className={theme.tailwind.bigButtonPadding}
                    variant={ButtonVariant.Primary}
                    icon={<CloseIcon className='h-4 w-4' />}
                    onClick={() => {
                      setShowingPromptInput(false);
                    }}
                  />
                ) : (
                  // even if we're in show-nothing mode, still render this button so that it animates in nicely.
                  <ContextMenuTrigger
                    key='prompt-opener-menu'
                    ButtonComponent={(props) => (
                      <Button
                        key='prompt-opener'
                        {...props}
                        variant={
                          ['PROMPT_OPENER_ONLY', 'EMPTY'].includes(headerMode)
                            ? ButtonVariant.Standard
                            : ButtonVariant.Aura
                        }
                        shape={ButtonShape.Pill}
                        className={theme.tailwind.bigButtonPadding}
                        icon={<WandIcon className='h-4 w-4' />}
                      />
                    )}
                    ContentsComponent={() => (
                      <>
                        <ContextMenuItem
                          icon={<LyricsModelIcon className='h-4 w-4' />}
                          onClick={() => {
                            setShowingPromptInput(true);
                          }}
                        >
                          Edit Lyrics
                        </ContextMenuItem>
                        <ContextMenuItem
                          icon={<FourStarIcon className='h-4 w-4' />}
                          onClick={() => {
                            setLyricsGenerateModalOpen(true);
                          }}
                        >
                          Write Full Song
                        </ContextMenuItem>
                      </>
                    )}
                  />
                )}
              </>
            ) : null}
          </>
        )
      }
    >
      <LyricsGenerateModal
        isOpen={lyricsGenerateModalOpen}
        onClose={() => {
          setLyricsGenerateModalOpen(false);
        }}
      />
      <LyricsContent>
        <TextareaWrapper>
          <CreateTextarea
            ref={textareaRef}
            value={currentText}
            onKeyDown={(e) => handleKeyboardEvent(e.nativeEvent)}
            onChange={(e) => {
              if (mode !== LyricsInputModes.INSTRUMENTAL) {
                const newValue = e.target.value;
                // Prevent typing beyond the maximum length
                setUndoableLyrics(newValue.slice(0, maxLength));
              }
            }}
            placeholder={finalPlaceholder}
            className='relative mb-0 pb-0'
            textareaClassName='placeholder:text-background-fog-dense'
            tabIndex={textareaDisabled ? -1 : undefined}
            disabled={textareaDisabled}
            selectionOverlayRange={selectionOverlayRange}
            setSelectionOverlayRange={setSelectionOverlayRange}
            isRegeneratingSelection={isRegeneratingLyrics}
          />
          {shouldShowCounter && (
            <CharacterCount
              isOverLimit={currentTextLength > maxLength}
              className='absolute right-2 bottom-12 z-10 text-xs'
            >
              {currentTextLength}/{maxLength}
            </CharacterCount>
          )}
        </TextareaWrapper>
        {!fixed && (
          <Footer
            blockAllPointerEvents={!expanded}
            opaque={!hasContent || popout}
            style={{ backgroundColor: 'transparent' }}
          >
            <LeftSideWrapper
              hideContent={hasContent || popout || !expanded}
              shadeContent={false}
            >
              {showLibraryButton && (
                <Button
                  shape={ButtonShape.Pill}
                  variant={ButtonVariant.Standard}
                  icon={<LibraryIcon className='h-5 w-5 scale-75' />}
                />
              )}
            </LeftSideWrapper>
            <Button
              shape={ButtonShape.Pill}
              variant={popout ? ButtonVariant.Primary : ButtonVariant.Standard}
              icon={
                popout ? (
                  <CollapseContentIcon className='h-4 w-4' />
                ) : (
                  <ExpandContentIcon className='h-4 w-4' />
                )
              }
              className={theme.tailwind.bigButtonPadding}
              onClick={() => setPopout(!popout)}
            />
            <PromptInputWrapper showing={showingPromptInput && expanded}>
              <input
                placeholder='Enhance lyrics (e.g. "make it sound happier")'
                ref={promptInputRef}
                value={promptInputValue}
                onChange={(e) => setPromptInputValue(e.target.value)}
              />
              <Button
                shape={ButtonShape.Pill}
                variant={ButtonVariant.Primary}
                className={clsx(theme.tailwind.smallButtonPadding, {
                  hidden: !showingPromptInput || !expanded,
                })}
                icon={
                  isRegeneratingLyrics ? (
                    <SpinnerSVG className='fill-background-secondary' />
                  ) : (
                    <ArrowUpIcon className='h-5 w-5' />
                  )
                }
                onClick={() => {
                  onRegenerateLyrics?.(
                    promptInputValue,
                    selectionOverlayRange,
                    setSelectionOverlayRange
                  );
                }}
              />
            </PromptInputWrapper>
          </Footer>
        )}
      </LyricsContent>
      {expanded && !popout && !fixed && (
        <ResizerHandle ref={receiveResizerRef} />
      )}
    </CreateCard>
  );
});

export const CustomLyricsCard = () => {
  const [lyrics, setLyrics] = useContextSelector(CreateFormContext, (context) =>
    context.selectState<string>([CreateModes.CUSTOM, 'lyrics'])
  );
  const title = useContextSelector(
    CreateFormContext,
    (context) => context.state[CreateModes.CUSTOM].title
  );
  const [mode] = useContextSelector(CreateFormContext, (context) =>
    context.selectState<LyricsInputModes>([CreateModes.CUSTOM, 'lyricsMode'])
  );
  const model = useContextSelector(
    CreateFormContext,
    (context) => context.state.global.model
  );

  const extendFromSeconds = useContextSelector(CreateFormContext, (context) => {
    const hasExtendCondition =
      context.state.global.timedCondition?.type === ConditionTypes.EXTEND;
    if (!hasExtendCondition) return 0;
    const extendCondition = context.state.global.timedCondition
      ?.condition as ExtendCondition;
    return extendCondition.startSeconds;
  });

  const [expanded, setExpanded] = useContextSelector(
    CreateFormContext,
    (context) =>
      context.selectState<boolean>([CreateModes.CUSTOM, 'lyricsExpanded'])
  );
  const [lyricsInputHeight, setLyricsInputHeight] = useContextSelector(
    CreateFormContext,
    (context) =>
      context.selectState<number>([CreateModes.CUSTOM, 'lyricsInputHeight'])
  );

  const lyricsRef = useRef<string>(lyrics);
  useEffect(() => {
    lyricsRef.current = lyrics;
  }, [lyrics]);

  const saveLyricsPrompt = useContextSelector(
    CreateFormContext,
    (ctx) => ctx.saveLyricsPrompt
  );

  const lastSavedLyricsPromptState = useContextSelector(
    CreateFormContext,
    (ctx) => ctx.lastSavedLyricsPromptState
  );

  const getLyricsPromptToSave = useCallback(() => {
    const lyrics = lyricsRef.current;
    const promptToSave = {
      lyrics: lyrics !== '' ? lyrics : undefined,
    };
    return promptToSave;
  }, []);

  const isLyricsPromptSaveable = useMemo(() => {
    const promptToSave = getLyricsPromptToSave() as SavedPromptSchema;
    return Object.keys(promptToSave).some(
      (promptKey: string) =>
        (promptToSave[promptKey as keyof SavedPromptSchema] ?? '') !==
        (lastSavedLyricsPromptState?.[promptKey as keyof SavedPromptSchema] ??
          '')
    );
  }, [lastSavedLyricsPromptState, getLyricsPromptToSave]);

  const saveCurrentLyricsPrompt = useCallback(async () => {
    if (!isLyricsPromptSaveable) return;
    const promptToSave = getLyricsPromptToSave();
    await saveLyricsPrompt(promptToSave);
  }, [isLyricsPromptSaveable, saveLyricsPrompt, getLyricsPromptToSave]);

  const regenerateLyrics = useRegenerateLyrics();
  const [isRegeneratingLyrics, setIsRegeneratingLyrics] =
    useState<boolean>(false);

  const handleRegenerateLyrics = useCallback(
    async (
      promptInputValue: string,
      selectionOverlayRange: { start: number; end: number } | null,
      setSelectionOverlayRange: Dispatch<
        SetStateAction<{ start: number; end: number } | null>
      >
    ) => {
      const lyrics = lyricsRef.current;
      const startOffset = !!selectionOverlayRange
        ? (selectionOverlayRange?.start ?? 0)
        : 0;
      const endOffset = !!selectionOverlayRange
        ? (selectionOverlayRange?.end ?? 0)
        : lyrics.length;
      setIsRegeneratingLyrics(true);
      const { replacedText, fullText } = await regenerateLyrics({
        prompt: promptInputValue,
        edit: lyrics.slice(startOffset, endOffset),
        prefix: lyrics.slice(0, startOffset),
        suffix: lyrics.slice(endOffset),
        title,
      });
      setIsRegeneratingLyrics(false);
      setLyrics(fullText);
      const newSavedSelection = !!selectionOverlayRange
        ? {
            start: selectionOverlayRange?.start,
            end: selectionOverlayRange?.start + replacedText.length,
          }
        : null;
      setSelectionOverlayRange(newSavedSelection);
    },
    [title, setLyrics, regenerateLyrics, setIsRegeneratingLyrics]
  );

  const mumbleMode = useContextSelector(
    CreateFormContext,
    (context) =>
      modelValidForMumbleMode(context.state.global.model) &&
      context.state[CreateModes.CUSTOM].lyricsMode ===
        LyricsInputModes.MUMBLE_MODE
  );

  const isAutoMode = mode === LyricsInputModes.AUTO;

  const lyricsCardTitle = useMemo(() => {
    if (mumbleMode) return 'Lyrics Disabled (Mumble Mode)';
    if (isAutoMode) return 'Lyrics Disabled (Auto Mode)';
    return 'Lyrics';
  }, [mumbleMode, isAutoMode]);

  return (
    <LyricsCard
      title={lyricsCardTitle}
      disabled={mumbleMode || isAutoMode}
      placeholder={
        extendFromSeconds
          ? `Write lyrics to insert after ${encodeTimeFormat(extendFromSeconds, 1)}`
          : undefined // falls back to internal logic
      }
      lyrics={lyrics}
      setLyrics={setLyrics}
      mode={mode}
      expanded={expanded}
      setExpanded={setExpanded}
      lyricsInputHeight={lyricsInputHeight}
      setLyricsInputHeight={setLyricsInputHeight}
      onRegenerateLyrics={handleRegenerateLyrics}
      isRegeneratingLyrics={isRegeneratingLyrics}
      onSavePrompt={saveCurrentLyricsPrompt}
      canSavePrompt={isLyricsPromptSaveable}
      model={model}
    />
  );
};

export const ChatLyricsCard = () => {
  const [lyrics, setLyrics] = useContextSelector(CreateFormContext, (context) =>
    context.selectState<string>([CreateModes.CUSTOM, 'lyrics'])
  );
  const [expanded, setExpanded] = useContextSelector(
    CreateFormContext,
    (context) =>
      context.selectState<boolean>([CreateModes.CUSTOM, 'lyricsExpanded'])
  );
  const [lyricsInputHeight, setLyricsInputHeight] = useContextSelector(
    CreateFormContext,
    (context) =>
      context.selectState<number>([CreateModes.CUSTOM, 'lyricsInputHeight'])
  );
  const model = useContextSelector(
    CreateFormContext,
    (context) => context.state.global.model
  );

  return (
    <LyricsCard
      placeholder={'Write some lyrics — or leave blank for instrumental'}
      lyrics={lyrics}
      model={model}
      setLyrics={setLyrics}
      mode={LyricsInputModes.MANUAL}
      expanded={expanded}
      setExpanded={setExpanded}
      lyricsInputHeight={lyricsInputHeight}
      setLyricsInputHeight={setLyricsInputHeight}
      onSavePrompt={() => {}}
      canSavePrompt={false}
      showUndoButtonOnly={true}
      styleOverrides={{
        backgroundColor: 'var(--color-background-fog-thin)',
        backdropFilter: 'blur(20px)',
      }}
    />
  );
};

export default LyricsCard;