"use client"

import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
} from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useAlbums } from "@/hooks/use-albums"
import { ImageIcon, PlusIcon } from "lucide-react"

export function AlbumSidebar() {
  const pathname = usePathname()
  const { albums, createAlbum } = useAlbums()
  const [isCreating, setIsCreating] = useState(false)
  const [newTitle, setNewTitle] = useState("")

  const handleCreate = async () => {
    if (!newTitle.trim()) return
    await createAlbum(newTitle.trim()).catch(() => {})
    setNewTitle("")
    setIsCreating(false)
  }

  return (
    <SidebarGroup>
      <SidebarGroupLabel className="flex items-center justify-between">
        Albums
        <Button
          variant="ghost"
          size="icon"
          className="h-5 w-5"
          onClick={() => setIsCreating(!isCreating)}
        >
          <PlusIcon className="h-3.5 w-3.5" />
        </Button>
      </SidebarGroupLabel>
      <SidebarGroupContent>
        {isCreating && (
          <div className="px-2 pb-2">
            <Input
              autoFocus
              placeholder="Album title"
              value={newTitle}
              onChange={(e) => setNewTitle(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") handleCreate()
                if (e.key === "Escape") setIsCreating(false)
              }}
            />
          </div>
        )}
        <SidebarMenu>
          {albums.map((album) => (
            <SidebarMenuItem key={album.id}>
              <SidebarMenuButton
                asChild
                isActive={pathname === `/albums/${album.id}`}
              >
                <Link href={`/albums/${album.id}`}>
                  <ImageIcon className="h-4 w-4" />
                  <span>{album.title}</span>
                </Link>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  )
}