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

import AboutHero from "./AboutHero";
import GrowthStats from "./GrowthStats";
import WhyPartner from "./WhyPartner";
import VisionMission from "./VisionMission";
import OurValues from "./OurValues";
import OurTeam from "./OurTeam";
import TrustImpact from "./TrustImpact";
import Awards from "./Awards";
import ClientTestimonials from "@/components/home/ClientTestimonials";
import LatestBlogs from "@/components/home/LatestBlogs";
import { LATEST_POSTS_QUERY } from "@/lib/postsQuery";
import { fetchGraphQL } from "@/lib/fetchGraphQL";
import PageHero from "@/components/PageHero";
import GetInTouch from "@/components/GetInTouch";
export const dynamic = "force-dynamic";
const ABOUT_SEO_QUERY = gql`
  query AboutSEO {
    pageBy(uri: "about-us") {
      uri
      seo {
        title
        metaDesc
        canonical
        opengraphTitle
        opengraphDescription
        opengraphImage {
          sourceUrl
        }
      }
    }
  }
`;

const ABOUT_PAGE_QUERY = gql`
  query AboutPage {
    pageBy(uri: "about-us") {
      title
      uri

      whoWeAre {
        heroTitle
        heroSubtitle
        heroDescription
        heroImage {
          node {
            sourceUrl
            altText
          }
        }
      }

      whyPartner {
        whyTitle
        whySubtitle
        whyExpert
        whyItems {
          itemTitle1
          itemDescription1
          itemTitle2
          itemDescription2
          itemTitle3
          itemDescription3
          itemTitle4
          itemDescription4
          itemTitle5
          itemDescription5
        }
      }

      visionMission {
        visionTitle
        visionSubtitle
        visionDescription
        missionTitle
        missionSubtitle
        missionDescription
        visionImage {
          node {
            sourceUrl
            altText
          }
        }
        visionButtonText
        visionButtonLink
      }

      ourValues {
        valuesTitle
        valuesSubtitle
        valuesExpert
        valuesImage {
          node {
            sourceUrl
            altText
          }
        }
        valuesItems {
          itemTitle1
          itemDescription1
          itemTitle2
          itemDescription2
          itemTitle3
          itemDescription3
          itemTitle4
          itemDescription4
          itemTitle5
          itemDescription5
          itemTitle6
          itemDescription6
        }
      }

      ourTeam {
        teamTitle
        teamSubtitle
        teamExpert
        teamItems {
          itemTitle1
          itemTitle2
          itemTitle3
          itemTitle4
          itemTitle5
          itemTitle6
        }
        teamsImage {
          node {
            sourceUrl
            altText
          }
        }
        buttonText
        buttonLink
        trustTitle
        trustSubtitle
        trustExpert
        ourImpact
        impactItems {
          itemTitle1
          itemTitle2
          itemTitle3
          itemTitle4
          itemTitle5
          itemTitle6
          itemTitle7
          itemTitle8
          itemTitle9
          itemTitle10
        }
      }

      awardsRecognition {
        awardsTitle
        awardsSubtitle
        awardsImages {
          image1 {
            node {
              sourceUrl
              altText
            }
          }
          image2 {
            node {
              sourceUrl
              altText
            }
          }
          image3 {
            node {
              sourceUrl
              altText
            }
          }
          image4 {
            node {
              sourceUrl
              altText
            }
          }
          image5 {
            node {
              sourceUrl
              altText
            }
          }
        }
      }
    }
  }
`;

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

type AboutPageData = {
  pageBy: {
    title: string;
    uri: string;

    whoWeAre: {
      heroTitle: string;
      heroSubtitle: string;
      heroDescription: string;
      heroImage: ImageNode;
    };

    whyPartner: {
      whyTitle: string;
      whySubtitle: string;
      whyExpert: string;
      whyItems: Record<string, string | null>;
    };

    visionMission: {
      visionTitle: string;
      visionSubtitle: string;
      visionDescription: string;
      missionTitle: string;
      missionSubtitle: string;
      missionDescription: string;
      visionImage: ImageNode;
      visionButtonText?: string | null;
      visionButtonLink?: string | null;
    };

    ourValues: {
      valuesTitle: string;
      valuesSubtitle: string;
      valuesExpert: string;
      valuesImage: ImageNode;
      valuesItems: Record<string, string | null>;
    };

    ourTeam: {
      teamTitle: string;
      teamSubtitle: string;
      teamExpert: string;
      teamItems: Record<string, string | null>;
      teamsImage: ImageNode;
      buttonText?: string | null;
      buttonLink?: string | null;
      trustTitle: string;
      trustSubtitle: string;
      trustExpert: string;
      ourImpact: string;
      impactItems: Record<string, string | null>;
    };

    awardsRecognition: {
      awardsTitle: string;
      awardsSubtitle: string;
      awardsImages: {
        image1?: ImageNode | null;
        image2?: ImageNode | null;
        image3?: ImageNode | null;
        image4?: ImageNode | null;
        image5?: ImageNode | null;
      };
    };
  } | null;
};

type AboutSeoResponse = {
  pageBy: {
    uri: string;
    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<AboutSeoResponse>({
    query: ABOUT_SEO_QUERY,
    fetchPolicy: "no-cache",
  });

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

  const canonical =
    seo?.canonical && seo.canonical.trim() !== ""
      ? seo.canonical
      : page?.uri || "/about-us/";

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

    title: seo?.title || "About Us | Togwe",

    description:
      seo?.metaDesc ||
      "Learn more about Togwe, our mission, values, team, and vision.",

    alternates: {
      canonical,
    },

    openGraph: {
      title: seo?.opengraphTitle || seo?.title || "About Us | Togwe",
      description:
        seo?.opengraphDescription || seo?.metaDesc || undefined,
      images: seo?.opengraphImage?.sourceUrl
        ? [{ url: seo.opengraphImage.sourceUrl }]
        : [],
    },
  };
}


export default async function AboutPage() {
  const result = await getClient().query<AboutPageData>({
    query: ABOUT_PAGE_QUERY,
    fetchPolicy: "no-cache",
  });

  const page = result.data?.pageBy;

  if (!page) {
    console.error("ABOUT PAGE DATA NOT FOUND");
    return null;
  }

  const postsRes = await fetchGraphQL(LATEST_POSTS_QUERY);

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

  return (
    <>
      <PageHero title={page.title} />
      <AboutHero data={page.whoWeAre} />
      <GrowthStats />
      <WhyPartner data={page.whyPartner} />
      <VisionMission data={page.visionMission} />
      <OurValues data={page.ourValues} />
      <OurTeam data={page.ourTeam} />
      <TrustImpact data={page.ourTeam} />
      <Awards data={page.awardsRecognition} />
      <ClientTestimonials />
      <LatestBlogs posts={postsRes.data.posts.nodes} />
      <GetInTouch />
    </>
  );
}