import type { GetServerSideProps, GetStaticProps, NextPage } from 'next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { Fragment } from 'react';
import { useTranslation } from 'next-i18next';
import Header from '@/components/templates/layout/header';
import Footer from '@/components/templates/layout/Footer';
import Newsletter from '@/components/templates/layout/Newsletter';

import Head from 'next/head';

import { getProjects } from '@/data/projects';
import { getReviews } from '@/data/reviews';
import { getCities } from '@/data/cities';
import CitiesCarouselDark from '@/components/templates/layout/CitiesCarouselDark';
import Reviews from '@/components/templates/layout/Reviews';
import Facts from '@/components/templates/layout/Facts';
import Welcome from '@/components/organisms/layout/Welcome';
import BannerSliderWithprojects from '@/components/templates/layout/BannerSliderWithCities';
import Values from '@/components/templates/aboutUs/Values';
import MapWithCities from '@/components/templates/layout/MapWithCities';
import ProjectsCarousel from '@/components/templates/layout/ProjectsCarousel';
//import { getOtherBlogs } from '@/data/blogs';
import ArticlesCarouselWithtext from '@/components/templates/layout/ArticlesCarouselWithtext';


type PageProps = { cities: any; reviews: any; projects: any; articles: any };
const Page: NextPage<PageProps> = ({ cities, reviews, projects, articles }) => {
  const { t } = useTranslation(['common', 'locations']);

  return (
    <Fragment>
      <Head>
        <title>{t('locations:metas.title')}</title>
        <meta name="description" content={t('locations:metas.description')} />
        <meta name="keywords" content={t('locations:metas.keywords')} />
      </Head>
      <Header categories={cities} />
      <BannerSliderWithprojects
        isSmaller={true}
        hero={{
          title: t('locations:banner.title'),
          preTitle: t('locations:banner.preTitle')
        }}
        items={[
          {
            image: {
              url: '/images/locations/Cancun.webp',
              height: 2600,
              width: 1462
            }
          }, {
            image: {
              url: '/images/locations/Ciudad-Juarez.webp',
              height: 2600,
              width: 1462
            },

          },
          {
            image: {
              url: '/images/locations/Los-Cabos.webp',
              height: 2600,
              width: 1462
            },

          }, {
            image: {
              url: '/images/locations/Playa-del-Carmen.webp',
              height: 2600,
              width: 1462
            },

          }, {
            image: {
              url: '/images/locations/Queretaro.webp',
              height: 2600,
              width: 1462
            },

          }, {
            image: {
              url: '/images/locations/Reynosa.webp',
              height: 2600,
              width: 1462
            },

          }, {
            image: {
              url: '/images/locations/Tampico.webp',
              height: 2600,
              width: 1462
            },

          }
        ]}
      />
      <Welcome
        preTitle={t('locations:welcome.preTitle')}
        title={t('locations:welcome.title')}
        paragraph={t('locations:welcome.text')}
        cta={{
          href: t('routes:/developments'),
          text: t('locations:welcome.cta')
        }}
      />
      <MapWithCities
        preTitle={t('locations:cities.preTitle')}
        title={t('locations:cities.title')}
        text={t('locations:cities.text')}
        cities={cities}
      />
      {projects && Array?.isArray(projects) && projects?.length ? (
        <ProjectsCarousel projects={projects} cities={cities} />
      ) : (
        ''
      )}
      <Facts
        background="tw-bg-white"
        title={t('locations:facts.title')}
        preTitle={t('locations:facts.preTitle')}
        text={t('locations:facts.text')}
      />
      {(reviews && reviews?.length && <Reviews items={reviews} />) || ''}{' '}
      <div className='container tw-h-[70vh]'>
        <iframe
          src="https://www.google.com/maps/d/u/3/embed?mid=1UaAOVEcOgp5PsKkwHu66DV3lQXlq5aU&ehbc=2E312F&noprof=1"
          width="640"
          height="480"
          className="tw-w-full tw-h-full cities-map"
        ></iframe>
      </div>
      {(articles && articles?.length && (
        <ArticlesCarouselWithtext
          articles={articles}
          preTitle={t('locations:blog.preTitle')}
          title={t('locations:blog.title')}
        />
      )) ||
        ''}
      <Newsletter />
      <Footer cities={cities} />
    </Fragment>
  );
};
export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
  const cities = await getCities(locale);
  const reviews = (await getReviews({ locale: locale, showOnLocations: true })) || [];
  const projects: any = await getProjects({
    locale: locale,
    otherQueries: {
      showOnHome: { $eq: true }
    }
  });

  const stripHtml = (htmlString: string) => {
    if (!htmlString) return '';
    return htmlString.replace(/<\/?[^>]+(>|$)/g, '');
  };

  let articles: any[] = [];
  try {
    const wpRes = await fetch('https://horizonte.grupovelas.com/wp-json/wp/v2/posts?_embed&per_page=4');
    if (wpRes.ok) {
      const wpData = await wpRes.json();
      articles = wpData.map((post: any) => {
        let featuredImage = '/images/blogs/banner-blog.webp';
        if (post._embedded?.['wp:featuredmedia']?.[0]) {
          featuredImage = post._embedded['wp:featuredmedia'][0].source_url || featuredImage;
        }
        return {
          id: post.id,
          title: stripHtml(post.title?.rendered || ''),
          excerpt: stripHtml(post.excerpt?.rendered || ''),
          image: featuredImage,
          slug: post.slug,
          date: post.date,
          externalLink: post.link || post.guid?.rendered || '#'
        };
      });
    }
  } catch (error) {
    console.error('Error al obtener artículos de WP para locations:', error);
    articles = [];
  }

  return {
    props: {
      ...(await serverSideTranslations(locale ?? 'es', ['common', 'routes', 'locations'])),
      cities,
      reviews,
      projects,
      articles
    }
  };
};
export default Page;
