import Link from "next/link";

import { BlogCard, Container, EmptyState, ErrorState, JsonLd, PageHero, Section, SectionHeading } from "@/components";
import { blogTags, getBlogResourceMeta } from "@/data/blog-resources";
import { api, formatDate } from "@/lib/api";
import { breadcrumbSchema, createMetadata } from "@/lib/seo";
import { cn } from "@/lib/utils";

export const revalidate = 300;

export const metadata = createMetadata({
  title: "Blog i resursi",
  description: "Praktična iskustva iz razvoja eCommerce sistema, logistike, ERP integracija, WMS procesa i digitalne infrastrukture.",
  path: "/blog",
});

type BlogPageProps = {
  searchParams?: Promise<{ tag?: string }>;
};

export default async function BlogPage({ searchParams }: BlogPageProps) {
  const params = searchParams ? await searchParams : {};
  const selectedTag = typeof params.tag === "string" ? params.tag : null;
  const result = await api.blog();
  const posts = result.ok ? result.data : [];
  const filteredPosts = selectedTag
    ? posts.filter((post) => getBlogResourceMeta(post.slug)?.tags.includes(selectedTag))
    : posts;

  return (
    <main>
      <JsonLd
        data={breadcrumbSchema([
          { name: "Početna", path: "/" },
          { name: "Blog", path: "/blog" },
        ])}
      />
      <PageHero
        eyebrow="Blog i resursi"
        title="Blog i resursi"
        description="Praktična iskustva iz razvoja eCommerce sistema, logistike, ERP integracija, WMS procesa i digitalne infrastrukture."
        primaryAction={{ label: "Zakažite konsultacije", href: "/kontakt" }}
        secondaryAction={{ label: "Pogledajte case studies", href: "/case-studies" }}
      />
      <Section className="bg-white">
        <Container>
          <SectionHeading
            eyebrow="Resursi"
            title="Sadržaj koji objašnjava stvarne operativne probleme."
            description="Ne pišemo generičke savete. Svaki tekst je vezan za realne procese: zalihe, porudžbine, ERP, magacin, tracking, infrastrukturu i merljiv rad sistema."
          />
          <div className="mt-8 flex gap-2 overflow-x-auto border-b border-slate-200/80 pb-4">
            <Link
              href="/blog"
              className={cn(
                "inline-flex min-h-9 shrink-0 items-center rounded-full border px-4 text-sm font-semibold transition",
                !selectedTag ? "border-primary bg-primary text-white" : "border-slate-200 bg-white text-slate-700 hover:border-primary/40 hover:text-primary",
              )}
            >
              Svi tekstovi
            </Link>
            {blogTags.map((tag) => (
              <Link
                key={tag}
                href={`/blog?tag=${encodeURIComponent(tag)}`}
                className={cn(
                  "inline-flex min-h-9 shrink-0 items-center rounded-full border px-4 text-sm font-semibold transition",
                  selectedTag === tag ? "border-primary bg-primary text-white" : "border-slate-200 bg-white text-slate-700 hover:border-primary/40 hover:text-primary",
                )}
              >
                {tag}
              </Link>
            ))}
          </div>
          <div className="mt-10 grid gap-5 md:grid-cols-2 lg:grid-cols-3">
            {filteredPosts.length > 0 ? (
              filteredPosts.map((post) => {
                const meta = getBlogResourceMeta(post.slug);

                return (
                <BlogCard
                  key={post.id}
                  title={post.title}
                  excerpt={post.excerpt ?? "Pročitajte ceo tekst."}
                  href={`/blog/${post.slug}`}
                  date={formatDate(post.published_at)}
                  image={meta?.image ?? post.featured_image}
                  tags={meta?.tags}
                />
              );
              })
            ) : (
              <EmptyState
                title="Nema tekstova za izabrani filter"
                description="Izaberite drugi tag ili otvorite sve tekstove."
              />
            )}
          </div>
          {!result.ok ? <div className="mt-6"><ErrorState message={result.message} /></div> : null}
        </Container>
      </Section>
    </main>
  );
}