"use client";
import { useParams } from "next/navigation";

import Image from "next/image";
import iconFacebook from "../../../../../public/assets/Images/Icons/icon_facebook.svg";
import iconWhatsapp from "../../../../../public/assets/Images/Icons/icon_whatsApp.svg";
import iconeX from "../../../../../public/assets/Images/Icons/icon_X.svg";
import iconInstagram from "../../../../../public/assets/Images/Icons/icon_instagram.svg";
import iconPlamev from "../../../../../public/assets/Images/Icons/icon_plamev.svg";
import iconCopiarColar from "../../../../../public/assets/Images/Icons/icon_copiar_colar.svg";
import iconArrow from "../../../../../public/assets/Images/Icons/icon_arrow_gray.svg";
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 { getDataBlogPost, getDataBlogPostComentarios, postDataAcesso } from "@/actions/pageBlogAction";
import { ViewSitePosts } from "@/utils/Interfaces/interfaces";
import { API_URL, TOKEN } from "@/utils/constants/selectConstants";
import { toast } from "react-toastify";
import moment from 'moment';
import useDeviceType from "@/utils/getDeviceType";
import Loading from "@/app/loading";
import { useRouter } from "next/navigation";


export default function BlogPost() {
    const { slug } = useParams();
    const deviceType = useDeviceType();
    const router = useRouter();

    const [postData, setPostData] = useState<ViewSitePosts>();
    const [postDataComentarios, setPostDataComentarios] = useState<any>();
    const [nome, setNome] = useState<string>('');
    const [email, setEmail] = useState<string>('');
    const [comentario, setComentario] = useState<string>('');
    const [imgLoaded, setImgLoaded] = useState(false);

    const imagemUrl = postData?.SitePostsImagem ? `${API_URL}BuscarImagem.php?Imagem=${postData?.SitePostsImagem}` : '';
    const imagemUrlMob = postData?.SitePostsImagemMobile ? `${API_URL}BuscarImagem.php?Imagem=${postData?.SitePostsImagemMobile}` : '';
    const imagemPerfilColaborador = postData?.ColaboradoresImagemPerfil;
    const temImagemPerfilColaborador = typeof imagemPerfilColaborador === 'string'
        && imagemPerfilColaborador.trim() !== ''
        && imagemPerfilColaborador.trim().toLowerCase() !== 'null';
    const imagemPerfilColaboradorUrl = temImagemPerfilColaborador
        ? `${API_URL}BuscarImagem.php?Imagem=${imagemPerfilColaborador}`
        : undefined;

    console.log(postData);
    useEffect(() => {
        (async () => {
            const slugParam = Array.isArray(slug) ? slug[0] : slug;
            if (!slugParam) return;

            let responseContinueLendo = await getDataBlogPost(slugParam);

            if (responseContinueLendo.argumento && responseContinueLendo.argumento.Erro) {
                router.push('/not-found');
            }


            if (responseContinueLendo) {
                setPostData(responseContinueLendo[1]);
            }
        })();
    }, [slug, router]);

    useEffect(() => {
        (async () => {
            if (postData?.SitePostsId) {
                let responseComentarios = await getDataBlogPostComentarios(postData?.SitePostsId);
                if (responseComentarios) {
                    setPostDataComentarios(responseComentarios);
                }

                fetch(`${API_URL}SitePosts/registrarAcesso`, {
                    method: 'POST',
                    headers: {
                        Authorization: TOKEN
                    },
                    body: JSON.stringify({ Id: postData?.SitePostsId })
                })
                    .then(res => res.json())
                    .then((body) => {
                        if (body.erro) {

                            toast.error(body.mensagem);
                            return;
                        }

                    });
            }
        })();
    }, [postData]);

    useEffect(() => {
        const seoRaw = postData?.SitePostsTagSeo;
        if (!seoRaw) return;

        const seoKeywords = seoRaw
            .split(',')
            .map((item) => item.trim())
            .filter(Boolean);

        if (!seoKeywords.length) return;

        const head = document.head;
        let keywordsMeta = document.querySelector('meta[name="keywords"]') as HTMLMetaElement | null;
        const metaJaExistia = !!keywordsMeta;
        const keywordsAnteriores = keywordsMeta?.content ?? '';

        if (!keywordsMeta) {
            keywordsMeta = document.createElement('meta');
            keywordsMeta.name = 'keywords';
            head.appendChild(keywordsMeta);
        }

        const baseKeywords = keywordsAnteriores
            .split(',')
            .map((item) => item.trim())
            .filter(Boolean);

        const keywordsMescladas = Array.from(new Set([...baseKeywords, ...seoKeywords]));
        keywordsMeta.content = keywordsMescladas.join(', ');

        return () => {
            if (!keywordsMeta) return;

            if (metaJaExistia) {
                keywordsMeta.content = keywordsAnteriores;
                return;
            }

            keywordsMeta.remove();
        };
    }, [postData?.SitePostsTagSeo]);



    const copiarLink = async () => {
        await navigator.clipboard.writeText(window.location.href);
    };

    const handleCadastroComentario = async (e: React.FormEvent) => {
        e.preventDefault();

        try {
            if (!nome || !email || !comentario) {
                toast.error('Por favor, preencha todos os campos antes de enviar o comentário.');
                return;
            }

            const data = {
                AutorNome: nome,
                AutorEmail: email,
                Comentario: comentario,
                SitePostsId: postData?.SitePostsId
            };

            const url = `${API_URL}SiteComentarios/inserir/`;

            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    Authorization: TOKEN,
                    'Content-Type': 'application/json',
                    LocalAcesso: 'Site'
                },
                body: JSON.stringify(data),
            });

            if (!response.ok) {
                throw new Error('Erro ao enviar dados, verifique os campos acima.');
            } else {
                toast.success('Comentário enviado com sucesso!');
                setNome('');
                setEmail('');
                setComentario('');
            }
        } catch (e) {
            toast.error('Erro ao enviar dados, verifique os campos acima.');
        }
    }

    return (
        <section className="container max-w-[940px] mx-auto p-4">
            <div className="py-5">
                <p className="mt-2 text-[14px] flex items-center gap-1">
                    <a href="/blog">Blog</a>
                    <Image src={iconArrow} alt="arrow" width={24} height={24} />
                    {postData?.SitePostsTitulo}
                </p>

            </div>

            <div>
                <div className="w-full mb-6 relative">

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

                    <Image
                        src={deviceType === 'mobile' ? imagemUrlMob : imagemUrl}
                        alt="Imagem do artigo"
                        width={940}
                        height={304}
                        className={`rounded-[16px] max-h-[304px] object-cover transition-opacity duration-300 ${imgLoaded && imagemUrlMob || imagemUrl ? 'opacity-100' : 'opacity-0'}`}
                        onLoadingComplete={() => setImgLoaded(true)}
                    />
                </div>


                <h1 className="text-[32px] md:text-[48px] font-bold leading-[120%] text-[#00A6CE] mb-4">
                    {postData?.SitePostsTitulo}
                </h1>

                <div
                    className="leading-7 space-y-4 text-[16px]"
                    dangerouslySetInnerHTML={{
                        __html: postData?.SitePostsTexto ?? ''
                    }}
                >
                </div>

                <div className="flex flex-wrap items-center justify-start gap-3 md:gap-4 mt-8">
                    <span className="flex items-center gap-2 whitespace-nowrap shrink-0">
                        <Image src={timePost} width={24} height={24} alt="" />
                        {postData?.SitePostsTempoLeitura} min. de leitura
                    </span>

                    <div>•</div>

                    <span className="flex items-center gap-2 whitespace-nowrap shrink-0">
                        <Image src={iconCalendario} width={24} height={24} alt="" />
                        {moment(postData?.SitePostsDataCadastro).format('DD/MM/YYYY')}
                    </span>
                </div>

                <hr className="mt-8 border-0 border-t border-[#ECECEC]" />

                <div className="pt-6 text-sm text-gray-500">

                    <div className={`mt-4 flex flex-col md:flex-row gap-3 md:gap-4 ${imagemPerfilColaboradorUrl ? 'items-start' : 'items-start justify-start'}`}>

                        {!!imagemPerfilColaboradorUrl && (
                            <Image
                                src={imagemPerfilColaboradorUrl}
                                alt={postData?.IndividuosNome || "Autor"}
                                width={100}
                                height={100}
                                className="rounded-full object-cover shrink-0 self-start md:self-auto mb-3 md:mb-0"
                            />
                        )}

                        <div className="flex flex-col min-w-0 text-left">
                            <p className="text-[20px] leading-[26px] ">
                                Por <span className="font-semibold">{postData?.IndividuosNome}</span>
                            </p>

                            {!!postData?.ColaboradoresBiografia && (
                                <p className="mt-1 text-[16px] leading-[24px] max-w-[700px] break-words">
                                    {postData?.ColaboradoresBiografia}
                                </p>
                            )}
                        </div>
                    </div>
                </div>

                <hr className="mt-6 border-0 border-t border-[#ECECEC]" />


                <div className="mt-6 flex flex-col md:flex-row justify-between pt-2 text-sm text-gray-500 gap-6">
                    <div className="flex items-center flex-row">
                        <Image src={iconPlamev} alt="Compartilhar" width={41} height={41} />
                        <div className="ml-[8px]">
                            <p className="text-[16px] font-semibold">Plamev</p>
                            <p className="text-[12px] w-[300px]">
                                Aqui você encontra tudo sobre o mundo animal e fica por dentro dos cuidados essenciais com o seu pet.
                            </p>
                        </div>
                    </div>

                    <div className="flex flex-wrap justify-center items-center gap-3">
                        <button
                            onClick={copiarLink}
                            className="hover:opacity-70 transition h-[29px] w-[120px] text-[12px] flex justify-center items-center gap-1 font-bold rounded-[6px] border border-[#E9ECED]"
                        >
                            <Image src={iconCopiarColar} alt="Compartilhar" width={14} height={14} />
                            Copiar Link
                        </button>

                        <a href="https://www.instagram.com/plamevoficial/" target="_blank">
                            <Image src={iconInstagram} alt="Instagram" width={28} height={28} />
                        </a>

                        <a href="https://web.facebook.com/Plamev/" target="_blank">
                            <Image src={iconFacebook} alt="Facebook" width={28} height={28} />
                        </a>

                        <a href="https://twitter.com/plamevoficial" target="_blank">
                            <Image src={iconeX} alt="X" width={28} height={28} />
                        </a>

                        <a href="http://plamev.pet/WhatsappBlog" target="_blank">
                            <Image src={iconWhatsapp} alt="WhatsApp" width={28} height={22} />
                        </a>
                    </div>
                </div>

                <div className="w-full max-w-4xl mt-5 space-y-6">
                    {!!postDataComentarios &&
                        Object.values(postDataComentarios)
                            .filter((c: any) => c && c.Comentario && c.Comentario.trim() !== "")
                            .map((comentario: any, index: number) => (
                                <div key={index} className="flex gap-4 p-4 rounded-lg border-b border-dashed border-[#F9E9C7]"
                                >

                                    <div>
                                        <p className="font-semibold">{comentario.AutorNome}</p>
                                        <p className="text-sm text-gray-600">{moment(comentario.DataCadasto).format('DD/MM/YYYY')} às {moment(comentario.DataCadasto).format('HH:mm')}</p>
                                        <p className="mt-2">{comentario.Comentario}</p>
                                    </div>

                                </div>
                            ))}
                </div>

                <div className="w-full max-w-4xl bg-[#F8FBF2] mt-10 pt-[50px] pr-4 pb-[50px] pl-4 md:p-[60px] rounded-[60px] shadow mb-[70px]">
                    <h2 className="text-[24px] md:text-[32px] font-black text-[#24404C] mb-4">
                        Deixe um comentário
                    </h2>

                    <form onSubmit={handleCadastroComentario} className="space-y-4">
                        <textarea
                            className="w-full h-32 border rounded-lg p-3 outline-none"
                            placeholder="Comentário"
                            value={comentario}
                            onChange={(e) => setComentario(e.target.value)}
                        />

                        <div className="flex flex-col md:flex-row justify-center items-center gap-4">
                            <input
                                type="text"
                                placeholder="Nome"
                                className="w-full md:w-[402px] border rounded-lg p-3 outline-none"
                                value={nome}
                                onChange={(e) => setNome(e.target.value)}
                            />

                            <input
                                type="email"
                                placeholder="E-mail"
                                className="w-full md:w-[402px] border rounded-lg p-3 outline-none"
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                            />
                        </div>


                        <button
                            type="submit"
                            className="w-full bg-white text-[#506670] py-3 rounded-lg font-semibold "

                        >
                            Comentar
                        </button>
                    </form>
                </div>
            </div>
        </section>
    );
}