"use client";

import { useState } from "react";
import TopNav from "@/components/layout/TopNav";
import LeftSidebar from "@/components/layout/LeftSidebar";
import MainContent from "@/components/player/MainContent";
import QueueSidebar from "@/components/player/QueueSidebar";
import PlayerBar from "@/components/player/PlayerBar";

// 화면 모드 타입 정의
export type ViewMode = "SERVER_LIST" | "SERVER_DETAIL" | "SEARCH_RESULT";

export default function MusicPlayerLayout() {
  const [viewMode, setViewMode] = useState<ViewMode>("SERVER_LIST");
  const [selectedServer, setSelectedServer] = useState<any>(null);
  const [searchQuery, setSearchQuery] = useState("");

  // 홈 버튼 클릭 시: 서버 목록(또는 상세)으로 복귀
  const handleHome = () => {
    if (selectedServer) {
      setViewMode("SERVER_DETAIL");
    } else {
      setViewMode("SERVER_LIST");
      setSelectedServer(null);
      setSearchQuery("");
    }
  };

  // 검색 실행 시
  const handleSearch = (query: string) => {
    setSearchQuery(query);
    setViewMode("SEARCH_RESULT");
  };

  // 서버 선택 시
  const handleSelectServer = (server: any) => {
    setSelectedServer(server);
    setViewMode("SERVER_DETAIL");
  };

  return (
    <div className="flex flex-col h-screen bg-neutral-900 text-white overflow-hidden font-sans">
      <TopNav 
        onSearch={handleSearch} 
        onHome={handleHome} 
        selectedServer={selectedServer} // 🌟 이 줄을 추가해서 선택된 서버 정보를 넘깁니다.
      />

      <div className="flex flex-1 overflow-hidden">
        <LeftSidebar />
        <MainContent 
          viewMode={viewMode}
          setViewMode={setViewMode}
          selectedServer={selectedServer}
          setSelectedServer={setSelectedServer}
          searchQuery={searchQuery}
          setSearchQuery={setSearchQuery}
          onSelectServer={handleSelectServer}
        />
        <QueueSidebar />
      </div>

      <PlayerBar />
    </div>
  );
}