"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import { ArrowUpRight, CalendarDays } from "lucide-react";
import { MotionItem, MotionReveal, MotionStagger } from "@/components/Motion";
import { SectionHeader } from "@/components/SectionHeader";
import { apiBaseUrl, apiHeaders, apiPath } from "@/lib/api-url";
import { routePath } from "@/lib/route-url";
import type { BlogPost } from "@/lib/blogs";

export function BlogSection() {
  const [posts, setPosts] = useState<BlogPost[]>([]);
  const featuredPosts = posts.slice(0, 3);

  useEffect(() => {
    async function loadBlogs() {
      try {
        const response = await fetch(`${apiBaseUrl}${apiPath("/api/blogs")}`, {
          cache: "no-store",
          headers: apiHeaders(),
        });

        if (!response.ok) {
          return;
        }

        const data = (await response.json()) as { blogs?: BlogPost[] };
        setPosts(data.blogs ?? []);
      } catch {
        setPosts([]);
      }
    }

    loadBlogs();
  }, []);

  return (
    <section className="bg-white py-16 font-['Space_Grotesk'] md:py-24">
      <div className="mx-auto max-w-7xl px-4 md:px-6">
        <MotionReveal>
          <SectionHeader
            eyebrow="Vehicle care blog"
            title="Simple guides for smarter service decisions"
            lead="Helpful reads on maintenance, warning signs, doorstep service, and everyday vehicle care."
          />
        </MotionReveal>

        <MotionStagger className="mt-8 grid gap-6 md:grid-cols-3 2xl:mt-12">
          {featuredPosts.map((post) => (
            <MotionItem key={post.slug}>
              <Link
                href={routePath(`/blog/${post.slug}`)}
                className="group block h-full overflow-hidden rounded-3xl border border-border bg-card transition-all duration-300 hover:-translate-y-1 hover:border-primary/30"
              >
                <div className="relative aspect-[3/2] overflow-hidden bg-slate-100">
                  <Image
                    src={post.image}
                    alt={post.imageAlt}
                    fill
                    sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
                    className="object-cover transition-transform duration-700 group-hover:scale-105"
                  />
                  <span className="absolute left-4 top-4 rounded-full bg-white/90 px-3 py-1 text-[10px] font-black uppercase tracking-[0.18em] text-primary backdrop-blur">
                    {post.category}
                  </span>
                </div>

                <div className="p-6">
                  <div className="flex items-center gap-2 text-xs font-semibold text-muted-foreground">
                    <CalendarDays className="h-4 w-4 text-primary" />
                    <span>{post.date}</span>
                    <span>•</span>
                    <span>{post.readTime}</span>
                  </div>
                  <h3 className="mt-4 text-xl font-black leading-tight tracking-tight text-foreground group-hover:text-primary">
                    {post.title}
                  </h3>
                  <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                    {truncateText(post.excerpt)}
                  </p>
                  <span className="mt-5 inline-flex items-center gap-2 text-sm font-bold text-primary">
                    Read article
                    <ArrowUpRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                  </span>
                </div>
              </Link>
            </MotionItem>
          ))}
        </MotionStagger>

        <MotionReveal className="mt-10 flex justify-center">
          <Link
            href={routePath("/blog")}
            className="inline-flex items-center gap-2 rounded-full bg-foreground px-6 py-3 text-sm font-bold text-background shadow-[0_14px_34px_rgba(0,0,0,0.14)] transition hover:-translate-y-0.5 hover:bg-primary hover:text-primary-foreground active:scale-95"
          >
            View more blogs
            <ArrowUpRight className="h-4 w-4" />
          </Link>
        </MotionReveal>
      </div>
    </section>
  );
}

function truncateText(value: string, maxLength = 150) {
  return value.length > maxLength ? `${value.slice(0, maxLength).trim()}...` : value;
}