@extends('layouts.app')

@section('content')
<div class="space-y-6">

    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-2 border-b border-slate-800">
        <div>
            <h1 class="text-2xl font-black text-white">Protected Media Library</h1>
            <p class="text-xs text-slate-400 mt-1">Non-public video repository, background clips, and audio assets ready for scheduling.</p>
        </div>

        <div class="flex items-center gap-3">
            <div class="text-xs text-slate-400 font-mono bg-slate-900 px-3 py-1.5 rounded-lg border border-slate-800">
                Storage: <span class="text-amber-400 font-bold">{{ $totalStorageMb }} MB</span>
            </div>

            <!-- Upload trigger -->
            <button type="button" onclick="document.getElementById('media-upload-modal').classList.remove('hidden')" class="btn-primary text-xs">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                <span>Upload Media Asset</span>
            </button>
        </div>
    </div>

    <!-- Media Filter Tabs -->
    <div class="flex items-center gap-2 text-xs border-b border-slate-800/60 pb-3">
        <a href="{{ route('media.index') }}" class="px-3 py-1 rounded-md border {{ !request('type') ? 'bg-amber-500/15 text-amber-400 border-amber-500/30' : 'text-slate-400 border-slate-800 hover:text-white' }}">All Assets</a>
        <a href="{{ route('media.index', ['type' => 'rendered_video']) }}" class="px-3 py-1 rounded-md border {{ request('type') === 'rendered_video' ? 'bg-amber-500/15 text-amber-400 border-amber-500/30' : 'text-slate-400 border-slate-800 hover:text-white' }}">Rendered MP4s</a>
        <a href="{{ route('media.index', ['type' => 'background_image']) }}" class="px-3 py-1 rounded-md border {{ request('type') === 'background_image' ? 'bg-amber-500/15 text-amber-400 border-amber-500/30' : 'text-slate-400 border-slate-800 hover:text-white' }}">Background Images</a>
        <a href="{{ route('media.index', ['type' => 'background_video']) }}" class="px-3 py-1 rounded-md border {{ request('type') === 'background_video' ? 'bg-amber-500/15 text-amber-400 border-amber-500/30' : 'text-slate-400 border-slate-800 hover:text-white' }}">Background Videos</a>
        <a href="{{ route('media.index', ['type' => 'audio']) }}" class="px-3 py-1 rounded-md border {{ request('type') === 'audio' ? 'bg-amber-500/15 text-amber-400 border-amber-500/30' : 'text-slate-400 border-slate-800 hover:text-white' }}">Audio Tracks</a>
    </div>

    @if($assets->isEmpty())
        <div class="studio-card p-12 text-center">
            <div class="w-12 h-12 rounded-full bg-slate-800 flex items-center justify-center mx-auto text-slate-500 mb-3">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
            </div>
            <p class="text-sm font-semibold text-slate-300">No media assets in library</p>
            <p class="text-xs text-slate-500 mt-1">Render a text video in the editor or upload background assets.</p>
            <div class="mt-4 flex items-center justify-center gap-3">
                <a href="{{ route('editor.create') }}" class="btn-primary text-xs">+ Launch Video Studio</a>
            </div>
        </div>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            @foreach($assets as $asset)
                <div class="studio-card p-4 flex flex-col justify-between hover:border-slate-700 transition">
                    <div>
                        <!-- Media Preview Box -->
                        <div class="w-full h-40 bg-black/60 rounded-lg overflow-hidden border border-slate-800 flex items-center justify-center relative mb-3 group">
                            @if(str_starts_with($asset->mime_type, 'video/'))
                                <video src="{{ $asset->getSignedUrl() }}" controls class="w-full h-full object-contain" preload="metadata"></video>
                            @elseif(str_starts_with($asset->mime_type, 'image/'))
                                <img src="{{ $asset->getSignedUrl() }}" alt="{{ $asset->title }}" class="w-full h-full object-cover">
                            @else
                                <div class="text-center p-3">
                                    <div class="text-amber-400 font-mono text-xs uppercase mb-1">{{ $asset->mime_type }}</div>
                                    <audio src="{{ $asset->getSignedUrl() }}" controls class="w-full"></audio>
                                </div>
                            @endif

                            <div class="absolute top-2 left-2">
                                <span class="text-[9px] font-mono uppercase px-1.5 py-0.5 rounded bg-black/80 text-amber-400 border border-slate-700">
                                    {{ str_replace('_', ' ', $asset->asset_type) }}
                                </span>
                            </div>
                        </div>

                        <h3 class="font-bold text-xs text-slate-100 truncate" title="{{ $asset->title }}">{{ $asset->title }}</h3>
                        <div class="mt-1 flex items-center justify-between text-[11px] text-slate-400 font-mono">
                            <span>{{ $asset->formatted_size }}</span>
                            @if($asset->duration_seconds)
                                <span>{{ number_format($asset->duration_seconds, 1) }}s</span>
                            @endif
                        </div>
                    </div>

                    <div class="mt-4 pt-2.5 border-t border-slate-800/80 flex items-center justify-between gap-2">
                        @if($asset->asset_type === 'rendered_video')
                            <a href="{{ route('posts.create', ['media_id' => $asset->id]) }}" class="btn-primary text-[11px] py-1 px-2.5 flex-1">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                <span>Schedule</span>
                            </a>
                        @endif

                        <a href="{{ $asset->getSignedUrl() }}" download="{{ $asset->original_filename }}" title="Download File" class="p-1.5 rounded text-slate-400 hover:text-white hover:bg-slate-800">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                        </a>

                        <form method="POST" action="{{ route('media.destroy', $asset) }}" onsubmit="return confirm('Delete this media asset permanently?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" title="Delete" class="p-1.5 rounded text-slate-500 hover:text-rose-400 hover:bg-slate-800">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="mt-4">
            {{ $assets->links() }}
        </div>
    @endif

</div>

<!-- Modal: Upload Media Asset -->
<div id="media-upload-modal" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 hidden">
    <div class="bg-[#121824] border border-slate-800 rounded-2xl max-w-md w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-slate-800 pb-3">
            <h3 class="font-bold text-base text-white">Upload Media Asset</h3>
            <button type="button" onclick="document.getElementById('media-upload-modal').classList.add('hidden')" class="text-slate-400 hover:text-white">&times;</button>
        </div>

        <form method="POST" action="{{ route('media.upload') }}" enctype="multipart/form-data" class="space-y-4">
            @csrf

            <div>
                <label class="block text-xs font-medium text-slate-300 mb-1">Asset Title</label>
                <input type="text" name="title" required placeholder="e.g. Dark Minimalist Background"
                    class="w-full px-3 py-2 bg-[#07090E] border border-slate-700 rounded-lg text-sm text-slate-100 focus:border-amber-500 focus:outline-none">
            </div>

            <div>
                <label class="block text-xs font-medium text-slate-300 mb-1">Asset Type</label>
                <select name="asset_type" class="w-full px-3 py-2 bg-[#07090E] border border-slate-700 rounded-lg text-sm text-slate-100 focus:border-amber-500 focus:outline-none">
                    <option value="background_image">Background Image (JPG/PNG/WebP)</option>
                    <option value="background_video">Background Video Clip (MP4)</option>
                    <option value="rendered_video">Pre-rendered Video (MP4)</option>
                    <option value="audio">Custom Audio Track (MP3/WAV)</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-medium text-slate-300 mb-1">File</label>
                <input type="file" name="video_file" required accept="video/mp4,image/*,audio/*"
                    class="w-full text-xs text-slate-400 file:mr-3 file:py-2 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-slate-800 file:text-amber-400 hover:file:bg-slate-700">
                <p class="text-[11px] text-slate-500 mt-1">Non-public local storage. Max: 250 MB.</p>
            </div>

            <div class="pt-3 border-t border-slate-800 flex justify-end gap-2.5">
                <button type="button" onclick="document.getElementById('media-upload-modal').classList.add('hidden')" class="btn-secondary text-xs">
                    Cancel
                </button>
                <button type="submit" class="btn-primary text-xs">
                    Upload Asset
                </button>
            </div>
        </form>
    </div>
</div>
@endsection