'use client';

/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { observer } from 'mobx-react-lite';
import { useEffect, useState } from 'react';
import { useInView } from 'react-intersection-observer';

import { useStores } from '@/app/(root)/AppProviders';
import PersonaCard from '@/components/card/PersonaCard';
import CreatePersonaModal from '@/components/modal/CreatePersonaModal';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import logWebUserEvent from '@/logging/logWebUserEvent';

import PersonaShape from '../../persona/[slug]/PersonaShape';

interface CreatePersonaButtonProps {
  onClick: () => void;
}

const CreatePersonaButton: React.FC<CreatePersonaButtonProps> = ({
  onClick,
}) => (
  <div
    onClick={onClick}
    className='group relative flex h-full w-60 cursor-pointer flex-col gap-4 rounded-lg p-2 transition ease-in-out'
  >
    <div className='relative aspect-square h-auto w-full transition duration-300 ease-in-out group-hover:-translate-y-2'>
      <div className='relative mx-auto w-full overflow-hidden bg-inherit pb-[100%]'>
        <PersonaShape className='absolute inset-0 h-full w-full text-foreground-primary' />
        <div className='absolute inset-0 z-10 flex flex-col items-center justify-center'>
          <span className='text-4xl text-foreground-primary'>+</span>
          <h2 className='text-md mt-2 px-2 text-center font-sans font-medium text-foreground-primary'>
            Create a Persona
          </h2>
        </div>
      </div>
    </div>
  </div>
);

const LibraryV2Personas: React.FC = observer(() => {
  const { persona, session } = useStores();
  const [isLoading, setIsLoading] = useState(true);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  const [activeTab, setActiveTab] = useState<'my' | 'following'>('my');
  const [isFollowedPersonasLoaded, setIsFollowedPersonasLoaded] =
    useState(false);

  const { ref: spinnerRef } = useInView({
    threshold: 0,
    onChange: async (inView: boolean) => {
      if (inView) {
        await persona.getPersonasByUser(
          persona.currentPageUserPersonas + 1,
          persona.currentPageUserPersonasContinuationToken
        );
      }
    },
  });

  const { ref: followedSpinnerRef } = useInView({
    threshold: 0,
    onChange: async (inView: boolean) => {
      if (inView && session.flags?.['personas-follow']) {
        await persona.getFollowedPersonas(
          persona.currentPageFollowedPersonas + 1
        );
      }
    },
  });

  useEffect(() => {
    const loadInitialPersonas = async () => {
      setIsLoading(true);
      try {
        await persona.getPersonasByUser();
      } catch (error) {
        console.error('Error loading personas:', error);
      } finally {
        setIsLoading(false);
      }
    };
    loadInitialPersonas();
  }, [persona]);

  useEffect(() => {
    const loadFollowedPersonas = async () => {
      if (
        activeTab === 'following' &&
        !isFollowedPersonasLoaded &&
        session.flags?.['personas-follow']
      ) {
        try {
          await persona.getFollowedPersonas();
          setIsFollowedPersonasLoaded(true);
        } catch (error) {
          console.error('Error loading followed personas:', error);
        }
      }
    };
    loadFollowedPersonas();
  }, [activeTab, isFollowedPersonasLoaded, persona, session]);

  const openCreatePersonaModal = () => {
    setIsCreateModalOpen(true);
    logWebUserEvent({
      actionName: 'CreatePersonaFromLibrary',
      context: {
        totalPersonas: persona.totalUserPersonas,
      },
    });
  };

  const closeCreatePersonaModal = () => {
    setIsCreateModalOpen(false);
  };

  if (isLoading) {
    return (
      <div className='flex h-full items-center justify-center'>
        <SpinnerSVG />
      </div>
    );
  }

  return (
    <>
      <div className='flex w-full flex-col gap-8'>
        <div className='flex border-b border-quaternary px-4'>
          <div className='flex w-full justify-between'>
            <button
              onClick={() => setActiveTab('my')}
              className={`relative flex-1 px-6 py-3 text-center text-lg font-medium ${
                activeTab === 'my'
                  ? 'text-foreground-primary'
                  : 'text-foreground-secondary hover:text-foreground-primary'
              }`}
            >
              My Personas
              <div
                className={`absolute right-0 bottom-0 left-0 h-0.5 transition-opacity ${
                  activeTab === 'my'
                    ? 'bg-foreground-primary opacity-100'
                    : 'bg-foreground-primary opacity-0 hover:opacity-50'
                }`}
              />
            </button>

            {session.flags?.['personas-follow'] && (
              <button
                onClick={() => setActiveTab('following')}
                className={`relative flex-1 px-6 py-3 text-center text-lg font-medium ${
                  activeTab === 'following'
                    ? 'text-foreground-primary'
                    : 'text-foreground-secondary hover:text-foreground-primary'
                }`}
              >
                Following
                <div
                  className={`absolute right-0 bottom-0 left-0 h-0.5 transition-opacity ${
                    activeTab === 'following'
                      ? 'bg-foreground-primary opacity-100'
                      : 'bg-foreground-primary opacity-0 hover:opacity-50'
                  }`}
                />
              </button>
            )}
          </div>
        </div>

        {activeTab === 'my' && (
          <div>
            <div className='mx-0 grid w-full max-w-full grid-cols-2 gap-2 px-4 py-0 md:mx-auto md:gap-6 md:py-4 lg:grid-cols-[repeat(auto-fill,minmax(200px,1fr))] lg:pr-10 lg:pl-2'>
              <CreatePersonaButton onClick={openCreatePersonaModal} />
              {persona.personas?.map((personaItem: any) => (
                <PersonaCard
                  name={personaItem.name}
                  key={personaItem.id}
                  id={personaItem.id}
                  image_url={personaItem.image_s3_id}
                  user_image_url={personaItem.user_image_url}
                  user_display_name={personaItem.user_display_name}
                  user_handle={personaItem.user_handle}
                  root_clip_id={personaItem.root_clip_id}
                />
              ))}
            </div>
            {persona.personas?.length < (persona.totalUserPersonas || 0) && (
              <div
                className='flex h-auto w-full items-center justify-center'
                ref={spinnerRef}
              >
                <SpinnerSVG />
              </div>
            )}
            {persona.personas?.length === 0 && (
              <div className='mt-20 flex w-full flex-col items-center justify-center gap-8'>
                <div className='text-md flex w-[80%] justify-center font-sans text-foreground-secondary'>
                  {
                    'You have no Personas in your library. Create some to see them here.'
                  }
                </div>
              </div>
            )}
          </div>
        )}

        {activeTab === 'following' && session.flags?.['personas-follow'] && (
          <div>
            <div className='mx-0 grid w-full max-w-full grid-cols-2 gap-2 px-4 py-0 md:mx-auto md:gap-6 md:py-4 lg:grid-cols-[repeat(auto-fill,minmax(200px,1fr))] lg:pr-10 lg:pl-2'>
              {persona.followedPersonas?.map((personaItem: any) => (
                <PersonaCard
                  name={personaItem.name}
                  key={personaItem.id}
                  id={personaItem.id}
                  image_url={personaItem.image_s3_id}
                  user_image_url={personaItem.user_image_url}
                  user_display_name={personaItem.user_display_name}
                  user_handle={personaItem.user_handle}
                  root_clip_id={personaItem.root_clip_id}
                />
              ))}
            </div>
            {persona.followedPersonas?.length <
              (persona.totalFollowedPersonas || 0) && (
              <div
                className='flex h-auto w-full items-center justify-center'
                ref={followedSpinnerRef}
              >
                <SpinnerSVG />
              </div>
            )}
            {(!persona.followedPersonas ||
              persona.followedPersonas.length === 0) && (
              <div className='mt-4 flex w-full flex-col items-center justify-center gap-8'>
                <div className='text-md flex w-[80%] justify-center font-sans text-foreground-secondary'>
                  You are not following any Personas yet.
                </div>
              </div>
            )}
          </div>
        )}

        {isCreateModalOpen && (
          <CreatePersonaModal
            isOpen={isCreateModalOpen}
            onClose={closeCreatePersonaModal}
          />
        )}
      </div>
    </>
  );
});

export default LibraryV2Personas;