/**
 * components/layout/MobileHeader.tsx
 * Top header for mobile users — black & white theme.
 */

"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { Building2, Bell, Search } from "lucide-react";

interface MobileHeaderProps {
  title?: string;
  userName?: string;
  onLogout?: () => Promise<void> | void;
}

export function MobileHeader({ title = "Property Hub", userName, onLogout }: MobileHeaderProps) {
  const [menuOpen, setMenuOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (!menuRef.current?.contains(event.target as Node)) {
        setMenuOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-xl border-b border-slate-100 md:hidden">
      <div className="flex items-center justify-between h-14 px-4">
        <div className="flex items-center gap-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-black">
            <Building2 className="h-4 w-4 text-white" />
          </div>
          <h1 className="text-base font-bold text-black tracking-tight">
            {title}
          </h1>
        </div>

        <div className="flex items-center gap-2 relative" ref={menuRef}>
          <button className="p-2 rounded-full text-slate-500 hover:bg-slate-100 transition-colors">
            <Search className="h-5 w-5" />
          </button>
          <button className="relative p-2 rounded-full text-slate-500 hover:bg-slate-100 transition-colors">
            <Bell className="h-5 w-5" />
            <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white" />
          </button>
          <button
            type="button"
            className="h-8 w-8 rounded-full bg-black flex items-center justify-center text-xs font-bold text-white border border-slate-200"
            onClick={() => setMenuOpen((open) => !open)}
            aria-label="Open profile menu"
          >
            {userName ? userName[0].toUpperCase() : "A"}
          </button>

          {menuOpen && (
            <div className="absolute right-0 top-14 w-44 rounded-2xl border border-slate-200 bg-white shadow-2xl ring-1 ring-slate-200">
              <Link
                href="/profile"
                className="block px-4 py-3 text-sm text-slate-700 hover:bg-slate-50"
                onClick={() => setMenuOpen(false)}
              >
                Profile
              </Link>
              <button
                type="button"
                onClick={() => {
                  setMenuOpen(false);
                  onLogout?.();
                }}
                className="w-full text-left px-4 py-3 text-sm text-slate-700 hover:bg-slate-50"
              >
                Logout
              </button>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}