import { Link, useNavigate, useRouterState } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import type { User } from "@supabase/supabase-js";
import { LogOut, Menu, X } from "lucide-react";

export function Header() {
  const navigate = useNavigate();
  const [user, setUser] = useState<User | null>(null);
  const [open, setOpen] = useState(false);
  const pathname = useRouterState({ select: (s) => s.location.pathname });

  useEffect(() => {
    supabase.auth.getUser().then(({ data }) => setUser(data.user));
    const { data: sub } = supabase.auth.onAuthStateChange((_e, s) => setUser(s?.user ?? null));
    return () => sub.subscription.unsubscribe();
  }, []);

  useEffect(() => { setOpen(false); }, [pathname]);

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

  return (
    <header className="sticky top-0 z-50 border-b border-border/50 glass">
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4">
        <Link to="/" className="flex items-center gap-2">
          <div className="grid h-9 w-9 place-items-center rounded-lg bg-gradient-primary shadow-glow">
            <span className="font-display text-lg font-bold text-primary-foreground">B</span>
          </div>
          <span className="font-display text-lg font-semibold tracking-tight">BO Mastery</span>
        </Link>

        <nav className="hidden items-center gap-8 md:flex">
          <a href="/#modules" className="text-sm text-muted-foreground hover:text-foreground">Modules</a>
          <a href="/#benefits" className="text-sm text-muted-foreground hover:text-foreground">Benefits</a>
          <a href="/#testimonials" className="text-sm text-muted-foreground hover:text-foreground">Reviews</a>
          <a href="/#faq" className="text-sm text-muted-foreground hover:text-foreground">FAQ</a>
        </nav>

        <div className="hidden items-center gap-2 md:flex">
          {user ? (
            <>
              <Link to="/dashboard" className="rounded-md px-3 py-2 text-sm font-medium hover:bg-muted">Dashboard</Link>
              <button onClick={signOut} className="inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground">
                <LogOut className="h-4 w-4" /> Sign out
              </button>
            </>
          ) : (
            <>
              <Link to="/auth" className="rounded-md px-3 py-2 text-sm font-medium hover:bg-muted">Sign in</Link>
              <a href="/#buy" className="rounded-md bg-gradient-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-glow hover:opacity-95">Enroll Now</a>
            </>
          )}
        </div>

        <button className="md:hidden" onClick={() => setOpen((o) => !o)} aria-label="Toggle menu">
          {open ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
        </button>
      </div>

      {open && (
        <div className="border-t border-border/50 md:hidden">
          <div className="mx-auto flex max-w-7xl flex-col gap-1 px-4 py-3">
            <a href="/#modules" className="rounded-md px-3 py-2 text-sm hover:bg-muted">Modules</a>
            <a href="/#benefits" className="rounded-md px-3 py-2 text-sm hover:bg-muted">Benefits</a>
            <a href="/#testimonials" className="rounded-md px-3 py-2 text-sm hover:bg-muted">Reviews</a>
            <a href="/#faq" className="rounded-md px-3 py-2 text-sm hover:bg-muted">FAQ</a>
            <div className="my-2 h-px bg-border" />
            {user ? (
              <>
                <Link to="/dashboard" className="rounded-md px-3 py-2 text-sm font-medium hover:bg-muted">Dashboard</Link>
                <button onClick={signOut} className="text-left rounded-md px-3 py-2 text-sm hover:bg-muted">Sign out</button>
              </>
            ) : (
              <>
                <Link to="/auth" className="rounded-md px-3 py-2 text-sm hover:bg-muted">Sign in</Link>
                <a href="/#buy" className="rounded-md bg-gradient-primary px-3 py-2 text-center text-sm font-semibold text-primary-foreground">Enroll Now</a>
              </>
            )}
          </div>
        </div>
      )}
    </header>
  );
}