import {
  SitePathProvider,
  SiteLink,
} from "@/components/site/site-link";
import { SiteFooter } from "@/components/site/site-footer";
import { SiteHeader } from "@/components/site/site-header";
import { getStudioPathPrefix } from "@/core/tenant/get-studio-path-prefix";

export type SiteActive =
  | "home"
  | "projects"
  | "experience"
  | "services"
  | "about"
  | "studio"
  | "team"
  | "journal"
  | "awards"
  | "publications"
  | "contact";

export async function SiteShell({
  studioName,
  location,
  active,
  headerTone = "light",
  children,
}: {
  studioName: string;
  location?: string | null;
  active?: SiteActive;
  headerTone?: "dark" | "light";
  children: React.ReactNode;
}) {
  const basePath = await getStudioPathPrefix();

  return (
    <SitePathProvider basePath={basePath}>
      <div className="studio-site min-h-[100dvh] overflow-x-clip bg-[var(--archi-cream)] text-[var(--archi-ink)]">
        <a href="#main-content" className="studio-skip-link">
          Skip to content
        </a>
        <SiteHeader
          studioName={studioName}
          active={active}
          tone={headerTone}
        />
        <div id="main-content" tabIndex={-1} className="outline-none">
          {children}
        </div>
        <SiteFooter studioName={studioName} location={location} />
      </div>
    </SitePathProvider>
  );
}

export function SitePageHero({
  eyebrow,
  title,
  description,
  tone = "light",
}: {
  eyebrow?: string;
  title: string;
  description?: string;
  tone?: "light" | "dark";
}) {
  const dark = tone === "dark";
  return (
    <section
      className={`relative overflow-hidden border-b ${
        dark
          ? "border-white/10 bg-[var(--archi-dark)] text-white"
          : "border-[var(--archi-line)] bg-[var(--studio-stone)]"
      }`}
    >
      {dark ? (
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 opacity-50"
          style={{
            background:
              "radial-gradient(ellipse 70% 80% at 90% 10%, rgba(201,162,39,0.2), transparent 55%)",
          }}
        />
      ) : (
        <div className="studio-grain pointer-events-none absolute inset-0 opacity-30" />
      )}
      <div className="studio-container relative pt-[calc(4.5rem+env(safe-area-inset-top))] pb-12 sm:pb-14 lg:pb-20 lg:pt-32">
        <div
          className={`mb-5 h-px w-12 sm:mb-6 sm:w-16 ${
            dark
              ? "bg-gradient-to-r from-[var(--archi-gold)] to-transparent"
              : "studio-line-accent"
          }`}
        />
        {eyebrow ? (
          <p
            className={`text-[0.65rem] tracking-[0.28em] uppercase sm:text-[0.7rem] sm:tracking-[0.3em] ${
              dark ? "text-[var(--archi-gold)]" : "text-[var(--archi-ink-muted)]"
            }`}
          >
            {eyebrow}
          </p>
        ) : null}
        <h1 className="mt-3 max-w-4xl font-[family-name:var(--font-display)] text-[clamp(2.25rem,9vw,5.5rem)] leading-[1.02] tracking-tight sm:mt-4 sm:leading-[0.98]">
          {title}
        </h1>
        {description ? (
          <p
            className={`mt-4 max-w-2xl text-base leading-7 sm:mt-6 sm:text-lg sm:leading-8 ${
              dark ? "text-white/55" : "text-[var(--archi-ink-muted)]"
            }`}
          >
            {description}
          </p>
        ) : null}
      </div>
    </section>
  );
}

export function SiteSection({
  eyebrow,
  title,
  children,
  dark = false,
  action,
}: {
  eyebrow?: string;
  title: string;
  children: React.ReactNode;
  dark?: boolean;
  action?: React.ReactNode;
}) {
  return (
    <section
      className={
        dark
          ? "border-y border-white/10 bg-[var(--archi-dark)] text-white"
          : "border-b border-[var(--archi-line)]"
      }
    >
      <div className="studio-container py-12 sm:py-16 lg:py-20">
        <div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-end sm:justify-between">
          <div className="min-w-0">
            {eyebrow ? (
              <p
                className={`text-[0.65rem] tracking-[0.24em] uppercase sm:text-[0.7rem] sm:tracking-[0.28em] ${
                  dark
                    ? "text-[var(--archi-gold)]"
                    : "text-[var(--archi-ink-muted)]"
                }`}
              >
                {eyebrow}
              </p>
            ) : null}
            <h2 className="mt-2 font-[family-name:var(--font-display)] text-[clamp(1.85rem,5vw,3rem)] tracking-tight sm:mt-3 sm:text-5xl">
              {title}
            </h2>
          </div>
          {action ? <div className="shrink-0">{action}</div> : null}
        </div>
        <div className="mt-6 sm:mt-8">{children}</div>
      </div>
    </section>
  );
}

export function ProseBlock({
  title,
  body,
}: {
  title: string;
  body?: string | null;
}) {
  if (!body) return null;
  return (
    <div className="border-t border-[var(--archi-line)] py-8 first:border-t-0 first:pt-0 sm:py-10">
      <h3 className="font-[family-name:var(--font-display)] text-xl tracking-tight sm:text-3xl">
        {title}
      </h3>
      <p className="mt-3 max-w-3xl whitespace-pre-wrap text-[0.95rem] leading-7 text-[var(--archi-ink-muted)] sm:mt-4 sm:text-lg sm:leading-8">
        {body}
      </p>
    </div>
  );
}

export { SiteLink };
export {
  SiteClosingCta,
  SiteEmptyState,
  SiteMetaRow,
} from "@/components/site/site-ui";
