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

export async function generateMetadata(): Promise<Metadata> {
  const resolved = await resolveRequestTenant();
  if (!resolved.ok) return { title: "Services", robots: { index: false } };
  return studioPageMetadata(
    resolved.context.studioName,
    "Services",
    `How ${resolved.context.studioName} works with clients from brief to built form.`,
  );
}

export default async function TenantServicesPage() {
  const resolved = await resolveRequestTenant();
  if (!resolved.ok) notFound();

  const [{ profile }, services] = await Promise.all([
    getArchitectProfile(resolved.context),
    listPublishedServices(resolved.context),
  ]);

  return (
    <SiteShell
      studioName={resolved.context.studioName}
      location={profile?.location}
      active="services"
    >
      <main>
        <SitePageHero
          eyebrow="Practice"
          title="Services"
          description={`How ${resolved.context.studioName} works with clients from brief to built form.`}
        />

        <section className="studio-container pb-16 pt-10 sm:pb-20 sm:pt-12">
          {services.length === 0 ? (
            <SiteEmptyState
              title="Services in preparation"
              description="Capability descriptions will appear here once the studio publishes its service offering."
            />
          ) : (
            <ul className="divide-y divide-[var(--archi-line)] border-y border-[var(--archi-line)]">
              {services.map((service, i) => (
                <li key={service.id}>
                  <SiteLink
                    href={`/services/${service.slug}`}
                    className="group grid gap-4 py-10 sm:grid-cols-[5rem_1fr_auto] sm:items-start sm:gap-12 lg:py-14"
                  >
                    <span className="font-[family-name:var(--font-display)] text-sm tracking-[0.22em] text-[var(--archi-gold)]">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <div>
                      <h2 className="font-[family-name:var(--font-display)] text-[clamp(1.5rem,4vw,2.25rem)] tracking-tight transition group-hover:opacity-70 sm:text-4xl">
                        {service.title}
                      </h2>
                      {service.description ? (
                        <p className="mt-4 max-w-2xl line-clamp-3 text-base leading-8 text-[var(--archi-ink-muted)]">
                          {service.description}
                        </p>
                      ) : null}
                    </div>
                    <span className="hidden text-sm tracking-wide text-[var(--archi-ink-muted)] transition group-hover:text-[var(--archi-ink)] sm:mt-2 sm:inline">
                      Details →
                    </span>
                  </SiteLink>
                </li>
              ))}
            </ul>
          )}
        </section>

        <SiteClosingCta
          studioName={resolved.context.studioName}
          title="Discuss a brief"
          description={`Share your program with ${resolved.context.studioName} and we will outline the right engagement.`}
        />
      </main>
    </SiteShell>
  );
}