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

import ContactApproach from "./ContactApproach";
import HelpSolutions from "./HelpSolutions";
import WhyReachOut from "./WhyReachOut";
import CareersCTA from "./CareersCTA";
import FollowUs from "./FollowUs";
import ContactCTA from "./ContactCTA";
import PageHero from "@/components/PageHero";
import ContactFormSection from "./ContactFormSection";
export const dynamic = "force-dynamic";
/* ---------- Media ---------- */
export type MediaNode = {
  sourceUrl: string;
  altText?: string | null;
};

/* ---------- Help Items ---------- */
export type HelpItems = {
  item1?: string | null;
  item2?: string | null;
  item3?: string | null;
  item4?: string | null;
  item5?: string | null;
  item6?: string | null;
};

/* ---------- Why Items ---------- */
export type WhyItems = {
  items1?: string | null;
  items2?: string | null;
  items3?: string | null;
  items4?: string | null;
};

/* ---------- Social Links ---------- */
export type SocialLinks = {
  facebookText?: string | null;
  facebookLink?: string | null;
  instagramText?: string | null;
  instagramLink?: string | null;
  xText?: string | null;
  xLink?: string | null;
  linkedinText?: string | null;
  linkedinLink?: string | null;
  youtubeText?: string | null;
  youtubeLink?: string | null;
  telegramText?: string | null;
  telegramLink?: string | null;
  whatsappText?: string | null;
  whatsappLink?: string | null;
};
type WPImage = {
  node?: {
    sourceUrl?: string | null;
    altText?: string | null;
  } | null;
} | null;

/* ---------- Main Contact Approach ---------- */
export type ContactApproach = {
  approachSubtitle?: string | null;
  approachTitle?: string | null;
  approachDescription?: string | null;
  approachButtonText?: string | null;
  approachButtonLink?: string | null;
  approachImage?: WPImage;

  helpSubtitle?: string | null;
  helpTitle?: string | null;
  helpItems?: HelpItems | null;

  contactFormTitle?: string | null;
  getTouchTitle?: string | null;
  getTouchDescription?: string | null;
  generalText?: string | null;
  emailFields?: string | null;
  phoneNumberFields?: number | null;
  addressFields?: string | null;
  contactImage?: WPImage;

  whyTitle?: string | null;
  whyItems?: WhyItems | null;

  careersTitle?: string | null;
  careersDescription?: string | null;
  careersEmailFields?: string | null;
  careersButtonText?: string | null;
  careersButtonLink?: string | null;
  backgroundImageUrl?: WPImage;

  followSubtitle?: string | null;
  followTitle?: string | null;
  socialLinks?: SocialLinks | null;

  ctaTitle?: string | null;
  ctaButtonText?: string | null;
  ctaButtonLink?: string | null;
  ctaBackgroundImage?: WPImage;
};


/* ---------- Page ---------- */
export type ContactPageData = {
  title: string;
  uri: string;
  contactApproach: ContactApproach;
};

const CONTACT_PAGE_QUERY = gql`
  query ContactPage {
    pageBy(uri: "contact") {
      title
      uri

      seo {
        title
        metaDesc
        canonical
        opengraphTitle
        opengraphDescription
        opengraphImage {
          sourceUrl
        }
      }

      contactApproach {
        approachSubtitle
        approachTitle
        approachDescription
        approachButtonText
        approachButtonLink
        approachImage {
          node {
            sourceUrl
            altText
          }
        }

        helpSubtitle
        helpTitle
        helpItems {
          item1
          item2
          item3
          item4
          item5
          item6
        }

        contactFormTitle
        getTouchTitle
        getTouchDescription
        generalText
        emailFields
        phoneNumberFields
        addressFields
        contactImage {
          node {
            sourceUrl
            altText
          }
        }

        whyTitle
        whyItems {
          items1
          items2
          items3
          items4
        }

        careersTitle
        careersDescription
        careersEmailFields
        careersButtonText
        careersButtonLink
        backgroundImageUrl {
          node {
            sourceUrl
          }
        }

        followSubtitle
        followTitle
        socialLinks {
          facebookText
          facebookLink
          instagramText
          instagramLink
          xText
          xLink
          linkedinText
          linkedinLink
          youtubeText
          youtubeLink
          telegramText
          telegramLink
          whatsappText
          whatsappLink
        }

        ctaTitle
        ctaButtonText
        ctaButtonLink
        ctaBackgroundImage {
          node {
            sourceUrl
          }
        }
      }
    }
  }
`;
type YoastSEO = {
  title?: string | null;
  metaDesc?: string | null;
  canonical?: string | null;
  opengraphTitle?: string | null;
  opengraphDescription?: string | null;
  opengraphImage?: {
    sourceUrl?: string | null;
  } | null;
};

type ContactPageQueryResponse = {
  pageBy: (ContactPageData & {
    seo?: YoastSEO | null;
  }) | null;
};
import { Metadata } from "next";

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

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

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

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

    title: seo?.title || "Contact | Togwe",

    description:
      seo?.metaDesc ||
      "Contact Togwe to build scalable digital solutions.",

    alternates: {
      canonical,
    },

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


export default async function ContactPage() {
  const { data } = await getClient().query<ContactPageQueryResponse>({
    query: CONTACT_PAGE_QUERY,
  });

  if (!data?.pageBy) {
    return null; // or notFound()
  }

  const { title, contactApproach } = data.pageBy;

  return (
    <>
      <PageHero title={title} />
      <ContactApproach data={contactApproach} />
      <HelpSolutions data={contactApproach} />
      <ContactFormSection data={contactApproach} />
      <WhyReachOut data={contactApproach} />
      <CareersCTA data={contactApproach} />
      <FollowUs data={contactApproach} />
      <ContactCTA data={contactApproach} />
    </>
  );
}