"use client";

import { PageHero } from "@/views/shared";
import { TextImageSection } from "@/components/text-image-section";
import { IncludesServices, KeyBenefits } from "@/views/services";
import { CTASection } from "@/views/shared/CtaSection";
import { useMemo } from "react";
import { useLocale } from "next-intl";

type Service = {
  slug: string;
  title_en?: string;
  title_ar?: string;
  intro_title_en?: string;
  intro_title_ar?: string;
  intro_highlight_en?: string;
  intro_highlight_ar?: string;
  intro_body_en?: string;
  intro_body_ar?: string;
  includes_title_en?: string;
  includes_title_ar?: string;
  includes_en?: string[];
  includes_ar?: string[];
  benefits_title_en?: string;
  benefits_title_ar?: string;
  benefits_en?: string[];
  benefits_ar?: string[];
  why_title_en?: string;
  why_title_ar?: string;
  why_body_en?: string;
  why_body_ar?: string;
  cta_text_en?: string;
  cta_text_ar?: string;
  cta_button_en?: string;
  cta_button_ar?: string;
  images?: {
    hero?: string;
    intro?: string;
    content?: string;
    cta?: string;
  };
};

const getLocalizedValue = (lang: string, en?: string, ar?: string): string => {
  if (lang === "ar") {
    return ar ?? en ?? "";
  }
  return en ?? ar ?? "";
};

interface ServicePageProps {
  service: Service;
}

export const ServicePage = ({ service }: ServicePageProps) => {
  const locale = useLocale();
  const title = getLocalizedValue(locale, service?.title_en, service?.title_ar);
  const breadcrumbs = useMemo(
    () => [
      { label: locale === "ar" ? "الرئيسية" : "Home", href: `/${locale}` },
      {
        label: locale === "ar" ? "خدماتنا" : "Services",
        href: `/${locale}/services`,
      },
      { label: title, isCurrent: true },
    ],
    [locale, title]
  );

  const introTitle = getLocalizedValue(
    locale,
    service?.intro_title_en,
    service?.intro_title_ar
  );
  const introHighlight = getLocalizedValue(
    locale,
    service?.intro_highlight_en,
    service?.intro_highlight_ar
  );
  const introBody = getLocalizedValue(
    locale,
    service?.intro_body_en,
    service?.intro_body_ar
  );

  const includesTitle = getLocalizedValue(
    locale,
    service?.includes_title_en,
    service?.includes_title_ar
  );
  const includes = (service?.includes_en || []).map((text_en, index) => ({
    text_en,
    text_ar: service?.includes_ar?.[index] ?? text_en,
  }));

  const benefitsTitle = getLocalizedValue(
    locale,
    service?.benefits_title_en,
    service?.benefits_title_ar
  );
  const benefits = (service?.benefits_en || []).map((text_en, index) => ({
    text_en,
    text_ar: service?.benefits_ar?.[index] ?? text_en,
  }));

  const whyTitle = getLocalizedValue(
    locale,
    service?.why_title_en,
    service?.why_title_ar
  );
  const whyBody = getLocalizedValue(
    locale,
    service?.why_body_en,
    service?.why_body_ar
  );

  const ctaDescription = getLocalizedValue(
    locale,
    service?.cta_text_en,
    service?.cta_text_ar
  );
  const ctaButton = getLocalizedValue(
    locale,
    service?.cta_button_en,
    service?.cta_button_ar
  );

  return (
    <>
      <PageHero
        title={title}
        backgroundImage={service?.images?.hero ?? "/images/home/slide-1.jpg"}
        breadcrumbs={breadcrumbs}
      />

      <TextImageSection
        className="py-10 md:py-16"
        title={introTitle}
        subTitle={introHighlight}
        textList={[introBody]}
        image={service?.images?.intro!}
      />

      <IncludesServices
        title={includesTitle}
        includes={includes}
        locale={locale}
      />

      <KeyBenefits title={benefitsTitle} benefits={benefits} locale={locale} />

      <TextImageSection
        className="py-10 md:py-16"
        title={whyTitle}
        textList={[whyBody]}
        image={service?.images?.content!}
        isRowReverse
      />

      <CTASection
        title={"Get Started"}
        description={ctaDescription}
        buttonLabel={ctaButton}
        buttonHref={`/${locale}/contact`}
        backgroundImage={service?.images?.cta ?? "/images/home/slide-2.jpg"}
      />
    </>
  );
};
