"use client";

import { Suspense } from "react";

import { useGetProfileQuery } from "@/api/auth.api";
import MyContentSection from "@/components/MyContent/MyContentSection";
import SubscriptionSummaryCard from "@/components/MyAccount/SubscriptionSummaryCard";
import ErrorCard from "@/components/common/ErrorCard";
import MyAccountSkeleton from "@/components/skeleton/MyAccountSkeleton";
import { useAppSelector } from "@/redux/hooks";

export default function MyContentPage() {
  const { user } = useAppSelector((state) => state.auth);
  const { data, isLoading, error, refetch } = useGetProfileQuery(
    user?.id || "",
    {
      skip: !user?.id,
    },
  );

  return (
    <div className="py-6 px-4">
      <div className="px-4 sm:px-6 lg:px-0 pb-10 max-w-[1074px] mx-auto">
        {isLoading ? (
          <MyAccountSkeleton tab="content" />
        ) : error || !data ? (
          <ErrorCard
            message="Failed to load your content. Please try again."
            onRetry={() => refetch()}
          />
        ) : (
          <Suspense fallback={<MyAccountSkeleton tab="content" />}>
            <div className="flex flex-col lg:flex-row gap-6">
              <div className="w-full lg:w-[650px] flex-shrink-0">
                <MyContentSection userProfile={data.userProfile} />
              </div>
              <div className="flex-1 min-w-0">
                <SubscriptionSummaryCard
                  userSubscription={data.userSubscription}
                />
              </div>
            </div>
          </Suspense>
        )}
      </div>
    </div>
  );
}