'use client';

import { useRef, useState } from 'react';
import Image from 'next/image';
import { motion } from 'framer-motion';
import { ChevronLeft, ChevronRight, ArrowRight } from 'lucide-react';

const ARTICLES = [
  {
    id: 1,
    title: 'Manfaat Garam Beryodium Daripada Garam Yang Lain',
    excerpt:
      'Manfaat utama garam beryodium bagi tubuh adalah sebagai sumber mineral penting untuk....',
    image: '/images/home/article/article-1.png',
  },
  {
    id: 2,
    title: 'Nanas Dan Garam Bisa Sembuhkan Penyakit',
    excerpt:
      'Kombinasi rendaman nanas dan air garam terbukti secara ilmiah efektif untuk menonaktifkan enzim...',
    image: '/images/home/article/article-2.png',
  },
  {
    id: 3,
    title: 'Manfaat Garam Beryodium Saat Berpuasa',
    excerpt:
      'Konsumsi garam beryodium saat sahur dan berbuka membantu menjaga keseimbangan elektrolit dan...',
    image: '/images/home/article/article-3.png',
  },
];

export function ArticleSection() {
  const scrollRef = useRef<HTMLDivElement>(null);
  const [canScrollLeft, setCanScrollLeft] = useState(false);
  const [canScrollRight, setCanScrollRight] = useState(true);

  const checkScroll = () => {
    const el = scrollRef.current;
    if (!el) return;
    setCanScrollLeft(el.scrollLeft > 0);
    setCanScrollRight(
      Math.ceil(el.scrollLeft) < el.scrollWidth - el.clientWidth - 10
    );
  };

  const scroll = (direction: 'left' | 'right') => {
    const el = scrollRef.current;
    if (!el) return;
    const cardWidth = el.clientWidth > 768 ? 440 : 340;
    el.scrollBy({
      left: direction === 'left' ? -cardWidth : cardWidth,
      behavior: 'smooth',
    });
  };

  return (
    <div className="w-full relative py-12 md:py-20 mt-12">
      {/* Ship Mascot Overlay */}
      <motion.div
        initial={{ x: 100, opacity: 0 }}
        whileInView={{ x: 0, opacity: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 0.8, ease: 'easeOut' }}
        className="absolute right-0 -top-32 md:-top-48 xl:-top-64 w-[250px] md:w-[450px] xl:w-[600px] aspect-square z-0 pointer-events-none"
      >
        <Image
          src="/images/home/activity/mascot-ship.png"
          alt="Mascot Kapal"
          fill
          className="object-contain object-bottom-right"
        />
      </motion.div>

      <div className="container mx-auto px-4 relative z-10">
        {/* Title */}
        <div className="flex flex-col items-start justify-start mb-12">
          <h2 className="text-[32px] sm:text-[44px] md:text-[64px] font-title uppercase tracking-wide flex flex-row items-center gap-2 md:gap-4 leading-none">
            <div className="relative">
              <span
                className="absolute top-[3px] left-[3px] text-white"
                aria-hidden="true"
              >
                ARTIKEL
              </span>
              <span
                className="relative text-white"
                style={{ WebkitTextStroke: '2px #1C1D1F' }}
              >
                ARTIKEL
              </span>
            </div>
            <div className="relative">
              <span
                className="absolute top-[3px] left-[3px] text-white"
                aria-hidden="true"
              >
                KAMI
              </span>
              <span
                className="relative text-white"
                style={{ WebkitTextStroke: '2px #1C1D1F' }}
              >
                KAMI
              </span>
            </div>
          </h2>
        </div>

        {/* Carousel Container */}
        <div className="relative max-w-[1300px] mx-auto group">
          {/* Navigation Arrows */}
          <motion.button
            initial={{ opacity: 0 }}
            animate={{ opacity: canScrollLeft ? 1 : 0 }}
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
            onClick={() => scroll('left')}
            disabled={!canScrollLeft}
            className="absolute -left-4 md:-left-8 top-1/2 -translate-y-1/2 z-20 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-full bg-transparent border-2 border-[#6E5904] text-[#6E5904] hover:bg-[#FFD738] transition-colors disabled:pointer-events-none md:opacity-0 md:group-hover:opacity-100"
            aria-label="Scroll left"
          >
            <ChevronLeft className="w-6 h-6" />
          </motion.button>

          <motion.button
            initial={{ opacity: 0 }}
            animate={{ opacity: canScrollRight ? 1 : 0 }}
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
            onClick={() => scroll('right')}
            disabled={!canScrollRight}
            className="absolute -right-4 md:-right-8 top-1/2 -translate-y-1/2 z-20 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-full bg-transparent border-2 border-[#6E5904] text-[#6E5904] hover:bg-[#FFD738] transition-colors disabled:pointer-events-none md:opacity-0 md:group-hover:opacity-100"
            aria-label="Scroll right"
          >
            <ChevronRight className="w-6 h-6" />
          </motion.button>

          {/* Cards */}
          <div
            ref={scrollRef}
            onScroll={checkScroll}
            className="flex gap-6 md:gap-8 overflow-x-auto scrollbar-hide snap-x snap-mandatory py-8 px-4"
            style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
          >
            {ARTICLES.map((article, idx) => (
              <motion.div
                key={article.id}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: '-50px' }}
                transition={{ delay: idx * 0.15, duration: 0.6 }}
                className="snap-center shrink-0 w-[300px] sm:w-[360px] md:w-[411px] bg-[#FFFAEC] rounded-[30px] shadow-[4px_4px_4px_0px_rgba(0,0,0,0.25)] flex flex-col p-6 md:p-8"
              >
                <div className="flex flex-col gap-4 mb-6 grow">
                  <h3 className="text-[#6E5904] text-[20px] md:text-[24px] font-bold leading-snug line-clamp-2">
                    {article.title}
                  </h3>
                  <p className="text-[#1C1D1F] text-[14px] font-light leading-relaxed line-clamp-3">
                    {article.excerpt}
                  </p>
                </div>

                <div className="relative w-full aspect-square rounded-[30px] overflow-hidden mb-6 shrink-0 shadow-sm">
                  <Image
                    src={article.image}
                    alt={article.title}
                    fill
                    className="object-cover hover:scale-105 transition-transform duration-500"
                  />
                </div>

                <button
                  className="w-full bg-[#FFD738] hover:bg-[#FADB2B] transition-colors rounded-[20px] h-[40px] md:h-[48px] flex items-center justify-between px-4 sm:px-6 shadow-sm group/btn"
                  onClick={() => window.open('#', '_blank')}
                >
                  <span className="text-[#6E5904] text-[13px] md:text-[14px] font-semibold">
                    Baca Selengkapnya
                  </span>
                  <div className="bg-white rounded-full w-6 h-6 md:w-8 md:h-8 flex items-center justify-center group-hover/btn:translate-x-1 transition-transform">
                    <ArrowRight className="w-4 h-4 text-[#6E5904]" />
                  </div>
                </button>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}