// app/(dashboard)/saved/page.tsx
import { Suspense } from 'react';
import SavedContent from '@/components/dashboard/saved-content';
import { getDynamicImages } from '@/lib/api/client';

const SECURITY_KEY = process.env.NEXT_PUBLIC_SECURITY_KEY!;
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

async function getSavedPageData() {
  try {
    const [savedPageData, sharingIcons, logoImage] = await Promise.all([
      fetch(`${BASE_URL}/page/getPageById?pageId=696f689eb9367c6fd9c56c73`).then(res => res.json()).catch(() => ({ data: null })),
      fetch(`${BASE_URL}/social/getSocialSharing`).then(res => res.json()).catch(() => ({ data: [] })),
      getDynamicImages(SECURITY_KEY),
    ]);
    
    return {
      savedPageData: savedPageData?.data,
      sharingIcons: sharingIcons?.data || [],
      logoImage: logoImage?.data,
    };
  } catch (error) {
    return {
      savedPageData: null,
      sharingIcons: [],
      logoImage: null,
    };
  }
}

export async function generateMetadata() {
  const { savedPageData } = await getSavedPageData();
  const page = savedPageData;

  return {
    title: page?.pageTitle || page?.seoTitle || "Saved",
    description: page?.description || "Access all your saved ideas, posts, and inspirations anytime.",
  };
}

export default async function SavedPage() {
  const { savedPageData, sharingIcons, logoImage } = await getSavedPageData();

  return (
    <Suspense fallback={<SavedPageSkeleton />}>
      <SavedContent 
        savedPageData={savedPageData} 
        sharingIcons={sharingIcons}
        logoImage={logoImage} 
      />
    </Suspense>
  );
}

// Skeleton Component for Saved Page
function SavedPageSkeleton() {
  return (
    <div className="w-full">
      <div className="flex flex-col gap-6">
        {/* Header Skeleton */}
        <div className="flex flex-col gap-2">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-xl bg-gray-300 dark:bg-gray-700 animate-pulse" />
            <div>
              <div className="h-7 w-32 bg-gray-300 dark:bg-gray-700 rounded animate-pulse mb-1" />
              <div className="h-4 w-48 bg-gray-300 dark:bg-gray-700 rounded animate-pulse" />
            </div>
          </div>
        </div>

        {/* Stats Card Skeleton */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {[1, 2, 3].map((i) => (
            <div key={i} className="rounded-2xl bg-card border border-border/50 p-5">
              <div className="flex items-start justify-between">
                <div className="w-10 h-10 rounded-xl bg-gray-300 dark:bg-gray-700 animate-pulse" />
                <div className="w-12 h-4 bg-gray-300 dark:bg-gray-700 rounded animate-pulse" />
              </div>
              <div className="mt-4">
                <div className="h-7 w-20 bg-gray-300 dark:bg-gray-700 rounded animate-pulse mb-1" />
                <div className="h-4 w-24 bg-gray-300 dark:bg-gray-700 rounded animate-pulse" />
              </div>
            </div>
          ))}
        </div>

        {/* Saved Posts List Skeleton */}
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="h-6 w-32 bg-gray-300 dark:bg-gray-700 rounded animate-pulse" />
          </div>
          
          <div className="space-y-4">
            {[1, 2, 3, 4, 5].map((i) => (
              <div key={i} className="bg-card rounded-2xl p-5 border animate-pulse">
                {/* Header Skeleton */}
                <div className="flex items-start justify-between gap-4 mb-4">
                  <div className="flex items-center gap-3">
                    <div className="w-11 h-11 rounded-full bg-gray-300 dark:bg-gray-700" />
                    <div>
                      <div className="h-5 w-32 bg-gray-300 dark:bg-gray-700 rounded mb-1" />
                      <div className="h-4 w-20 bg-gray-300 dark:bg-gray-700 rounded" />
                    </div>
                  </div>
                  <div className="w-8 h-8 rounded-lg bg-gray-300 dark:bg-gray-700" />
                </div>

                {/* Content Skeleton */}
                <div className="mt-2">
                  <div className="w-20 h-6 bg-gray-300 dark:bg-gray-700 rounded-full mb-2" />
                  <div className="space-y-2">
                    <div className="h-4 w-full bg-gray-300 dark:bg-gray-700 rounded" />
                    <div className="h-4 w-3/4 bg-gray-300 dark:bg-gray-700 rounded" />
                  </div>
                </div>

                {/* Media Skeleton */}
                <div className="mt-4">
                  <div className="grid grid-cols-2 gap-2">
                    <div className="aspect-square rounded-xl bg-gray-300 dark:bg-gray-700" />
                    <div className="aspect-square rounded-xl bg-gray-300 dark:bg-gray-700" />
                  </div>
                </div>

                {/* Actions Skeleton */}
                <div className="mt-5 flex items-center justify-between pt-4 border-t border-border/30">
                  <div className="flex items-center gap-1">
                    <div className="w-12 h-9 bg-gray-300 dark:bg-gray-700 rounded-xl" />
                    <div className="w-12 h-9 bg-gray-300 dark:bg-gray-700 rounded-xl" />
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-16 h-4 bg-gray-300 dark:bg-gray-700 rounded" />
                    <div className="w-12 h-9 bg-gray-300 dark:bg-gray-700 rounded-lg" />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}