@extends('admin.layouts.app')

@php
    $pageTitle = 'Admin - Upload Video';
    $pageHeading = 'Upload Video';
    $pageSubheading = 'Upload MP4 directly to storage using presigned URL.';
@endphp

@push('head')
<style>
    .upload-wrap { max-width: 900px; }
    .group { margin-bottom: 14px; }
    label { display:block; margin-bottom:6px; font-weight:600; font-size: 13px; }
    input[type=text], input[type=file], select { width:100%; padding:9px; border:1px solid #d1d5db; border-radius:8px; }
    .help { color:#6b7280; font-size:12px; margin-top:4px; }
    .errors { background:#fee2e2; color:#991b1b; border-radius:8px; padding:10px; margin-bottom:12px; font-size: 13px; }
    .row { display:flex; gap:8px; }
    .status { font-size:12px; color:#374151; margin-top:8px; }
</style>
@endpush

@section('content')
<div class="content-card upload-wrap">
    <div style="display:flex; justify-content:flex-end; margin-bottom:10px;">
        <a class="btn btn-warning" href="{{ route('admin.videos.create-manual') }}">Tambah Video Manual</a>
    </div>

    @if ($errors->any())
        <div class="errors">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form id="video-form" action="{{ route('admin.videos.store') }}" method="POST">
        @csrf

            <div class="group">
                <label for="title">Title</label>
                <input type="text" id="title" name="title" value="{{ old('title') }}" required>
            </div>

            <div class="group">
                <label for="slug">Slug (optional)</label>
                <input type="text" id="slug" name="slug" value="{{ old('slug') }}" placeholder="my-video-slug">
            </div>

            <div class="group">
                <label for="storage_driver">Storage Driver</label>
                <select id="storage_driver" name="storage_driver" required>
                    <option value="s3" @if(old('storage_driver', config('video_storage.default_driver')) === 's3') selected @endif>Amazon S3</option>
                    <option value="digitaloceanspaces" @if(old('storage_driver', config('video_storage.default_driver')) === 'digitaloceanspaces') selected @endif>DigitalOcean</option>
                    <option value="r2" @if(old('storage_driver', config('video_storage.default_driver')) === 'r2') selected @endif>Cloudflare R2</option>
                    <option value="wasabi" @if(old('storage_driver', config('video_storage.default_driver')) === 'wasabi') selected @endif>Wasabi</option>
                </select>
            </div>

            <div class="group">
                <label for="mp4-file">Source MP4</label>
                <input type="file" id="mp4-file" accept="video/mp4" required>
                <div class="help">File upload langsung browser ke storage provider (presigned PUT).</div>
            </div>

            <input type="hidden" id="source_mp4_path" name="source_mp4_path" value="{{ old('source_mp4_path') }}">
        <div class="row">
            <button id="btn-upload" type="button" class="btn btn-secondary">Upload ke Storage</button>
            <button id="btn-submit" type="submit" class="btn btn-primary" disabled>Simpan & Queue Encode</button>
        </div>
        <div class="status" id="upload-status">Belum upload.</div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    (function () {
        const btnUpload = document.getElementById('btn-upload');
        const btnSubmit = document.getElementById('btn-submit');
        const fileInput = document.getElementById('mp4-file');
        const sourcePathInput = document.getElementById('source_mp4_path');
        const storageDriverInput = document.getElementById('storage_driver');
        const statusEl = document.getElementById('upload-status');
        const csrf = document.querySelector('input[name="_token"]').value;

        async function upload() {
            const file = fileInput.files && fileInput.files[0];
            if (!file) {
                statusEl.textContent = 'Pilih file MP4 terlebih dahulu.';
                return;
            }

            if (file.type !== 'video/mp4') {
                statusEl.textContent = 'MIME harus video/mp4.';
                return;
            }

            btnUpload.disabled = true;
            statusEl.textContent = 'Meminta presigned URL...';

            const presignRes = await fetch('{{ route('admin.videos.presign-upload') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrf,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    storage_driver: storageDriverInput.value,
                    filename: file.name,
                    mime_type: file.type,
                    size: file.size
                })
            });

            if (!presignRes.ok) {
                statusEl.textContent = 'Gagal mendapatkan URL upload.';
                btnUpload.disabled = false;
                return;
            }

            const signed = await presignRes.json();
            statusEl.textContent = 'Uploading langsung ke storage...';

            const uploadRes = await fetch(signed.url, {
                method: 'PUT',
                headers: signed.headers || {},
                body: file
            });

            if (!uploadRes.ok) {
                statusEl.textContent = 'Upload ke storage gagal.';
                btnUpload.disabled = false;
                return;
            }

            sourcePathInput.value = signed.path;
            storageDriverInput.value = signed.storage_driver;
            statusEl.textContent = 'Upload sukses. Lanjut simpan metadata dan queue encode.';
            btnSubmit.disabled = false;
            btnUpload.disabled = false;
        }

        btnUpload.addEventListener('click', function () {
            upload().catch(function () {
                statusEl.textContent = 'Terjadi kesalahan saat upload.';
                btnUpload.disabled = false;
            });
        });
    })();
</script>
@endpush