'use client';

import styled from '@emotion/styled';
import { observer } from 'mobx-react-lite';
import { redirect } from 'next/navigation';

import { useStores } from '@/app/(root)/AppProviders';
import {
  FocusedObjectContext,
  useFocusedObject,
} from '@/app/(root)/create/v2/useFocusedObject';
import LibraryClipBrowser from '@/components/clipBrowser/LibraryClipBrowser';
import FocusedObjectPanel from '@/components/focusedObjectPanel/FocusedObjectPanel';
import LibraryHeader from '@/components/library/LibraryHeader';
import LibraryTabs from '@/components/library/LibraryTabs';
import {
  HorizontalPanelGroup,
  Panel,
} from '@/components/panelSystem/PanelSystem';
import makePanelSize from '@/components/studio/makePanelSize';
import useBreakpoint from '@/hooks/useBreakpoint';
import usePageViewLog from '@/hooks/usePageViewLog';
import { useQueueFocusSync } from '@/hooks/useQueueFocusSync';
import { LibraryTab } from '@/logging/eventTypes/PageViewedEventType';

import LibraryV2History from './LibraryV2History';
import LibraryV2Hooks from './LibraryV2Hooks';
import LibraryV2LikedHooks from './LibraryV2LikedHooks';
import LibraryV2Personas from './LibraryV2Personas';
import LibraryV2Playlists from './LibraryV2Playlists';
import LibraryV2StudioProjects from './LibraryV2StudioProjects';
import LibraryV2Workspaces from './LibraryV2Workspaces';

const Wrapper = styled.div`
  width: 100%;
  height: 100%;
`;

export interface TabConfig {
  key: string;
  label: string;
  href: string;
  Component: React.ComponentType;
}

const tabs: TabConfig[] = [
  {
    key: 'songs',
    label: 'Songs',
    href: '/me/v2',
    Component: LibraryClipBrowser,
  },
  {
    key: 'playlists',
    label: 'Playlists',
    href: '/me/v2/playlists',
    Component: LibraryV2Playlists,
  },
  {
    key: 'workspaces',
    label: 'Workspaces',
    href: '/me/v2/workspaces',
    Component: LibraryV2Workspaces,
  },
  {
    key: 'studio-projects',
    label: 'Studio Projects',
    href: '/me/v2/studio-projects',
    Component: LibraryV2StudioProjects,
  },
  {
    key: 'personas',
    label: 'Personas',
    href: '/me/v2/personas',
    Component: LibraryV2Personas,
  },
  {
    key: 'hooks',
    label: 'Hooks',
    href: '/me/v2/hooks',
    Component: LibraryV2Hooks,
  },
  {
    key: 'liked-hooks',
    label: 'Liked Hooks',
    href: '/me/v2/liked-hooks',
    Component: LibraryV2LikedHooks,
  },
  {
    key: 'history',
    label: 'History',
    href: '/me/v2/history',
    Component: LibraryV2History,
  },
];

const LibraryV2Client = observer(
  ({ initialTabKey = 'songs' }: { initialTabKey?: LibraryTab }) => {
    const { session } = useStores();

    const flagState =
      session.flags && Boolean(session.flags['library-v2-page']);

    if (flagState === false) {
      redirect('/me');
    } else if (flagState !== true) {
      return null;
    }

    const userId = session.user?.id;

    if (!userId) {
      return null;
    }

    return <LibraryV2Page initialTabKey={initialTabKey} />;
  }
);

const LibraryV2Page = observer(
  ({ initialTabKey }: { initialTabKey: LibraryTab }) => {
    usePageViewLog({
      actionName: 'PageViewed',
      componentContext: 'library',
      context: { tab: initialTabKey },
    });

    const focusedObjectContext = useFocusedObject();
    const isWideEnoughForPanel = useBreakpoint(1000);

    const activeTab = tabs.find((tab) => tab.key === initialTabKey) || tabs[0];

    // Sync playbar queue state with focused object
    useQueueFocusSync(focusedObjectContext);

    return (
      <FocusedObjectContext.Provider value={focusedObjectContext}>
        <Wrapper>
          <HorizontalPanelGroup>
            <Panel size={makePanelSize(1, 'fr')}>
              <div className='flex h-full flex-col overflow-y-hidden'>
                <LibraryHeader />
                <LibraryTabs tabs={tabs} activeTab={activeTab} />
                <div className='flex flex-1 flex-col overflow-y-scroll'>
                  <activeTab.Component />
                </div>
              </div>
            </Panel>
            <Panel
              size={
                focusedObjectContext.focusedObject && isWideEnoughForPanel
                  ? makePanelSize(316, 'px')
                  : makePanelSize(0, 'px')
              }
            >
              <div className='h-full pt-4 pr-4 pb-0'>
                <FocusedObjectPanel />
              </div>
            </Panel>
          </HorizontalPanelGroup>
        </Wrapper>
      </FocusedObjectContext.Provider>
    );
  }
);

export default LibraryV2Client;