import { fetchGraphQL } from "@/lib/graphql";
import Hero from "./sections/Hero";
import Overview from "./sections/Overview";
import ProjectDetails from "./sections/ProjectDetails";
import DevelopmentTeam from "./sections/DevelopmentTeam";
import Features from "./sections/Features";
import DevelopmentProcess from "./sections/DevelopmentProcess";
import Results from "./sections/Results";
import GetInTouch from "@/components/GetInTouch";
import CaseStudyFeatures from "./sections/CaseStudyFeatures";

const QUERY = `
query SingleCase($slug: String!) {
  caseStudies(where: { name: $slug }) {
    nodes {
      title
      slug

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

      caseStudyFields {
        clientLogo { node { sourceUrl altText } }
        platform
        appScreenshotImage { node { sourceUrl altText } }

        overviewSubtitle
        overviewTitle
        overviewDescription
        overviewFullImage { node { sourceUrl altText } }

        projectIdea
        projectDescription
        projectChallenges
        challengesDescription
        projectResults
        resultsDescription
        iphoneScreenImage { node { sourceUrl altText } }

        developmentTitle
        developmentDescription
        resourcesLabel
        resourcesMembers
        timeLabel
        months

        featuresSubtitle
        featuresTitle
        featuresItems {
          items1 items2 items3 items4 items5 items6 items7 items8
        }
        featuresImage { node { sourceUrl altText } }

        developmentProcessTitle
        planningLabel
        planningItems { items1 items2 items3 }
        designLabel
        designItems { items1 items2 items3 items4 }
        developmentLabel
        developmentItems { items1 items2 items3 }
        testingLabel
        testingItems { items1 items2 items3 }
        launchLabel
        launchItems { items1 items2 items3 }
        maintenanceLabel
        maintenanceItems { items1 items2 items3 }

        resultsSubtitle
        resultsTitle
        featureItems {
          featureLabel1 featureContent1
          featureLabel2 featureContent2
          featureLabel3 featureContent3
          featureLabel4 featureContent4
          featureLabel5 featureContent5
        }
        resultsImage { node { sourceUrl altText } }
        featureTopImage { node { sourceUrl altText } }
        featureFirstImage { node { sourceUrl altText } }
        featureFirstTitle
        featureFirstDescription
        featureSecondTitle
        featureSecondDescription
        featureSecondImage { node { sourceUrl altText } }
        featureThirdImage { node { sourceUrl altText } }
        featureThirdTitle
        featureThirdDescription
      }
    }
  }
}
`;

type YoastSEO = {
  title?: string | null;
  metaDesc?: string | null;
  canonical?: string | null;
  opengraphTitle?: string | null;
  opengraphDescription?: string | null;
  opengraphImage?: {
    sourceUrl?: string | null;
  } | null;
};

import { Metadata } from "next";

export async function generateMetadata(
  { params }: { params: Promise<{ slug: string }> }
): Promise<Metadata> {

  const { slug } = await params;
  const data = await fetchGraphQL(QUERY, { slug });

  const cs = data?.caseStudies?.nodes?.[0];
  const seo: YoastSEO | undefined = cs?.seo;

  if (!seo) {
    return { title: "Case Study Not Found" };
  }

  return {
    title: seo.title || undefined,
    description: seo.metaDesc || undefined,
    alternates: {
      canonical: seo.canonical || undefined,
    },
    openGraph: {
      title: seo.opengraphTitle || seo.title || undefined,
      description:
        seo.opengraphDescription || seo.metaDesc || undefined,
      images: seo.opengraphImage?.sourceUrl
        ? [{ url: seo.opengraphImage.sourceUrl }]
        : [],
    },
  };
}


export default async function CaseStudyDetail({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const data = await fetchGraphQL(QUERY, { slug });
  const cs = data.caseStudies.nodes[0];

  if (!cs) return <div className="py-32 text-center">Not Found</div>;

  return (
    <>
      <Hero title={cs.title} data={cs.caseStudyFields} />
      <Overview data={cs.caseStudyFields} />
      <ProjectDetails data={cs.caseStudyFields} />
      <DevelopmentTeam data={cs.caseStudyFields} />
      <Features data={cs.caseStudyFields} />
      <DevelopmentProcess data={cs.caseStudyFields} />
      <Results data={cs.caseStudyFields} />
      <CaseStudyFeatures data={cs.caseStudyFields} />
      <GetInTouch />
    </>
  );
}