"use client";
import Image from "next/legacy/image";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import "swiper/swiper-bundle.css";
import { useLatestPosts } from "@/lib/hooks/useBlog";
import { getValidImageUrl, getValidImageAlt, FALLBACK_IMAGES } from "@/lib/imageUtils";

const HomeLatestPost = () => {
  const { posts, loading, error } = useLatestPosts(12); // Get 12 latest posts

  return (
    <section className="tp-latest-post pt-120 pb-120 bg-quinary">
      <div className="container">
        <div className="row vertical-column-gap align-items-center">
          <div className="col-12 col-lg-7">
            <div className="tp-lp-title text-center text-lg-start">
              <h2 className="mt-8 fw-7 text-secondary title-anim">
                Latest Insights
              </h2>
            </div>
          </div>
          <div className="col-12 col-lg-5">
            <div className="tp-lp-cta text-center text-lg-end">
              <Link href="/insights" className="btn-line text-uppercase">
                View All Insights
              </Link>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-12">
            <div className="tp-lp-slider-wrapper mt-60">
              {loading ? (
                <div className="text-center py-5">
                  <div className="spinner-border text-primary" role="status">
                    <span className="visually-hidden">Loading...</span>
                  </div>
                  <p className="text-tertiary mt-3">Loading insights...</p>
                </div>
              ) : error ? (
                <div className="text-center py-5">
                  <p className="text-danger">Error loading insights. Please try again later.</p>
                </div>
              ) : posts.length === 0 ? (
                <div className="text-center py-5">
                  <p className="text-tertiary">No insights available yet.</p>
                </div>
              ) : (
                <div className="tp-lp-slider-wrapper">
                  <Swiper
                    slidesPerView={"auto"}
                    spaceBetween={24}
                    slidesPerGroup={1}
                    freeMode={true}
                    speed={1200}
                    loop={posts.length > 3}
                    roundLengths={true}
                    modules={[Autoplay]}
                    autoplay={{
                      delay: 5000,
                      disableOnInteraction: false,
                      pauseOnMouseEnter: true,
                    }}
                    className="tp-lp-slider"
                  >
                    {posts.map((post) => (
                      <SwiperSlide key={post.id}>
                        <div className="tp-lp-slider__single topy-tilt">
                          <div className="thumb mb-24">
                            <Link 
                              href={`/insights/${post.slug}`} 
                              className="w-100 overflow-hidden d-block"
                            >
                              <div className="parallax-image-wrap">
                                <div className="parallax-image-inner">
                                  <Image
                                    src={getValidImageUrl(post.thumbnail, FALLBACK_IMAGES.BLOG)}
                                    width={400}
                                    height={220}
                                    className="w-100 mh-220 parallax-image"
                                    alt={getValidImageAlt(post.title)}
                                  />
                                </div>
                              </div>
                            </Link>
                          </div>
                          <div className="content">
                            <div className="tp-lp-post__meta mb-24 mt-8">
                              <p className="author text-xs text-tertiary">
                                {post.author_name || 'Admin'}
                              </p>
                              <span></span>
                              <p className="date text-xs text-tertiary">
                                {new Date(post.published_at || post.created_at).toLocaleDateString('en-US', {
                                  day: 'numeric',
                                  month: 'short',
                                  year: 'numeric'
                                })}
                              </p>
                            </div>
                            <h5 className="mt-8 fw-5 text-secondary">
                              <Link href={`/insights/${post.slug}`}>
                                {post.title}
                              </Link>
                            </h5>
                          </div>
                        </div>
                      </SwiperSlide>
                    ))}
                  </Swiper>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default HomeLatestPost;