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 Newsletter from '@/components/templates/layout/Newsletter';
import Head from 'next/head';
import { getProjects } from '@/data/projects';
import { getCities, getCity } from '@/data/cities';
import Welcome from '@/components/organisms/layout/Welcome';
import BannerSliderWithprojects from '@/components/templates/layout/BannerSliderWithCities';
import MapWithCities from '@/components/templates/layout/MapWithCities';
import ProjectsCarousel from '@/components/templates/layout/ProjectsCarousel';
import ArticlesCarouselWithtext from '@/components/templates/layout/ArticlesCarouselWithtext';
import WelcomeImage from '@/components/organisms/cities/WelcomeImage';
import MarbellaMilosBanner from '@/components/organisms/cities/MarbellaMilosBanner';

const TAMPICO_SLUGS = ['venta-de-casas-tampico', 'houses-for-sale-tampico-tamaulipas-real-estate'];
const TAMPICO_PROJECTS_PRIORITY = ['torre-milos', 'torre-829', 'townhouses-velamar-ii'];

type PageProps = { cities: any; projects: any; articles: any; city: any };
const Page: NextPage<PageProps> = ({ cities, projects, articles, city }) => {
  const { t } = useTranslation(['common', 'locations']);
  const isTampico = TAMPICO_SLUGS.includes(city?.slug);

  const welcomeBlock =
    city?.welcomePreTitle || city?.welcomeTitle || city?.welcomeText ? (
      <Welcome
        preTitle={city?.welcomePreTitle}
        title={city?.welcomeTitle}
        tagTitle="h2"
        paragraph={city?.welcomeText}
        cta={{
          href: 'projects-section',
          text: t('locations:welcome.cta'),
          isScroll: true
        }}
        image={city?.welcomeMap}
      />
    ) : (
      ''
    );

  const welcomeImageBlock = city?.welcomeImage ? <WelcomeImage image={city?.welcomeImage} /> : '';

  const mapWithCitiesBlock = (
    <MapWithCities
      preTitle={t('locations:cities.preTitle')}
      title={t('locations:cities.title')}
      text={t('locations:cities.text')}
      cities={cities}
    />
  );

  const projectsBlock =
    projects && Array?.isArray(projects) && projects?.length ? (
      <ProjectsCarousel
        projects={projects}
        cities={cities}
        activeCity={city?.slug}
        priorityOrder={isTampico ? TAMPICO_PROJECTS_PRIORITY : undefined}
      />
    ) : (
      ''
    );

  return (
    <Fragment>
      <Head>
        <title>{city?.metaTitle || t('locations:metas.title')}</title>
        <meta name="description" content={city?.metaDescription || t('locations:metas.description')} />
        <meta name="keywords" content={city?.metaKeywords || t('locations:metas.keywords')} />
      </Head>
      <Header categories={cities} slug={city?.localizations[0]?.slug || city?.slug} />
      <BannerSliderWithprojects
        isSmaller={true}
        hero={{
          preTitle: city?.sliderPreTitle || '',
          title: city?.sliderTitle || '',
          tagTitle: 'h1'
        }}
        items={city?.sliderImages}
      />
      {isTampico ? (
        <Fragment>
          <MarbellaMilosBanner />
          {projectsBlock}
          {welcomeBlock}
        </Fragment>
      ) : (
        <Fragment>
          {welcomeBlock}
          {welcomeImageBlock}
          {mapWithCitiesBlock}
          {projectsBlock}
        </Fragment>
      )}
      {isTampico ? (
        <Fragment>
          {welcomeImageBlock}
          {mapWithCitiesBlock}
        </Fragment>
      ) : (
        ''
      )}

      {/* El carrusel ahora recibirá los artículos limpios de WordPress */}
      {(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 (context) => {
  const { locale, query } = context;
  const { slug } = query;
  const city: any = await getCity({ locale, slug });
  
  if (!city) {
    return {
      redirect: {
        destination: locale === 'es' ? '/404' : '/en/404',
        permanent: false
      }
    };
  }

  const cities = await getCities(locale);
  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 ciudad:', error);
    articles = [];
  }

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

export default Page;