import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { CheckCircle2 } from "lucide-react";
import { renderContent } from "@/lib/content-render";
import { getServiceBySlug, getSiteSettings, listProjects } from "@/lib/data";
import { buildMetadata } from "@/lib/seo";
import { ProjectsGrid } from "@/components/projects-grid";
import { SectionTitle } from "@/components/section-title";
import { FaqList } from "@/components/faq-list";
import { ServiceHero } from "@/components/service-hero";
import { ServiceSidebar } from "@/components/service-sidebar";
import { ServiceLd, FaqLd } from "@/components/json-ld";
import type { FaqItem } from "@/lib/types";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const service = await getServiceBySlug(slug);
  if (!service) return { title: "Hizmet bulunamadı" };
  return buildMetadata(`/hizmetler/${slug}`, {
    title: service.title,
    description: service.description.slice(0, 160),
  });
}

function parseFaq(items?: string[] | null): FaqItem[] {
  if (!items) return [];
  const out: FaqItem[] = [];
  for (const raw of items) {
    try {
      const obj = JSON.parse(raw) as Partial<FaqItem>;
      if (obj.q && obj.a) out.push({ q: obj.q, a: obj.a });
    } catch {
      const [q, a] = raw.split("|||").map((s) => s.trim());
      if (q && a) out.push({ q, a });
    }
  }
  return out;
}

export default async function ServiceDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const service = await getServiceBySlug(slug);
  if (!service) notFound();

  const [relatedProjects, settings] = await Promise.all([
    listProjects({ serviceSlug: slug, limit: 6 }),
    getSiteSettings(),
  ]);

  const faqItems = parseFaq(service.faq);
  const html = renderContent(service.content);

  return (
    <>
      <ServiceLd service={service} settings={settings} />
      <FaqLd items={faqItems} />
      <ServiceHero service={service} settings={settings} />

      <div className="mx-auto grid max-w-7xl gap-12 px-6 py-16 lg:grid-cols-[1.5fr_1fr]">
        <div>
          {service.features && service.features.length > 0 && (
            <section className="mb-12">
              <h2 className="text-2xl font-bold text-[var(--navy)]">
                Bu hizmet kapsamında
              </h2>
              <ul className="mt-6 grid gap-3 sm:grid-cols-2">
                {service.features.map((f) => (
                  <li
                    key={f}
                    className="flex items-start gap-2 rounded-xl border border-[var(--border)] bg-white p-4"
                  >
                    <CheckCircle2 className="mt-0.5 size-5 shrink-0 text-[var(--sky-600)]" />
                    <span className="text-sm text-[var(--foreground)]">{f}</span>
                  </li>
                ))}
              </ul>
            </section>
          )}

          {html && (
            <article
              className="prose prose-lg max-w-none text-[var(--foreground)]"
              dangerouslySetInnerHTML={{ __html: html }}
            />
          )}

          {faqItems.length > 0 && (
            <section className="mt-12">
              <h2 className="text-2xl font-bold text-[var(--navy)]">
                Sıkça sorulan sorular
              </h2>
              <div className="mt-6">
                <FaqList items={faqItems} />
              </div>
            </section>
          )}
        </div>

        <ServiceSidebar currentSlug={slug} />
      </div>

      {relatedProjects.length > 0 && (
        <section className="border-t border-[var(--border)] bg-[var(--navy-50)]/40 py-20">
          <div className="mx-auto max-w-7xl px-6">
            <SectionTitle
              align="left"
              eyebrow="Referanslar"
              title={`${service.title} alanındaki projelerimiz`}
              description="Bu hizmette tamamladığımız işlerden seçkiler."
            />
            <div className="mt-10">
              <ProjectsGrid projects={relatedProjects} />
            </div>
          </div>
        </section>
      )}
    </>
  );
}