import { fetchGraphQL } from "@/lib/fetchGraphQL";
import { getClient } from "@/lib/apolloClient";
import { gql } from "@apollo/client";
import { LATEST_POSTS_QUERY } from "@/lib/postsQuery";
import LatestBlogs from "@/components/home/LatestBlogs";
import IntroSection from "@/components/layout/IntroSection";
import WhatWeDo from "@/components/home/WhatWeDo";
import OurProcess from "@/components/home/OurProcess";
import WhoWeAre from "@/components/home/WhoWeAre";
import WhoWeWorkWith from "@/components/home/WhoWeWorkWith";
import CaseStudySlider from "@/components/home/CaseStudySlider";
import AwardsRecognition from "@/components/home/AwardsRecognition";
import ClientTestimonials from "@/components/home/ClientTestimonials";
import FAQSection from "@/components/FAQSection";
import { getFaqsByAccordionId } from "@/lib/getFaqs";
import CTABox from "@/components/home/CTABox";
import ShowcaseSlider from "@/components/home/ShowcaseSlider";
import ProjectSection from "@/components/home/ProjectSection";
export const dynamic = "force-dynamic";

const GET_CASE_STUDIES = gql`
  query GetCaseStudies {
    caseStudies(
      where: {
        orderby: { field: DATE, order: ASC }
      }
    ) {
      nodes {
        title
        slug
        excerpt
        tags {
          nodes {
            name
            slug
          }
        }
        featuredImage {
          node {
            sourceUrl
            altText
          }
        }
      }
    }
  }
`;
const GET_HOME_SEO = gql`
  query HomeSEO {
    page(id: "home", idType: URI) {
      blogFaqSection {
        easyAccordionId
      }
      seo {
        title
        metaDesc
        canonical
        opengraphTitle
        opengraphDescription
        opengraphImage {
          sourceUrl
        }
      }
    }
  }
`;

type CaseStudyTag = {
  name: string;
  slug: string;
};

type CaseStudyNode = {
  title: string;
  slug: string;
  excerpt?: string | null;
  tags: {
    nodes: CaseStudyTag[];
  };
  featuredImage?: {
    node?: {
      sourceUrl: string;
      altText?: string | null;
    };
  } | null;
};

type GetCaseStudiesResponse = {
  caseStudies: {
    nodes: CaseStudyNode[];
  };
};
type HomeSeoResponse = {
  page: {
    blogFaqSection?: {
      easyAccordionId?: string | null;
    } | null;
    seo?: {
      title?: string | null;
      metaDesc?: string | null;
      canonical?: string | null;
      opengraphTitle?: string | null;
      opengraphDescription?: string | null;
      opengraphImage?: {
        sourceUrl?: string | null;
      } | null;
    } | null;
  } | null;
};


import { Metadata } from "next";

export async function generateMetadata(): Promise<Metadata> {
  const { data } = await getClient().query<HomeSeoResponse>({
    query: GET_HOME_SEO,
    fetchPolicy: "no-cache",
  });

  const seo = data?.page?.seo;

  const canonical =
    seo?.canonical && seo.canonical.trim() !== ""
      ? seo.canonical
      : "/";

  return {
    metadataBase: new URL("https://www.togwe.com"),

    title: seo?.title || "Togwe | Digital, Sports & Marketing Solutions",

    description:
      seo?.metaDesc ||
      "Togwe builds scalable digital, sports, gaming, and marketing solutions for modern businesses.",

    alternates: {
      canonical,
    },

    openGraph: {
      title:
        seo?.opengraphTitle ||
        seo?.title ||
        "Togwe | Digital, Sports & Marketing Solutions",

      description:
        seo?.opengraphDescription || seo?.metaDesc || undefined,

      images: seo?.opengraphImage?.sourceUrl
        ? [{ url: seo.opengraphImage.sourceUrl }]
        : [],
    },
  };
}



export default async function HomePage() {
  const { data: seoData } = await getClient().query<HomeSeoResponse>({
    query: GET_HOME_SEO,
    fetchPolicy: "no-cache",
  });

  // 🔹 Extract FAQ Accordion ID from WP
  const faqAccordionId = seoData?.page?.blogFaqSection?.easyAccordionId
    ? Number(seoData.page.blogFaqSection.easyAccordionId)
    : null;

  // 🔹 Fetch FAQs dynamically
  const faqs = faqAccordionId
    ? await getFaqsByAccordionId(faqAccordionId)
    : [];

  const postsRes = await fetchGraphQL(LATEST_POSTS_QUERY);
  const result = await getClient().query<GetCaseStudiesResponse>({
    query: GET_CASE_STUDIES,
  });

  if (!result.data?.caseStudies?.nodes) {
    console.error("CASE STUDY FETCH ERROR", result);
    return null;
  }

  if (!postsRes?.data?.posts?.nodes) {
    console.error("POST FETCH ERROR", postsRes);
    return null;
  }

  return (
    <>
      <IntroSection />
      <WhatWeDo />
      <ShowcaseSlider />
      <WhoWeAre />
      <ProjectSection />
      <WhoWeWorkWith />
      <OurProcess />
      <CaseStudySlider caseStudies={result.data.caseStudies.nodes} />
      <AwardsRecognition />
      <ClientTestimonials />

      {faqs.length > 0 && <FAQSection faqs={faqs} />}

      <LatestBlogs posts={postsRes.data.posts.nodes} />
      
      <CTABox />
    </>
  );
}