import React, { useEffect, useRef, useState } from 'react';
import './Blog.scss';
import Navbar from '../../PozoApp/Components/Navbar';
import IndustriesList from '../../PozoApp/Components/IndustriesList';
import CompanyList from '../../PozoApp/Components/companyList';
import Lenis from "@studio-freight/lenis";
import Loader from '../../PozoApp/Components/Loader/PozoLoader';
import { RiInstagramFill, RiTwitterXFill } from 'react-icons/ri';
import { FaFacebook, FaYoutube } from 'react-icons/fa';
import { message } from 'antd';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { getBlog, getPublishedBlogs } from '../../features/Blog/Blog';
import { getAllApplicationData } from '../../features/publicHome/publicHome';
import { getSeo } from '../../features/SEO/seo';
import { getConfigNames } from '../../features/configmasterPage/configmasterPage';
import SEO from '../../Components/SEO/SEO';
import { PiInstagramLogoFill } from 'react-icons/pi';
import BookDemo from '../../PozoApp/Components/BookDemo';




const subDirectory = import.meta.env.ENV_BASE_URL;
const Blogs = () => {
    const [isScrolled, setIsScrolled] = useState(false);
    const [industries, setAppCategory] = useState([]);
    const [closingIndustry, setClosingIndustry] = useState(false);
    const [industry, setIndustry] = useState(false);
    const [company, setCompany] = useState(false);
    const companyRef = useRef(null);
    const industryRef = useRef(null);
    const [closingCompany, setClosingCompany] = useState(false);
    const [loading, setLoading] = useState(true);
    const [blogPosts, setBlogPosts] = useState([]);
    const [seoData, setSeoData] = useState({});
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const [demoModal, setDemoModal] = useState(false);


    const handleDemoModal = () => setDemoModal(true);
    const handleDemoModalClose = () => setDemoModal(false);

    const getAppData = async () => {
        try {
            const response = await dispatch(getAllApplicationData()).unwrap();
            if (response?.data?.statusCode === 1) {
                let finalsubCategory = response?.data?.data?.filter(
                    (value) => value.ActiveStatus === "A",
                );
                setAppCategory(finalsubCategory);
            }
        } catch (error) {
            console.error('Error fetching app data:', error);
        }
    };

    useEffect(() => {
        const timer = setTimeout(() => {
            setLoading(false);
        }, 300);
        getAppData();
        return () => clearTimeout(timer);
    }, []);

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

    useEffect(() => {
        const fetchSEOData = async () => {

            try {
                const res = await dispatch(getConfigNames({ TypeName: "SEO" })).unwrap();
                if (res?.data?.statusCode === 1) {
                    const seoId = res?.data?.data?.find(e => e.ConfigName === "blog")?.ConfigId;
                    if (!seoId) {
                        console.warn("Blog ConfigId not found");
                        return;
                    }

                    const response = await dispatch(getSeo({ PageId: seoId })).unwrap();
                    if (response?.data?.statusCode === 1 && response?.data?.data?.length > 0) {
                        const data = response.data.data[0];
                        setSeoData({
                            metaTitle: data?.MetaTitle,
                            metaDescription: data?.MetaDesc,
                            keywords: data?.Keywords,
                            imageAltText: data?.ImgAltText
                        });
                    }
                }
            } catch (error) {
                console.log('No SEO data found for blog page');
            }
        };
        fetchSEOData();
    }, [dispatch]);

    const fetchBlogPosts = async () => {
        try {
            const response = await dispatch(getPublishedBlogs()).unwrap();
            if (response?.data.statusCode == 1) {
                setBlogPosts(response?.data?.data?.map((blog) => ({
                    id: blog?.BlogId,
                    title: blog?.BlogTitle,
                    excerpt: blog?.BlogSubtitle,
                    author: blog?.BlogAuthor,
                    date: (() => {
                        if (!blog?.PublishDate) return '';

                        // --- Format date ---
                        const dateStr = blog.PublishDate.split('T')[0]; // "2025-10-24"
                        const [year, month, day] = dateStr.split('-');
                        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                        const monthName = months[parseInt(month, 10) - 1];
                        const formattedDate = `${parseInt(day, 10)} ${monthName} ${year}`; // "24 Oct 2025"

                        // --- Format time ---
                        if (!blog?.PublishTime) return formattedDate; // If no time, return date only

                        const [hourStr, minuteStr] = blog.PublishTime.split(':'); // "17:25:00" → ["17","25","00"]
                        let hour = parseInt(hourStr, 10);
                        const minute = minuteStr;
                        const ampm = hour >= 12 ? "PM" : "AM";
                        hour = hour % 12 || 12; // Convert 0 → 12
                        const formattedTime = `${hour.toString().padStart(2, "0")}:${minute} ${ampm}`; // "05:25 PM"

                        return `${formattedDate} ${formattedTime}`; // "24 Oct 2025 05:25 PM"
                    })(),
                    readTime: '5 min read',
                    CreatedDate: (() => {
                        if (!blog?.CreatedDate) return '';
                        const dateStr = blog.CreatedDate.split('T')[0]; // Get date part
                        const [year, month, day] = dateStr.split('-');
                        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                        const monthName = months[parseInt(month) - 1];
                        return `${parseInt(day)} ${monthName} ${year}`;
                    })(),
                    imageUrl: blog?.HeaderImage,
                    slug: blog?.Slug
                })) || []);
            }
            else {
                setBlogPosts([]);
            }
        }
        catch (err) {
            message.error('Failed to fetch blog posts. Please try again later.');
        }
    }

    // const blogPosts = [
    //     {
    //         id: 1,
    //         title: "Modern Web Development Trends in 2024",
    //         excerpt: "Explore the latest technologies and frameworks shaping the future of web development with React, Next.js and modern CSS.",
    //         author: "John Doe",
    //         date: "Dec 15, 2024",
    //         readTime: "5 min read",
    //         imageUrl: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400",
    //     },
    //     {
    //         id: 2,
    //         title: "Mastering React Hooks in 2024",
    //         excerpt: "Learn how to effectively use React Hooks to build modern, efficient React applications with best practices.",
    //         author: "Sarah Wilson",
    //         date: "Dec 12, 2024",
    //         readTime: "8 min read",
    //         imageUrl: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=400",
    //     },
    //     {
    //         id: 3,
    //         title: "CSS Grid vs Flexbox: When to Use What",
    //         excerpt: "A comprehensive guide to understanding the differences between CSS Grid and Flexbox with practical examples.",
    //         author: "Mike Chen",
    //         date: "Dec 10, 2024",
    //         readTime: "6 min read",
    //         imageUrl: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=400",
    //     }
    // ];


    const redirectApp = (AppName, AppId) => {
        console.log('Redirect to app:', AppName, AppId);
    };

    const handleIndustry = () => {
        if (industry) {
            setClosingIndustry(true);
            setTimeout(() => {
                setIndustry(false);
                setClosingIndustry(false);
            }, 200);
        } else {
            setIndustry(true);
        }
    };

    const handleCompanyList = () => {
        if (company) {
            setClosingCompany(true);
            setTimeout(() => {
                setCompany(false);
                setClosingCompany(false);
            }, 200);
        } else {
            setCompany(true);
        }
    };

    useEffect(() => {
        const lenis = new Lenis({
            duration: 1.2,
            easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
            smoothWheel: true,
            smoothTouch: true,
        });

        lenis.on("scroll", (e) => {
            setIsScrolled(e.scroll > 50);
        });

        function raf(time) {
            lenis.raf(time);
            requestAnimationFrame(raf);
        }
        requestAnimationFrame(raf);
        return () => lenis.destroy();
    }, []);

    useEffect(() => {
        if (industry || company) {
            document.body.style.overflow = "hidden";
        } else {
            document.body.style.overflow = "unset";
        }
        return () => {
            document.body.style.overflow = "unset";
        };
    }, [industry, company]);

    const BlogCard = ({ post }) => {
        const handleClick = () => {
            navigate(`${subDirectory}blog/${post.slug}`);
        };

        return (
            <div className="pozo-blog-card" onClick={handleClick}>
                <div className="pozo-blog-card-image">
                    <img src={post.imageUrl} alt={post.title} />
                    <div className="pozo-blog-card-overlay"></div>
                </div>
                <div className="pozo-blog-card-content">
                    <div className="pozo-blog-tags-container">Recent Updates & Blogs
                        Announcements
                    </div>
                    <p className="pozo-blog-card-excerpt">{post.excerpt}</p>
                    <div className="pozo-blog-card-meta">
                        {/* <span className="pozo-blog-date">{post.date}</span> */}
                        <div>
                            <span className="pozo-blog-date">{`Created Date ${post.CreatedDate}`}</span>
                            <div className="pozo-blog-date">{post.Author || "Admin"}</div>
                        </div>
                    </div>
                    <div className="pozo-blog-publish-time">
                        <span className="pozo-blog-read-time">{post.readTime}</span>
                    </div>
                </div>
            </div>
        );
    };

    if (loading) {
        return <Loader />;
    }

    const handlePrivacyPolicy = () => {
        navigate(`${subDirectory}privacy-policy`);
    }
    const handleNavigateCookie = () => {
        navigate(`${subDirectory}cookie-policy`);
    }
    const handleNavigateFaq = () => {
        navigate(`${subDirectory}faq`);
    }

    return (
        <>
            <SEO
                title={seoData.metaTitle || "Recent Updates & Blogs - PozoApp"}
                description={seoData.metaDescription || "Stay updated with the latest news, announcements, and blog posts from PozoApp. Discover insights on business management, technology trends, and more."}
                keywords={seoData.keywords || "blog, updates, announcements, PozoApp, business management, technology"}
                url={`${subDirectory}blog`}
                image={seoData.imageAltText || "/og/blog-og.jpg"}
                type="website"
            />
            <div className='pozo-blog-master-card'>
                <Navbar
                    isScrolled={isScrolled}
                    forceTopZero={true}
                    AppCategory={industries}
                    closingIndustry={closingIndustry}
                    setClosingIndustry={setClosingIndustry}
                    industry={industry}
                    setIndustry={setIndustry}
                    companyRef={companyRef}
                    closingCompany={closingCompany}
                    setClosingCompany={setClosingCompany}
                    company={company}
                    setCompany={setCompany}
                    industryRef={industryRef}
                    handleIndustry={handleIndustry}
                    handleCompanyList={handleCompanyList}
                    handleDemoModal={handleDemoModal}
                    handleDemoModalClose={handleDemoModalClose}

                    demoModal={demoModal}
                />
                <div className="pozo-blogs-page">
                    <h1 className="pozo-blog-page-title">Recent Updates & Blogs</h1>
                    <p className="pozo-blog-page-subtitle">Stay updated with the latest news, announcements, and blog posts from PozoApp. Discover insights on business management, technology trends, and more.</p>
                    <div className="pozo-blogs-grid">
                        {blogPosts.length > 0 ? (
                            blogPosts.map((post) => (
                                <BlogCard key={post.id} post={post} />
                            ))
                        ) : (
                            <div className="pozo-blog-empty-state">
                                <p>No blog posts available at the moment. Please check back later for updates.</p>
                            </div>
                        )}
                    </div>
                </div>

                {/* Navbar IndustriesList */}
                {industry && (
                    <IndustriesList
                        closingIndustry={closingIndustry}
                        AppCategory={industries}
                        redirectApp={redirectApp}
                    />
                )}
                {company && (
                    <CompanyList
                        companyRef={companyRef}
                        closingCompany={closingCompany}
                    />
                )}

                <div className="liveFooterMain" style={{ marginTop: "5rem" }}>
                    <div className="liveFooterLeft">
                        <p className="listTitle">Quick Links</p>
                        <div className="LiveFooterList">
                            <p>About Pozo</p>
                            <p>All Products </p>
                            <p>Pricing Plans </p>
                            <p>Contact Us </p>
                            <p onClick={handleNavigateFaq}>FAQs </p>
                        </div>
                    </div>
                    <div className="liveFooterRight">
                        <p className="listTitle">Support & Help</p>
                        <div className="LiveFooterList">
                            <p>info@pozo.app</p>
                            <a href="tel:7324000011">73 24 00 00 11</a>
                            <a href="tel:7324000012">73 24 00 00 12</a>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <span>
                                Let's get social
                                <a href="https://www.instagram.com/pozomind/" target="_blank" rel="noopener noreferrer">
                                    <PiInstagramLogoFill size={18} />
                                </a>
                                <a href="https://www.facebook.com/pozomind/" target="_blank" rel="noopener noreferrer">
                                    <FaFacebook />
                                </a>
                                <a href="https://x.com/pozomind" target="_blank" rel="noopener noreferrer">
                                    <RiTwitterXFill />
                                </a>
                                <a href="https://www.youtube.com/@pozomind" target="_blank" rel="noopener noreferrer">
                                    <FaYoutube />
                                </a>
                            </span>
                        </div>
                    </div>
                </div>
                <div className="liveFooterRights">
                    <div>
                        © 2025 PozoApp
                        <div className='linktoPrivayCookie' onClick={handlePrivacyPolicy}>
                            Privacy Policy
                        </div>
                        <div className='linktoPrivayCookie' onClick={handleNavigateCookie}>
                            Cookie Policy
                        </div>
                    </div>
                    <p>
                        For queries contact us: Manager, No 51 Step Colony, Dharga,Hosur,
                        Krishnagiri, Tamilnadu-635126, India
                    </p>
                </div>

                {demoModal && (
                    <BookDemo onClose={handleDemoModalClose} />
                )}
            </div>
        </>
    );
};



export default Blogs;