import styled from '@emotion/styled';
import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
import { usePathname, useSearchParams } from 'next/navigation';
import { Dispatch, useCallback, useEffect, useRef, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { useChatContext } from '@/app/(root)/chat/useChat';
import { useWorkspaces } from '@/app/(root)/chat/useWorkspaces';
import ProjectCollaborateClient from '@/app/(root)/create/ProjectCollaborateClient';
import { WorkspacePresenceIndicator } from '@/app/(root)/create/WorkspacePresenceIndicator';
import IconInput from '@/app/(root)/create/createV2/componentsQ3/IconInput';
import CreateFormContext from '@/app/(root)/create/v2/CreateFormContext';
import { CreateModes } from '@/app/(root)/create/v2/types';
import ClipBrowserList from '@/components/clipBrowser/ClipBrowserList';
import WorkspaceHeader from '@/components/clipBrowser/WorkspaceHeader';
import { useContextSelector } from '@/hooks/useContextSelector';
import useDebounceCallback from '@/hooks/useDebounceCallback';
import useDeviceAttributes from '@/hooks/useDeviceAttributes';
import useDisclosure from '@/hooks/useDisclosure';
import usePlaybar from '@/hooks/usePlaybar';
import { useSearchInput } from '@/hooks/useSearchInput';
import {
  CaretLeftIcon,
  CaretRightIcon,
  CoverCreateIcon,
  ExtendRightIcon,
  FilterIcon,
  FourStarIcon,
  GlobeIcon,
  PersonaCreateIcon,
  SearchIcon,
  SortIcon,
  StemsIcon,
  ThumbsDownIcon,
  ThumbsUpIcon,
  TrashIcon,
  TriangleDownIcon,
  UploadIcon,
  VinylIcon,
} from '@/icons';
import {
  Project,
  ProjectInviteSchema,
  ProjectMetadataSchema,
} from '@/state/projectStore';
import { DEFAULT_PROJECT_ID } from '@/utils/constants';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '../button/Button';
import {
  ContextMenuItem,
  ContextMenuTrigger,
} from '../contextMenu/ContextMenu';
import CreateProjectModal from '../modal/CreateProjectModal';
import ShareProjectModal from '../modal/ShareProjectModal';
import { FilterMenuItem } from './FilterElements';
import { SearchInput, SearchInputWrapper } from './FilterElements';
import InviteListView from './InviteListView';
import { JustCreatedClipRow } from './JustCreatedClipRow';
import { VirtualizedWorkspaceClipRow } from './WorkspaceClipRow';
import WorkspaceFilters from './WorkspaceFilters';
import { WorkspaceList } from './WorkspaceList';
import WorkspacePinnedClips from './WorkspacePinnedClips';
import {
  setCoverOnly,
  setExtendOnly,
  setFullSongOnly,
  setHideClipsFromEditMode,
  setHideDisliked,
  setHideStems,
  setLikedOnly,
  setPersonaOnly,
  setPublicOnly,
  setRemasterOnly,
  setSearchText,
  setSort,
  setUploadOnly,
} from './filterActions';
import { BooleanFilter, sortOptions } from './types';
import { ClipBrowserContext } from './useClipBrowser';

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--color-foreground-primary);
`;

const ListWrapper = styled.div`
  display: contents;
  > * {
    padding: 0 16px;
  }
`;

const WorkspaceListWrapper = styled.div<{ padBottom?: boolean }>`
  overflow-y: auto;
  padding-top: 16px;
  padding-bottom: 16px;
  flex-direction: column;
  > * {
    padding: 0 16px;
  }
  padding-bottom: ${(props) => (props.padBottom ? '106px' : '16px')};
`;

const WorkspaceListHeader = ({
  onCreateNewWorkspace: _onCreateNewWorkspace,
  onClickInvites: _onClickInvites,
  onClose: _onClose,
  numTotalProjects: _numTotalProjects,
  numTotalInvites: _numTotalInvites,
  showInvites: _showInvites = true,
  compact: _compact,
  title: _title,
  buttonText: _buttonText,
  isSearching: _isSearching,
  showTrashed: _showTrashed,
  setShowTrashed: _setShowTrashed,
}: {
  onCreateNewWorkspace?: () => void;
  onClose?: () => void;
  onClickInvites: () => void;
  numTotalProjects?: number | null;
  numTotalInvites?: number | null;
  showInvites?: boolean;
  showNewWorkspaceButton?: boolean;
  compact?: boolean;
  title?: string;
  buttonText?: string;
  isSearching?: boolean;
  showTrashed?: boolean;
  setShowTrashed?: Dispatch<React.SetStateAction<boolean>>;
}) => {
  return null;
};

export const WorkspaceListFilters = ({
  searchText,
  setSearchText,
  showTrashed,
  setShowTrashed,
}: {
  searchText: string;
  setSearchText: Dispatch<React.SetStateAction<string>>;
  showTrashed?: boolean;
  setShowTrashed?: Dispatch<React.SetStateAction<boolean>>;
}) => {
  const { localSearchText, setLocalSearchText, searchInputProps } =
    useSearchInput(searchText);

  const debouncedSetSearchText = useDebounceCallback((value: string) => {
    setSearchText(value);
  }, 150);

  return (
    <div className='flex flex-row items-center gap-2 px-4 pt-4'>
      <SearchInputWrapper>
        <SearchIcon className='h-4 w-4' />
        <SearchInput
          {...searchInputProps}
          placeholder='Search'
          value={localSearchText}
          onChange={(e) => {
            setLocalSearchText(e.target.value);
            debouncedSetSearchText(e.target.value);
          }}
          aria-label='Search workspaces'
        />
      </SearchInputWrapper>
      {setShowTrashed && (
        <Button
          shape={ButtonShape.Pill}
          size={ButtonSize.Small}
          variant={
            showTrashed ? ButtonVariant.Primary : ButtonVariant.Secondary
          }
          onClick={() => setShowTrashed((prev) => !prev)}
          aria-label={showTrashed ? 'View Workspaces' : 'View Archived'}
          title={showTrashed ? 'View Workspaces' : 'View Archived'}
          iconStart={TrashIcon}
        >
          <span className='text-xs'>Archived</span>
        </Button>
      )}
    </div>
  );
};

export enum HeaderStyles {
  Default = 'default',
  Compact = 'compact',
}

export const WorkspaceListView = ({
  projects,
  projectsQuery,
  numTotalProjects,
  projectsSearchText,
  setProjectsSearchText,
  onOpenCreateProjectModal,
  onClose,
  onSelectStudioSessions,
  onSelectProject,
  onLoadNextPage,
  compact,
  onInvitesClick,
  numTotalInvites,
  showInvites,
  headerStyle = HeaderStyles.Default,
  headerTitle,
  headerButtonText,
  hideDefaultWorkspace = false,
  showTrashed = false,
  showNewWorkspaceButton = true,
  setShowTrashed,
  archiveWorkspace,
  unarchiveWorkspace,
}: {
  projects: ProjectMetadataSchema[];
  projectsQuery: UseInfiniteQueryResult<
    InfiniteData<{
      workspaces: ProjectMetadataSchema[];
      numTotalResults: number;
      pageNumber: number;
    }>
  >;
  numTotalProjects?: number | null;
  projectsSearchText: string;
  setProjectsSearchText: Dispatch<React.SetStateAction<string>>;
  onOpenCreateProjectModal?: () => void;
  onClose?: () => void;
  onSelectStudioSessions?: () => void;
  onSelectProject: (project: ProjectMetadataSchema) => void;
  onLoadNextPage?: () => void;
  compact?: boolean;
  onInvitesClick: () => void;
  numTotalInvites: number;
  showInvites?: boolean;
  headerStyle?: HeaderStyles;
  headerTitle?: string;
  headerButtonText?: string;
  hideDefaultWorkspace?: boolean;
  showTrashed?: boolean;
  showNewWorkspaceButton?: boolean;
  setShowTrashed?: Dispatch<React.SetStateAction<boolean>>;
  archiveWorkspace: (workspaceId: string) => void;
  unarchiveWorkspace: (workspaceId: string) => void;
}) => {
  const playbar = usePlaybar();
  const [isCreatingNewWorkspace, setIsCreatingNewWorkspace] = useState(false);
  const workspaceListWrapperRef = useRef<HTMLDivElement>(null);
  const mode = useContextSelector(
    CreateFormContext,
    (ctx) => ctx.state.global.mode
  );
  const { createChatSession } = useChatContext();
  const handleCreateNewWorkspace = useCallback(async () => {
    if (mode === CreateModes.CHAT) {
      await createChatSession();
    } else {
      setIsCreatingNewWorkspace(true);
      workspaceListWrapperRef.current?.scrollTo({ top: 0 });
    }
  }, [mode, createChatSession, setIsCreatingNewWorkspace]);
  return (
    <>
      <WorkspaceListHeader
        onCreateNewWorkspace={handleCreateNewWorkspace}
        onClose={onClose}
        onClickInvites={onInvitesClick}
        numTotalProjects={numTotalProjects}
        numTotalInvites={numTotalInvites}
        showInvites={showInvites}
        compact={headerStyle === HeaderStyles.Compact}
        title={headerTitle}
        buttonText={headerButtonText}
        showNewWorkspaceButton={showNewWorkspaceButton}
        isSearching={projectsQuery.isFetching}
        showTrashed={showTrashed}
        setShowTrashed={setShowTrashed}
      />
      <WorkspaceListFilters
        setSearchText={setProjectsSearchText}
        searchText={projectsSearchText}
        showTrashed={showTrashed}
        setShowTrashed={setShowTrashed}
      />
      <WorkspaceListWrapper
        padBottom={playbar.isPlaying}
        ref={workspaceListWrapperRef}
      >
        <WorkspaceList
          isSearching={projectsQuery.isFetching}
          isCreatingNewWorkspace={isCreatingNewWorkspace}
          setIsCreatingNewWorkspace={setIsCreatingNewWorkspace}
          projects={projects.filter(
            (project) => !hideDefaultWorkspace || project.id !== 'default'
          )}
          numTotalProjects={numTotalProjects ?? 0}
          onSelectStudioSessions={onSelectStudioSessions}
          onSelectProject={onSelectProject}
          onLoadNextPage={onLoadNextPage}
          onCreateNewWorkspace={handleCreateNewWorkspace}
          onOpenCreateProjectModal={onOpenCreateProjectModal}
          compact={compact}
          isTrashed={showTrashed}
          archiveWorkspace={archiveWorkspace}
          unarchiveWorkspace={unarchiveWorkspace}
          createNewWorkspaceButtonText={headerButtonText}
        />
      </WorkspaceListWrapper>
    </>
  );
};

const MobileControlsHeader = styled.div<{ isVisible: boolean }>`
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  overflow: hidden;
  max-height: ${({ isVisible }) => (isVisible ? '200px' : '0')};
  opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};
  transition: all 0.3s ease-in-out;
`;

const MobileControlButton = styled.button`
  background-color: var(--color-background-secondary);
  border: none;
  border-radius: 24px;
  padding: 12px 16px;
  color: var(--color-foreground-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s ease;

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

  &:active {
    background-color: var(--color-background-fog-thin);
  }
`;

const CurrentPageButton = styled.input<{ isMobile?: boolean }>`
  background-color: ${({ isMobile }) =>
    isMobile
      ? 'var(--color-background-primary)'
      : 'var(--color-background-secondary)'};
  border: 1px solid var(--color-border-primary);
  border-radius: 16px;
  padding: ${({ isMobile }) => (isMobile ? '6px 0px' : '8px 12px')};
  width: ${({ isMobile }) => (isMobile ? '45px' : 'auto')};
  color: var(--color-foreground-primary);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;

  &:focus {
    border-color: var(--color-accent-brand);
  }
`;

const PaginationControls = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
`;

const PaginationButton = styled.button<{ isMobile?: boolean }>`
  background: ${({ isMobile }) =>
    isMobile ? 'var(--color-background-secondary)' : 'none'};
  border: none;
  color: var(--color-foreground-primary);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;

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

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--color-foreground-tertiary);
  }
`;

export default function WorkspaceClipBrowser({
  forceShowWorkspaceList = false,
}: {
  forceShowWorkspaceList?: boolean;
}) {
  const { isMobile } = useDeviceAttributes();
  const [showWorkspaceList, setShowWorkspaceList] = useState(
    forceShowWorkspaceList
  );

  // Mobile filter visibility state
  const [isFiltersVisible, setIsFiltersVisible] = useState(true);
  const lastScrollYRef = useRef(0);
  const scrollContainerRef = useRef<HTMLDivElement>(null);

  // Refs for onboarding tooltips
  const clip1OnboardingRef = useRef<HTMLDivElement>(null);
  const likeOnboardingRef = useRef<HTMLDivElement>(null);
  const shareOnboardingRef = useRef<HTMLDivElement>(null);
  const [showInviteList, setShowInviteList] = useState(false);
  const [invites, setInvites] = useState<ProjectInviteSchema[]>([]);
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const { createChatSession, triggerWorkspaceRefetch } = useChatContext();

  const mode = useContextSelector(
    CreateFormContext,
    (ctx) => ctx.state.global.mode
  );

  // Filter context for mobile controls
  const searchText = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters.searchText
  );
  const setFilters = useContextSelector(
    ClipBrowserContext,
    (context) => context.setFilters
  );

  const currentPageNumber = useContextSelector(
    ClipBrowserContext,
    (context) => context.currentPageNumber
  );
  const setPageNumber = useContextSelector(
    ClipBrowserContext,
    (context) => context.setPageNumber
  );

  const likedOnly = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters.liked === BooleanFilter.True
  );
  const publicOnly = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters.public === BooleanFilter.True
  );
  const uploadOnly = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters.upload === BooleanFilter.True
  );
  const hideDisliked = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters.disliked === BooleanFilter.False
  );
  const hideStems = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters.stem.presence === BooleanFilter.False
  );
  const hideClipsFromEditMode = useContextSelector(
    ClipBrowserContext,
    (context) =>
      context.filters.fromStudioProject.presence === BooleanFilter.False
  );
  const personaOnly = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters.persona.presence === BooleanFilter.True
  );
  const coverOnly = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters.cover.presence === BooleanFilter.True
  );
  const extendOnly = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters.extend.presence === BooleanFilter.True
  );
  const fullSongOnly = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters.fullSong === BooleanFilter.True
  );
  const remasterOnly = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters.remaster.presence === BooleanFilter.True
  );

  const [localSearchText, setLocalSearchText] = useState(searchText);
  const [showSearchInput, setShowSearchInput] = useState(false);
  const [localPageNumber, setLocalPageNumber] = useState(
    (currentPageNumber || 1).toString()
  );

  // Update local page number when currentPageNumber changes
  useEffect(() => {
    setLocalPageNumber((currentPageNumber || 1).toString());
  }, [currentPageNumber]);

  const workspacePinnedClips = useContextSelector(
    ClipBrowserContext,
    (context) => context.workspacePinnedClips
  );
  const refreshCollaborativeWorkspace = useContextSelector(
    ClipBrowserContext,
    (context) => context.refreshCollaborativeWorkspace
  );
  const queryError = useContextSelector(
    ClipBrowserContext,
    (context) => context.error
  );
  const {
    isOpen: isCreateProjectModalOpen,
    onOpen: onOpenCreateProjectModal,
    onClose: onCloseCreateProjectModal,
  } = useDisclosure();
  const {
    isOpen: isShareProjectModalOpen,
    onOpen: _onOpenShareProjectModal,
    onClose: onCloseShareProjectModal,
  } = useDisclosure();
  const { project: projectStore, session } = useStores();

  // Handle query errors by redirecting to workspace list
  useEffect(() => {
    if (queryError && !showWorkspaceList && !showInviteList) {
      console.error(
        'Error fetching clips, redirecting to workspace list:',
        queryError
      );
      setShowWorkspaceList(true);
      setShowInviteList(false);
    }
  }, [queryError, showWorkspaceList, showInviteList]);

  // Initialize project ID when component mounts
  useEffect(() => {
    const initializeProject = async () => {
      // Get initial URL params
      const urlProjectId = searchParams.get('wid');

      if (urlProjectId && !projectStore.userSelectedProjectId) {
        // URL project ID takes precedence
        projectStore.setUserSelectedProjectId(urlProjectId, null);
      } else if (!projectStore.userSelectedProjectId) {
        // Fall back to last selected from localStorage
        await projectStore.lazyLoadLastSelectedProjectId();
      }
    };

    initializeProject();
  }, [
    searchParams,
    projectStore.setUserSelectedProjectId,
    projectStore.lazyLoadLastSelectedProjectId,
  ]);

  const loadInvites = useCallback(async () => {
    if (session.flags?.['collab-workspaces']) {
      await projectStore.loadInviteProjects();
      setInvites(projectStore.invites);
    }
  }, [session.flags, projectStore]);

  // Load invites when component mounts
  useEffect(() => {
    loadInvites();
  }, [loadInvites]);

  const onBackClick = useCallback(() => {
    setShowWorkspaceList(true);
    setShowInviteList(false);
  }, []);

  const onInvitesClick = useCallback(() => {
    loadInvites();
    setShowInviteList(true);
    setShowWorkspaceList(false);
  }, []);

  const handleAcceptInvite = useCallback(
    async (inviteId: string) => {
      await projectStore.respondToInvite(inviteId, 'accept');
      await projectStore.loadInviteProjects();
      setInvites(projectStore.invites);
    },
    [projectStore]
  );

  const handleRejectInvite = useCallback(
    async (inviteId: string) => {
      await projectStore.respondToInvite(inviteId, 'reject');
      await projectStore.loadInviteProjects();
      setInvites(projectStore.invites);
    },
    [projectStore]
  );

  const handleSelectProject = useCallback(
    (project: ProjectMetadataSchema) => {
      setFilters((prev) => ({
        ...prev,
        workspace: {
          workspaceId: project.id,
          presence: prev.workspace.presence as any,
        },
      }));
      projectStore.setUserSelectedProjectId(project.id, project.name);
      const useCreateV2 = pathname.includes('/create/v2');
      window.history.pushState(
        null,
        '',
        `/create${useCreateV2 ? '/v2' : ''}?wid=${project.id}`
      );
      if (!forceShowWorkspaceList) {
        setShowWorkspaceList(false);
      }
      setShowInviteList(false);
      if (project.id === projectStore.currentProjectId) {
        triggerWorkspaceRefetch();
      }
    },
    [setShowWorkspaceList, forceShowWorkspaceList, setFilters, pathname]
  );

  const {
    query: workspacesQuery,
    workspaces,
    searchText: projectsSearchText,
    setSearchText: setProjectsSearchText,
    numTotalWorkspaces,
    showTrashed,
    setShowTrashed,
    archiveWorkspace,
    unarchiveWorkspace,
  } = useWorkspaces();

  // Track scroll direction to show/hide filters on mobile
  useEffect(() => {
    if (!isMobile) return;

    const handleScroll = () => {
      if (!scrollContainerRef.current) return;

      const currentScrollY = scrollContainerRef.current.scrollTop;
      const scrollThreshold = 50;

      if (Math.abs(currentScrollY - lastScrollYRef.current) < scrollThreshold) {
        return;
      }

      if (currentScrollY > lastScrollYRef.current && currentScrollY > 100) {
        // Scrolling down & past threshold - hide filters
        setIsFiltersVisible(false);
      } else if (currentScrollY < lastScrollYRef.current) {
        // Scrolling up - show filters
        setIsFiltersVisible(true);
      }

      lastScrollYRef.current = currentScrollY;
    };

    const ref = scrollContainerRef.current;
    if (ref) {
      ref.addEventListener('scroll', handleScroll, { passive: true });
    }

    return () => {
      if (ref) {
        ref.removeEventListener('scroll', handleScroll);
      }
    };
  }, [isMobile]);

  return (
    <>
      <Wrapper>
        {showWorkspaceList ? (
          <WorkspaceListView
            onOpenCreateProjectModal={
              mode === CreateModes.CHAT
                ? async () => {
                    await createChatSession();
                  }
                : onOpenCreateProjectModal
            }
            onSelectProject={handleSelectProject}
            onLoadNextPage={workspacesQuery.fetchNextPage}
            projects={workspaces}
            projectsQuery={workspacesQuery}
            projectsSearchText={projectsSearchText}
            setProjectsSearchText={setProjectsSearchText}
            onInvitesClick={onInvitesClick}
            numTotalInvites={invites.length}
            numTotalProjects={numTotalWorkspaces}
            showNewWorkspaceButton={mode !== CreateModes.CHAT}
            headerButtonText={
              mode !== CreateModes.CHAT ? undefined : 'New Chat'
            }
            hideDefaultWorkspace={mode === CreateModes.CHAT}
            showTrashed={showTrashed}
            setShowTrashed={setShowTrashed}
            archiveWorkspace={archiveWorkspace}
            unarchiveWorkspace={unarchiveWorkspace}
          />
        ) : showInviteList ? (
          <InviteListView
            invites={invites}
            onBackClick={onBackClick}
            onAcceptInvite={handleAcceptInvite}
            onRejectInvite={handleRejectInvite}
          />
        ) : (
          <>
            {session.flags?.['collab-workspaces'] &&
              projectStore.userSelectedProjectId &&
              projectStore.projectsById[projectStore.userSelectedProjectId] &&
              (
                projectStore.projectsById[
                  projectStore.userSelectedProjectId
                ] as ProjectMetadataSchema
              )?.shared && (
                <ProjectCollaborateClient
                  projectId={projectStore.userSelectedProjectId}
                  project={projectStore}
                  onWorkspaceChange={() => {
                    refreshCollaborativeWorkspace();
                  }}
                  onKick={onBackClick}
                >
                  <WorkspacePresenceIndicator project={projectStore} />
                </ProjectCollaborateClient>
              )}
            <WorkspaceHeader
              onBackClick={onBackClick}
              expanded
              rightSideContent={
                <>
                  <div
                    data-presence-container
                    className='flex items-center'
                  ></div>
                  {/* {session.flags?.['collab-workspaces'] &&
                    projectStore.userSelectedProjectId !==
                      DEFAULT_PROJECT_ID && (
                      <button
                        onClick={() => {
                          onOpenShareProjectModal();
                          logWebUserEvent({
                            actionName: 'ProjectCollaborationButtonClicked',
                            context: {
                              projectId: projectStore.currentProjectId || '',
                              state: 'clicked',
                            },
                          });
                        }}
                        className='ml-2 shrink-0 cursor-pointer rounded p-1 transition-colors hover:bg-background-tertiary'
                        title={'Share'}
                      >
                        {projectStore.userSelectedProjectId &&
                        (
                          projectStore.projectsById[
                            projectStore.userSelectedProjectId
                          ] as ProjectMetadataSchema
                        )?.shared ? (
                          <UserGroupIcon className='h-[30px] w-[30px] text-foreground-primary' />
                        ) : (
                          <UserAddIcon className='h-[30px] w-[30px] text-foreground-primary transition-colors' />
                        )}
                      </button>
                    )} */}
                </>
              }
            />
            {isMobile ? (
              <MobileControlsHeader isVisible={isFiltersVisible}>
                {showSearchInput ? (
                  <div
                    className='flex items-center gap-2'
                    style={{ width: '280px' }}
                  >
                    <div className='flex flex-1 items-center gap-2 rounded-full bg-background-secondary px-4 py-3'>
                      <IconInput
                        icon={
                          <SearchIcon className='h-4 w-4 text-foreground-primary' />
                        }
                        type='text'
                        placeholder='Search...'
                        value={localSearchText}
                        onChange={(e) => {
                          setLocalSearchText(e.target.value);
                          setFilters(setSearchText(e.target.value));
                        }}
                        className='text-foreground-primary placeholder:text-foreground-secondary'
                        autoFocus
                        aria-label='Search clips'
                      />
                    </div>
                    <Button
                      variant={ButtonVariant.Standard}
                      size={ButtonSize.Small}
                      shape={ButtonShape.Pill}
                      onClick={() => setShowSearchInput(false)}
                      className='h-10 w-10 p-0'
                    >
                      ×
                    </Button>
                  </div>
                ) : (
                  <>
                    <MobileControlButton
                      onClick={() => setShowSearchInput(true)}
                      aria-label='Open search'
                    >
                      <SearchIcon className='h-4 w-4' />
                    </MobileControlButton>
                    <ContextMenuTrigger
                      onOpenChange={() => {}}
                      ButtonComponent={(props) => (
                        <MobileControlButton {...props}>
                          <FilterIcon className='h-4 w-4' />
                          <TriangleDownIcon className='h-3 w-3' />
                        </MobileControlButton>
                      )}
                      ContentsComponent={() => (
                        <>
                          <FilterMenuItem
                            label='Liked'
                            onChange={() =>
                              setFilters(setLikedOnly(!likedOnly))
                            }
                            value={likedOnly}
                            icon={<ThumbsUpIcon className='h-4 w-4' />}
                            keepMenusOpen={false}
                            ariaLabel='Filter to show only liked clips'
                          />
                          <FilterMenuItem
                            label='Public'
                            onChange={() =>
                              setFilters(setPublicOnly(!publicOnly))
                            }
                            value={publicOnly}
                            icon={<GlobeIcon className='h-4 w-4' />}
                            keepMenusOpen={false}
                            ariaLabel='Filter to show only public clips'
                          />
                          <FilterMenuItem
                            label='Uploads'
                            onChange={() =>
                              setFilters(setUploadOnly(!uploadOnly))
                            }
                            value={uploadOnly}
                            icon={<UploadIcon className='h-4 w-4' />}
                            keepMenusOpen={false}
                            ariaLabel='Filter to show only uploaded clips'
                          />
                          <FilterMenuItem
                            label='Full Songs'
                            onChange={() =>
                              setFilters(setFullSongOnly(!fullSongOnly))
                            }
                            value={fullSongOnly}
                            icon={<VinylIcon className='h-4 w-4' />}
                            keepMenusOpen={false}
                            ariaLabel='Filter to show only full songs'
                          />
                          <FilterMenuItem
                            label='Covers'
                            onChange={() =>
                              setFilters(setCoverOnly(!coverOnly))
                            }
                            value={coverOnly}
                            icon={<CoverCreateIcon className='h-4 w-4' />}
                            keepMenusOpen={false}
                            ariaLabel='Filter to show only covers'
                          />
                          <FilterMenuItem
                            label='Extensions'
                            onChange={() =>
                              setFilters(setExtendOnly(!extendOnly))
                            }
                            value={extendOnly}
                            icon={<ExtendRightIcon className='h-4 w-4' />}
                            keepMenusOpen={false}
                            ariaLabel='Filter to show only extensions'
                          />
                          <FilterMenuItem
                            label='Personas'
                            onChange={() =>
                              setFilters(setPersonaOnly(!personaOnly))
                            }
                            value={personaOnly}
                            icon={<PersonaCreateIcon className='h-4 w-4' />}
                            keepMenusOpen={false}
                            ariaLabel='Filter to show only personas'
                          />
                          <FilterMenuItem
                            label='Remasters'
                            onChange={() =>
                              setFilters(setRemasterOnly(!remasterOnly))
                            }
                            value={remasterOnly}
                            icon={<FourStarIcon className='h-4 w-4' />}
                            keepMenusOpen={false}
                            ariaLabel='Filter to show only remasters'
                          />
                          <FilterMenuItem
                            label='Hide Disliked'
                            onChange={() =>
                              setFilters(setHideDisliked(!hideDisliked))
                            }
                            value={hideDisliked}
                            icon={<ThumbsDownIcon className='h-4 w-4' />}
                            keepMenusOpen={false}
                            ariaLabel='Hide disliked clips'
                          />
                          <FilterMenuItem
                            label='Hide Stems'
                            onChange={() =>
                              setFilters(setHideStems(!hideStems))
                            }
                            value={hideStems}
                            icon={<StemsIcon className='h-4 w-4' />}
                            keepMenusOpen={false}
                            ariaLabel='Hide stems'
                          />
                          <FilterMenuItem
                            label='Hide Clips from Edit Mode'
                            onChange={() =>
                              setFilters(
                                setHideClipsFromEditMode(!hideClipsFromEditMode)
                              )
                            }
                            value={hideClipsFromEditMode}
                            icon={<StemsIcon className='h-4 w-4' />}
                            keepMenusOpen={false}
                            ariaLabel='Hide clips from edit mode'
                          />
                        </>
                      )}
                    />
                    <ContextMenuTrigger
                      onOpenChange={() => {}}
                      ButtonComponent={(props) => (
                        <MobileControlButton {...props}>
                          <SortIcon className='h-4 w-4' />
                          <TriangleDownIcon className='h-3 w-3' />
                        </MobileControlButton>
                      )}
                      ContentsComponent={() => (
                        <>
                          {sortOptions.map((option) => (
                            <ContextMenuItem
                              key={`${option.sortBy}-${option.sortDirection}`}
                              onClick={() => setFilters(setSort(option))}
                            >
                              {option.label}
                            </ContextMenuItem>
                          ))}
                        </>
                      )}
                    />
                  </>
                )}
                <div className='flex-1' />
                <PaginationControls>
                  <PaginationButton
                    isMobile={isMobile}
                    onClick={() =>
                      setPageNumber(Math.max(1, (currentPageNumber || 1) - 1))
                    }
                    disabled={(currentPageNumber || 1) <= 1}
                    aria-label='Previous page'
                  >
                    <CaretLeftIcon className='h-3 w-3' />
                  </PaginationButton>
                  <CurrentPageButton
                    isMobile={isMobile}
                    value={localPageNumber}
                    readOnly={!isMobile}
                    onChange={(e) => {
                      if (isMobile) {
                        const value = e.target.value.replace(/[^0-9]/g, '');
                        setLocalPageNumber(value);
                      }
                    }}
                    onKeyDown={(e) => {
                      if (isMobile && e.key === 'Enter') {
                        const page = parseInt(e.currentTarget.value);
                        if (!isNaN(page) && page > 0) {
                          setPageNumber(page);
                        } else {
                          setLocalPageNumber(
                            (currentPageNumber || 1).toString()
                          );
                        }
                        e.currentTarget.blur();
                      }
                    }}
                    onBlur={(e) => {
                      if (isMobile) {
                        const page = parseInt(e.target.value);
                        if (!isNaN(page) && page > 0) {
                          setPageNumber(page);
                        } else {
                          setLocalPageNumber(
                            (currentPageNumber || 1).toString()
                          );
                        }
                      }
                    }}
                    aria-label='Current page number'
                  />
                  <PaginationButton
                    isMobile={isMobile}
                    onClick={() => setPageNumber((currentPageNumber || 1) + 1)}
                    disabled={false}
                    aria-label='Next page'
                  >
                    <CaretRightIcon className='h-3 w-3' />
                  </PaginationButton>
                </PaginationControls>
              </MobileControlsHeader>
            ) : (
              <WorkspaceFilters />
            )}
            {!!workspacePinnedClips.length ? <WorkspacePinnedClips /> : null}
            <ListWrapper role='table'>
              <ClipBrowserList
                ListComponent={VirtualizedWorkspaceClipRow}
                JustCreatedListComponent={JustCreatedClipRow}
                hidePageControls={true}
                clip1OnboardingRef={clip1OnboardingRef}
                likeOnboardingRef={likeOnboardingRef}
                shareOnboardingRef={shareOnboardingRef}
                {...(isMobile ? { scrollContainerRef } : {})}
              />
            </ListWrapper>
          </>
        )}
      </Wrapper>

      <CreateProjectModal
        project={projectStore}
        isOpen={isCreateProjectModalOpen}
        onClose={onCloseCreateProjectModal}
        onProjectCreated={(newProject: Project) => {
          handleSelectProject(newProject as any as ProjectMetadataSchema);
        }}
      />
      {session.flags?.['collab-workspaces'] &&
        projectStore.userSelectedProjectId !== DEFAULT_PROJECT_ID && (
          <ShareProjectModal
            project={projectStore}
            isOpen={isShareProjectModalOpen}
            onClose={onCloseShareProjectModal}
            onKickSelf={onBackClick}
          />
        )}
    </>
  );
}