import type { Metadata } from 'next';
import { getDomain } from '@/lib/utils/link';
import { redirect } from 'next/navigation';
import SemblePageClient from '@/features/semble/containers/sembleContainer/SemblePageClient';
import SembleContainer from '@/features/semble/containers/sembleContainer/SembleContainer';
import { Suspense } from 'react';
import SembleContainerSkeleton from '@/features/semble/containers/sembleContainer/Skeleton.SembleContainer';

interface Props {
  searchParams: Promise<{
    id: string | undefined;
    viaCardId?: string;
    sembleTab?: string;
  }>;
}

export async function generateMetadata({
  searchParams,
}: {
  searchParams: Promise<{
    id: string | undefined;
    viaCardId?: string;
    sembleTab?: string;
  }>;
}): Promise<Metadata> {
  const { id: url } = await searchParams;

  if (!url) return {};

  const domain = getDomain(url);

  return {
    title: `${domain}`,
    description: `Semble page for ${domain}`,
    openGraph: {
      images: [
        {
          url: `${process.env.APP_URL}/api/opengraph/semble?url=${url}`,
          width: 1200,
          height: 630,
          alt: `Semble page for ${domain}`,
        },
      ],
    },
  };
}

export default async function Page(props: Props) {
  const searchParams = await props.searchParams;
  const url = searchParams.id
    ? decodeURIComponent(searchParams.id)
    : searchParams.id;
  const viaCardId = searchParams.viaCardId;

  if (!url) {
    redirect('/');
  }

  return (
    <Suspense fallback={<SembleContainerSkeleton />} key={url + 'container'}>
      <SemblePageClient viaCardId={viaCardId}>
        <SembleContainer url={url} viaCardId={viaCardId} />
      </SemblePageClient>
    </Suspense>
  );
}
