"use client";

import Link from "next/link";
import { ArrowRight, Calendar } from "lucide-react";
import { FadeInUp, StaggerContainer, StaggerItem } from "@/components/ui/motion";

interface ArticleData {
  id: number;
  title: string;
  excerpt: string | null;
  imageUrl: string | null;
  label: string | null;
  publishedAt: Date | null;
}

const FALLBACK_IMAGE = "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?auto=format&fit=crop&w=1200&q=80";
const SIDE_FALLBACK_IMAGES = [
  "https://images.unsplash.com/photo-1501504905252-473c47e087f8?auto=format&fit=crop&w=800&q=80",
  "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&w=800&q=80",
];

function formatDate(date: Date | null) {
  if (!date) return null;
  return new Date(date).toLocaleDateString("id-ID", {
    day: "numeric",
    month: "long",
    year: "numeric",
  });
}

export function ArticleSection({ articles }: { articles: ArticleData[] }) {
  if (!articles || articles.length === 0) return null;

  // Take up to 3 articles for the asymmetric bento grid
  const displayArticles = articles.slice(0, 3);
  const mainArticle = displayArticles[0];
  const sideArticles = displayArticles.slice(1);

  return (
    <section className="bg-slate-50 py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        
        <FadeInUp className="mb-12 flex flex-col md:flex-row md:items-end md:justify-between gap-6">
          <div className="max-w-2xl">
            <p className="text-sm font-bold text-merah-ranata tracking-wider uppercase mb-3">
              ARTIKEL & TIPS PERJALANAN
            </p>
            <h2 className="text-3xl md:text-5xl font-extrabold text-slate-900 tracking-tight mb-4">
              Jelajahi Dunia Lewat Cerita
            </h2>
            <p className="text-base md:text-lg text-slate-500 leading-relaxed">
              Kumpulan panduan, tips liburan, dan inspirasi perjalanan terbaru untuk merencanakan petualangan Anda selanjutnya dengan lebih baik.
            </p>
          </div>
          <Link
            href="/article"
            className="inline-flex items-center gap-2 font-bold text-merah-ranata hover:text-red-700 transition-colors group"
          >
            Semua Artikel
            <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
          </Link>
        </FadeInUp>

        <StaggerContainer className="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
          
          {/* Main Article (Left) */}
          {mainArticle && (
            <StaggerItem className="lg:col-span-2 group">
              <Link href={`/article/${mainArticle.id}`} className="block relative h-full min-h-[400px] lg:min-h-[500px] rounded-[32px] overflow-hidden bg-gray-900 shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
                <img
                  src={mainArticle.imageUrl || FALLBACK_IMAGE}
                  alt={mainArticle.title}
                  className="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-110 opacity-80"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/40 to-transparent" />

                <div className="absolute inset-0 p-8 md:p-10 flex flex-col justify-end text-white">
                  <div className="transform transition-transform duration-500 translate-y-4 group-hover:translate-y-0">
                    <div className="flex items-center gap-4 mb-4">
                      {mainArticle.label && (
                        <span className="rounded-full bg-merah-ranata px-4 py-1.5 text-xs font-bold uppercase tracking-wider">
                          {mainArticle.label}
                        </span>
                      )}
                      {formatDate(mainArticle.publishedAt) && (
                        <div className="flex items-center gap-1.5 text-white/80 text-sm font-medium">
                          <Calendar className="w-4 h-4" />
                          <span>{formatDate(mainArticle.publishedAt)}</span>
                        </div>
                      )}
                    </div>
                    <h3 className="text-3xl md:text-5xl font-bold mb-4 leading-[1.1] drop-shadow-lg">
                      {mainArticle.title}
                    </h3>
                    {mainArticle.excerpt && (
                      <p className="text-white/80 text-base md:text-lg line-clamp-2 max-w-2xl">
                        {mainArticle.excerpt}
                      </p>
                    )}
                  </div>
                </div>
              </Link>
            </StaggerItem>
          )}

          {/* Side Articles (Right) */}
          <div className="lg:col-span-1 flex flex-col gap-6 lg:gap-8">
            {sideArticles.map((article, index) => {
              const imageUrl = article.imageUrl || SIDE_FALLBACK_IMAGES[index % SIDE_FALLBACK_IMAGES.length];

              return (
                <StaggerItem key={article.id} className="flex-1 group">
                  <Link href={`/article/${article.id}`} className="block h-full relative rounded-[24px] overflow-hidden bg-gray-900 shadow-sm hover:shadow-xl transition-all duration-500 hover:-translate-y-1">
                    <img
                      src={imageUrl}
                      alt={article.title}
                      className="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-110 opacity-70"
                    />
                  <div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/60 to-transparent" />
                  
                  <div className="absolute inset-0 p-6 flex flex-col justify-end text-white">
                    <div className="transform transition-transform duration-500 translate-y-2 group-hover:translate-y-0">
                      {article.label && (
                        <span className="mb-3 inline-block rounded-full bg-white/20 backdrop-blur-md border border-white/20 px-3 py-1 text-[10px] font-bold uppercase tracking-wider">
                          {article.label}
                        </span>
                      )}
                      <h3 className="text-xl font-bold mb-2 leading-snug drop-shadow-md line-clamp-2">
                        {article.title}
                      </h3>
                      {formatDate(article.publishedAt) && (
                        <div className="flex items-center gap-3 text-white/60 text-xs font-medium mt-2">
                          <span className="flex items-center gap-1"><Calendar className="w-3.5 h-3.5" /> {formatDate(article.publishedAt)}</span>
                        </div>
                      )}
                    </div>
                  </div>
                </Link>
              </StaggerItem>
            );
          })}
          </div>

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