"use client";

import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";

export function UserMenu() {
  const [email, setEmail] = useState<string | null>(null);
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const ref = useRef<HTMLDivElement>(null);
  const router = useRouter();

  useEffect(() => {
    let active = true;
    (async () => {
      try {
        const { createClient } = await import("@/lib/supabase/client");
        const supabase = createClient();
        const {
          data: { user },
        } = await supabase.auth.getUser();
        if (active) setEmail(user?.email ?? null);
      } catch {
        // Supabase not configured — show "Local dev"
        if (active) setEmail(null);
      }
    })();
    return () => {
      active = false;
    };
  }, []);

  useEffect(() => {
    function onClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    }
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, []);

  async function signOut() {
    setLoading(true);
    setError(null);
    try {
      const { createClient } = await import("@/lib/supabase/client");
      const supabase = createClient();
      const { error } = await supabase.auth.signOut();
      if (error) throw error;
      router.push("/login");
      router.refresh();
    } catch (e) {
      const msg = e instanceof Error ? e.message : "Sign out failed";
      if (msg.includes("Missing NEXT_PUBLIC_SUPABASE_URL")) {
        // No backend wired — just navigate
        router.push("/");
      } else {
        setError(msg);
      }
    } finally {
      setLoading(false);
    }
  }

  const label = email ?? "Local dev";
  const initial = (email ?? "S").charAt(0).toUpperCase();

  return (
    <div className="relative" ref={ref}>
      <button
        onClick={() => setOpen((v) => !v)}
        className="flex items-center gap-2 rounded-full border bg-background pl-1 pr-3 py-1 hover:bg-accent transition-colors"
        aria-haspopup="menu"
        aria-expanded={open}
      >
        <span className="w-7 h-7 rounded-full bg-[var(--sag-brand)] text-white text-sm font-semibold flex items-center justify-center">
          {initial}
        </span>
        <span className="text-xs hidden sm:inline max-w-[160px] truncate">{label}</span>
      </button>
      {open && (
        <div
          role="menu"
          className="absolute right-0 mt-2 w-64 rounded-md border bg-background shadow-md z-40 overflow-hidden"
        >
          <div className="px-4 py-3 border-b">
            <div className="text-xs text-muted-foreground">Signed in as</div>
            <div className="text-sm font-medium truncate">{label}</div>
            {!email && (
              <div className="mt-1 text-[10px] text-muted-foreground">
                Supabase not connected — auth bypassed for local dev.
              </div>
            )}
          </div>
          <div className="p-1">
            <Button
              variant="ghost"
              size="sm"
              className="w-full justify-start"
              onClick={signOut}
              disabled={loading}
            >
              {loading ? "Signing out..." : email ? "Sign out" : "Back to public site"}
            </Button>
          </div>
          {error && <div className="px-4 py-2 text-xs text-destructive border-t">{error}</div>}
        </div>
      )}
    </div>
  );
}