"use client";

import { Suspense } from "react";
import { useSearchParams } from "next/navigation";

import { useGetProfileQuery } from "@/api/auth.api";
import UserPublicProfile from "@/components/UserProfile/UserPublicProfile";
import SubscriptionSummaryCard from "@/components/MyAccount/SubscriptionSummaryCard";
import ErrorCard from "@/components/common/ErrorCard";
import MyAccountSkeleton from "@/components/skeleton/MyAccountSkeleton";

function UserProfileContent() {
  const searchParams = useSearchParams();
  const userIdParam = searchParams.get("userId");
  const userId = userIdParam ? Number(userIdParam) : NaN;
  const isValidId = Number.isFinite(userId) && userId > 0;

  const { data, isLoading, error, refetch } = useGetProfileQuery(userId, {
    skip: !isValidId,
  });

  if (!isValidId) {
    return <ErrorCard message="No user specified." />;
  }

  if (isLoading) {
    return <MyAccountSkeleton tab="content" />;
  }

  if (error || !data) {
    return (
      <ErrorCard
        message="Failed to load this profile. Please try again."
        onRetry={() => refetch()}
      />
    );
  }

  return (
    <div className="flex flex-col lg:flex-row gap-6">
      <div className="w-full lg:w-[650px] flex-shrink-0">
        <UserPublicProfile userId={userId} userProfile={data.userProfile} />
      </div>
      <div className="flex-1 min-w-0">
        <SubscriptionSummaryCard
          userSubscription={data.userSubscription}
          readOnly
        />
      </div>
    </div>
  );
}

export default function UserProfilePage() {
  return (
    <div className="py-6 px-4">
      <div className="px-4 sm:px-6 lg:px-0 pb-10 max-w-[1074px] mx-auto">
        <Suspense fallback={<MyAccountSkeleton tab="content" />}>
          <UserProfileContent />
        </Suspense>
      </div>
    </div>
  );
}