@props(['video'])

<style>
    .action-btn {
        border: none;
        border-radius: 8px;
        padding: 8px 14px;
        font-size: 0.82rem;
        font-weight: 500;
        cursor: pointer;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s ease;
        text-decoration: none;
    }

    .action-btn:hover {
        background: var(--border-color);
        transform: translateY(-1px);
    }

    .action-btn:active {
        transform: translateY(0);
    }

    .action-btn svg,
    .action-btn i {
        flex-shrink: 0;
    }

    .action-btn.comment-btn {
        background: var(--brand-red);
        color: white;
        border-color: var(--brand-red);
    }

    .action-btn.liked {
        color: var(--brand-red) !important;
    }

    .mobile-action-dropdown .dropdown-item.liked {
        color: var(--brand-red) !important;
    }

    .mobile-action-dropdown {
        display: none;
        position: relative;
    }

    .mobile-action-dropdown .dropdown-menu {
        right: 0;
        left: auto;
        min-width: 200px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 6px 0;
        z-index: 1200;
    }

    .mobile-action-dropdown .dropdown-item {
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        padding: 8px 12px;
        background: transparent;
        border: none;
        width: 100%;
        text-align: left;
        text-decoration: none;
    }

    .mobile-action-dropdown .dropdown-item:hover {
        background: var(--border-color);
    }

    @media (max-width: 576px) {
        .video-actions>.desktop-action {
            display: none !important;
        }

        .mobile-action-dropdown {
            display: block;
            margin-left: auto;
        }

        .action-btn {
            width: 100%;
        }
    }
</style>

<div class="video-actions" style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow: visible;">
    @auth
        @if (Auth::id() === $video->user_id)
            <button class="action-btn desktop-action" onclick="openEditVideoModal({{ $video->id }})">
                <i class="bi bi-pencil"></i>
                <span>Edit</span>
            </button>
        @elseif (Auth::id() !== $video->user_id)
            <button class="action-btn desktop-action"><i class="bi bi-bell"></i><span>Subscribe</span></button>
        @endif
    @else
        <button onclick="window.location.href='{{ route('login') }}'" class="action-btn desktop-action"><i
                class="bi bi-bell"></i><span>Subscribe</span></button>
    @endauth

    @auth
        <form method="POST"
            action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}"
            class="d-inline desktop-action">
            @csrf
            <button type="submit" class="action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}">
                <i class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
                {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
            </button>
        </form>
    @else
        <button onclick="window.location.href='{{ route('login') }}'" class="action-btn desktop-action">
            <i class="bi bi-hand-thumbs-up"></i>
            {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
        </button>
    @endauth

    @if ($video->isShareable())
        <button class="action-btn desktop-action"
            onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')">
            <i class="bi bi-share"></i> Share
        </button>
    @endif

    <!-- Save to Playlist Button -->
    <button class="action-btn desktop-action" onclick="openAddToPlaylistModal({{ $video->id }})">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round">
            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
        </svg>
        <span>Save</span>
    </button>

    <div class="dropdown mobile-action-dropdown">
        <button class="action-btn dropdown-toggle" type="button" id="dropdownMenuLinkMusic{{ $video->id }}"
            data-bs-toggle="dropdown" aria-expanded="false">
            <i class="bi bi-lightning-charge-fill"></i>
            <span>Action</span>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuLinkMusic{{ $video->id }}">
            @auth
                @if (Auth::id() !== $video->user_id)
                    <button type="button" class="dropdown-item">
                        <i class="bi bi-bell"></i> Subscribe
                    </button>
                @else
                    <button type="button" class="dropdown-item" onclick="openEditVideoModal({{ $video->id }})">
                        <i class="bi bi-pencil"></i> Edit
                    </button>
                @endif
            @else
                <button class="dropdown-item" onclick="window.location.href='{{ route('login') }}'">
                    <i class="bi bi-bell"></i> Subscribe
                </button>
            @endauth

            @auth
                <form method="POST"
                    action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}"
                    class="d-inline w-100">
                    @csrf
                    <button type="submit" class="dropdown-item {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}">
                        <i
                            class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
                        {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
                    </button>
                </form>
            @else
                <button class="dropdown-item" onclick="window.location.href='{{ route('login') }}'">
                    <i class="bi bi-hand-thumbs-up"></i>
                    {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
                </button>
            @endauth

            @if ($video->isShareable())
                <button class="dropdown-item"
                    onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')">
                    <i class="bi bi-share"></i> Share
                </button>
            @endif

            <button class="dropdown-item" onclick="openAddToPlaylistModal({{ $video->id }})">
                <i class="bi bi-bookmark"></i> Save
            </button>
        </div>
    </div>
</div>