music_bot_v2/page/src/components/layout/TopNav.tsx

"use client";
import { Search, ListMusic, LogIn, LogOut, Home } from "lucide-react";
import { signIn, signOut, useSession } from "next-auth/react";
import { useState } from "react";
import type { DiscordServer } from "@/types/music";

interface TopNavProps {
  onSearch: (query: string) => void;
  onHome: () => void;
  selectedServer: DiscordServer | null;
}

/** 프로필 이미지가 없을 수도 있어(이미지 URL 빈 값) 깨진 아이콘 대신 이니셜을 보여준다. */
function Avatar({
  user,
  size,
}: {
  user: { name?: string | null; image?: string | null };
  size: "sm" | "md";
}) {
  const box = size === "sm" ? "h-7 w-7 text-xs" : "h-9 w-9 text-sm";
  if (user.image) {
    return (
      // eslint-disable-next-line @next/next/no-img-element
      <img src={user.image} alt="" className={`${box} rounded-full object-cover`} />
    );
  }
  return (
    <span
      className={`${box} flex items-center justify-center rounded-full bg-neutral-700 font-semibold text-white`}
      aria-hidden
    >
      {(user.name ?? "?").trim().charAt(0).toUpperCase()}
    </span>
  );
}

export default function TopNav({ onSearch, onHome, selectedServer }: TopNavProps) {
  const { data: session, status } = useSession();
  const [term, setTerm] = useState("");

  const isAuthed = status === "authenticated";
  const canSearch = isAuthed && !!selectedServer;

  const submitSearch = () => {
    if (canSearch && term.trim()) onSearch(term.trim());
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") submitSearch();
  };

  const handleHomeClick = () => {
    setTerm("");
    onHome();
  };

  // 상황별로 검색창 안내를 다르게 준다(로그인 전인데 "서버를 고르라"고 하면 혼란스럽다).
  const searchPlaceholder = !isAuthed
    ? "로그인하면 검색할 수 있어요"
    : !selectedServer
      ? "먼저 서버를 선택해주세요"
      : "노래 제목이나 유튜브·스포티파이 주소";

  return (
    <header className="z-20 flex-shrink-0 border-b border-neutral-800 bg-neutral-950">
      <nav className="flex h-16 items-center gap-2 px-3 sm:gap-4 sm:px-6">
        {/* 로고: 좁은 화면에서는 아이콘만 남겨 검색창 폭을 확보한다. */}
        <div className="flex flex-shrink-0 items-center gap-2 text-lg font-bold">
          <ListMusic className="text-green-500" aria-hidden />
          <span className="hidden sm:inline">MusicBot</span>
        </div>

        {isAuthed && (
          <button
            onClick={handleHomeClick}
            className="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-full text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-white"
            aria-label="처음 화면으로"
          >
            <Home size={20} aria-hidden />
          </button>
        )}

        {/* 검색: 남는 폭을 모두 차지하게 해서 모바일에서도 쓸 만하게 만든다. */}
        <div className="relative min-w-0 flex-1">
          <Search
            className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500"
            size={18}
            aria-hidden
          />
          <input
            type="search"
            value={term}
            onChange={(e) => setTerm(e.target.value)}
            onKeyDown={handleKeyDown}
            disabled={!canSearch}
            placeholder={searchPlaceholder}
            aria-label="노래 검색"
            className="h-11 w-full rounded-full border border-neutral-700 bg-neutral-900 pl-10 pr-4 text-sm text-white placeholder:text-neutral-500 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/40 disabled:cursor-not-allowed disabled:opacity-50"
          />
        </div>

        {/* 계정 영역 */}
        <div className="flex flex-shrink-0 items-center">
          {status === "loading" ? (
            <div className="h-11 w-11 animate-pulse rounded-full bg-neutral-800" aria-label="로그인 상태 확인 중" />
          ) : isAuthed && session?.user ? (
            <div className="flex items-center gap-1 sm:gap-2">
              <span className="hidden items-center gap-2 rounded-full border border-neutral-700 bg-neutral-900 py-1 pl-1 pr-3 md:flex">
                <Avatar user={session.user} size="sm" />
                <span className="max-w-[10rem] truncate text-sm font-medium">{session.user.name}</span>
              </span>
              <span className="md:hidden">
                <Avatar user={session.user} size="md" />
              </span>
              <button
                onClick={() => signOut()}
                className="flex h-11 w-11 items-center justify-center rounded-full text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-red-400"
                aria-label="로그아웃"
                title="로그아웃"
              >
                <LogOut size={18} aria-hidden />
              </button>
            </div>
          ) : (
            <button
              onClick={() => signIn("discord")}
              className="flex h-11 items-center gap-2 rounded-full bg-[#5865F2] px-4 text-sm font-medium text-white shadow-md transition-colors hover:bg-[#4752C4] sm:px-5"
            >
              <LogIn size={16} aria-hidden />
              <span className="hidden sm:inline">Discord 로그인</span>
              <span className="sm:hidden">로그인</span>
            </button>
          )}
        </div>
      </nav>
    </header>
  );
}