'use client';

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

import Button, { ButtonSize, ButtonVariant } from '@/components/button/Button';
import SwitchButton from '@/components/button/SwitchButton';
import Pokemon, { Evolution } from '@/components/pokemon/Pokemon';
import LyricsCowriteTextarea from '@/components/textarea/LyricsCowriteTextarea';
import TextareaV2 from '@/components/textarea/TextareaV2';
import useClickDrag from '@/hooks/useClickDrag';
import {
  CommentIcon,
  EditIcon,
  MusicIcon,
  PlayIcon,
  PreviousTrackIcon,
  ThumbsDownIcon,
  ThumbsUpIcon,
} from '@/icons';

const OuterContainer = styled.div`
  background-color: rgba(25, 25, 25, 0.5);
  border-radius: 10px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
`;

const GreyContainer = styled.div`
  border-radius: 10px;
  background-color: #1d1d1d;
  width: 100%;
  height: 100%;
`;

const AuraContainer = styled(GreyContainer)`
  position: relative;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://cdn-o.suno.com/auras/Aura-13.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    filter: blur(80px);
  }
`;

const Row = styled.div<{ start?: boolean }>`
  display: flex;
  flex-direction: row;
  align-items: ${({ start }) => (start ? 'flex-start' : 'center')};
  justify-content: flex-start;
  gap: 5px;
  height: 100%;
`;

const Column = styled.div`
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  height: 100%;
`;

const SongImage = styled.div`
  height: 100%;
  background-image: url('https://cdn-o.suno.com/auras/Aura-13.jpg');
  background-size: cover;
  background-position: center;
  aspect-ratio: 11/16;
  border-radius: 5px;
  max-width: 250px;
  max-height: 364px;
`;

const TallInfo = styled.div`
  flex-grow: 1;
`;

const WideInfo = styled.div`
  flex-grow: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
`;

const SongTitle = styled.div`
  color: white;
  font-size: 16px;
`;

const SongArtistAndPrompt = styled.div`
  color: white;
  font-size: 12px;
  &:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-image: url('https://cdn-o.suno.com/auras/Aura-12.jpg');
    background-size: cover;
    background-position: center;
    margin-right: 5px;
    margin-bottom: -5px;
  }
  span {
    opacity: 0.5;
  }
`;

const SongList = styled.div`
  > * {
    height: 40px;
    margin-top: 4px;
  }
`;

const LikeBar = () => {
  return (
    <div className='flex flex-row items-center justify-center gap-1'>
      <Button size={ButtonSize.Mini} icon={<PlayIcon />} />
      <Button size={ButtonSize.Mini} icon={<CommentIcon />} />
      <Button size={ButtonSize.Mini} icon={<ThumbsUpIcon />} />
      <Button size={ButtonSize.Mini} icon={<ThumbsDownIcon />} />
    </div>
  );
};

const VerticalLikeBar = () => {
  return (
    <div className='flex flex-col items-center justify-center gap-1'>
      <Button size={ButtonSize.Small} icon={<PlayIcon />} />
      <Button size={ButtonSize.Small} icon={<CommentIcon />} />
      <Button size={ButtonSize.Small} icon={<ThumbsUpIcon />} />
      <Button size={ButtonSize.Small} icon={<ThumbsDownIcon />} />
    </div>
  );
};

const LyricsContainer = styled.div`
  height: 100%;
  width: 100%;
  position: relative;
`;
const LyricsContent = styled.div`
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
`;

const SectionTag = styled.div`
  border-radius: 4px;
  padding: 5px 10px;
  color: white;
  font-size: 12px;
  width: auto;
  &:nth-of-type(1) {
    background-color: #c75150;
  }
  &:nth-of-type(2) {
    background-color: #733fbb;
  }
  &:nth-of-type(3) {
    background-color: #bd6d27;
  }
  &:nth-of-type(4) {
    background-color: #c75150;
  }
`;

const SongLyrics = () => {
  return (
    <LyricsContainer>
      <LyricsContent>
        <SectionTag>Verse 1</SectionTag>
        <p>Never gonna give you up</p>
        <p>Never gonna let you down</p>
        <p>Never gonna run around and desert you</p>
        <SectionTag>Chorus</SectionTag>
        <p>Never gonna make you cry</p>
        <p>Never gonna say goodbye</p>
        <p>Never gonna tell a lie and hurt you</p>
        <SectionTag>Verse 1</SectionTag>
        <p>Never gonna give you up</p>
        <p>Never gonna let you down</p>
        <p>Never gonna run around and desert you</p>
        <SectionTag>Chorus</SectionTag>
        <p>Never gonna make you cry</p>
        <p>Never gonna say goodbye</p>
        <p>Never gonna tell a lie and hurt you</p>
        <SectionTag>Verse 1</SectionTag>
        <p>Never gonna give you up</p>
        <p>Never gonna let you down</p>
        <p>Never gonna run around and desert you</p>
        <SectionTag>Chorus</SectionTag>
        <p>Never gonna make you cry</p>
        <p>Never gonna say goodbye</p>
        <p>Never gonna tell a lie and hurt you</p>
      </LyricsContent>
    </LyricsContainer>
  );
};

const SongStructureContainer = styled.div`
  display: grid;
  grid-template-columns: 0.75fr 1.25fr 0.5fr 1.5fr;
  height: 100%;
  width: 100%;
  gap: 2px;
  > div {
    background-color: #1d1d1d;
    border-radius: 5px;
    &:nth-of-type(1) {
      background-color: #c75150;
    }
    &:nth-of-type(2) {
      background-color: #733fbb;
    }
    &:nth-of-type(3) {
      background-color: #bd6d27;
    }
    &:nth-of-type(4) {
      background-color: #c75150;
    }
  }
`;

const SongStructure = () => {
  return (
    <SongStructureContainer>
      <div />
      <div />
      <div />
      <div />
    </SongStructureContainer>
  );
};
const SongRowDemo = ({ inCreateList }: { inCreateList?: boolean }) => {
  const [showRemix, setShowRemix] = useState(false);
  return (
    <OuterContainer>
      <Pokemon>
        <Evolution w={100} h={30}>
          <GreyContainer className='p-1'>
            <Row>
              <SongImage />
              <WideInfo>
                <SongTitle>Song Title</SongTitle>
                {inCreateList ? (
                  <span className='text-sm opacity-50'>Song Prompt</span>
                ) : (
                  <SongArtistAndPrompt>Song Artist</SongArtistAndPrompt>
                )}
              </WideInfo>
            </Row>
          </GreyContainer>
        </Evolution>

        <Evolution w={300} h={30}>
          <GreyContainer className='p-1'>
            <Row>
              <SongImage />
              <WideInfo>
                <SongTitle>Song Title</SongTitle>
                {inCreateList ? (
                  <span className='text-sm opacity-50'>Song Prompt</span>
                ) : (
                  <SongArtistAndPrompt>Song Artist</SongArtistAndPrompt>
                )}
              </WideInfo>
              <LikeBar />
            </Row>
          </GreyContainer>
        </Evolution>

        <Evolution w={100} h={50}>
          <GreyContainer className='p-1'>
            <Row>
              <SongImage />
              <TallInfo>
                <SongTitle>Song Title</SongTitle>
                {inCreateList ? (
                  <span className='text-sm opacity-50'>Song Prompt</span>
                ) : (
                  <SongArtistAndPrompt>Song Artist</SongArtistAndPrompt>
                )}
              </TallInfo>
            </Row>
          </GreyContainer>
        </Evolution>

        <Evolution w={300} h={50}>
          <GreyContainer className='p-1'>
            <Row>
              <SongImage />
              <TallInfo>
                <SongTitle>Song Title</SongTitle>
                {inCreateList ? (
                  <span className='text-sm opacity-50'>Song Prompt</span>
                ) : (
                  <SongArtistAndPrompt>Song Artist</SongArtistAndPrompt>
                )}
              </TallInfo>
              <LikeBar />
            </Row>
          </GreyContainer>
        </Evolution>

        <Evolution w={400} h={50}>
          <GreyContainer className='p-1'>
            <Row>
              <SongImage />
              <TallInfo>
                <SongTitle>Song Title</SongTitle>
                <SongArtistAndPrompt>
                  Song Artist <span>Song Prompt, Song Prompt</span>
                </SongArtistAndPrompt>
              </TallInfo>
              <LikeBar />
            </Row>
          </GreyContainer>
        </Evolution>

        <Evolution w={400} h={100}>
          <GreyContainer className='p-2'>
            <Row>
              <SongImage className='mr-2' />
              <TallInfo>
                <SongTitle>Song Title</SongTitle>
                <SongArtistAndPrompt>
                  Song Artist <span>Song Prompt, Song Prompt</span>
                </SongArtistAndPrompt>
                <div className='mt-2 flex flex-row items-center justify-between'>
                  <LikeBar />
                  <SwitchButton
                    checked={true}
                    onChange={() => {}}
                    buttonText='Public'
                  />
                  <Button
                    size={ButtonSize.Mini}
                    onClick={() => setShowRemix(true)}
                  >
                    Remix
                  </Button>
                </div>
              </TallInfo>
            </Row>
          </GreyContainer>
        </Evolution>

        <Evolution w={400} h={120}>
          <GreyContainer className='p-2'>
            <Column>
              <Row>
                <SongImage className='mr-2' />
                <TallInfo>
                  <SongTitle>Song Title</SongTitle>
                  <SongArtistAndPrompt>
                    Song Artist <span>Song Prompt, Song Prompt</span>
                  </SongArtistAndPrompt>
                  <div className='mt-2 flex flex-row items-center justify-between'>
                    <LikeBar />
                    <SwitchButton
                      checked={true}
                      onChange={() => {}}
                      buttonText='Public'
                    />
                    <Button
                      size={ButtonSize.Mini}
                      onClick={() => setShowRemix(true)}
                    >
                      Remix
                    </Button>
                  </div>
                </TallInfo>
              </Row>
              <Row>
                <SongStructure />
              </Row>
            </Column>
          </GreyContainer>
        </Evolution>

        <Evolution w={400} h={200}>
          <GreyContainer className='p-4'>
            <Column>
              <Row>
                <SongImage className='mr-2' />
                <TallInfo>
                  <SongTitle>Song Title</SongTitle>
                  <SongArtistAndPrompt>
                    Song Artist <span>Song Prompt, Song Prompt</span>
                  </SongArtistAndPrompt>
                  <div className='mt-2 flex flex-row items-center justify-between'>
                    <LikeBar />
                    <SwitchButton
                      checked={true}
                      onChange={() => {}}
                      buttonText='Public'
                    />
                  </div>
                </TallInfo>
              </Row>
              <Row className='grow'>
                <SongStructure />
              </Row>
              <div className='shrink'>
                <Row>
                  <Row>
                    <Button
                      size={ButtonSize.Small}
                      icon={<PreviousTrackIcon />}
                    />
                    <Button size={ButtonSize.Small} icon={<PlayIcon />} />
                  </Row>
                  <div className='grow text-center'>0:13 / 1:45</div>
                </Row>
              </div>
            </Column>
          </GreyContainer>
        </Evolution>

        <Evolution w={400} h={300}>
          <AuraContainer className='p-4'>
            <Column>
              <div className='mb-4 h-[50px]'>
                <TallInfo>
                  <SongTitle>Song Title</SongTitle>
                  <SongArtistAndPrompt className='flex flex-row items-center justify-start'>
                    Song Artist{' '}
                    <span className='ml-2 inline-block grow'>
                      Song Prompt, Song Prompt, Song Prompt, Song Prompt
                    </span>
                    <div className='inline-block'>
                      <SwitchButton
                        checked={true}
                        onChange={() => {}}
                        buttonText='Public'
                      />
                    </div>
                  </SongArtistAndPrompt>
                </TallInfo>
              </div>
              <Row start className='grow'>
                <SongImage className='mr-2' />
                <SongLyrics />
                <VerticalLikeBar />
              </Row>
              <div className='h-[50px]'>
                <SongStructure />
              </div>
              <div className='shrink'>
                <Row>
                  <Row>
                    <Button
                      size={ButtonSize.Small}
                      icon={<PreviousTrackIcon />}
                    />
                    <Button size={ButtonSize.Small} icon={<PlayIcon />} />
                  </Row>
                  <div className='grow text-center'>0:13 / 1:45</div>
                </Row>
              </div>
            </Column>
          </AuraContainer>
        </Evolution>
      </Pokemon>
      {showRemix && (
        <div className='w-[500px] p-2'>
          <Pokemon>
            <Evolution w={50} h={50}>
              <div className='relative'>
                <TextareaV2
                  placeholder='styles'
                  value=''
                  className='p-0'
                  rows={1}
                />
                <Button
                  variant={ButtonVariant.Aura}
                  size={ButtonSize.Medium}
                  className='absolute top-1 right-1 bottom-1'
                >
                  Remix
                </Button>
              </div>

              <SongList>
                <SongRowDemo inCreateList />
                <SongRowDemo inCreateList />
                <SongRowDemo inCreateList />
                <SongRowDemo inCreateList />
                <SongRowDemo inCreateList />
              </SongList>
            </Evolution>

            <Evolution w={50} h={280}>
              <Button size={ButtonSize.Small} icon={<EditIcon />}>
                Edit Lyrics
              </Button>
              <Button
                size={ButtonSize.Small}
                icon={<MusicIcon />}
                className='ml-1'
              >
                Negative Styles
              </Button>
              <TextareaV2 placeholder='styles' value='' className='mt-1' />
              <Button
                variant={ButtonVariant.Aura}
                size={ButtonSize.Medium}
                className='mt-1 mb-4 w-full'
              >
                Remix
              </Button>

              <SongList>
                <SongRowDemo inCreateList />
                <SongRowDemo inCreateList />
                <SongRowDemo inCreateList />
                <SongRowDemo inCreateList />
                <SongRowDemo inCreateList />
              </SongList>
            </Evolution>

            <Evolution w={50} h={430}>
              <LyricsCowriteTextarea lyrics={''} setLyrics={() => {}} />
              <TextareaV2 placeholder='styles' value='' className='mt-1' />
              <TextareaV2
                placeholder='negative styles'
                value=''
                className='mt-1'
              />
              <Button
                variant={ButtonVariant.Aura}
                size={ButtonSize.Medium}
                className='mt-1 mb-4 w-full'
              >
                Remix
              </Button>

              <SongList>
                <SongRowDemo inCreateList />
                <SongRowDemo inCreateList />
                <SongRowDemo inCreateList />
                <SongRowDemo inCreateList />
                <SongRowDemo inCreateList />
              </SongList>
            </Evolution>
          </Pokemon>
        </div>
      )}
    </OuterContainer>
  );
};

const PokemonResizerWrapper = styled.div<{ w: number; h: number }>`
  width: ${({ w }) => w + 28}px;
  height: ${({ h }) => h + 28}px;
  border: 4px solid rgba(255, 255, 255, 0);
  border-radius: 16px;
  padding: 0;
  position: relative;
  transition:
    width 0.2s ease-in-out,
    height 0.2s ease-in-out;
`;

const PokemonResizerHandle = styled.div`
  position: absolute;
  bottom: 2px;
  right: 2px;
  border-right: 4px solid rgba(255, 255, 255, 0);
  border-bottom: 4px solid rgba(255, 255, 255, 0);
  border-bottom-right-radius: 10px;
  &:hover {
    border-right: 4px solid rgba(255, 255, 255, 0.5);
    border-bottom: 4px solid rgba(255, 255, 255, 0.5);
  }
  width: 20px;
  height: 20px;
  cursor: grab;
  &:active {
    cursor: grabbing;
  }
`;

const PokemonResizer = ({
  children,
  w,
  h,
  setW,
  setH,
}: {
  children: React.ReactNode;
  w: number;
  h: number;
  setW: (w: number) => void;
  setH: (h: number) => void;
}) => {
  const wrapperRef = useRef<HTMLDivElement>(null);
  const clickDragRef = useClickDrag(
    useCallback(() => {
      const wrapper = wrapperRef.current;
      if (wrapper) wrapper.style.transition = 'none';
      return {
        onMouseMove: ({ deltaXFromStart, deltaYFromStart }) => {
          setW(w + deltaXFromStart * 2);
          setH(h + deltaYFromStart * 2);
        },
        onMouseUp: () => {
          const wrapper = wrapperRef.current;
          if (wrapper) wrapper.style.transition = '';
        },
      };
    }, [w, h])
  );
  return (
    <PokemonResizerWrapper w={w} h={h} ref={wrapperRef}>
      {children}
      <PokemonResizerHandle ref={clickDragRef} />
    </PokemonResizerWrapper>
  );
};

export default function SongRowDemoClient() {
  const [w, setW] = useState(150);
  const [h, setH] = useState(20);
  return (
    <div className='flex h-full w-full items-center justify-center'>
      <PokemonResizer w={w} h={h} setW={setW} setH={setH}>
        <SongRowDemo />
      </PokemonResizer>
    </div>
  );
}