"use client";

import React, { useState, useEffect } from "react";
import Image from "next/image";
import Link from "next/link";
import { ChevronRight, ChevronLeft } from "lucide-react";
import { blogData } from "@/data/siteData";

export const Blog: React.FC = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [cardsPerView, setCardsPerView] = useState(3);

  useEffect(() => {
    const updateCardsPerView = () => {
      if (window.innerWidth < 768) {
        setCardsPerView(1);
      } else if (window.innerWidth < 1024) {
        setCardsPerView(2);
      } else {
        setCardsPerView(3);
      }
    };

    updateCardsPerView();
    window.addEventListener("resize", updateCardsPerView);
    return () => window.removeEventListener("resize", updateCardsPerView);
  }, []);

  const maxIndex = Math.max(0, blogData.length - cardsPerView);

  const handleNext = () => {
    setCurrentIndex((prev) => (prev >= maxIndex ? 0 : prev + 1));
  };

  const handlePrev = () => {
    setCurrentIndex((prev) => (prev <= 0 ? maxIndex : prev - 1));
  };

  return (
    <section className="w-full pt-4 pb-8 sm:pt-6 sm:pb-10 select-none">
      {/* Same max-w-[1800px] and px-6 sm:px-10 lg:px-12 as all other sections */}
      <div className="w-full max-w-[1800px] mx-auto px-6 sm:px-10 lg:px-12">
        
        {/* Section Header */}
        <div className="mb-5 flex flex-col sm:flex-row sm:items-end justify-between gap-3">
          <div>
            <h2 
              style={{ fontFamily: 'var(--font-roboto), "Roboto", sans-serif' }}
              className="text-2xl sm:text-3xl font-medium tracking-tight text-slate-900 lg:text-[48px]"
            >
              From the Bioworld Blog
            </h2>
            <p 
              style={{ fontFamily: 'var(--font-poppins), "Poppins", sans-serif' }}
              className="mt-2 text-[14px] sm:text-[16px] md:text-lg text-slate-500 max-w-3xl leading-relaxed para-colour"
            >
              Research insights, product knowledge and the latest in life science.
            </p>
          </div>

          {/* Navigation Chevron Buttons */}
          <div className="flex items-center gap-2 self-end sm:self-auto">
            <button
              type="button"
              onClick={handlePrev}
              disabled={currentIndex <= 0}
              aria-label="Previous blog posts"
              className={`w-9 h-9 sm:w-10 sm:h-10 rounded-full border flex items-center justify-center transition-colors cursor-pointer ${
                currentIndex <= 0
                  ? "border-slate-200 text-slate-300 cursor-not-allowed"
                  : "border-slate-300 text-slate-700 hover:bg-slate-100"
              }`}
            >
              <ChevronLeft className="w-4 h-4 sm:w-5 sm:h-5" />
            </button>
            <button
              type="button"
              onClick={handleNext}
              disabled={currentIndex >= maxIndex}
              aria-label="Next blog posts"
              className={`w-9 h-9 sm:w-10 sm:h-10 rounded-full border flex items-center justify-center transition-colors cursor-pointer ${
                currentIndex >= maxIndex
                  ? "border-slate-200 text-slate-300 cursor-not-allowed"
                  : "border-slate-300 text-slate-700 hover:bg-slate-100"
              }`}
            >
              <ChevronRight className="w-4 h-4 sm:w-5 sm:h-5" />
            </button>
          </div>
        </div>

        {/* Blog Cards Slider Row */}
        <div className="relative">
          {/* Slider Overflow Mask */}
          <div className="overflow-hidden -mx-3 py-1">
            <div
              className="flex transition-transform duration-500 ease-out"
              style={{
                transform: `translateX(-${currentIndex * (100 / cardsPerView)}%)`,
              }}
            >
              {blogData.map((post) => (
                <div
                  key={post.id}
                  className="w-full md:w-1/2 lg:w-1/3 shrink-0 px-3"
                >
                  <div className="flex items-center gap-3.5 sm:gap-5 lg:gap-6 p-4 sm:p-5 lg:p-6 rounded-lg bg-white border border-slate-200 transition-all duration-200 h-full">
                    {/* Left: Image Container with Date Badge inside bottom-left */}
                    <div className="relative w-[115px] h-[115px] sm:w-[150px] sm:h-[150px] lg:w-[165px] lg:h-[165px] shrink-0 rounded-lg overflow-hidden bg-slate-100">
                      <Image
                        src={post.image}
                        alt={post.title}
                        fill
                        sizes="(max-width: 640px) 115px, (max-width: 1024px) 150px, 165px"
                        className="object-cover"
                      />
                      {/* Date Badge */}
                      <div className="absolute bottom-2 left-2 sm:bottom-2.5 sm:left-2.5 bg-white px-2 py-0.5 sm:px-2.5 sm:py-1 rounded border border-slate-200/90 text-[10px] sm:text-[11px] lg:text-[12px] font-bold text-[#0077b6] tracking-wide shadow-2xs">
                        {post.date}
                      </div>
                    </div>

                    {/* Right: Content */}
                    <div className="flex-1 min-w-0 flex flex-col justify-between min-h-[115px] sm:h-[150px] lg:h-[165px] py-0.5">
                      <div>
                        {/* Title */}
                        <h3 className="text-xs sm:text-[18px] font-semibold text-slate-900 leading-snug line-clamp-2">
                          {post.title}
                        </h3>
                        
                        {/* Excerpt */}
                        <p className="mt-1 sm:mt-2 text-[14px] sm:text-[16px] font-regular text-slate-500 leading-relaxed line-clamp-2 sm:line-clamp-3">
                          {post.excerpt}
                        </p>
                      </div>

                      {/* Read more Link */}
                      <div className="mt-auto pt-1">
                        <Link
                          href={post.href}
                          className="text-xs sm:text-[16px] font-semibold text-[#0077b6] hover:underline inline-block"
                        >
                          Read more
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Floating Next Circle Button on the Right Edge (visible on desktop) */}
          <div className="hidden lg:block absolute -right-4 sm:-right-5 top-1/2 -translate-y-1/2 z-20">
            <button
              onClick={handleNext}
              type="button"
              className="w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-[#0077b6] hover:bg-[#02699e] text-white shadow-md flex items-center justify-center transition-all focus:outline-none cursor-pointer"
              aria-label="Next blog posts"
            >
              <ChevronRight className="w-5 h-5 stroke-[2.4]" />
            </button>
          </div>
        </div>

      </div>
    </section>
  );
};