'use client'

import { FaSearch } from "react-icons/fa";

import Image from "next/image";

import iconCalendario from "../../../../../../public/assets/Images/Icons/icon_calendario.svg";
import timePost from "../../../../../../public/assets/Images/Icons/timePost.svg";
import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { getDataBlogMaisAcessados, getDataBlogMaisRecentes } from "@/actions/pageBlogAction";
import { useCredentialContext } from "@/hooks/credenciado";
import moment from "moment";
import { API_URL } from "@/utils/constants/selectConstants";
import useDeviceType from "@/utils/getDeviceType";
import { limitarHTML } from "@/utils/functions";
import Loading from "@/app/loading";

export default function MostRecenAndMostReadt() {
    const { postMaisRecente, setPostMaisRecente, postMaisAcessados, setPostMaisAcessados } = useCredentialContext();
    const deviceType = useDeviceType();
    const router = useRouter();
    const [searchQuery, setSearchQuery] = useState('');
    const [imgLoaded, setImgLoaded] = useState(false);
    const [imgLoadedBanner, setImgLoadedBanner] = useState(false);

    const imagemUrl = postMaisRecente?.SitePostsImagem ? `${API_URL}BuscarImagem.php?Imagem=${postMaisRecente?.SitePostsImagem}` : '';
    const imagemUrlMob = postMaisRecente?.SitePostsImagemMobile ? `${API_URL}BuscarImagem.php?Imagem=${postMaisRecente?.SitePostsImagemMobile}` : '';

    useEffect(() => {
        (async () => {
            let responseMaisRecentes = await getDataBlogMaisRecentes();
            if (responseMaisRecentes) {
                setPostMaisRecente(responseMaisRecentes.Dados[1]);
            }

            let responseMaisAcessados = await getDataBlogMaisAcessados();
            if (responseMaisAcessados) {
                setPostMaisAcessados(responseMaisAcessados);
            }
        })()
    }, [setPostMaisRecente, setPostMaisAcessados]);

    const posts = (Array.isArray(postMaisAcessados) ? postMaisAcessados : Object.values(postMaisAcessados || {})) as any[];

    const handleSearch = (e: React.FormEvent) => {
        e.preventDefault();
        router.push(`/blog/search?q=${encodeURIComponent(searchQuery)}`);
    };

    return (
        <section className="container mx-auto p-4 grid grid-cols-1 md:grid-cols-3">
            <div className="col-span-2">
                <div className="flex flex-col md:flex-row md:items-center justify-between p-4 gap-4">
                    <h1 className="text-[36px] lg:text-5xl md:text-5xl font-bold text-[--primary]">
                        MAIS <span className="text-[--secundary]">RECENTES</span>
                    </h1>

                    <form onSubmit={handleSearch} className="relative w-full md:w-auto mt-2 md:mt-0">
                        <input
                            type="text"
                            value={searchQuery}
                            onChange={(e) => setSearchQuery(e.target.value)}
                            placeholder="Pesquisar..."
                            className="w-full md:w-64 pl-10 pr-4 py-2 border border-gray-300 rounded-[8px] focus:outline-none focus:ring-2 focus:ring-[--primary] focus:border-transparent text-gray-700 cursor-pointer"
                        />
                        <button type="submit" className="absolute inset-y-0 left-0 pl-3 flex items-center cursor-pointer hover:scale-110 transition-transform">
                            <FaSearch className="text-gray-400 hover:text-[--primary] transition-colors" />
                        </button>
                    </form>
                </div>

                <div className="p-0 lg:p-2 md:p-2 relative">
                    <Link href={`/blog/${postMaisRecente?.SitePostsSlug}`}>
                        <div className="cursor-pointer">
                            {!imgLoadedBanner && (
                                <div className="absolute inset-0 flex items-center justify-center bg-white/50 rounded-[16px]">
                                    <Loading />
                                </div>
                            )}

                            <Image
                                src={deviceType === 'mobile' ? imagemUrlMob : imagemUrl}
                                alt="title"
                                width={600}
                                height={300}
                                className={`rounded-[16px] w-full h-auto transition-opacity duration-500 ${imgLoadedBanner && imagemUrlMob || imagemUrl ? "opacity-100" : "opacity-0"}`}
                                onLoad={() => setImgLoadedBanner(true)}
                            />
                            <span
                                className="absolute text-[10px] ml-4 -mt-[50px] bg-[#FDF8ED] h-[31px] p-[8px] rounded-[50px] flex items-center justify-center"
                            >
                                {postMaisRecente?.SiteCategoriasNome}
                            </span>

                            <h3 className="text-2xl lg:text-5xl font-bold text-[--primary] mt-4">
                                {postMaisRecente?.SitePostsTitulo}
                            </h3>
                        </div>
                    </Link>
                    <p className="text-[--text-color] mt-2"
                        dangerouslySetInnerHTML={{
                            __html: limitarHTML(postMaisRecente?.SitePostsResumo ?? '', 236)
                        }}
                    >
                    </p>

                    <div className="mt-8 pt-2 text-sm text-gray-500">
                        <div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-3">
                            <div className="flex items-center flex-wrap gap-2">
                                <p>
                                    Por <span className="font-semibold">{postMaisRecente?.IndividuosNome}</span>
                                </p>
                                <div className="md:ml-2">•</div>
                                <span className="flex items-center gap-3">
                                    <Image src={timePost} width={24} height={24} alt="" />
                                    {postMaisRecente?.SitePostsTempoLeitura} min. de leitura
                                </span>
                            </div>

                            <div className="flex items-center gap-3 md:ml-2 justify-start">
                                <div>•</div>
                                <Image src={iconCalendario} width={24} height={24} alt="" />
                                {moment(postMaisRecente?.SitePostsDataCadastro).format('DD/MM/YYYY')}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="ml-0 lg:ml-8 md:ml-8 mt-14 lg:mt-0 md:mt-0">
                <h1 className="text-[40px] lg:text-5xl md:text-5xl font-bold text-[--primary] p-4">MAIS <span className="text-[--secundary]">LIDOS</span></h1>
                <div className="p-0 lg:p-2 md:p-2 relative max-h-[660px] overflow-y-auto">
                    {posts.map((post, index) => (
                        <Link key={index} href={`/blog/${post.SitePostsSlug}`}>
                            <div className="mb-4 flex">
                                <div>
                                    <span
                                        className="absolute text-[10px] ml-3 mt-[174px] bg-[#FDF8ED] h-[19px] py-[2px] px-[4px] rounded-[50px] flex items-center justify-center"
                                    >
                                        {post.SiteCategoriasNome}
                                    </span>

                                    {!imgLoaded && (
                                        <div className="absolute inset-0 flex items-center justify-center bg-white/50 rounded-[16px]">
                                            <Loading />
                                        </div>
                                    )}

                                    <Image
                                        src={`${API_URL}BuscarImagem.php?Imagem=${post?.SitePostsImagemMobile}`}
                                        alt={post.SitePostsTitulo}
                                        width={150}
                                        height={204}
                                        className={`rounded-[16px] object-cover w-[150px] h-[204px]  ${imgLoaded ? "opacity-100" : "opacity-0"}`}
                                        onLoadingComplete={() => setImgLoaded(true)}
                                    />
                                </div>

                                <div className="ml-4 w-[260px] flex flex-col justify-between">
                                    <div>
                                        <h3 className="text-[16px] text-[--primary] font-bold">{post.SitePostsTitulo}</h3>
                                        <p
                                            className="text-[--text-color] text-sm mt-2"
                                            dangerouslySetInnerHTML={{
                                                __html: limitarHTML(post?.SitePostsResumo ?? '', 190)
                                            }}
                                        ></p>
                                    </div>

                                    <p className="text-[--text-color] text-sm">Por <span className="font-semibold">{post?.IndividuosNome}</span></p>
                                </div>
                            </div>
                        </Link>
                    ))}
                </div>
                <a href="/blog/search?q=" className="bg-[--primary] text-white py-3 px-8 rounded-[10px] w-full text-lg font-bold transition-colors duration-300 shadow-md hover:shadow-lg mt-4 flex items-center justify-center">Ver todos os artigos</a>
            </div>
        </section >
    )
}