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

export async function generateMetadata(): Promise<Metadata> {
  const resolved = await resolveRequestTenant();
  if (!resolved.ok) return { title: "Team", robots: { index: false } };
  return studioPageMetadata(
    resolved.context.studioName,
    "Team",
    `The architects and collaborators behind ${resolved.context.studioName}.`,
  );
}

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

  const storage = getStorage();
  const [{ profile }, team] = await Promise.all([
    getArchitectProfile(resolved.context),
    listPublishedTeam(resolved.context),
  ]);

  const withPhotos = await Promise.all(
    team.map(async (member) => ({
      member,
      photoSrc: member.photoStorageKey
        ? await storage.getSignedUrl(
            member.photoStorageKey,
            resolved.context.tenantId,
          )
        : null,
    })),
  );

  return (
    <SiteShell
      studioName={resolved.context.studioName}
      location={profile?.location}
      active="team"
    >
      <main>
        <SitePageHero
          eyebrow="People"
          title="Team"
          description={`The architects and collaborators behind ${resolved.context.studioName}.`}
        />

        <section className="studio-container pb-16 pt-10 sm:pb-20 sm:pt-12">
          {withPhotos.length === 0 ? (
            <SiteEmptyState
              title="Team profiles forthcoming"
              description="Published team members will appear here with roles and biographies."
            />
          ) : (
            <ul className="grid gap-10 sm:grid-cols-2 lg:grid-cols-3">
              {withPhotos.map(({ member, photoSrc }) => (
                <li key={member.id}>
                  <SiteLink
                    href={`/team/${member.slug}`}
                    className="studio-project-tile group block"
                  >
                    <div className="relative aspect-[4/5] overflow-hidden bg-[var(--archi-bg-deep)]">
                      {photoSrc ? (
                        // eslint-disable-next-line @next/next/no-img-element
                        <img
                          src={photoSrc}
                          alt=""
                          className="studio-project-img h-full w-full object-cover"
                        />
                      ) : (
                        <div className="flex h-full items-end bg-gradient-to-br from-[#2a2e35] to-[#101214] p-6">
                          <span className="font-[family-name:var(--font-display)] text-5xl text-white/30">
                            {member.name.slice(0, 1).toUpperCase()}
                          </span>
                        </div>
                      )}
                    </div>
                    <h2 className="mt-5 font-[family-name:var(--font-display)] text-2xl tracking-tight sm:text-3xl">
                      {member.name}
                    </h2>
                    {member.role ? (
                      <p className="mt-2 text-sm text-[var(--archi-ink-muted)]">
                        {member.role}
                      </p>
                    ) : null}
                  </SiteLink>
                </li>
              ))}
            </ul>
          )}
        </section>

        <SiteClosingCta studioName={resolved.context.studioName} />
      </main>
    </SiteShell>
  );
}