export default function Home({
  searchParams,
}: {
  searchParams: Promise<{ tag?: string; page?: string }>;
}) {
  return (
    <>
      <DynamicWelcomeModal />

      <div className="mx-auto flex flex-col gap-12">
        {/* 로고 섹션 - 즉시 렌더링 */}
        <LogoSection />

        {/* 메인 콘텐츠 - 스트리밍 */}
        <div className="flex pb-10">
          {/* 게시글 목록 섹션 - 독립적 스트리밍 */}
          <Suspense fallback={<PostListSkeleton count={3} />}>
            <PostListSection searchParams={searchParams} />
          </Suspense>

          {/* 사이드바 섹션 - 독립적 스트리밍 */}
          <Suspense fallback={<SidebarSkeleton />}>
            <SidebarSection />
          </Suspense>
        </div>
      </div>
    </>
  );
}

export default async function PostListSection({ searchParams }: PostListSectionProps) {
  const { tag, page } = await searchParams;
  const currentPage = Number(page) || 1;
  const pageSize = 10;

  // 서버에서 초기 게시글 데이터 페칭
  const initialData = tag
    ? await postService.getPostsByTag(
        tag,
        {
          page: currentPage - 1,
          size: pageSize,
          sort: ["createdAt,desc"],
        },
        { cache: "no-store" }
      )
    : await postService.getPosts(
        {
          // page: 1,
          page: currentPage - 1,
          size: pageSize,
          sort: ["createdAt,desc"],
        },
        { cache: "no-store" }
      );

  // const response = await postService.getPosts1({ page: 1, size: 10 });

  // console.log("posts response", response);

  return (
    <main className="flex-3">
      <div className="mb-6 flex items-center justify-between">
        <h2 className="text-2xl font-semibold">{tag ? `#${tag} 태그 게시글` : "Posts"}</h2>
      </div>

      {/* 인터랙티브 게시글 목록 */}
      <InteractivePostList initialData={initialData} initialTag={tag} initialPage={1} />

      {/* 페이지네이션 */}
      {initialData.totalPages && initialData.totalPages > 1 && (
        <div className="mt-12 flex justify-center">
          <InteractivePagination
            currentPage={currentPage}
            totalPages={initialData.totalPages}
            tag={tag}
          />
        </div>
      )}
    </main>
  );
}

export default function InteractivePostList({
  initialData,
  initialTag,
  initialPage,
}: InteractivePostListProps) {
  const searchParams = useSearchParams();
  const currentTag = searchParams.get("tag") || undefined;
  const currentPage = Number(searchParams.get("page")) || 1;

  // 초기 로딩인지 확인 (URL 파라미터가 초기값과 같은지)
  const isInitialLoad = currentTag === initialTag && currentPage === initialPage;

  // 쿼리 파라미터
  const queryParams = useMemo(
    () => ({
      page: currentPage - 1, // 원래 로직으로 복원 (0-based indexing)
      size: 10,
      sort: ["createdAt,desc"],
    }),
    [currentPage]
  );

  const postsQuery = usePosts(queryParams, {
    enabled: !currentTag && !isInitialLoad,
    initialData: !currentTag && isInitialLoad ? initialData : undefined,
  });

  const postsByTagQuery = usePostsByTag(currentTag!, queryParams, {
    enabled: !!currentTag && !isInitialLoad,
    initialData: currentTag === initialTag && isInitialLoad ? initialData : undefined,
  });

  // 현재 사용할 데이터 결정
  const activeQuery = currentTag ? postsByTagQuery : postsQuery;
  const data = isInitialLoad ? initialData : activeQuery.data;
  const isLoading = !isInitialLoad && activeQuery.isLoading;
  const isFetching = activeQuery.isFetching;
  const error = activeQuery.error;

  const posts = data?.content || [];
  
  ...
}

 async getPosts(params?: Pageable): Promise<PagedResponsePostListResponse> {
    const endpoint = API_PATHS.posts.base;
    const url = new URL(API_CONFIG.BASE_URL + endpoint);

    if (params?.page !== undefined) url.searchParams.append("page", String(params.page));
    if (params?.size !== undefined) url.searchParams.append("size", String(params.size));
    if (params?.sort) params.sort.forEach((sort: string) => url.searchParams.append("sort", sort));

    try {
      const response = await fetch(url.toString(), {
        method: "GET",
        headers: { "Content-Type": "application/json" },
        cache: "no-cache",
      });

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new PostServiceError(
          response.status,
          errorData.message || "Failed to fetch posts",
          endpoint
        );
      }

      const apiResponse: ResponseDtoPagedResponsePostListResponse = await response.json();
      return apiResponse.data as PagedResponsePostListResponse;
    } catch (error) {
      if (error instanceof PostServiceError) throw error;
      throw new PostServiceError(
        500,
        (error as Error).message || "An unexpected error occurred",
        endpoint
      );
    }
  },

  async getPosts(params: Pageable, options?: RequestInit): Promise<PagedResponsePostListResponse> {
    const response = await apiClient.getPosts({ pageable: params }, options);
    return response.data as PagedResponsePostListResponse;
  },