<?php
$uploadLimit = class_exists('AdminVideoController') ? AdminVideoController::uploadLimitBytes() : 0;
$uploadLimitLabel = $uploadLimit > 0 ? AdminVideoController::formatBytes($uploadLimit) : '';

$catJson     = json_encode(array_map(fn($c) => ['id' => (int)$c['id'], 'n' => $c['name']], $categories ?? []), JSON_HEX_APOS);
$tagJson     = json_encode(array_map(fn($t) => ['id' => (int)$t['id'], 'n' => $t['name']], $tags ?? []), JSON_HEX_APOS);
$perfJson    = json_encode(array_map(fn($p) => ['id' => (int)$p['id'], 'n' => $p['name']], $performers ?? []), JSON_HEX_APOS);
$channelJson = json_encode(array_map(fn($s) => ['id' => (int)$s['id'], 'n' => $s['name']], $channels ?? []), JSON_HEX_APOS);

$typeLabels  = Video::typeLabels();
$defaultType = Video::defaultType();
$inputCls = 'w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none';

$boot = json_encode([
    'limit'      => (int) $uploadLimit,
    'limitLabel' => $uploadLimitLabel,
    'storeUrl'   => '/admin/videos/bulk-upload/store',
    'listUrl'    => '/admin/videos',
    'csrf'       => Router::csrfToken(),
], JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);
?>
<?php require __DIR__ . '/_tok_picker.php'; ?>
<script type="application/json" id="tp-bulk-boot"><?= $boot ?></script>

<style>
.bup-drop{border:2px dashed #d1d5db;border-radius:12px;padding:32px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;outline:none}
.bup-drop:hover,.bup-drop:focus-visible{border-color:#3b82f6;background:#eff6ff}
.bup-drop.is-over{border-color:#2563eb;background:#dbeafe}
.bup-drop.is-compact{padding:14px 20px}
.bup-thumb-off .bup-thumb img{display:none}
.bup-locked{opacity:.55;pointer-events:none}
.bup-title:disabled{background:transparent;color:#6b7280}
</style>

<div class="flex items-center gap-2 mb-5 text-sm">
    <a href="/admin/videos" class="text-gray-400 hover:text-primary-600 no-underline transition-colors">Videos</a>
    <svg class="w-3.5 h-3.5 text-gray-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
    <span class="text-gray-700 font-medium">Bulk Upload</span>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    <div class="lg:col-span-2 space-y-6">

        <div class="bg-white rounded-lg shadow-sm border border-gray-200" id="bupFilesCard">
            <div class="px-4 py-3 border-b border-gray-100 flex items-center justify-between">
                <h3 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg>
                    Files
                    <span id="bupCount" class="hidden inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-semibold bg-blue-50 text-blue-700 tabular-nums">0</span>
                </h3>
                <button type="button" id="bupAddBtn" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                    Add files
                </button>
            </div>
            <div class="p-4">
                <div id="bupDrop" class="bup-drop" tabindex="0" role="button" aria-label="Add video files">
                    <svg class="w-9 h-9 mx-auto text-gray-300 mb-2" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"/></svg>
                    <p class="text-sm font-medium text-gray-700">Drop video files here</p>
                    <p class="text-xs text-gray-400 mt-1">or click to browse &middot; MP4, WebM, OGG<?php if ($uploadLimitLabel !== ''): ?> &middot; up to <?= htmlspecialchars($uploadLimitLabel) ?> per file<?php endif; ?></p>
                </div>
                <input type="file" id="bupInput" multiple accept="video/*" class="hidden">
                <div id="bupQueue" class="hidden mt-4 divide-y divide-gray-100 border border-gray-200 rounded-lg overflow-hidden"></div>
                <p id="bupHint" class="hidden mt-2 text-[11px] text-gray-400">Titles come from the file names &mdash; click a title to change it before you start. Duration and thumbnail are read in your browser while you wait.</p>
            </div>
        </div>

        <div id="bupSummary" class="hidden bg-white rounded-lg shadow-sm border border-gray-200">
            <div class="p-4">
                <div class="flex items-start justify-between gap-3">
                    <div class="flex items-center gap-2 min-w-0">
                        <span class="relative flex h-2.5 w-2.5 shrink-0">
                            <span id="bupPing" class="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75 animate-ping"></span>
                            <span id="bupDot" class="relative inline-flex h-2.5 w-2.5 rounded-full bg-blue-600"></span>
                        </span>
                        <span id="bupPhase" class="text-sm font-medium text-gray-800">Uploading</span>
                        <span id="bupCurrent" class="text-xs text-gray-500 truncate"></span>
                    </div>
                    <span id="bupPct" class="shrink-0 text-sm font-semibold text-gray-900 tabular-nums">0%</span>
                </div>
                <div id="bupTrack" class="mt-2 h-2 w-full overflow-hidden rounded-full bg-gray-200" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-labelledby="bupPhase">
                    <div id="bupBar" class="h-full w-0 rounded-full bg-blue-600 transition-all duration-200 ease-out"></div>
                </div>
                <div class="mt-2 flex items-center justify-between gap-3">
                    <p id="bupStats" class="text-xs text-gray-500 tabular-nums" aria-live="polite"></p>
                    <div class="flex items-center gap-3 shrink-0">
                        <button type="button" id="bupRetryBtn" class="hidden text-xs font-medium text-blue-600 hover:text-blue-800">Retry failed</button>
                        <button type="button" id="bupCancelBtn" class="text-xs font-medium text-gray-500 transition-colors hover:text-red-600">Cancel</button>
                        <a id="bupDoneLink" href="/admin/videos" class="hidden text-xs font-medium text-blue-600 hover:text-blue-800 no-underline">Open Videos &rarr;</a>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="space-y-6">

        <div class="bg-white rounded-lg shadow-sm border border-gray-200" id="bupSettings">
            <div class="px-4 py-3 border-b border-gray-100">
                <h3 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
                    Applies to every video
                </h3>
            </div>
            <div class="p-4 space-y-4">
                <div>
                    <label for="bupStatus" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                    <select id="bupStatus" class="<?= $inputCls ?>">
                        <option value="published">Published</option>
                        <option value="draft">Draft</option>
                        <option value="private">Private</option>
                    </select>
                    <p class="mt-1 text-xs text-gray-500" id="bupStatusHint">Each video goes live the moment its upload finishes.</p>
                </div>
                <div>
                    <label for="bupType" class="block text-sm font-medium text-gray-700 mb-1">Type</label>
                    <select id="bupType" class="<?= $inputCls ?>">
                        <?php foreach ($typeLabels as $vtCode => $vtLabel): ?>
                        <option value="<?= htmlspecialchars($vtCode) ?>" <?= $defaultType === $vtCode ? 'selected' : '' ?>><?= htmlspecialchars($vtLabel) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div>
                    <label for="bupDescription" class="block text-sm font-medium text-gray-700 mb-1">Description <span class="font-normal text-gray-400">&middot; optional, same for all</span></label>
                    <textarea id="bupDescription" rows="3" class="<?= $inputCls ?> resize-y" placeholder="Shared description for this batch..."></textarea>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm border border-gray-200" id="bupRelations">
            <div class="px-4 py-3 border-b border-gray-100">
                <h3 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                    Relations
                </h3>
            </div>
            <div class="p-4 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Categories</label>
                    <div class="tok" id="tokCategories" data-name="categories[]" data-items='<?= $catJson ?>' data-selected='[]'>
                        <div class="tok__wrap"><div class="tok__tags"></div><input type="text" class="tok__input" placeholder="Search categories..."></div>
                        <div class="tok__drop"></div>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tags</label>
                    <div class="tok" id="tokTags" data-name="tags[]" data-items='<?= $tagJson ?>' data-selected='[]'>
                        <div class="tok__wrap"><div class="tok__tags"></div><input type="text" class="tok__input" placeholder="Search tags..."></div>
                        <div class="tok__drop"></div>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Pornstars</label>
                    <div class="tok" id="tokPerformers" data-name="performers[]" data-items='<?= $perfJson ?>' data-selected='[]'>
                        <div class="tok__wrap"><div class="tok__tags"></div><input type="text" class="tok__input" placeholder="Search pornstars..."></div>
                        <div class="tok__drop"></div>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Channels</label>
                    <div class="tok" id="tokChannels" data-name="channels[]" data-items='<?= $channelJson ?>' data-selected='[]'>
                        <div class="tok__wrap"><div class="tok__tags"></div><input type="text" class="tok__input" placeholder="Search channels..."></div>
                        <div class="tok__drop"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm border border-gray-200" id="bupThumbCard">
            <div class="p-4">
                <label class="flex items-start gap-3 cursor-pointer">
                    <input type="checkbox" id="bupCapture" checked class="mt-0.5 w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                    <div>
                        <span class="text-sm font-medium text-gray-700">Capture a thumbnail from each video</span>
                        <p class="text-[11px] text-gray-400 mt-0.5">Taken from the first seconds of the file in your browser, so every video gets a poster even when the server has no FFmpeg. You can replace it later from the video page.</p>
                    </div>
                </label>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
            <div class="p-4 space-y-2">
                <button type="button" id="bupStartBtn" disabled class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-blue-600">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"/></svg>
                    <span id="bupStartLabel">Start upload</span>
                </button>
                <p id="bupStartHint" class="text-[11px] text-gray-400 text-center">Add files to begin.</p>
                <a href="/admin/videos" class="w-full inline-flex items-center justify-center px-4 py-2 bg-white text-gray-700 text-sm font-medium rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors no-underline">Back to videos</a>
            </div>
        </div>

    </div>
</div>

<script src="<?= AdminAssets::url('video-bulk-upload.js') ?>" defer></script>
