import { Link, useNavigate } from "@tanstack/react-router";
import { supabase } from "@/integrations/supabase/client";
import { useAuth } from "@/hooks/useAuth";

export function Wordmark({ className = "" }: { className?: string }) {
  return (
    <Link to="/" className={`display text-2xl tracking-[0.18em] uppercase ${className}`}>
      Imisi
    </Link>
  );
}

export function SiteHeader() {
  const { session } = useAuth();
  const navigate = useNavigate();

  const signOut = async () => {
    await supabase.auth.signOut();
    navigate({ to: "/" });
  };

  return (
    <header className="sticky top-0 z-40 border-b border-border/70 bg-background/85 backdrop-blur">
      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-5">
        <Wordmark />
        <nav className="flex items-center gap-1 text-sm">
          {session ? (
            <>
              <Link
                to="/style"
                className="rounded-md px-3 py-2 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
              >
                Style me
              </Link>
              <Link
                to="/saved"
                className="rounded-md px-3 py-2 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
              >
                Looks
              </Link>
              <Link
                to="/profile"
                className="rounded-md px-3 py-2 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
              >
                Profile
              </Link>
              <button
                onClick={signOut}
                className="rounded-md px-3 py-2 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
              >
                Sign out
              </button>
            </>
          ) : (
            <>
              <Link
                to="/premium"
                className="rounded-md px-3 py-2 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
              >
                Premium
              </Link>
              <Link
                to="/auth"
                className="rounded-md bg-primary px-4 py-2 font-medium text-primary-foreground transition-colors hover:bg-primary/90"
              >
                Begin
              </Link>
            </>
          )}
        </nav>
      </div>
    </header>
  );
}

export function SiteFooter() {
  return (
    <footer className="border-t border-border/70 py-10">
      <div className="mx-auto flex max-w-6xl flex-col gap-2 px-5 text-xs text-muted-foreground">
        <p className="display text-base tracking-[0.18em] uppercase text-foreground">Imisi</p>
        <p>Knowing yourself is the most powerful style statement.</p>
        <p>© 2026 Ajoké Prestige Limited. All rights reserved.</p>
      </div>
    </footer>
  );
}