import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { getAllRehberler, getAllRehberSlugs, getRehber } from "../rehber-queries";
import { JsonLd, articleJsonLd, breadcrumbJsonLd } from "@/lib/seo";
import { CtaSiraForm } from "@/features/sihirbaz/components/cta-sira-form";
import { ElCizimiSema } from "./el-cizimi-sema";
import { RehberKapak } from "./rehber-kapak";
import { Skeleton } from "@/components/ui/skeleton";

// Sayfanın generateStaticParams'ı için — sayfalar *-queries import etmez.
export function rehberStaticSlugs(): string[] {
  const slugs = getAllRehberSlugs();
  if (slugs.length === 0) {
    throw new Error("rehber: content/rehber altında hiç makale yok");
  }
  return slugs;
}

export function rehberYaziMetadata(slug: string): Metadata {
  const yazi = getRehber(slug);
  if (!yazi) return {};
  return {
    title: yazi.baslik,
    description: yazi.aciklama,
    alternates: { canonical: `/rehber/${slug}` },
    openGraph: {
      type: "article",
      title: yazi.baslik,
      description: yazi.aciklama,
      publishedTime: yazi.tarih,
    },
  };
}

export function RehberMakale({ slug }: { slug: string }) {
  const yazi = getRehber(slug);
  if (!yazi) notFound();

  const digerYazilar = getAllRehberler()
    .filter((y) => y.slug !== slug)
    .slice(0, 4);

  return (
    <>
      <JsonLd
        data={articleJsonLd({
          title: yazi.baslik,
          description: yazi.aciklama,
          path: `/rehber/${slug}`,
          datePublished: yazi.tarih,
        })}
      />
      <JsonLd
        data={breadcrumbJsonLd([
          { name: "Ana Sayfa", path: "/" },
          { name: "Rehber", path: "/rehber" },
          { name: yazi.baslik, path: `/rehber/${slug}` },
        ])}
      />

      <article>
        <RehberKapak baslik={yazi.baslik} className="mt-6 shadow-sm" />
        <h1 className="mt-8 font-heading text-3xl font-bold text-slate-900 sm:text-4xl">
          {yazi.baslik}
        </h1>
        <p className="mt-3 text-base leading-7 text-slate-600">
          {yazi.aciklama}
        </p>
        <div
          className="mt-8 text-[15px] leading-7 text-slate-700
            [&_h2]:mt-10 [&_h2]:font-heading [&_h2]:text-xl [&_h2]:font-bold [&_h2]:text-slate-900
            [&_h3]:mt-6 [&_h3]:font-heading [&_h3]:text-base [&_h3]:font-bold [&_h3]:text-slate-900
            [&_p]:mt-3
            [&_a]:font-medium [&_a]:text-primary hover:[&_a]:underline
            [&_strong]:font-semibold [&_strong]:text-slate-900
            [&_ul]:mt-3 [&_ul]:list-disc [&_ul]:space-y-1.5 [&_ul]:pl-6
            [&_ol]:mt-3 [&_ol]:list-decimal [&_ol]:space-y-1.5 [&_ol]:pl-6
            [&_table]:mt-4 [&_table]:w-full [&_table]:border-collapse [&_table]:text-sm
            [&_th]:border [&_th]:border-slate-200 [&_th]:bg-slate-50 [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:font-semibold
            [&_td]:border [&_td]:border-slate-200 [&_td]:px-3 [&_td]:py-2
            [&_blockquote]:mt-4 [&_blockquote]:border-l-4 [&_blockquote]:border-primary/30 [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-slate-600"
        >
          {yazi.parcalar.map((parca, i) =>
            parca.tip === "html" ? (
              <div key={i} dangerouslySetInnerHTML={{ __html: parca.html }} />
            ) : (
              <ElCizimiSema
                key={i}
                tanim={parca.sema.tanim}
                ariaLabel={parca.sema.ariaLabel}
                figcaption={parca.sema.altyazi}
              />
            ),
          )}
        </div>
      </article>

      <div className="mt-12">
        <CtaSiraForm />
      </div>

      {digerYazilar.length > 0 ? (
        <section className="mt-12">
          <h2 className="font-heading text-xl font-bold text-slate-900">
            Diğer rehber yazıları
          </h2>
          <ul className="mt-3 space-y-2">
            {digerYazilar.map((y) => (
              <li key={y.slug}>
                <Link
                  href={`/rehber/${y.slug}`}
                  className="text-sm font-medium text-primary hover:underline"
                >
                  {y.baslik}
                </Link>
              </li>
            ))}
          </ul>
        </section>
      ) : null}
    </>
  );
}

export function RehberMakaleSkeleton() {
  return (
    <div>
      <Skeleton className="mt-6 aspect-[1200/630] w-full rounded-3xl" />
      <Skeleton className="mt-8 h-10 w-3/4" />
      <div className="mt-3 space-y-3">
        {Array.from({ length: 5 }, (_, i) => (
          <Skeleton key={i} className="h-5 w-full" />
        ))}
      </div>
    </div>
  );
}
