"use client"

import { useState } from "react"
import { useAlbums } from "@/hooks/use-albums"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Spinner } from "@/components/ui/spinner"
import { toast } from "sonner"
import { PlusIcon } from "lucide-react"

interface AddToAlbumDialogProps {
  assetIds: string[]
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function AddToAlbumDialog({
  assetIds,
  open,
  onOpenChange,
}: AddToAlbumDialogProps) {
  const { albums, isLoading, createAlbum, addEntry } = useAlbums()
  const [newTitle, setNewTitle] = useState("")
  const [adding, setAdding] = useState(false)

  const handleAdd = async (albumId: string) => {
    setAdding(true)
    try {
      for (const assetId of assetIds) {
        await addEntry({ albumId, assetId }).catch(() => {})
      }
      toast.success(`Added ${assetIds.length} photo(s) to album`)
      onOpenChange(false)
    } catch {
      toast.error("Failed to add to album")
    } finally {
      setAdding(false)
    }
  }

  const handleCreateAndAdd = async () => {
    if (!newTitle.trim()) return
    setAdding(true)
    try {
      const album = await createAlbum(newTitle.trim())
      for (const assetId of assetIds) {
        await addEntry({ albumId: album.id, assetId }).catch(() => {})
      }
      setNewTitle("")
      toast.success(`Created album and added ${assetIds.length} photo(s)`)
      onOpenChange(false)
    } catch {
      toast.error("Failed")
    } finally {
      setAdding(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-sm">
        <DialogHeader>
          <DialogTitle>Add to Album</DialogTitle>
        </DialogHeader>
        <div className="flex min-h-0 flex-col gap-2 overflow-y-auto">
          {isLoading ? (
            <Spinner />
          ) : (
            albums.map((album) => (
              <Button
                key={album.id}
                variant="outline"
                className="justify-start"
                disabled={adding}
                onClick={() => handleAdd(album.id)}
              >
                {album.title}
                <span className="ml-auto text-xs text-muted-foreground">
                  {album.asset_count}
                </span>
              </Button>
            ))
          )}
        </div>
        <div className="flex gap-2 border-t pt-3">
          <Input
            placeholder="New album name"
            value={newTitle}
            onChange={(e) => setNewTitle(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && handleCreateAndAdd()}
            className="h-8"
          />
          <Button
            size="sm"
            disabled={!newTitle.trim() || adding}
            onClick={handleCreateAndAdd}
          >
            <PlusIcon className="mr-1 h-3 w-3" />
            Create
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}