import styled from '@emotion/styled';
import { useEffect, useState } from 'react';
import { useLocalStorage } from 'usehooks-ts';

import CreditsCounter from '@/app/(root)/create/createV2/componentsQ3/CreditsCounter';
import useCredits from '@/app/(root)/create/v2/useCredits';
import { useContextSelector } from '@/hooks/useContextSelector';
import { ExtendLeftIcon, LearnIcon, SidebarLeftIcon } from '@/icons';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '../button/Button';
import { Tooltip } from '../tooltip/Tooltip';
import StudioContext from './StudioContext';
import StudioInvitesModal from './StudioInvitesModal';
import StudioLearnModal from './StudioLearnModal';
import StudioLogo from './StudioLogo';
import { useLogStudioWebUserEvent } from './useLogStudioWebUserEvent';
import { StudioLayoutManagerContext } from './useStudioLayoutManager';

const ToolbarWrapper = styled.div`
  height: 100%;
  transition: opacity 0.4s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 20px;
`;

const ToolbarSection = styled.div`
  display: flex;
  align-items: center;
  gap: 10px;
`;

export default function StudioToolbar({
  setLearnModalOpen: outerSetLearnModalOpen,
}: {
  setLearnModalOpen: (open: boolean) => void;
}) {
  const [invitesModalOpen, setInvitesModalOpen] = useState(false);
  const [hasSeenLearnModal, setHasSeenLearnModal] = useLocalStorage(
    'sept-23-2025-hasSeenLearnModal',
    false
  );
  const [learnModalOpen, setLearnModalOpen] = useState(!hasSeenLearnModal);
  useEffect(() => {
    if (learnModalOpen) {
      setHasSeenLearnModal(true);
      outerSetLearnModalOpen(true);
    } else {
      outerSetLearnModalOpen(false);
    }
  }, [learnModalOpen, setHasSeenLearnModal, outerSetLearnModalOpen]);

  const setPlaying = useContextSelector(
    StudioContext,
    (context) => context.playbackController.setPlaying
  );

  const { creditsRemaining } = useCredits();

  const showNav = useContextSelector(
    StudioLayoutManagerContext,
    (context) => context!.showNav
  );
  const setShowNav = useContextSelector(
    StudioLayoutManagerContext,
    (context) => context!.setShowNav
  );
  const layoutMode = useContextSelector(
    StudioLayoutManagerContext,
    (context) => context!.layoutMode
  );
  const cycleLayoutMode = useContextSelector(
    StudioLayoutManagerContext,
    (context) => context!.cycleLayoutMode
  );

  const logStudioWebUserEvent = useLogStudioWebUserEvent();

  return (
    <ToolbarWrapper>
      {learnModalOpen && (
        <StudioLearnModal onClose={() => setLearnModalOpen(false)} />
      )}
      {invitesModalOpen && (
        <StudioInvitesModal onClose={() => setInvitesModalOpen(false)} />
      )}
      <ToolbarSection>
        <Button
          variant={ButtonVariant.Tertiary}
          size={ButtonSize.Small}
          icon={
            showNav ? (
              <ExtendLeftIcon className='h-5 w-5' />
            ) : (
              <SidebarLeftIcon className='h-5 w-5' />
            )
          }
          onClick={() => setShowNav((prev) => !prev)}
        />
        <StudioLogo />
        <div className='flex h-4 items-center rounded-lg border border-foreground-secondary px-2 text-xs opacity-50'>
          Beta V1.1.0
        </div>
      </ToolbarSection>
      <ToolbarSection>
        <Button
          variant={ButtonVariant.Secondary}
          shape={ButtonShape.Pill}
          className='text-foreground-inactive hover:text-foreground-primary'
          size={ButtonSize.Small}
          icon={<LearnIcon className='h-5 w-5' />}
          onClick={() => {
            setPlaying(false);
            setLearnModalOpen(true);
            logStudioWebUserEvent({
              actionName: 'StudioLearnButtonClicked',
              context: {},
            });
          }}
        >
          Learn
        </Button>
        <Tooltip label='Toggle between horizontal and vertical layout'>
          <Button
            variant={
              layoutMode === 'horizontal'
                ? ButtonVariant.Secondary
                : ButtonVariant.Standard
            }
            size={ButtonSize.Small}
            shape={ButtonShape.Pill}
            icon={
              <div className='grid h-5 w-8 grid-cols-2 grid-rows-2 gap-[2px]'>
                <div className='h-full rounded-xs bg-background-glass-thick transition-all'></div>
                <div className='h-full rounded-xs bg-background-glass-thick transition-all'></div>
                <div className='grid-row-2 col-span-2 h-full rounded-xs bg-background-glass-thick transition-all'></div>
              </div>
            }
            onClick={cycleLayoutMode}
          >
            Layout
          </Button>
        </Tooltip>
        {creditsRemaining !== null && (
          <CreditsCounter creditsRemaining={creditsRemaining} />
        )}
      </ToolbarSection>
    </ToolbarWrapper>
  );
}