import type { GetServerSideProps, 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 Reviews from '@/components/templates/layout/Reviews';
import { getReviews } from '@/data/reviews';
import Newsletter from '@/components/templates/layout/Newsletter';
import { getProjects } from '@/data/projects';
import Head from 'next/head';
import ArticlesCarouselWithtext from '@/components/templates/layout/ArticlesCarouselWithtext';
import ProjectsCarousel from '@/components/templates/layout/ProjectsCarousel';
import { getCities } from '@/data/cities';
import CitiesCarouselDark from '@/components/templates/layout/CitiesCarouselDark';
import Welcome from '@/components/organisms/layout/Welcome';
import Facts from '@/components/templates/layout/Facts';
import VideoBanner from '@/components/templates/home/VideoBanner';
import BannerVideoWithProjects from '@/components/templates/layout/BannerVideoWithProjects';
import { getPageBySlug } from '@/data/pages';

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

  return (
    <Fragment>
      <Head>
        <title>{pageData?.metaTitle || t('home:metas.title')}</title>
        <meta name="description" content={pageData?.metaDescription || t('home:metas.description')} />
        <meta name="keywords" content={pageData?.metaKeywords || t('home:metas.keywords')} />
      </Head>
      <Header categories={cities} />

      <BannerVideoWithProjects
        hero={{
          title: pageData?.mainBannerTitle || t('home:banner.title'),
          preTitle: pageData?.mainBannerPreTitle || t('home:banner.preTitle'),
          tagPreTitle: 'h1',
          tagTitle: 'h2'
        }}
        projects={projects}
        videoUrl={pageData?.mainBannerVideo?.url || '/videos/GrupoVelas-Desarrollos.mp4'}
      />

      <Welcome
        preTitle={pageData?.welcomeHero?.title || t('home:welcome.preTitle')}
        paragraph={pageData?.welcomeHero?.text || t('home:welcome.text')}
        image={
          pageData?.welcomeImage || {
            src: t('home:welcome.image'),
            width: 192,
            height: 202
          }
        }
        cta={{
          href: t('routes:/about-us'),
          text: t('home:welcome.cta'),
          classNames: 'mt-md-14'
        }}
      />
      <VideoBanner src={pageData?.welcomeVideo?.url || ''} />
      <Facts
        facts={pageData?.numeraliaFacts}
        title={pageData?.numeraliaHero?.title}
        preTitle={pageData?.numeraliaHero?.preTitle}
        text={pageData?.numeraliaHero?.text}
      />
      {projects && Array?.isArray(projects) && projects?.length ? (
        <ProjectsCarousel
          projects={projects}
          cities={cities}
          title={pageData?.projectsHero?.title}
          preTitle={pageData?.projectsHero?.preTitle}
        />
      ) : (
        ''
      )}

      {(cities && Array?.isArray(cities) && cities?.length && (
        <CitiesCarouselDark
          cities={cities}
          preTitle={pageData?.citiesHero?.preTitle || t('common:cities.preTitle')}
          title={pageData?.citiesHero?.title || t('common:cities.title')}
        />
      )) ||
        ''}
      {(reviews && reviews?.length && (
        <Reviews items={reviews} title={pageData?.reviewsHero?.title} preTitle={pageData?.reviewsHero?.preTitle} />
      )) ||
        ''}
      
      {/* Carrusel de blogs adaptado para WordPress */}
      {(articles && Array?.isArray(articles) && articles?.length && (
        <ArticlesCarouselWithtext
          articles={articles}
          preTitle={pageData?.blogsHero?.preTitle || t('home:blogs.preTitle')}
          title={pageData?.blogsHero?.title || t('home:blogs.title')}
        />
      )) ||
        ''}
      <Newsletter title={pageData?.newsletterHero?.title} text={pageData?.newsletterHero?.text} />

      <Footer cities={cities} />
    </Fragment>
  );
};

export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
  const pageData: any = await getPageBySlug(locale, 'home');
  const reviews = (await getReviews({ locale: locale, showOnHome: true })) || [];
  const projects: any = await getProjects({
    locale: locale,
    otherQueries: {
      showOnHome: { $eq: true }
    }
  });
  const cities = await getCities(locale);

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

  let articles: any[] = [];
  try {
    // Consultamos las últimas 3 notas globales de Horizonte incluyendo el parámetro _embed
    const wpRes = await fetch('https://horizonte.grupovelas.com/wp-json/wp/v2/posts?_embed&per_page=3');
    if (wpRes.ok) {
      const wpData = await wpRes.json();
      
      articles = wpData.map((post: any) => {
        // CORRECCIÓN CRÍTICA: Extracción ultra-segura de la imagen destacada propia de este post
        let featuredImage = '/images/blogs/banner-blog.webp'; // Respaldo por defecto
        
        if (post._embedded && post._embedded['wp:featuredmedia'] && 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, // Asignamos su imagen correspondiente real
          slug: post.slug,
          date: post.date,
          externalLink: post.link || post.guid?.rendered || '#' // Inyectamos la URL externa real de la nota en Horizonte
        };
      });
    }
  } catch (error) {
    console.error("Error al obtener artículos de WordPress para el Home:", error);
    articles = [];
  }

  return {
    props: {
      ...(await serverSideTranslations(locale ?? 'es', ['common', 'routes', 'inventory', 'home'])),
      reviews,
      articles, 
      projects,
      cities,
      pageData
    }
  };
};

export default Page;