/* eslint jsx-a11y/no-static-element-interactions: warn */

/* eslint jsx-a11y/click-events-have-key-events: warn */
import styled from '@emotion/styled';
import { observer } from 'mobx-react-lite';
import { useCallback, useMemo, useState } from 'react';

import { PERSONA_SHAPE_IMAGE } from '@/app/(root)/persona/[slug]/constants';
import Button, { ButtonSize, ButtonVariant } from '@/components/button/Button';
import Link from '@/components/link/Link';
import { useContextSelector } from '@/hooks/useContextSelector';
import { CloseIcon, PauseIcon, PlayIcon } from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { FALLBACK_IMAGE_URL } from '@/utils/constants';
import { DEFAULT_AUDIO_WEIGHT_VALUE } from '@/utils/constants';

import CreateFormContext from '../../v2/CreateFormContext';
import { ConditionTypes, CreateModes } from '../../v2/types';
import useClipPlayer from './useClipPlayer';

const CardContainer = styled.div`
  background-color: var(--color-background-secondary);
  height: auto;
  width: auto;
  border-radius: 20px;
  padding: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: var(--color-background-tertiary);
  }
`;

const CardContent = styled.div`
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
`;

const PersonaInfo = styled.div`
  display: flex;
  align-items: center;
`;

const PersonaImageContainer = styled.div`
  position: relative;
  height: 48px;
  width: 48px;
  overflow: hidden;
`;

const PersonaName = styled(Link)`
  margin-left: 8px;
  line-clamp: 1;
  font-family: sans-serif;
  font-size: 18px;
  font-weight: bold;
  font-weight: 500;
  white-space: pre-wrap;

  &:hover {
    text-decoration: underline;
  }
`;

const CloseButton = styled(Button)`
  border-radius: 50%;
  padding: 4px;

  &:hover {
    background-color: var(--color-background-tertiary);
  }
`;

export const PersonaCard = observer(() => {
  const [showPlayIcon, setShowPlayIcon] = useState(false);

  const untimedConditions = useContextSelector(
    CreateFormContext,
    (context) => context.state.global.untimedConditions
  );

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

  const attemptOpenPersonaModal = useContextSelector(
    CreateFormContext,
    (context) => context.attemptOpenPersonaModal
  );

  // Only use the new system (CreateFormContext)
  const personaCondition = useMemo(() => {
    const newSystemPersona = untimedConditions[ConditionTypes.PERSONA]?.[0] as
      | {
          personaId: string;
          rootClipId?: string;
          startSeconds?: number;
          endSeconds?: number;
          personaName?: string;
          personaImageUrl?: string;
        }
      | undefined;

    return newSystemPersona;
  }, [untimedConditions]);

  const rootClipId = personaCondition?.rootClipId;

  const { play, isPlaying } = useClipPlayer(rootClipId);

  const handleClearPersonaCondition = useCallback(
    async (event: React.MouseEvent) => {
      event.stopPropagation();

      setState((prev) => {
        const currentPersonas =
          prev.global.untimedConditions[ConditionTypes.PERSONA] || [];
        const updatedPersonas = currentPersonas.filter(
          (persona) => persona.personaId !== personaCondition?.personaId
        );

        const { [ConditionTypes.PERSONA]: _, ...otherConditions } =
          prev.global.untimedConditions;

        return {
          ...prev,
          global: {
            ...prev.global,
            untimedConditions: {
              ...otherConditions,
              ...(updatedPersonas.length > 0 && {
                [ConditionTypes.PERSONA]: updatedPersonas,
              }),
            },
          },
          [CreateModes.CUSTOM]: {
            ...prev[CreateModes.CUSTOM],
            audioInfluence: DEFAULT_AUDIO_WEIGHT_VALUE,
          },
        };
      });
    },
    [setState, personaCondition?.personaId]
  );

  const handleCardClick = useCallback(() => {
    attemptOpenPersonaModal();
  }, [attemptOpenPersonaModal]);

  if (!personaCondition?.personaId) {
    return null;
  }

  return (
    <CardContainer onClick={handleCardClick}>
      <CardContent>
        <PersonaInfo>
          <PersonaImageContainer
            onMouseEnter={() => setShowPlayIcon(true)}
            onMouseLeave={() => setShowPlayIcon(false)}
          >
            <svg
              width='100%'
              height='100%'
              viewBox='0 0 380 380'
              fill='none'
              xmlns='http://www.w3.org/2000/svg'
              style={{ position: 'absolute', inset: 0 }}
            >
              <defs>
                <clipPath id='persona-clip'>
                  <path d='M370 190C370 213.145 342.654 230.677 334.305 250.784C325.956 270.891 332.258 303.253 316.539 319.039C300.82 334.825 269.205 328.253 248.361 336.894C227.517 345.535 210.711 372.5 187.5 372.5C164.289 372.5 146.744 345.227 126.639 336.894C106.534 328.561 74.1486 334.825 58.4609 319.039C42.7732 303.253 49.0439 270.891 40.6945 250.784C32.3452 230.677 5 213.145 5 190C5 166.855 32.3452 149.323 40.6945 129.216C49.0439 109.109 42.7732 76.7467 58.4609 60.9609C74.1486 45.1751 106.764 51.7467 126.639 43.1056C145.744 34.7731 164.289 7.5 187.5 7.5C210.711 7.5 227.517 34.4645 248.361 43.1056C269.205 51.7467 300.82 45.1751 316.539 60.9609C332.258 76.7467 325.956 109.109 334.305 129.216C342.654 149.323 370 166.855 370 190Z' />
                </clipPath>
              </defs>
              <image
                href={personaCondition.personaImageUrl || FALLBACK_IMAGE_URL}
                width='380'
                height='380'
                clipPath='url(#persona-clip)'
              />
            </svg>
            <div
              className='absolute inset-0 flex items-center justify-center bg-background-primary/50 transition-opacity duration-300'
              style={{
                opacity: showPlayIcon ? 1 : 0,
                mask: `url(${PERSONA_SHAPE_IMAGE})`,
                WebkitMask: `url(${PERSONA_SHAPE_IMAGE})`,
                maskSize: 'contain',
                WebkitMaskSize: 'contain',
                maskRepeat: 'no-repeat',
                WebkitMaskRepeat: 'no-repeat',
                maskPosition: 'center',
                WebkitMaskPosition: 'center',
              }}
              onClick={(e) => {
                e.stopPropagation();
                if (rootClipId) {
                  play();
                  logWebUserEvent({
                    actionName: 'PersonaPlayButtonClicked',
                    context: {
                      personaId: personaCondition.personaId,
                    },
                  });
                }
              }}
            >
              {isPlaying ? (
                <PauseIcon className='h-5 w-5 fill-white' />
              ) : (
                <PlayIcon className='h-5 w-5 fill-white' />
              )}
            </div>
          </PersonaImageContainer>
          <PersonaName
            href={`/persona/${personaCondition.personaId}`}
            onClick={(e) => e.stopPropagation()}
          >
            {personaCondition.personaName || 'Untitled Persona'}
          </PersonaName>
        </PersonaInfo>
        <CloseButton
          variant={ButtonVariant.Tertiary}
          size={ButtonSize.Mini}
          iconClassName='w-4 h-4'
          aria-label='Remove selected persona'
          onClick={handleClearPersonaCondition}
          icon={CloseIcon}
        />
      </CardContent>
    </CardContainer>
  );
});