"use client";
import { cmsHtml } from "@/utils/cms-html";
import RecentBlogs from "@/views/home/components/recent-blogs";
import { Link, useParams } from "react-router-dom";
import Breadcrumb from "@/ui/breadcrumb";
import { useQuery } from '@tanstack/react-query';
import axios from "axios";
import Image from "@/ui/image";
import { useLanguage } from "@/store/language-context";
import { useTranslation } from 'react-i18next';
import { CalendarCheck2, RefreshCcw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { useState } from "react";

export default function BlogDetails() {
    const { t } = useTranslation();
    const { URL } = useLanguage();
    const { id } = useParams();

    const [seeMore, setSeeMore] = useState(false);
    const { data: blog, isLoading, error, refetch } = useQuery({
        queryKey: ['blog-details', id, URL],
        queryFn: async () => {
            const response = await axios.get(`${URL}/blogs/${id}`);
            if (response.status === 200) {
                return response?.data?.data || {};
            } else {
                throw new Error(t('custom.err'));
            }
        },
        staleTime: 60 * 60 * 1000,
        gcTime: 60 * 60 * 1000,
        retry: 1,
        refetchOnWindowFocus: false,
    });

    if (typeof document !== "undefined") document.title = `${blog?.title || t('routes.blog-details')} | ${t("routes.all-blogs")}`;

    if (error) {
        return (
            <div className="text-center py-8 flex flex-col items-center justify-center gap-4 layout h-screen">
                <p className="text-red-500 text-xl">{t('custom.err')}</p>
                <div className="grid place-items-center">
                    <Button
                        variant="outline"
                        className="mt-2 bg-secondary-tw text-white px-4 py-2 rounded-md"
                        onClick={() => refetch && refetch()}
                    >
                        {t('custom.try-again')} <RefreshCcw />
                    </Button>
                </div>
            </div>
        )
    };

    if (isLoading) {
        return (
            <>
                <div className="h-10 w-full l-load-dt"></div>
                <div className="l-load-p w-full space-y-2 px-20 py-8 max-lg:px-4">
                    <div className=" w-full h-80 grid lg:grid-cols-[40%_56%] gap-4">
                        <div className="h-full w-full l-load-dt rounded-lg"></div>
                        <div className="h-full w-full l-load-dt rounded-lg"></div>
                    </div>
                </div>
            </>
        )
    };

    return (
        <>
            <Breadcrumb pages={[{ name: t("routes.all-blogs"), link: '/blogs' }, `${blog?.title || t("routes.blog-details")}`]} />

            <div className="layout !pb-0">
                <section className="grid lg:grid-cols-[40%_56%] gap-4">
                    <div className="space-y-4 md:sticky md:top-8 self-start md:max-h-screen overflow-y-auto">
                        <div className="relative h-80 border-2 rounded-lg">
                            <Image
                                src={blog?.image}
                                alt={blog?.title}
                                className={"w-full h-full rounded-md"}
                            />
                        </div>
                        {
                            blog?.blogMainTopics?.length > 0 &&
                            <div className="border shadow-sm rounded-md p-4 space-y-2 max-md:h-62 overflow-y-scroll">
                                {
                                    blog?.blogMainTopics?.map((box: any, i: number) => (
                                        <Link to={`/blogs/${id}#${box?.title}`} key={i}
                                            className="w-full py-2 px-4 rounded-md bg-gray-100 text-primary-tw flex items-center gap-2">
                                            <span>
                                                {i + 1} -
                                            </span>
                                            <span className="max-w-94 truncate">
                                                {box?.title}
                                            </span>
                                        </Link>
                                    ))
                                }
                            </div>
                        }
                    </div>
                    <section className={cn('text-start space-y-2 p-4 pb-2 border-2 rounded-lg',
                        seeMore ? 'max-h-max' : 'max-h-96'
                    )}>
                        {
                            blog?.date &&
                            <div className="flex items-center gap-2 text-secondary-tw text-sm font-sans">
                                <span>
                                    <CalendarCheck2 size={16} />
                                </span>
                                <span>
                                    {blog.date}
                                </span>
                            </div>
                        }
                        <div className="space-y-4 text-start">
                            <h2 className="text-2xl font-black">{blog?.title}</h2>
                            <article dangerouslySetInnerHTML={{ __html: cmsHtml(blog?.Epilogue_description, { alt: blog?.title }) }}
                                className={cn("overflow-hidden",
                                    seeMore ? 'max-h-max line-clamp-none' : 'max-h-64 line-clamp-[7]'
                                )}
                            />
                            {
                                blog?.Epilogue_description &&
                                <Button onClick={() => setSeeMore(prev => !prev)} variant='link'
                                    className='underline text-base !mt-2'>
                                    {seeMore ? t('custom.show-less') : t('custom.show-more')}
                                </Button>
                            }
                        </div>
                    </section>
                </section>
                <RecentBlogs
                    sectionTitle={
                        <div className="text-start mb-6 mt-12 w-full text-lg font-semibold">
                            <p>
                                {t('blogs.another-blogs')} :
                            </p>
                        </div>
                    }
                />
            </div>
        </>
    );
};