"use client";

import { useState } from "react";
import Link from "next/link";
import { logout } from "@/app/actions/auth";

export function NavbarMenu({ email }: { email: string }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      {/* Desktop menu */}
      <div className="hidden sm:flex items-center gap-4">
        <span className="text-sm text-muted font-mono">{email}</span>
        <Link href="/change-password" className="text-sm text-accent hover:text-accent-hover font-medium">
          Change Password
        </Link>
        <form action={logout}>
          <button type="submit" className="text-sm text-danger hover:text-red-700 font-medium cursor-pointer">
            Logout
          </button>
        </form>
      </div>

      {/* Mobile hamburger */}
      <div className="sm:hidden">
        <button
          type="button"
          onClick={() => setOpen(!open)}
          className="p-2 rounded-lg hover:bg-surface transition-colors cursor-pointer"
          aria-label="Menu"
        >
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            {open ? (
              <>
                <line x1="4" y1="4" x2="16" y2="16" />
                <line x1="16" y1="4" x2="4" y2="16" />
              </>
            ) : (
              <>
                <line x1="3" y1="5" x2="17" y2="5" />
                <line x1="3" y1="10" x2="17" y2="10" />
                <line x1="3" y1="15" x2="17" y2="15" />
              </>
            )}
          </svg>
        </button>

        {/* Mobile dropdown */}
        {open && (
          <div className="absolute right-4 top-14 bg-white border-2 border-border rounded-xl shadow-lg p-4 flex flex-col gap-3 min-w-[180px]">
            <span className="text-sm text-muted font-mono truncate">{email}</span>
            <Link href="/change-password" onClick={() => setOpen(false)} className="text-sm text-accent hover:text-accent-hover font-medium">
              Change Password
            </Link>
            <form action={logout}>
              <button type="submit" className="text-sm text-danger hover:text-red-700 font-medium cursor-pointer">
                Logout
              </button>
            </form>
          </div>
        )}
      </div>
    </>
  );
}