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 ArticlesCarouselWithtext from '@/components/templates/layout/ArticlesCarouselWithtext';

import Head from 'next/head';
import { getReviews } from '@/data/reviews';
import Reviews from '@/components/templates/layout/Reviews';
import BannerSliderWithprojects from '@/components/templates/layout/BannerSliderWithCities';
import Welcome from '@/components/organisms/layout/Welcome';
import MapWithCities from '@/components/templates/layout/MapWithCities';
import { getCities } from '@/data/cities';
import { getProjects } from '@/data/projects';
import ProjectsGrid from '@/components/templates/layout/ProjectsGrid';
import ContactForm from '@/components/organisms/projects/ContactForm';

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

  return (
    <Fragment>
      <Head>
        <title>{t('projects:metas.title')}</title>
        <meta name="description" content={t('projects:metas.description')} />
        <meta name="keywords" content={t('projects:metas.keywords')} />
      </Head>
      <Header categories={cities} />
      <BannerSliderWithprojects
        isSmaller={true}
        hero={{
          title: t('projects:banner.title'),
          preTitle: t('projects:banner.preTitle')
        }}
        items={[
          {
            image: {
              url: '/images/projects/01-Sider-Proyectos.webp',
              height: 1060,
              width: 2400
            }
          },
          {
            image: {
              url: '/images/projects/02-Sider-Proyectos.webp',
              height: 1060,
              width: 2400
            }
          },
          {
            image: {
              url: '/images/projects/03-Sider-Proyectos.webp',
              height: 1060,
              width: 2400
            }
          },
          {
            image: {
              url: '/images/projects/04-Sider-Proyectos.webp',
              height: 1060,
              width: 2400
            }
          }
        ]}
      />
      <Welcome
        preTitle={t('projects:welcome.pretitle')}
        title={t('projects:welcome.title')}
        paragraph={t('projects:welcome.text')}
      />
      <ProjectsGrid projects={projects} cities={cities} />
      <ContactForm trans={t} cities={cities} />
      <MapWithCities
        preTitle={t('projects:cities.preTitle')}
        title={t('projects:cities.title')}
        text={t('projects:cities.text')}
        cities={cities}
      />
      {(reviews && reviews?.length && <Reviews items={reviews} />) || ''}
      {(articles && articles?.length && (
        <ArticlesCarouselWithtext
          articles={articles}
          preTitle={t('projects:blog.preTitle')}
          title={t('projects:blog.title')}
        />
      )) ||
        ''}
      <Newsletter />
      <Footer cities={cities} />
    </Fragment>
  );
};
export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
  const reviews = (await getReviews({ locale: locale })) || [];
  const cities = await getCities(locale);
  const projects: any = await getProjects({
    locale: locale,
    otherQueries: {
      showOnProjects: { $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 developments:', error);
    articles = [];
  }

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