import type { GetServerSideProps, NextPage } from 'next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { Fragment, useEffect, useState } 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 Sidebar from '@/components/organisms/blogs/Sidebar';
import banner from '@/../public/images/blogs/banner-blog.webp';
import Highlights from '@/components/organisms/blogs/Highlights';
import Grid from '@/components/organisms/blogs/Grid';
import Pagination from '@/components/organisms/blogs/Pagination';
import { getArchieves, getCategories, getTags } from '@/data/blogs'; 
import { useRouter } from 'next/router';

import Head from 'next/head';
import Image from 'next/image';
import { getCities } from '@/data/cities';

type PageProps = {
  cities: any;
  categories?: any[];
  tags?: any[];
  archieves?: any[];
  highlightsBlogs?: any[];
  locale: string
};

const Page: NextPage<PageProps> = ({ cities, categories, archieves, tags, highlightsBlogs, locale }) => {
  const { t } = useTranslation(['common', 'blog']);
  const router = useRouter();
  const { tag, category, archieve, search } = router?.query;
  const [totalPages, setTotalPages] = useState(1);
  const [currentPage, setCurrentPage] = useState(1);
  const [blogs, setBlogs] = useState<any>([]);
  const [loading, setLoading] = useState(true);

  // Función para remover las etiquetas de HTML de los extractos y títulos (Evita problemas de texto plano)
  const stripHtml = (htmlString: string) => {
    if (!htmlString) return '';
    return htmlString.replace(/<\/?[^>]+(>|$)/g, "");
  };

  const mapWordPressPosts = (posts: any[]) => {
    return posts.map((post: any) => ({
      id: post.id,
      // Usamos stripHtml para limpiar caracteres raros de WordPress
      title: stripHtml(post.title?.rendered),
      excerpt: stripHtml(post.excerpt?.rendered),
      image: post._embedded?.['wp:featuredmedia']?.[0]?.source_url || '/images/blogs/banner-blog.webp',
      slug: post.slug,
      date: post.date,
      externalLink: post.link 
    }));
  };

  const fetchData = async () => {
    try {
      setLoading(true);
      let url = `https://horizonte.grupovelas.com/wp-json/wp/v2/posts?_embed&per_page=4&page=${currentPage}`;
      
      if (search) {
        url += `&search=${encodeURIComponent(String(search))}`;
      }
      
      const res = await fetch(url);
      if (!res.ok) throw new Error("Error fetching WP data");
      
      const wpTotalPages = res.headers.get('X-WP-TotalPages');
      if (wpTotalPages) {
        setTotalPages(parseInt(wpTotalPages, 10));
      }

      const data = await res.json();
      setBlogs(mapWordPressPosts(data));
    } catch (error) {
      console.error("Error cargando posts de WordPress:", error);
      setBlogs([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (!loading) {
      fetchData();
    }
  }, [tag, category, archieve, currentPage, search, locale]);

  useEffect(() => {
    fetchData();
  }, []);

  let metaTitle = t('blog:metas.title');
  let metaDescription = t('blog:metas.description');
  if (archieve) {
    metaTitle += ` | ${archieve}`;
    metaDescription += ` ${t('blog:metas.discover')} ${archieve}.`;
  }

  if (tag) {
    metaTitle += ` | ${tag}`;
    metaDescription += ` ${t('blog:metas.explore')} ${tag}.`;
  }

  if (category) {
    metaTitle += ` | ${category}`;
    metaDescription += `${t('blog:metas.readMore')} ${category}.`;
  }

  if (search) {
    metaTitle += ` | ${t('blog:metas.results')} "${search}"`;
    metaDescription += `${t('blog:metas.results')} "${search}".`;
  }

  return (
    <Fragment>
      <Head>
        <title>{metaTitle}</title>
        <meta name="description" content={metaDescription} />
      </Head>
      <Header categories={cities} />
      <Image src={banner} alt="banner blog " className="tw-h-[372px] tw-object-cover tw-w-full" />

      <section className="wrapper bg-light">
        <div className="container pt-14 pt-md-16 pb-8">
          <div className="row gx-lg-8 gx-xl-12">
            
            <div className="col-lg-8">
              {loading ? (
                <div className="text-center py-5">Cargando notas...</div>
              ) : (
                <Fragment>
                  <Highlights blogs={highlightsBlogs} />
                  <Grid blogs={blogs} />
                  {blogs && blogs?.length ? (
                    <Pagination
                      totalPages={totalPages}
                      currentPage={currentPage}
                      onPageChange={(page) => setCurrentPage(page)}
                    />
                  ) : (
                    <div className="text-center py-5">No se encontraron notas.</div>
                  )}
                </Fragment>
              )}
            </div>

            <aside className="col-lg-4 sidebar mt-8 mt-lg-6">
              <Sidebar categories={categories} tags={tags} archieves={archieves} />
            </aside>
          </div>
        </div>
      </section>

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

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { locale, query } = context;
  const { tag, category, archieve, search } = query;
  
  const categories = (await getCategories(locale)) || [];
  const tags = (await getTags(locale)) || [];
  const archieves = (await getArchieves(locale)) || [];
  const cities = await getCities(locale);

  // Helper para limpiar HTML en el lado del servidor también
  const stripHtml = (htmlString: string) => {
    if (!htmlString) return '';
    return htmlString.replace(/<\/?[^>]+(>|$)/g, "");
  };

  let highlightsBlogs: any[] = [];
  try {
    const wpHighlightsRes = await fetch('https://horizonte.grupovelas.com/wp-json/wp/v2/posts?_embed&per_page=3');
    if (wpHighlightsRes.ok) {
      const wpHighlightsData = await wpHighlightsRes.json();
      highlightsBlogs = wpHighlightsData.map((post: any) => ({
        id: post.id,
        title: stripHtml(post.title?.rendered),
        excerpt: stripHtml(post.excerpt?.rendered),
        image: post._embedded?.['wp:featuredmedia']?.[0]?.source_url || '/images/blogs/banner-blog.webp',
        slug: post.slug,
        date: post.date,
        externalLink: post.link
      }));
    }
  } catch (error) {
    console.error("Error recuperando destacados de WP:", error);
  }

  return {
    props: {
      ...(await serverSideTranslations(locale ?? 'es', ['common', 'routes', 'blog'])),
      categories,
      archieves,
      tags,
      highlightsBlogs,
      cities,
      locale
    }
  };
};

export default Page;