import styled from '@emotion/styled';
import { useInfiniteQuery } from '@tanstack/react-query';
import { format } from 'date-fns';
import { observer } from 'mobx-react-lite';
import { Fragment } from 'react';
import { useDebounceValue } from 'usehooks-ts';

import { useStores } from '@/app/(root)/AppProviders';
import { useContextSelector } from '@/hooks/useContextSelector';
import logWebUserEvent from '@/logging/logWebUserEvent';

import ImageWithFallback from '../image/ImageWithFallback';
import { StudioProjectManagementContext } from './StudioProjectManagementContext';
import getStudioProjectAura from './getStudioProjectAura';

const Wrapper = styled.div`
  width: 100%;
  height: 100%;
  overflow-y: auto;
`;

const List = styled.div`
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
  padding-top: 0;
`;

const ProjectItem = styled.div`
  box-sizing: border-box;

  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 16px;
  gap: 16px;

  border-radius: 12px;

  cursor: pointer;
  overflow: hidden;

  position: relative;

  > * {
    z-index: 1;
  }

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

const BlurryBackgroundWrapper = styled.div`
  position: absolute;
  top: -100px;
  left: -100px;
  right: -100px;
  bottom: -100px;
  z-index: 0;
  overflow: hidden;
  border-radius: 12px;
  opacity: 0.5;
`;

const ProjectMeta = styled.div`
  display: flex;
  flex-direction: column;
  gap: 4px;
`;

const ProjectTitle = styled.div`
  font-size: 16px;
  color: var(--color-foreground-primary);
`;
const ProjectSubtitle = styled.div`
  font-size: 12px;
  color: var(--color-foreground-primary);
  opacity: 0.5;
`;

export const useStudioProjectsListQuery = (
  searchText: string,
  archived: boolean = false,
  sortOrder: 'latest' | 'oldest' = 'latest'
) => {
  const [debouncedSearchText] = useDebounceValue(searchText, 150);
  const { session } = useStores();
  return useInfiniteQuery({
    queryKey: ['studio-projects', debouncedSearchText, archived, sortOrder],
    enabled: true,
    staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
    gcTime: 10 * 60 * 1000, // Keep in cache for 10 minutes
    refetchOnMount: false, // Don't refetch on mount, rely on invalidation
    queryFn: async ({ pageParam }: { pageParam: string | null }) => {
      const response = await session.apiClient.GET(
        '/api/studio/list-projects',
        {
          params: {
            query: {
              cursor: pageParam,
              limit: 30,
              name: debouncedSearchText,
              archived,
              sort_order: sortOrder === 'latest' ? 'desc' : 'asc',
            },
          },
        }
      );
      const lastUpdatedAt = response.data?.at(-1)?.updated_at;

      // Server-side sorting is now handled by the API
      const projects = response.data || [];

      return {
        projects,
        nextCursor: lastUpdatedAt
          ? (new Date(lastUpdatedAt).getTime() / 1000).toString()
          : null,
      };
    },
    getNextPageParam: (lastPage) => lastPage.nextCursor,
    initialPageParam: null,
  });
};

export default observer(function StudioProjectListView({
  onClose,
  searchText,
}: {
  onClose: () => void;
  searchText: string;
}) {
  const [debouncedSearchText] = useDebounceValue(searchText, 150);
  const loadProject = useContextSelector(
    StudioProjectManagementContext,
    (ctx) => ctx.loadProject
  );
  const studioProjects = useStudioProjectsListQuery(debouncedSearchText);

  return (
    <Wrapper>
      <List>
        {studioProjects.data?.pages.map((page) => (
          <Fragment key={page.nextCursor}>
            {page.projects?.map((project) => (
              <ProjectItem
                key={project.id}
                onClick={() => {
                  if (project.id) {
                    logWebUserEvent({
                      actionName: 'LoadedStudioProject',
                      context: {
                        studioProjectId: project.id,
                        trigger: 'studio_workspace_sidebar',
                      },
                    });
                    loadProject(project.id, 'studio');
                    onClose();
                  }
                }}
              >
                <BlurryBackgroundWrapper>
                  <ImageWithFallback
                    src={project.image_url || getStudioProjectAura(project.id!)}
                    alt={`Cover image for Studio Projects`}
                    className='h-full w-full object-cover'
                    fallbackSrc='https://cdn-o.suno.com/auras/Aura-01.png'
                  />
                </BlurryBackgroundWrapper>
                <ImageWithFallback
                  src={project.image_url || getStudioProjectAura(project.id!)}
                  alt={`Cover image for Studio Projects`}
                  className='h-[42px] w-[42px] rounded-[8px] object-cover'
                  fallbackSrc='https://cdn-o.suno.com/auras/Aura-01.png'
                />
                <ProjectMeta>
                  <ProjectTitle>{project.title}</ProjectTitle>
                  <ProjectSubtitle>
                    {format(new Date(project.updated_at), 'MMMM d, yyyy')}
                  </ProjectSubtitle>
                </ProjectMeta>
              </ProjectItem>
            ))}
          </Fragment>
        ))}
      </List>
    </Wrapper>
  );
});