"use client";

import { Suspense } from "react";
import { useSearchParams } from "next/navigation";
import ExploreReelsView from "@/components/explore/ExploreReelsView";
import PostFeedView, { PostFeedSearchParams } from "@/components/posts/PostFeedView";
import PageLoader from "@/components/ui/PageLoader";

function toExploreFeedParams(
  searchParams: URLSearchParams
): PostFeedSearchParams {
  return {
    feed: "explore",
    filter: searchParams.get("filter") || undefined,
    lat: searchParams.get("lat") || undefined,
    lng: searchParams.get("lng") || undefined,
    q: searchParams.get("q") || undefined,
    hashtag: searchParams.get("hashtag") || undefined,
  };
}

function ExploreReelContent({ id }: { id: string }) {
  const searchParams = useSearchParams();
  const typeParam = searchParams.get("type");

  if (typeParam === "academy") {
    return (
      <ExploreReelsView
        initialId={id}
        initialType="academy"
        showClose
      />
    );
  }

  return (
    <PostFeedView
      initialPostId={id}
      showClose
      feedMode="explore"
      searchParams={toExploreFeedParams(searchParams)}
    />
  );
}

export default function ExploreReelClient({ id }: { id: string }) {
  return (
    <main className="min-h-[100dvh]">
      <Suspense fallback={<PageLoader className="min-h-[100dvh]" />}>
        <ExploreReelContent id={id} />
      </Suspense>
    </main>
  );
}
