import { notFound } from "next/navigation";

import { CmsImage, Container, CTASection, ErrorState, JsonLd, PageHero, RichText, Section, SectionHeading } from "@/components";
import { api } from "@/lib/api";
import { breadcrumbSchema, createMetadata, productSchema } 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.pdaDevice(slug);

  if (!result.ok) {
    return createMetadata({
      title: "PDA uređaj nije pronađen",
      description: "Traženi PDA uređaj nije pronađen ili nije objavljen.",
      path: `/pda-uredjaji/${slug}`,
    });
  }

  const device = result.data;

  return createMetadata({
    title: device.name,
    description: device.short_description ?? device.description,
    path: `/pda-uredjaji/${device.slug}`,
    image: device.image,
  });
}

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

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

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

  const device = result.data;

  return (
    <main>
      <JsonLd
        data={[
          breadcrumbSchema([
            { name: "Početna", path: "/" },
            { name: "PDA uređaji", path: "/pda-uredjaji" },
            { name: device.name, path: `/pda-uredjaji/${device.slug}` },
          ]),
          productSchema(device),
        ]}
      />
      <PageHero
        eyebrow={device.brand ?? "PDA uređaj"}
        title={device.name}
        description={device.short_description ?? "PDA uređaj za skladišne procese, WMS i barkod skeniranje."}
        primaryAction={{ label: "Pošalji upit", href: "/kontakt" }}
      />
      <Section className="bg-white">
        <Container className="grid gap-10 lg:grid-cols-[1fr_0.8fr]">
          <div>
            <SectionHeading title="Opis uređaja" />
            <div className="mt-6">
              <CmsImage src={device.image} alt={device.name} className="mb-6" priority />
              <RichText content={device.description} />
            </div>
          </div>
          <div className="rounded-lg border border-slate-200 bg-slate-50 p-6">
            <h2 className="text-xl font-semibold text-slate-950">Slučajevi upotrebe</h2>
            <ul className="mt-4 grid gap-3 text-sm text-slate-700">
              {(device.use_cases.length > 0 ? device.use_cases : ["WMS", "Picking", "Packing", "Barcode scanning"]).map((item) => (
                <li key={item} className="rounded-lg bg-white px-4 py-3 ring-1 ring-slate-200">
                  {item}
                </li>
              ))}
            </ul>
          </div>
        </Container>
      </Section>
      <CTASection title="Da li ovaj uređaj odgovara vašem skladištu?" description="Pošaljite nam proces, WMS okruženje i količinu uređaja koja vam je potrebna." />
    </main>
  );
}