"use client";
import { useState } from "react";
import { useMusicContext } from "@/components/providers/MusicProvider";
import LibraryView from "./LibraryView";
import PlaylistsView from "./PlaylistsView";
import QueueView from "./QueueView";

const TABS = [
  { id: "library", label: "Library" },
  { id: "playlists", label: "Playlists" },
  { id: "queue", label: "Queue" },
] as const;

type Tab = typeof TABS[number]["id"];

export default function MusicView() {
  const [activeTab, setActiveTab] = useState<Tab>("playlists");
  const { loading, error } = useMusicContext();

  if (loading) return <div className="flex items-center justify-center h-full text-zinc-400">Loading music library...</div>;
  if (error) return <div className="flex items-center justify-center h-full text-red-400">Music service error: {error}</div>;

  return (
    <div className="flex flex-col h-full">
      <div className="flex items-center gap-1 p-4 border-b border-zinc-200 dark:border-zinc-800">
        {TABS.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              activeTab === tab.id
                ? "bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900"
                : "text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100"
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>
      <div className="flex-1 overflow-auto">
        {activeTab === "library" && <LibraryView />}
        {activeTab === "playlists" && <PlaylistsView />}
        {activeTab === "queue" && <QueueView />}
      </div>
    </div>
  );
}
