import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { SiteShell, SiteLink } from "@/components/site/site-shell";
import { getStorage } from "@/core/storage/storage";
import { resolveRequestTenant } from "@/core/tenant/request-tenant";
import { getArchitectProfile } from "@/services/profile-service";
import { getPublishedTeamMemberBySlug } from "@/services/team-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 member = await getPublishedTeamMemberBySlug(resolved.context, slug);
  if (!member) return { title: "Not found", robots: { index: false } };

  return {
    title: member.name,
    description: member.role || member.bio || undefined,
  };
}

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

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

  const storage = getStorage();
  const photoSrc = member.photoStorageKey
    ? await storage.getSignedUrl(
        member.photoStorageKey,
        resolved.context.tenantId,
      )
    : null;

  return (
    <SiteShell
      studioName={resolved.context.studioName}
      location={profile?.location}
      active="team"
      headerTone={photoSrc ? "dark" : "light"}
    >
      <main>
        <section
          className={`relative isolate overflow-hidden ${
            photoSrc
              ? "min-h-[55svh] bg-[var(--archi-dark)] text-white"
              : "bg-transparent pt-28"
          }`}
        >
          {photoSrc ? (
            <>
              <div className="absolute inset-0">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={photoSrc}
                  alt=""
                  className="studio-hero-media h-full w-full object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/40 to-black/20" />
              </div>
              <div className="relative studio-container flex min-h-[55svh] flex-col justify-end pb-12 pt-[calc(5rem+env(safe-area-inset-top))] sm:pb-14">
                <SiteLink
                  href="/team"
                  className="mb-8 text-sm text-white/55 transition hover:text-white"
                >
                  ← Team
                </SiteLink>
                <h1 className="font-[family-name:var(--font-display)] text-[clamp(2.5rem,6vw,5rem)] leading-[1.02] tracking-tight">
                  {member.name}
                </h1>
                {member.role ? (
                  <p className="mt-4 text-sm tracking-[0.18em] text-white/55 uppercase">
                    {member.role}
                  </p>
                ) : null}
              </div>
            </>
          ) : (
            <div className="studio-container max-w-3xl">
              <SiteLink
                href="/team"
                className="text-sm text-[var(--archi-ink-muted)] transition hover:text-[var(--archi-ink)]"
              >
                ← Team
              </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">
                {member.name}
              </h1>
              {member.role ? (
                <p className="mt-4 text-sm tracking-[0.18em] text-[var(--archi-ink-muted)] uppercase">
                  {member.role}
                </p>
              ) : null}
            </div>
          )}
        </section>

        <section className="studio-container max-w-3xl py-12 sm:py-16 lg:py-24">
          {member.bio ? (
            <p className="whitespace-pre-wrap text-lg leading-9 text-[var(--archi-ink)]/85">
              {member.bio}
            </p>
          ) : (
            <p className="text-[var(--archi-ink-muted)]">
              Bio coming soon.
            </p>
          )}
          {member.email ? (
            <a
              href={`mailto:${member.email}`}
              className="mt-10 inline-flex text-sm font-medium tracking-wide underline decoration-[var(--archi-gold)] underline-offset-8 transition hover:opacity-70"
            >
              {member.email}
            </a>
          ) : null}
        </section>
      </main>
    </SiteShell>
  );
}