import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Archive,
  ArchiveRestore,
  MoreVertical,
  Palette,
  Pin,
  Trash2,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { NOTE_COLORS } from "@/lib/types"

interface NoteActionsProps {
  isPinned: boolean
  isArchived: boolean
  currentColor: string
  onTogglePin: () => void
  onToggleArchive: () => void
  onColorChange: (color: string) => void
  onDelete: () => void
  className?: string
}

export function NoteActions({
  isPinned,
  isArchived,
  currentColor,
  onTogglePin,
  onToggleArchive,
  onColorChange,
  onDelete,
  className
}: NoteActionsProps) {
  return (
    <div
      className={cn("flex items-center justify-end gap-1", className)}
      onClick={(e) => e.stopPropagation()}
    >
      {/* Pin Button */}
      <Button
        variant="ghost"
        size="sm"
        className="h-8 w-8 p-0"
        onClick={onTogglePin}
        title={isPinned ? 'Unpin' : 'Pin'}
      >
        <Pin className={cn('h-4 w-4', isPinned && 'fill-current')} />
      </Button>

      {/* Color Palette */}
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="sm" className="h-8 w-8 p-0" title="Change color">
            <Palette className="h-4 w-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <div className="grid grid-cols-5 gap-2 p-2">
            {Object.entries(NOTE_COLORS).map(([colorName, classes]) => (
              <button
                key={colorName}
                className={cn(
                  'h-8 w-8 rounded-full border-2 transition-transform hover:scale-110',
                  classes.bg,
                  currentColor === colorName ? 'border-gray-900 dark:border-gray-100' : 'border-gray-300 dark:border-gray-700'
                )}
                onClick={() => onColorChange(colorName)}
                title={colorName}
              />
            ))}
          </div>
        </DropdownMenuContent>
      </DropdownMenu>

      {/* More Options */}
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
            <MoreVertical className="h-4 w-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem onClick={onToggleArchive}>
            {isArchived ? (
              <>
                <ArchiveRestore className="h-4 w-4 mr-2" />
                Unarchive
              </>
            ) : (
              <>
                <Archive className="h-4 w-4 mr-2" />
                Archive
              </>
            )}
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem onClick={onDelete} className="text-red-600 dark:text-red-400">
            <Trash2 className="h-4 w-4 mr-2" />
            Delete
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}