'use client';

import { useState } from 'react';
import { twMerge } from 'tailwind-merge';

import CollapsibleBanner from '@/components/banner/CollapsibleBanner';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import DiscoverSongCard from '@/components/carousel/carouselCards/DiscoverSongCard';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import { useClipById } from '@/hooks/useClipById';
import { ChevronDownIcon, RemixIcon, ShareArrowIcon } from '@/icons';
import { ContextType } from '@/logging/contextTypes';
import { ClipEntity } from '@/state/clipStore';

import HeroBanner from './HeroBanner';

export interface ProfileContestBannerProps {
  badgeText?: string;
  badgeTextSmall?: string;
  title: string;
  body: string;
  collapsedDescription: string;
  primaryActionText?: string;
  secondaryActionText?: string;
  backgroundImageUrl: string;
  clipId: string;
  onPrimaryActionClick: () => void;
  onSecondaryActionClick: () => void;
  collapsedTitle?: string;
  bannerSongCardImage?: string;
  collapsed?: boolean;
  onCollapseChange?: (collapsed: boolean) => void;
  bannerClassName?: string;
}

export const ProfileContestBanner = ({
  title,
  body,
  badgeText = 'REMIX CONTEST',
  badgeTextSmall = 'CONTEST',
  collapsedDescription,
  primaryActionText = 'Remix',
  secondaryActionText = 'Requirements',
  backgroundImageUrl,
  clipId,
  onPrimaryActionClick,
  onSecondaryActionClick,
  collapsedTitle,
  bannerSongCardImage,
  collapsed,
  onCollapseChange,
  bannerClassName,
}: ProfileContestBannerProps) => {
  const { data: clipData, isLoading, isError } = useClipById(clipId);
  // Use local state for collapse management
  const [internalCollapsed, setInternalCollapsed] = useState(false);

  // Use external props if provided, otherwise use internal state
  const isCollapsed = collapsed !== undefined ? collapsed : internalCollapsed;
  const setIsCollapsed =
    onCollapseChange !== undefined ? onCollapseChange : setInternalCollapsed;

  const ActionButtons = ({
    buttonSize = ButtonSize.Mini,
    secondaryActionButtonVariant = ButtonVariant.Glass,
  }: {
    buttonSize?: ButtonSize;
    secondaryActionButtonVariant?: ButtonVariant;
  }) => {
    return (
      <>
        <Button
          variant={ButtonVariant.Primary}
          shape={ButtonShape.Pill}
          size={buttonSize}
          icon={RemixIcon}
          onClick={onPrimaryActionClick}
          className='py-1.5'
        >
          {primaryActionText}
        </Button>
        <Button
          variant={secondaryActionButtonVariant}
          shape={ButtonShape.Pill}
          size={buttonSize}
          icon={ShareArrowIcon}
          onClick={onSecondaryActionClick}
          className='py-1.5'
        >
          {secondaryActionText}
        </Button>
      </>
    );
  };

  const bannerLeftSection = (
    <div className='relative flex flex-col items-center justify-end gap-2 md:items-start lg:max-w-[400px]'>
      <div className='w-full'>
        <h2 className='mb-4 font-serif text-[36px] leading-[1.2] font-light text-foreground-primary-on-dark max-lg:text-center lg:text-[40px]'>
          {title}
        </h2>
        <div className='font-sans text-[14px] leading-[16px] font-normal text-foreground-tertiary-on-dark max-lg:text-center'>
          {body.split('\n\n').map((line, i) => (
            <p className='mb-3' key={i}>
              {line}
            </p>
          ))}
        </div>

        <div className='mt-4 flex hidden gap-2 lg:flex'>
          <ActionButtons />
        </div>
      </div>
    </div>
  );

  const bannerRightSection = (
    <div className='flex flex-col items-center gap-3'>
      {isError ? (
        <div className='flex h-[286px] flex-col items-center justify-center'>
          <p className='text-foreground-tertiary'>Song not found</p>
        </div>
      ) : (
        <>
          <DiscoverSongCard
            clip={
              {
                ...(clipData || {}),
                imageUrl: bannerSongCardImage || clipData?.imageUrl,
              } as ClipEntity
            }
            index={0}
            className='h-[286px]'
            contextType={ContextType.Contest}
            contextId={clipId}
          />
          <div className='my-4 flex gap-2 lg:hidden'>
            <ActionButtons
              buttonSize={ButtonSize.Small}
              secondaryActionButtonVariant={ButtonVariant.Secondary}
            />
          </div>
        </>
      )}
    </div>
  );

  return isLoading ? (
    <div className='flex h-[300px] flex-col items-center justify-center'>
      <SpinnerSVG />
    </div>
  ) : (
    <CollapsibleBanner
      className={twMerge(
        'relative rounded-2xl bg-linear-to-r from-background-secondary to-transparent',
        bannerClassName
      )}
      collapsed={isCollapsed}
      onCollapse={setIsCollapsed}
      persistentContent={({ onToggle, isCollapsed }) => (
        <>
          {!isCollapsed && (
            <div
              className='absolute inset-0 rounded-2xl bg-cover bg-center transition-opacity duration-500 ease-in-out will-change-[opacity]'
              style={{
                backgroundImage: `linear-gradient(to right, rgba(0,0,0,0.65), rgba(0,0,0,0.2)), url('${backgroundImageUrl}')`,
              }}
            />
          )}

          <div className='relative z-10 flex items-center justify-between gap-4 p-4'>
            <div className='flex min-w-0 flex-1 items-center gap-4 px-2'>
              <div className='inline-block rounded-full bg-accent-yellow px-2 py-0.5 text-[12px] leading-[16px] font-medium text-dumbo-50 uppercase'>
                {isCollapsed ? badgeTextSmall : badgeText}
              </div>
              <div className='min-w-0 flex-1'>
                {isCollapsed && (
                  <div className='flex flex-row items-center gap-2'>
                    <h2 className='font-sans text-[16px] leading-[16px] font-medium text-foreground-primary'>
                      {collapsedTitle || title}
                    </h2>
                    <p className='hidden font-sans text-[14px] leading-[20px] font-normal text-foreground-tertiary xl:block'>
                      {collapsedDescription}
                    </p>
                  </div>
                )}
              </div>
            </div>
            <Button
              variant={ButtonVariant.Tertiary}
              shape={ButtonShape.Pill}
              size={ButtonSize.Small}
              icon={isCollapsed ? ChevronDownIcon : ShareArrowIcon}
              onClick={onToggle}
              aria-label={isCollapsed ? 'Expand banner' : 'Collapse banner'}
              aspectSquare
            />
          </div>
        </>
      )}
      collapsedContent={() => null}
      expandedContent={() => (
        <HeroBanner
          leftSection={bannerLeftSection}
          rightSection={bannerRightSection} // Include the song card
          className='' // Use the original HeroBanner styling with lg:min-h-[286px]
        />
      )}
    />
  );
};