import { getClient } from "@/lib/apolloClient";
import { gql } from "@apollo/client";

import PageHero from "@/components/PageHero";
import FAQSection from "@/components/FAQSection";
import { getFaqsByAccordionId } from "@/lib/getFaqs";
import GetInTouch from "@/components/GetInTouch";
import SolutionsSection from "@/components/single-service/SolutionsSection";
import WhyChoose from "@/components/digital-marketing-service/WhyChoose";
import FeaturesGrid from "@/components/digital-marketing-service/FeaturesGrid";
import BenefitsSection from "@/components/digital-marketing-service/BenefitsSection";
import ServicesGrid from "@/components/digital-marketing-service/ServicesGrid";
export const dynamic = "force-dynamic";
export const DIGITAL_MARKETING_PAGE_QUERY = gql`
  query DigitalMarketingPage {
    pageBy(uri: "services/digital-marketing") {
      title
      uri
      blogFaqSection {
        easyAccordionId
      }
      seo {
        title
        metaDesc
        canonical
        opengraphTitle
        opengraphDescription
        opengraphImage {
          sourceUrl
        }
      }

      featuredImage {
        node {
          sourceUrl
          altText
        }
      }

      digitalMarketing {
        solutionsSubtitle
        solutionsTitle
        solutionsDescription
        solutionsButtonLabel
        solutionsButtonLink
        benefitsSubtitle
        benefitsTitle
        benefitsDescription
        benefitsItemTitle
        benefitsImage {
          node {
            sourceUrl
            altText
          }
        }
        benefitsItems {
          itemTitle1
          itemTitle2
          itemTitle3
          itemTitle4
          itemTitle5
          itemTitle6
          itemTitle7
          itemTitle8
          itemTitle9
          itemTitle10
        }
        benefitsCtaText
        benefitsCtaButtonText
        benefitsCtaButtonLink
        servicesGridSubtitle
        servicesGridTitle
        servicesGridDescription
        services1 { serviceTitle serviceDescription serviceIcon }
        services2 { serviceTitle serviceDescription serviceIcon }
        services3 { serviceTitle serviceDescription serviceIcon }
        services4 { serviceTitle serviceDescription serviceIcon }
        services5 { serviceTitle serviceDescription serviceIcon }
        services6 { serviceTitle serviceDescription serviceIcon }
        whyChooseImage { node { sourceUrl altText } }
        whyChooseTitle
        whyChooseSubtitle
        whyChooseDescription
        itemsTitleText
        whyChooseItems {
          item1 itemDescription1
          item2 itemDescription2
          item3 itemDescription3
          item4 itemDescription4
          item5 itemDescription5
          item6 itemDescription6
        }
        featuresSubtitle
        featuresTitle
        featuresItems {
          item1 itemDescription1
          item2 itemDescription2
          item3 itemDescription3
          item4 itemDescription4
          item5 itemDescription5
          item6 itemDescription6
        }
        featuresButtonText
        featuresButtonLink
      }
    }
  }
`;

type MediaNode = {
  sourceUrl: string;
  altText?: string | null;
};

type ServiceItem = {
  serviceTitle?: string;
  serviceDescription?: string;
  serviceIcon?: string | null; // ✅ SVG string
};

type DigitalMarketing = {
  solutionsSubtitle?: string;
  solutionsTitle?: string;
  solutionsDescription?: string;
  solutionsButtonLabel?: string;
  solutionsButtonLink?: string | null;

  servicesGridSubtitle?: string;
  servicesGridTitle?: string;
  servicesGridDescription?: string;

  services1?: ServiceItem | null;
  services2?: ServiceItem | null;
  services3?: ServiceItem | null;
  services4?: ServiceItem | null;
  services5?: ServiceItem | null;
  services6?: ServiceItem | null;

  benefitsSubtitle?: string;
  benefitsTitle?: string;
  benefitsDescription?: string;
  benefitsImage?: { node?: MediaNode };
  benefitsItemTitle?: string;
  benefitsItems?: Record<string, string | null>;
  benefitsCtaText?: string;
  benefitsCtaButtonText?: string;
  benefitsCtaButtonLink?: string | null;

  whyChooseImage?: { node?: MediaNode };
  whyChooseSubtitle?: string;
  whyChooseTitle?: string;
  itemsTitleText?: string;
  whyChooseDescription?: string;
  whyChooseItems?: Record<string, string | null>;

  featuresSubtitle?: string;
  featuresTitle?: string;
  featuresItems?: Record<string, string | null>;
  featuresButtonText?: string;
  featuresButtonLink?: string;
};
type YoastSEO = {
  title?: string | null;
  metaDesc?: string | null;
  canonical?: string | null;
  opengraphTitle?: string | null;
  opengraphDescription?: string | null;
  opengraphImage?: {
    sourceUrl?: string | null;
  } | null;
};
type DigitalMarketingPageQueryResult = {
  pageBy: {
    title: string;
    uri: string;

    blogFaqSection?: {
      easyAccordionId?: string | null;
    } | null;

    seo?: YoastSEO | null;
    content?: string;
    featuredImage?: {
      node?: MediaNode;
    };
    digitalMarketing?: DigitalMarketing;
  } | null;
};

import { Metadata } from "next";

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

  const page = data?.pageBy;
  const seo = page?.seo;

  const canonical =
    seo?.canonical && seo.canonical.trim() !== ""
      ? seo.canonical
      : page?.uri || "/services/digital-marketing/";

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

    title: seo?.title || "Digital Marketing Services | Togwe",

    description:
      seo?.metaDesc ||
      "Result-driven digital marketing services to grow traffic, leads, and revenue.",

    alternates: {
      canonical,
    },

    openGraph: {
      title:
        seo?.opengraphTitle ||
        seo?.title ||
        "Digital Marketing Services | Togwe",

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

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



export default async function DigitalMarketingPage() {
  const { data } = await getClient().query<DigitalMarketingPageQueryResult>({
    query: DIGITAL_MARKETING_PAGE_QUERY,
  });

  const page = data?.pageBy;
  const service = page?.digitalMarketing;

  if (!page || !service) return null;

  // ✅ Get FAQ accordion ID dynamically
  const faqAccordionId = page.blogFaqSection?.easyAccordionId
    ? Number(page.blogFaqSection.easyAccordionId)
    : null;

  // ✅ Fetch FAQs only if ID exists
  const faqs = faqAccordionId
    ? await getFaqsByAccordionId(faqAccordionId)
    : [];

  return (
    <>
      <PageHero title={page.title} />

      <SolutionsSection
        data={service}
        featuredImage={page.featuredImage}
      />

      <ServicesGrid
        data={{
          servicesGridSubtitle: service.servicesGridSubtitle,
          servicesGridTitle: service.servicesGridTitle,
          servicesGridDescription: service.servicesGridDescription,
          services1: service.services1,
          services2: service.services2,
          services3: service.services3,
          services4: service.services4,
          services5: service.services5,
          services6: service.services6,
        }}
      />

      <BenefitsSection
        data={{
          benefitsSubtitle: service.benefitsSubtitle,
          benefitsTitle: service.benefitsTitle,
          benefitsDescription: service.benefitsDescription,
          benefitsItemTitle: service.benefitsItemTitle,
          benefitsImage: service.benefitsImage,
          benefitsItems: service.benefitsItems ?? {},
          benefitsCtaText: service.benefitsCtaText,
          benefitsCtaButtonText: service.benefitsCtaButtonText,
          benefitsCtaButtonLink: service.benefitsCtaButtonLink,
        }}
      />

      <FeaturesGrid
        data={{
          featuresSubtitle: service.featuresSubtitle,
          featuresTitle: service.featuresTitle,
          featuresItems: service.featuresItems,
          featuresButtonText: service.featuresButtonText,
          featuresButtonLink: service.featuresButtonLink,
        }}
      />

      <WhyChoose data={service} />

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

      <GetInTouch />
    </>
  );
}