import { notFound } from "next/navigation";
import Link from "next/link";

import { Badge, Button, Card, CmsImage, Container, ErrorState, FAQAccordion, IconMark, JsonLd, PageHero, RichText, Section, SectionHeading, getServiceIcon } from "@/components";
import { getBlogFaqs, getBlogResourceMeta } from "@/data/blog-resources";
import { api, formatDate } from "@/lib/api";
import { articleSchema, breadcrumbSchema, createMetadata, faqSchema } from "@/lib/seo";

export const revalidate = 300;

type DetailParams = { params: Promise<{ slug: string }> };

export async function generateMetadata({ params }: DetailParams) {
  const { slug } = await params;
  const result = await api.blogPost(slug);

  if (!result.ok) {
    return createMetadata({
      title: "Blog tekst nije pronađen",
      description: "Traženi blog tekst nije pronađen ili nije objavljen.",
      path: `/blog/${slug}`,
    });
  }

  const post = result.data;
  const meta = getBlogResourceMeta(post.slug);
  const image = meta?.image ?? post.featured_image;

  return createMetadata({
    title: post.meta_title ?? post.title,
    description: post.meta_description ?? post.excerpt,
    path: `/blog/${post.slug}`,
    image,
    type: "article",
  });
}

export default async function BlogPostPage({ params }: DetailParams) {
  const { slug } = await params;
  const result = await api.blogPost(slug);

  if (!result.ok) {
    if (result.status === 404) {
      notFound();
    }

    return <main className="py-16"><Container><ErrorState message={result.message} /></Container></main>;
  }

  const post = result.data;
  const meta = getBlogResourceMeta(post.slug);
  const image = meta?.image ?? post.featured_image ?? null;
  const article = { ...post, featured_image: image };
  const toc = ["Uvod", "Problem", "Rešenje", "Primer iz prakse", "Zaključak"];
  const workflow = meta?.workflow ?? [];
  const tags = meta?.tags ?? [];
  const faqs = getBlogFaqs(post.slug);

  return (
    <main>
      <JsonLd
        data={[
          breadcrumbSchema([
            { name: "Početna", path: "/" },
            { name: "Blog", path: "/blog" },
              { name: post.title, path: `/blog/${post.slug}` },
            ]),
          articleSchema(article),
          ...(faqs.length ? [faqSchema(faqs)] : []),
        ]}
      />
      <PageHero
        eyebrow={`${formatDate(post.published_at)}${meta?.readingTime ? ` · ${meta.readingTime}` : ""}`}
        title={post.title}
        description={post.excerpt ?? "Praktičan tekst iz ECOM01 resursa o poslovnim sistemima, logistici i integracijama."}
        primaryAction={{ label: "Zakažite konsultaciju", href: "/kontakt" }}
        secondaryAction={{ label: "Svi tekstovi", href: "/blog" }}
      />
      <Section className="bg-white">
        <Container>
          <CmsImage src={image} alt={post.title} className="rounded-3xl shadow-[0_28px_90px_rgb(15_23_42_/_0.12)]" priority />
          <div className="mt-10 grid gap-8 lg:grid-cols-[260px_minmax(0,1fr)]">
            <aside className="hidden lg:block">
              <div className="sticky top-28 rounded-2xl border border-slate-200 bg-slate-50/80 p-5">
                <p className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">U tekstu</p>
                <nav className="mt-4 space-y-2">
                  {toc.map((item) => (
                    <a key={item} href={`#${item.toLowerCase().replaceAll(" ", "-")}`} className="block text-sm font-medium text-slate-600 transition hover:text-primary">
                      {item}
                    </a>
                  ))}
                </nav>
                {tags.length ? (
                  <div className="mt-6 flex flex-wrap gap-2">
                    {tags.map((tag) => (
                      <Badge key={tag} tone="blue">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                ) : null}
              </div>
            </aside>
            <article className="min-w-0">
              {meta?.metrics?.length ? (
                <div className="mb-8 grid gap-4 sm:grid-cols-2">
                  {meta.metrics.map((metric) => (
                    <div key={metric.value} className="rounded-2xl border border-slate-800 bg-slate-950 p-5 text-white shadow-[0_18px_55px_rgb(15_23_42_/_0.16)]">
                      <p className="text-3xl font-semibold tracking-tight">{metric.value}</p>
                      <p className="mt-2 text-sm leading-6 text-slate-300">{metric.label}</p>
                    </div>
                  ))}
                </div>
              ) : null}
              {workflow.length ? (
                <div className="mb-8 overflow-x-auto rounded-2xl border border-slate-200 bg-slate-50 p-4">
                  <div className="flex min-w-max items-center gap-3">
                    {workflow.map((step, index) => (
                      <div key={step} className="flex items-center gap-3">
                        <div className="flex items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-[0_10px_30px_rgb(15_23_42_/_0.045)]">
                          <IconMark icon={getServiceIcon(index === 0 ? "workflow" : index === workflow.length - 1 ? "check" : "boxes")} className="h-8 w-8 rounded-lg" />
                          <span className="text-sm font-semibold text-slate-800">{step}</span>
                        </div>
                        {index < workflow.length - 1 ? <span className="text-slate-300">→</span> : null}
                      </div>
                    ))}
                  </div>
                </div>
              ) : null}
              <RichText content={post.content} />
              <div className="mt-12 rounded-3xl border border-primary/15 bg-primary-50 p-6 sm:p-8">
                <p className="text-2xl font-semibold tracking-tight text-slate-950">Želite da unapredite logistiku i eCommerce procese?</p>
                <p className="mt-3 max-w-2xl text-sm leading-6 text-slate-700">
                  Pošaljite nam kako danas rade porudžbine, zalihe, ERP i magacin. Razgovor obično brzo pokaže gde se gubi vreme i šta prvo treba automatizovati.
                </p>
                <div className="mt-6 flex flex-wrap gap-3">
                  <Button href="/kontakt">Zakažite konsultaciju</Button>
                  <Button href="tel:+381643646591" variant="outline">064 364 6591</Button>
                </div>
              </div>
            </article>
          </div>
        </Container>
      </Section>
      {meta ? (
        <Section className="bg-slate-50">
          <Container>
            <div className="grid gap-5 lg:grid-cols-3">
              <RelatedBlock title="Povezani tekstovi" items={meta.relatedArticles} />
              <RelatedBlock title="Case studies" items={meta.relatedCaseStudies} />
              <RelatedBlock title="Povezana rešenja" items={meta.relatedServices} />
            </div>
          </Container>
        </Section>
      ) : null}
      {faqs.length ? (
        <Section className="bg-white">
          <Container className="grid gap-8 lg:grid-cols-[0.78fr_1.22fr]">
            <SectionHeading
              eyebrow="FAQ"
              title="Kratki odgovori za ovu temu."
              description="Ovi odgovori pomažu da tekst bude koristan i za čitaoca i za Google, AEO i AI pretragu."
            />
            <FAQAccordion items={faqs} />
          </Container>
        </Section>
      ) : null}
    </main>
  );
}

function RelatedBlock({ title, items }: { title: string; items: Array<{ title: string; href: string; description: string }> }) {
  if (items.length === 0) {
    return null;
  }

  return (
    <Card className="h-full">
      <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">{title}</p>
      <div className="mt-5 space-y-4">
        {items.map((item) => (
          <Link key={item.href} href={item.href} className="block rounded-xl border border-slate-200 bg-white p-4 transition hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-[0_16px_44px_rgb(15_23_42_/_0.07)]">
            <span className="font-semibold text-slate-950">{item.title}</span>
            <span className="mt-2 block text-sm leading-6 text-slate-600">{item.description}</span>
          </Link>
        ))}
      </div>
    </Card>
  );
}