import { useEffect, useState, type ReactNode } from "react";
import { ArrowUpRight } from "lucide-react";
import { Logo } from "@/components/brand/Logo";
import { APP_ORIGIN, DEMO_ORIGIN } from "@/lib/deployment";

type Palette = "landing-dark" | "landing-light";

/** "landing-dark" when the page is in dark mode, tracking the root class as it changes. */
export function useRootPalette(): Palette {
  // The static branding render runs without a DOM; default to light there.
  const read = (): Palette =>
    typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "landing-dark" : "landing-light";
  const [palette, setPalette] = useState<Palette>(read);
  useEffect(() => {
    const observer = new MutationObserver(() => setPalette(read()));
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
    setPalette(read());
    return () => observer.disconnect();
  }, []);
  return palette;
}

const link = "inline-flex min-h-[44px] items-center hover:text-land-fg";

/**
 * The footer shared by every public page: wordmark, legal and brand links,
 * credits and the large teal wordmark on a black panel (black in both themes).
 * It reads the landing palette tokens, so it needs a `landing-*` scope: pass
 * `palette` to wrap it in one, or omit it inside a page that already has one.
 * `onSignIn` opens a sign-in dialog; without it, "Sign in" links to the site.
 */
export function PublicFooter({ palette, onSignIn }: { palette?: Palette; onSignIn?: () => void }) {
  const body: ReactNode = (
    <footer className="mx-auto max-w-[1280px] px-5 pb-8 sm:px-8 lg:px-10">
      <div className="flex flex-col justify-between gap-5 border-t border-land-line pt-7 sm:flex-row sm:items-center">
        <div className="flex flex-wrap items-center gap-2">
          <Logo className="h-6" />
          <span className="ml-3 text-[11px] text-land-muted">Know How Much You Spend.</span>
        </div>
        <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-[11px] text-land-muted">
          <a href={`${APP_ORIGIN}/blog`} className={link}>Guides</a>
          <a href={`${APP_ORIGIN}/about`} className={link}>About</a>
          <a href={DEMO_ORIGIN} className={link}>Explore the demo</a>
          <a href={`${APP_ORIGIN}/branding`} className={link}>Brand kit</a>
          <a href={`${APP_ORIGIN}/privacy`} className={link}>Privacy</a>
          <a href={`${APP_ORIGIN}/terms`} className={link}>Terms</a>
          <a href={`${APP_ORIGIN}/security`} className={link}>Security</a>
          <a href="mailto:support@khmys.com" className={link}>Support</a>
          {onSignIn ? (
            <button onClick={onSignIn} className={link}>Sign in</button>
          ) : (
            <a href={APP_ORIGIN} className={link}>Sign in</a>
          )}
        </div>
      </div>
      <div className="mt-7 flex flex-col justify-between gap-3 border-t border-land-line/60 pt-5 text-[11px] text-land-muted sm:flex-row sm:items-center">
        <p>© 2026 KHMYS.</p>
        <p>
          Developed by{" "}
          <a
            href="https://snehithkumar.com"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-1 font-medium text-land-fg underline decoration-land-line underline-offset-4 transition hover:text-land-accent"
          >
            Snehith Kumar <ArrowUpRight size={12} aria-hidden />
          </a>
        </p>
      </div>
      <div className="mt-10 overflow-hidden rounded-3xl bg-black px-6 py-10 sm:mt-12 sm:px-12 sm:py-14" aria-label="KHMYS footer wordmark">
        <Logo tone="teal" className="h-auto w-full" />
      </div>
    </footer>
  );
  return palette ? <div className={`${palette} pt-16 text-land-fg`}>{body}</div> : body;
}