import styled from '@emotion/styled';
import { useCallback } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { DraggedClip } from '@/app/(root)/dragAndDrop/DragAndDropContext';
import Droppable, { DropOverlay } from '@/app/(root)/dragAndDrop/Droppable';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import ImageWithFallback from '@/components/image/ImageWithFallback';
// import PersonaCard from '@/components/card/PersonaCard';
import { ModalTypes } from '@/components/modal/constants/ModalTypes';
import { toast } from '@/components/toast/Toast';
import useClip from '@/hooks/useClip';
import { useContextSelector } from '@/hooks/useContextSelector';
import { createTransactionLogger } from '@/logging/logWebUserEvent';
import { Clip } from '@/state/clipStore';
import { FeatureKey } from '@/state/sessionStore';
import { isSubscriber } from '@/utils/session';

import { CreateActionShortcutsCard } from '../create/createV2/componentsQ3/ActionShortcutsCard';
import { CustomAdvancedOptionsCard } from '../create/createV2/componentsQ3/AdvancedOptionsCard';
import {
  CreateCoverCard,
  CreateTimedConditionCard,
} from '../create/createV2/componentsQ3/ClipConditionCard';
import CreateFooter from '../create/createV2/componentsQ3/CreateFooter';
import { CreateExtendCard } from '../create/createV2/componentsQ3/ExtendCard';
import { InspirationCard } from '../create/createV2/componentsQ3/InspirationCard';
import { ChatLyricsCard } from '../create/createV2/componentsQ3/LyricsCard';
import { PersonaCard } from '../create/createV2/componentsQ3/PersonaCard';
import { ChatStylesCard } from '../create/createV2/componentsQ3/StylesCard';
import {
  CardList,
  CardListContainer,
} from '../create/createV2/componentsQ3/common';
import useRemixIntentConsumer from '../create/createV2/componentsQ3/useRemixIntentConsumer';
import CreateFormContext, {
  AddConditionType,
} from '../create/v2/CreateFormContext';
import resetCreateInputs from '../create/v2/actions/resetCreateInputs';

type ChatCreateFormProps = {
  lastPlayedClipId?: string;
  onAfterCreate?: (clips: Clip[]) => void;
  title?: string;
};

const AuraImage = styled.div`
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  background-image: url('https://cdn-o.suno.com/chat_artifact_aura.jpg');
  opacity: 15%;
  overflow: hidden;
  height: 340px;
  width: 340px;
  border-radius: 50%;
  mask: radial-gradient(circle at center, black 0%, black 20%, transparent 70%);
  -webkit-mask: radial-gradient(
    circle at center,
    black 0%,
    black 20%,
    transparent 70%
  );
`;

export default function ChatCreateForm({
  lastPlayedClipId,
  onAfterCreate,
  title,
}: ChatCreateFormProps) {
  const lastPlayedClip = useClip(lastPlayedClipId || '');
  const addCondition = useContextSelector(
    CreateFormContext,
    (context) => context.addCondition
  );

  const setState = useContextSelector(
    CreateFormContext,
    (context) => context.setState
  );
  const isGenerating = useContextSelector(
    CreateFormContext,
    (context) => context.isGenerating
  );

  const { session, menus } = useStores();

  const canClear = useContextSelector(
    CreateFormContext,
    (context) => context.canClear
  );
  const createBlockingErrorMessage = useContextSelector(
    CreateFormContext,
    (context) => context.createBlockingErrorMessage
  );

  const generate = useContextSelector(
    CreateFormContext,
    (context) => context.generate
  );
  const onCreateClick = useCallback(async () => {
    if (!isSubscriber(session) && session.credits <= 0) {
      toast({
        title: 'Out of Credits',
        description: 'Upgrade to Pro.',
        status: 'warning',
        duration: 4000,
        isClosable: true,
      });

      menus.setCurrentUpsellFeature(FeatureKey.REMASTER);
      menus.openModal(ModalTypes.UPSELL_MODAL);
      return;
    }

    return await generate(createTransactionLogger());
  }, [generate, session, menus]);

  const onClearClick = useCallback(() => {
    setState(resetCreateInputs);
  }, [setState]);

  const footerProps = {
    canClear,
    generateBlockingErrorMessage: createBlockingErrorMessage,
    onCreateClick,
    onClearClick,
    isGenerating,
    isOutOfCredits: !isSubscriber(session) && session.credits <= 0,
  };

  const handleDropClip = useCallback(
    (draggedObject: DraggedClip) => {
      addCondition(draggedObject.payload.clipId, AddConditionType.COVER);
    },
    [addCondition]
  );

  useRemixIntentConsumer();

  return (
    <Droppable
      accept={['clip']}
      overlay={<DropOverlay>Drop here</DropOverlay>}
      onDrop={handleDropClip}
    >
      <AuraImage />
      <div className='flex h-full flex-col'>
        <CardListContainer className='card-popout-boundary'>
          {/* <CardList active={headerProps.mode === CreateModes.ADJUST_SPEED}>
            <ClipSpeedCard />
            <CustomTitleWorkspaceCard />
          </CardList> */}
          <CardList active>
            <div className='flex w-full flex-col items-center pt-4'>
              <div className='h-[180px] w-[120px] rounded-xl bg-background-fog-thick'>
                {lastPlayedClip.clip?.image_url ? (
                  <ImageWithFallback
                    alt='Cover art'
                    src={lastPlayedClip.clip?.image_url || ''}
                    className='h-[180px] w-[120px] rounded-xl object-cover'
                  />
                ) : null}
              </div>
              <div className='flex w-full items-center justify-between px-4 pt-4'>
                <h1 className='line-clamp-1 w-full text-center text-base font-semibold'>
                  {lastPlayedClip.clip?.title ?? title ?? 'Untitled Song'}
                </h1>
              </div>
            </div>
            <CreateCoverCard />
            <CreateTimedConditionCard />
            <CreateExtendCard />
            <InspirationCard />
            <PersonaCard />
            <ChatStylesCard />
            <ChatLyricsCard />
            <CreateActionShortcutsCard />
            <CustomAdvancedOptionsCard />
            <div className='h-2'></div>
          </CardList>
        </CardListContainer>
        {!isSubscriber(session) && session.credits <= 0 && (
          <div className='mx-4 mb-4 rounded-xl border border-accent-error/20 bg-accent-error/10 p-4 shadow-sm'>
            <div className='flex items-center gap-3'>
              <div className='flex h-5 w-5 items-center justify-center rounded-full bg-accent-error'>
                <span className='text-xs font-bold text-white'>!</span>
              </div>
              <div className='flex-1'>
                <div className='font-medium text-accent-error'>
                  Out of Credits
                </div>
                <div className='text-sm text-foreground-secondary'>
                  You&apos;ve used all your credits. Upgrade to Pro.
                </div>
              </div>
              <Button
                variant={ButtonVariant.Primary}
                shape={ButtonShape.Pill}
                size={ButtonSize.Small}
                className='bg-accent-error text-white hover:bg-accent-error/90'
                onClick={() => {
                  menus.setCurrentUpsellFeature(FeatureKey.REMASTER);
                  menus.openModal(ModalTypes.UPSELL_MODAL);
                }}
              >
                Upgrade Now
              </Button>
            </div>
          </div>
        )}
        <CreateFooter
          {...footerProps}
          onCreateClick={async () => {
            const clips: Clip[] | undefined = await footerProps.onCreateClick();
            if (!clips) return;
            onAfterCreate?.(clips);
          }}
          className='bg-background-fog-thin'
        />
      </div>
    </Droppable>
  );
}