import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { SiteShell, SiteLink } from "@/components/site/site-shell";
import { resolveRequestTenant } from "@/core/tenant/request-tenant";
import { getArchitectProfile } from "@/services/profile-service";
import { getPublishedServiceBySlug } from "@/services/studio-services-service";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const resolved = await resolveRequestTenant();
  if (!resolved.ok) return { title: "Not found", robots: { index: false } };

  const service = await getPublishedServiceBySlug(resolved.context, slug);
  if (!service) return { title: "Not found", robots: { index: false } };

  return {
    title: service.title,
    description: service.description || undefined,
  };
}

export default async function TenantServiceDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const resolved = await resolveRequestTenant();
  if (!resolved.ok) notFound();

  const [{ profile }, service] = await Promise.all([
    getArchitectProfile(resolved.context),
    getPublishedServiceBySlug(resolved.context, slug),
  ]);
  if (!service) notFound();

  return (
    <SiteShell
      studioName={resolved.context.studioName}
      location={profile?.location}
      active="services"
    >
      <main className="studio-container max-w-3xl pb-20 pt-[calc(5rem+env(safe-area-inset-top))] sm:pb-24">
        <SiteLink
          href="/services"
          className="text-sm text-[var(--archi-ink-muted)] transition hover:text-[var(--archi-ink)]"
        >
          ← Services
        </SiteLink>
        <div className="studio-line-accent mt-10 mb-6 h-px w-16" />
        <h1 className="font-[family-name:var(--font-display)] text-4xl tracking-tight sm:text-5xl lg:text-6xl">
          {service.title}
        </h1>
        {service.description ? (
          <p className="mt-10 whitespace-pre-wrap text-lg leading-9 text-[var(--archi-ink)]/85">
            {service.description}
          </p>
        ) : (
          <p className="mt-10 text-[var(--archi-ink-muted)]">
            Details for this service will appear here soon.
          </p>
        )}
        <SiteLink
          href="/contact"
          className="studio-btn-primary mt-14"
        >
          Inquire about this service
        </SiteLink>
      </main>
    </SiteShell>
  );
}