// 'use client';
// import { useRouter } from 'next/router';
// import { FC, useEffect, useState } from 'react';
// import 'swiper/css';
// import 'swiper/css/navigation';
// import MagazineApis from '../../../../utils/MagazineApis';
// import { Category, CategoryGroup, PostItem, PostItemAttributes } from '../../../../types';
// import PostDetailsSection from '../../../../components/PostDetails/PostDetailsSection';
// import Head from 'next/head';
// import Breadcrumb from '../../../../components/Breadcrumb/Breadcrumb';
// import { MagazinePostsState, useMagazinePosts } from '../../../../utils/useMagazinePosts';

// const detailsSection: FC = () => {
//     const router = useRouter();
//     const { slug } = router.query;
//     const { locale} = router;

//     const [Post, setPost] = useState<PostItemAttributes[]>([]);
//     const [PostImage, setPostImage] = useState<Category[]>([]);
//     const [PostCategoryName, setPostCategoryName] = useState<Category[]>([]);
//     const [CategoryGroupNam, setCategoryGroupName] = useState<CategoryGroup | null>(null);


//     useEffect(() => {
//         if (slug) {
//             getPostID(slug,locale);

          
//         }
//     }, [slug,locale,PostCategoryName]);


    

//     const getPostID = (slug: string | string[],locale:any) => {
//         MagazineApis.getPostID(slug,locale).then((res) => {
//             setPost(res.data[0]);
//             console.log('possssssss',res.data[0])
//             // getCategoryGroupID(res.data[0]?.attributes?.category?.data?.attributes?.Slug,locale);
//             setPostImage(res.data[0]?.image_url);
//             setPostCategoryName(res.data[0]?.category_title);
//             setCategoryGroupName(res.data[0]?.category_list[0]?.category_title);
//         });
//     };



 


//     const latestNewsPosts: MagazinePostsState = useMagazinePosts( 11,locale);


//     return (
//         <div>
//             <Head>
//                 <title>تفاصيل الخبر</title>
//             </Head>

//             {/* <Breadcrumb Breadcrumb2={CategoryGroupNam?.attributes?.groupTitle} Breadcrumb3={PostCategoryName} /> */}
//             <Breadcrumb Breadcrumb2={CategoryGroupNam} Breadcrumb3={PostCategoryName} />

//             <PostDetailsSection postDetails={Post} postImage={PostImage} latestNewsPost={latestNewsPosts.posts[0]} />
       
//         </div>
//     );
// };

// export default detailsSection;




import { GetStaticPaths, GetStaticProps, Metadata, ResolvingMetadata } from 'next';
import { FC } from 'react';
import 'swiper/css';
import 'swiper/css/navigation';
import MagazineApis from '../../../../utils/MagazineApis';
import { Category, CategoryGroup, PostItemAttributes } from '../../../../types';
import PostDetailsSection from '../../../../components/PostDetails/PostDetailsSection';
import Breadcrumb from '../../../../components/Breadcrumb/Breadcrumb';
import { MagazinePostsState, useMagazinePosts } from '../../../../utils/useMagazinePosts';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import Head from 'next/head';
import siteConfig from '../../../../site.config';

interface DetailsSectionProps {
  post: PostItemAttributes;
  postImage: string;
  postCategoryName: string;
  categoryGroupName: any[] | null;
  locale: string;
}



const generateMetadata = (post: PostItemAttributes, locale: string) => {
  const title = post?.post_title || 'تفاصيل الخبر'; // Fallback to a default title
 
  const imageUrl = post?.image_url || ''; // Post image URL
 // Replace with your actual base URL

 const maxDescriptionLength = 190; // Set the maximum length for the description
 const description = post?.body
   ? post.body.length > maxDescriptionLength
     ? post.body.slice(0, maxDescriptionLength) + '...' // Add ellipsis if trimmed
     : post.body
   : 'وصف الافتراضي'; // Fallback to a default description if body is unavailable

 const baseUrl = process.env.NEXT_PUBLIC_DRUPAL_BASE_URL;
  // Construct dynamic URL based on slug and locale
  const url = `${baseUrl}/${locale}`;
  const keywords = post?.tags
  return {
    title,
    description,
    keywords,
    openGraph: {
      title,
      description,
      url, // Use the dynamic URL here
      images: [
        {
          url:  `${siteConfig.drupalBaseUrl}${imageUrl}`,
          width: 800,
          height: 600,
          alt: title,
        },
      ],
      site_name: siteConfig.name
    },
  };
};



const DetailsSection: FC<DetailsSectionProps> = ({
  post,
  postImage,
  postCategoryName,
  categoryGroupName,
  locale,
}) => {
  // Fetch the latest news posts based on the locale
  const latestNewsPosts: MagazinePostsState = useMagazinePosts(11, locale);
  const groupName = post?.category_list[0].category_group_name
  const groupId = post?.category_list[0].id
  console.log("category grouppppp" , post)
  const metadata = generateMetadata(post, locale);
  return (
    <div>
   <Head>
        <title>{metadata.title}</title>
        <meta name="keywords" content={metadata.keywords} />
        <meta name="description" content={metadata.description} />
        <meta property="og:title" content={metadata.openGraph.title} />
        <meta property="og:description" content={metadata.openGraph.description} />
        <meta property="og:url" content={metadata.openGraph.url} /> {/* Dynamic URL */}
        <meta property="og:image" content={metadata.openGraph.images[0].url} />
        <meta property="og:image:width" content={metadata.openGraph.images[0].width.toString()} />
        <meta property="og:image:height" content={metadata.openGraph.images[0].height.toString()} />
        <meta property="og:site_name" content={metadata.openGraph.site_name} />
        {/* Add other meta tags as needed */}
      </Head>

      {/* Breadcrumb component with the fetched category group and post category name */}
      <Breadcrumb 
            breadcrumbs={[
                { title: groupName, href: `/category/${groupId}` },
                { title: postCategoryName, }
            ]}
        />

      <PostDetailsSection postDetails={post} postImage={postImage} latestNewsPost={latestNewsPosts.posts[0]} />
    </div>
  );
};

// Static paths configuration
export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [], // No pre-generated paths at build time
    fallback: 'blocking', // Generate pages on-demand
  };
};

// Fetch data for static generation
export const getStaticProps: GetStaticProps = async (context) => {
  const { params, locale } = context;
  const slug = params?.slug as string;

  // Fetch post data at build time
  const res = await MagazineApis.getPostID(slug, locale);
  const post = res.data[0] || [];
  const postImage = res.data[0]?.image_url || '';
  const postCategoryName = res.data[0]?.category_title || 'Unknown Category';
  const categoryGroupName = res.data[0]?.category_list[0] || '';

  return {
    props: {
      ...(await serverSideTranslations(context.locale || 'ar', ['common'])),
      post,
      postImage,
      postCategoryName,
      categoryGroupName,
      locale: locale || 'en',
    },
    revalidate: 60, // Revalidate every 60 seconds for ISR
  };
};

export default DetailsSection;

















// type Props = {
//   params: { slug: string };
//   locale: string;
// };

// export async function generateMetadata(
//   { params, locale }: Props,
//   parent: ResolvingMetadata
// ): Promise<Metadata> {
//   // Fetch post data based on slug
//   const slug = params.slug;
//   const res = await MagazineApis.getPostID(slug, locale);
//   const post = res.data[0] || {};
//   const postImage = post.image_url || '';
//   const postTitle = post.post_title || 'تفاصيل الخبر';
//   const postSummary = post.body || 'تفاصيل الخبر';


//   const previousImages = (await parent).openGraph?.images || []
//   // Construct the base URL
//   const baseUrl = process.env.NEXT_PUBLIC_DRUPAL_BASE_URL;

//   // Return metadata object
//   return {
//     title: postTitle,
//     description: postSummary,
//     alternates: {
//       canonical: '/',
//       languages: {
//         'en-US': '/en',
//         'ar-YE': '/ar',
//       },
//     },
//     openGraph: {
//       title: postTitle,
//       description: postSummary,
//       images: [ `${baseUrl}/${post.Slug}`  , ...previousImages],
     
//     },
//   };
// }