"use client";
import React, { useState, useEffect, useRef } from "react";
import Link from "next/link";

export default function BlogList({ blogs }) {
    const [currentPage, setCurrentPage] = useState(1);
    const itemsPerPage = 12;
    const listRef = useRef(null);

    const totalPages = Math.ceil(blogs.length / itemsPerPage);

    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = blogs.slice(indexOfFirstItem, indexOfLastItem);

    // Scroll to top of the list when page changes
    useEffect(() => {
        if (listRef.current) {
            // Scroll to the top of the blog section, adjusting for some offset if needed
            const yOffset = -100; // Adjust for header height if sticky
            const y = listRef.current.getBoundingClientRect().top + window.pageYOffset + yOffset;
            window.scrollTo({ top: y, behavior: 'smooth' });
        }
    }, [currentPage]);

    const paginate = (pageNumber) => setCurrentPage(pageNumber);
    const nextPage = () => currentPage < totalPages && setCurrentPage(currentPage + 1);
    const prevPage = () => currentPage > 1 && setCurrentPage(currentPage - 1);

    return (
        <>
            <div ref={listRef} className="row clearfix">
                {currentItems.map((blog, i) => (
                    <div key={i} className="col-lg-4 col-md-6 col-sm-12 news-block">
                        <div
                            className="news-block-one wow fadeInUp animated"
                            data-wow-delay={`${i * 20}ms`}
                            data-wow-duration="300ms"
                        >
                            <div className="inner-box">
                                <figure className="image-box">
                                    <Link href={`/blog/${blog.slug}`} aria-label="Blog Image">
                                        <img src={blog.thumbnail} alt={blog.title} loading="lazy" />
                                    </Link>
                                </figure>
                                <div className="lower-content">
                                    <h3>
                                        <Link href={`/blog/${blog.slug}`} aria-label="Our Blog title">
                                            {blog.title.length > 35
                                                ? blog.title.slice(0, 35) + "..."
                                                : blog.title}
                                        </Link>
                                    </h3>
                                    <p>
                                        {blog.shortDesc.length > 80
                                            ? blog.shortDesc.slice(0, 80) + "..."
                                            : blog.shortDesc}
                                    </p>
                                    <div className="link">
                                        <Link href={`/blog/${blog.slug}`} aria-label="Read More">
                                            <span>Read More</span>
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>

            {/* Pagination Controls */}
            {totalPages > 1 && (
                <div
                    className="pagination-wrapper centred"
                    style={{ marginTop: "30px", marginBottom: "30px" }}
                >
                    <ul
                        className="pagination clearfix"
                        style={{
                            display: "inline-flex",
                            gap: "10px",
                            listStyle: "none",
                            padding: 0,
                        }}
                    >
                        {/* Previous Button */}
                        <li>
                            <button
                                onClick={prevPage}
                                // disabled={currentPage === 1} // Keep enabled but maybe visually distinct if needed, user said do not hide
                                style={{
                                    width: "40px",
                                    height: "40px",
                                    lineHeight: "40px",
                                    textAlign: "center",
                                    border: "1px solid #101A30", // Using one of the requested colors
                                    backgroundColor: currentPage === 1 ? "#fff" : "#fff",
                                    color: "#101A30",
                                    fontSize: "18px",
                                    fontWeight: "700",
                                    cursor: currentPage === 1 ? "not-allowed" : "pointer",
                                    display: "flex",
                                    alignItems: "center",
                                    justifyContent: "center",
                                    transition: "all 0.3s ease",
                                    opacity: currentPage === 1 ? 0.5 : 1 // Visually indicate disabled but keep color
                                }}
                                onMouseEnter={(e) => {
                                    if (currentPage !== 1) {
                                        e.target.style.backgroundColor = "#bc0000";
                                        e.target.style.color = "#fff";
                                        e.target.style.borderColor = "#bc0000";
                                    }
                                }}
                                onMouseLeave={(e) => {
                                    if (currentPage !== 1) {
                                        e.target.style.backgroundColor = "#fff";
                                        e.target.style.color = "#101A30";
                                        e.target.style.borderColor = "#101A30";
                                    }
                                }}
                            >
                                <i className="fas fa-angle-double-left"></i>
                            </button>
                        </li>

                        {/* Page Numbers */}
                        {Array.from({ length: totalPages }, (_, i) => i + 1).map((number) => (
                            <li key={number}>
                                <button
                                    onClick={() => paginate(number)}
                                    style={{
                                        width: "40px",
                                        height: "40px",
                                        lineHeight: "40px",
                                        textAlign: "center",
                                        border:
                                            currentPage === number
                                                ? "1px solid #bc0000"
                                                : "1px solid #101A30",
                                        backgroundColor: currentPage === number ? "#bc0000" : "#fff",
                                        color: currentPage === number ? "#fff" : "#101A30",
                                        fontSize: "16px",
                                        fontWeight: "600",
                                        cursor: "pointer",
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        transition: "all 0.3s ease",
                                    }}
                                    onMouseEnter={(e) => {
                                        if (currentPage !== number) {
                                            e.target.style.backgroundColor = "#bc0000";
                                            e.target.style.color = "#fff";
                                            e.target.style.borderColor = "#bc0000";
                                        }
                                    }}
                                    onMouseLeave={(e) => {
                                        if (currentPage !== number) {
                                            e.target.style.backgroundColor = "#fff";
                                            e.target.style.color = "#101A30";
                                            e.target.style.borderColor = "#101A30";
                                        }
                                    }}
                                >
                                    {number}
                                </button>
                            </li>
                        ))}

                        {/* Next Button */}
                        <li>
                            <button
                                onClick={nextPage}
                                // disabled={currentPage === totalPages}
                                style={{
                                    width: "40px",
                                    height: "40px",
                                    lineHeight: "40px",
                                    textAlign: "center",
                                    border: "1px solid #101A30",
                                    backgroundColor: currentPage === totalPages ? "#fff" : "#fff",
                                    color: "#101A30",
                                    fontSize: "18px",
                                    fontWeight: "700",
                                    cursor: currentPage === totalPages ? "not-allowed" : "pointer",
                                    display: "flex",
                                    alignItems: "center",
                                    justifyContent: "center",
                                    transition: "all 0.3s ease",
                                    opacity: currentPage === totalPages ? 0.5 : 1
                                }}
                                onMouseEnter={(e) => {
                                    if (currentPage !== totalPages) {
                                        e.target.style.backgroundColor = "#bc0000";
                                        e.target.style.color = "#fff";
                                        e.target.style.borderColor = "#bc0000";
                                    }
                                }}
                                onMouseLeave={(e) => {
                                    if (currentPage !== totalPages) {
                                        e.target.style.backgroundColor = "#fff";
                                        e.target.style.color = "#101A30";
                                        e.target.style.borderColor = "#101A30";
                                    }
                                }}
                            >
                                <i className="fas fa-angle-double-right"></i>
                            </button>
                        </li>
                    </ul>
                </div>
            )}
        </>
    );
}