"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ClipboardList, LogIn, LogOut, UserRound } from "lucide-react";
import type { AuthUser } from "@duoc-thu/shared-types";
import { logout, me } from "@duoc-thu/api-client";

/** Public — visible on every page, not just `/admin`. Chat itself never
 * requires this: an anonymous visitor keeps working exactly as before
 * regardless of what this renders. Optional login exists here so `demo`
 * (the logged-in "bác sĩ" persona) can sign in from the normal chat UI. */
export function AccountMenu() {
  const router = useRouter();
  const [user, setUser] = useState<AuthUser | null>(null);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    me()
      .then(setUser)
      .finally(() => setLoaded(true));
  }, []);

  if (!loaded) return null;

  if (!user) {
    return (
      <Link
        href="/login"
        className="flex items-center gap-1.5 rounded-full border border-border-subtle bg-surface px-3 py-1.5 text-xs font-semibold text-txt-secondary hover:bg-surface-hover"
      >
        <LogIn className="h-3.5 w-3.5" />
        <span>Đăng nhập</span>
      </Link>
    );
  }

  return (
    <div className="flex items-center gap-1.5">
      <div className="flex items-center gap-1.5 rounded-full border border-border-subtle bg-surface px-3 py-1.5 text-xs font-semibold text-txt-secondary">
        <UserRound className="h-3.5 w-3.5" />
        <span>{user.username}</span>
        <button
          aria-label="Đăng xuất"
          onClick={async () => {
            await logout();
            setUser(null);
            router.refresh();
          }}
          className="ml-1 text-txt-muted hover:text-txt-primary"
        >
          <LogOut className="h-3.5 w-3.5" />
        </button>
      </div>
      {/* A real, labeled button — not a tooltip hidden on plain text (that
       * shipped invisible: an owner testing the feature live couldn't find
       * it at all). Same destination as before, `/profile`. */}
      <Link
        href="/profile"
        title="Hồ sơ bệnh nhân"
        className="flex items-center gap-1.5 rounded-full border border-border-subtle bg-surface px-3 py-1.5 text-xs font-semibold text-txt-secondary hover:bg-surface-hover"
      >
        <ClipboardList className="h-3.5 w-3.5" />
        <span>Hồ sơ bệnh nhân</span>
      </Link>
    </div>
  );
}