import { auth } from "@/auth";
import { Link } from "@/i18n/navigation";
import { getTranslations } from "next-intl/server";
import { getAppUrl, getSiteName } from "@/lib/app-url";
import { BrandLogo } from "./brand-logo";
import { SiteNav } from "./site-nav";

export async function SiteHeader() {
  const session = await auth();
  const isAdmin = session?.user?.role === "ADMIN";
  const siteName = await getSiteName();

  return (
    <header className="sticky top-0 z-40 isolate border-b border-line/80 bg-card/90 pt-[env(safe-area-inset-top)] backdrop-blur-xl">
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-3">
        <BrandLogo name={siteName} />
        <SiteNav loggedIn={Boolean(session)} isAdmin={Boolean(isAdmin)} />
      </div>
    </header>
  );
}

export async function SiteFooter() {
  const t = await getTranslations();
  const session = await auth();
  const [siteName, appUrl] = await Promise.all([getSiteName(), getAppUrl()]);
  let host = appUrl;
  try {
    host = new URL(appUrl).host;
  } catch {
    /* keep raw */
  }
  return (
    <footer className="mt-auto border-t border-line bg-card/70 pb-[max(2rem,env(safe-area-inset-bottom))] pt-10">
      <div className="mx-auto grid max-w-6xl gap-8 px-4 sm:grid-cols-2 lg:grid-cols-3">
        <div className="space-y-3">
          <BrandLogo compact name={siteName} />
          <p className="max-w-xs text-sm leading-6 text-muted">{t("meta.description")}</p>
          <p className="text-xs text-muted" dir="ltr">
            {host}
          </p>
        </div>
        <div className="flex flex-col gap-2 text-sm">
          <Link href="/market">{t("nav.market")}</Link>
          <Link href="/rates">{t("nav.rates")}</Link>
          <Link href="/policies">{t("nav.policies")}</Link>
          <Link href="/terms">{t("nav.terms")}</Link>
          <Link href="/dashboard/escrow">{t("nav.escrow")}</Link>
        </div>
        <div className="flex flex-col gap-2 text-sm sm:col-span-2 lg:col-span-1">
          {session ? (
            <>
              <Link href="/dashboard">{t("nav.dashboard")}</Link>
              <Link href="/dashboard/wallet">{t("nav.wallet")}</Link>
            </>
          ) : (
            <>
              <Link href="/register">{t("nav.register")}</Link>
              <Link href="/login">{t("nav.login")}</Link>
            </>
          )}
        </div>
      </div>
    </footer>
  );
}