@csrf
@php
    $isEditMode = isset($ringtone);
    $initialTags = old('tags', isset($ringtone) ? $ringtone->tags->pluck('name')->implode(', ') : '');
    $initialType = old('content_type', $ringtone->content_type ?? 'ringtone');
    $initialSourceType = old('source_type', 'local');
@endphp
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nouislider@15.8.1/dist/nouislider.min.css">
<div class="grid gap-4 sm:grid-cols-2">
    <div class="sm:col-span-1">
        <label for="title" class="block text-sm font-medium text-slate-700">Title <span class="text-red-600">*</span></label>
        <input id="title" name="title" value="{{ old('title', $ringtone->title ?? '') }}" required class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
        @error('title')
            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror
    </div>

    <div class="sm:col-span-1">
        <label for="slug" class="block text-sm font-medium text-slate-700">Slug (optional)</label>
        <input id="slug" name="slug" value="{{ old('slug', $ringtone->slug ?? '') }}" class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
        @error('slug')
            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror
    </div>

    <div class="sm:col-span-1">
        <label for="content_type" class="block text-sm font-medium text-slate-700">Content Type <span class="text-red-600">*</span></label>
        <select id="content_type" name="content_type" required class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
            @foreach (($contentTypes ?? \App\Models\Ringtone::CONTENT_TYPE_LABELS) as $typeValue => $typeLabel)
                <option value="{{ $typeValue }}" @selected((string) $initialType === (string) $typeValue)>{{ $typeLabel }}</option>
            @endforeach
        </select>
        @error('content_type')
            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror
    </div>

    <div class="sm:col-span-1">
        <label for="category_id" class="block text-sm font-medium text-slate-700">Category <span class="text-red-600">*</span></label>
        <select id="category_id" name="category_id" required class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
            <option value="">Select category</option>
            @foreach ($categories as $category)
                <option value="{{ $category->id }}" @selected((string) old('category_id', $ringtone->category_id ?? ($selectedCategoryId ?? '')) === (string) $category->id)>
                    {{ $category->slug_path }}
                </option>
            @endforeach
        </select>
        <p class="mt-1 text-xs text-slate-500">Content can be added only in leaf categories (no subcategories).</p>
        @error('category_id')
            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror
    </div>

    @if (! $isEditMode)
        <div class="sm:col-span-1">
            <label for="source_type" class="block text-sm font-medium text-slate-700">Upload Source <span class="text-red-600">*</span></label>
            <select id="source_type" name="source_type" class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
                <option value="local" @selected($initialSourceType === 'local')>Local Upload</option>
                <option value="url" @selected($initialSourceType === 'url')>URL Upload</option>
                <option value="jiosaavn" @selected($initialSourceType === 'jiosaavn')>JioSaavn Link</option>
                <option value="instagram" @selected($initialSourceType === 'instagram')>Instagram Reel Link</option>
            </select>
            <p class="mt-1 text-xs text-slate-500">JioSaavn import currently supports only ringtone and sound effect.</p>
            @error('source_type')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="sm:col-span-1" id="saavn-link-wrap" style="display:none;">
            <label for="saavn_link" class="block text-sm font-medium text-slate-700">JioSaavn Song Link <span class="text-red-600">*</span></label>
            <input id="saavn_link" name="saavn_link" value="{{ old('saavn_link', '') }}" placeholder="https://www.jiosaavn.com/song/..." class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
            @error('saavn_link')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>
    @endif

    <div class="sm:col-span-2" id="instagram-link-wrap" style="display:none;">
        <label for="instagram_link" class="block text-sm font-medium text-slate-700">Instagram Reel Link <span class="text-red-600">*</span></label>
        <input id="instagram_link" name="instagram_link" value="{{ old('instagram_link', '') }}" placeholder="https://www.instagram.com/reel/..." class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
        <p class="mt-1 text-xs text-slate-500">Reel preview aur save ke waqt import dono isi link se hoga.</p>
        @error('instagram_link')
            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror
    </div>

    <div class="sm:col-span-2 hidden rounded-2xl border border-slate-200 bg-slate-50 p-4" id="instagram-preview-wrap">
        <div class="flex items-center justify-between gap-3">
            <div>
                <p class="text-xs font-semibold uppercase tracking-wide text-cyan-600">Instagram Preview</p>
                <h3 class="mt-1 text-sm font-semibold text-slate-900">Reel preview will appear here</h3>
            </div>
            <button type="button" id="instagram-preview-refresh" class="rounded-lg border border-cyan-200 bg-white px-3 py-2 text-xs font-medium text-cyan-700 hover:bg-cyan-100">
                Refresh
            </button>
        </div>
        <div class="mt-4 grid gap-4 lg:grid-cols-[1.2fr_0.8fr]">
            <div class="overflow-hidden rounded-2xl bg-slate-900">
                <video id="instagram-preview-video" class="hidden h-full w-full max-h-[420px] object-cover" controls playsinline preload="metadata"></video>
                <img id="instagram-preview-image" class="h-full w-full max-h-[420px] object-cover" alt="Instagram preview" style="display:none;">
                <div id="instagram-preview-placeholder" class="flex h-[260px] items-center justify-center text-sm text-slate-300">
                    Paste a reel link to fetch preview.
                </div>
            </div>
            <div class="space-y-3 rounded-2xl bg-white p-4">
                <div>
                    <p class="text-xs uppercase tracking-wide text-slate-500">Title</p>
                    <p id="instagram-preview-title" class="mt-1 text-base font-semibold text-slate-900">-</p>
                </div>
                <div>
                    <p class="text-xs uppercase tracking-wide text-slate-500">Shortcode</p>
                    <p id="instagram-preview-shortcode" class="mt-1 text-sm text-slate-700">-</p>
                </div>
                <div>
                    <p class="text-xs uppercase tracking-wide text-slate-500">Note</p>
                    <p id="instagram-preview-note" class="mt-1 text-sm text-slate-600">The file will be imported from this reel when you save.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="sm:col-span-2" id="content-file-wrap">
        <label id="content-file-label" for="content_file" class="block text-sm font-medium text-slate-700">Content File <span class="text-red-600">*</span></label>
        <input id="content_file" name="content_file" type="file" class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
        @if (! empty($ringtone?->file_path))
            <p class="text-xs text-slate-500 mt-1">Current file: {{ $ringtone->file_path }}</p>
        @endif
        @error('content_file')
            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror
    </div>

    <div class="sm:col-span-2" id="content-url-wrap" style="display:none;">
        <label for="content_url" class="block text-sm font-medium text-slate-700">Content URL <span class="text-red-600">*</span></label>
        <input id="content_url" name="content_url" type="url" value="{{ old('content_url') }}" placeholder="https://example.com/file.mp3" class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
        <p class="mt-1 text-xs text-slate-500">Server URL se file download karke local storage me save karega.</p>
        @error('content_url')
            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror
    </div>

    <label data-audio-only class="sm:col-span-2 inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm">
        <input id="convert_to_m4r" type="checkbox" name="convert_to_m4r" value="1" class="h-4 w-4 rounded border-slate-300 text-cyan-600 focus:ring-cyan-500" @checked((bool) old('convert_to_m4r', true))>
        <span>Convert to iPhone format (.m4r) after upload</span>
    </label>

    <div data-audio-only class="sm:col-span-2 rounded-xl border border-slate-200 bg-slate-50 p-3">
        <label class="inline-flex items-center gap-2 text-sm font-medium text-slate-700">
            <input id="enable-cutter" type="checkbox" class="h-4 w-4 rounded border-slate-300 text-cyan-600 focus:ring-cyan-500" @checked(old('cut_start') !== null || old('cut_end') !== null)>
            Enable Ringtone Cutter
        </label>
        <p class="mt-1 text-xs text-slate-500">Choose start and end seconds, then preview the cut. Final trim backend me FFmpeg se hoga.</p>

        <div id="cutter-panel" class="mt-3 grid gap-3 sm:grid-cols-3" style="display:none;">
            <div class="sm:col-span-2">
                <label class="block text-xs font-medium text-slate-700">
                    Range:
                    <span id="cut-start-value">0:00</span>
                    -
                    <span id="cut-end-value">0:30</span>
                </label>
                <div id="cutter-slider-wrap" class="mt-2 rounded-lg border border-slate-200 bg-white p-3">
                    <div id="cutter-slider"></div>
                </div>
                <input id="cut_start" name="cut_start" type="hidden" value="{{ old('cut_start', 0) }}">
                <input id="cut_end" name="cut_end" type="hidden" value="{{ old('cut_end', 30) }}">
            </div>
            <div class="flex items-end">
                <button type="button" id="preview-cut" class="w-full rounded-lg border border-cyan-200 bg-cyan-50 px-3 py-2 text-xs font-medium text-cyan-700 hover:bg-cyan-100">
                    Preview Cut
                </button>
            </div>
            <div class="sm:col-span-3">
                <audio id="cut-preview-audio" controls preload="metadata" class="w-full" data-existing-src="{{ $ringtone->file_url ?? '' }}"></audio>
                <p id="cut-preview-note" class="mt-2 text-xs text-slate-500"></p>
            </div>
        </div>

        @error('cut_start')
            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror
        @error('cut_end')
            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror
    </div>

    <div id="duration-wrap" class="sm:col-span-1">
        <label for="duration" class="block text-sm font-medium text-slate-700">Duration (seconds)</label>
        <div class="mt-1 flex gap-2">
            <input id="duration" name="duration" type="number" min="1" max="7200" value="{{ old('duration', $ringtone->duration ?? '') }}" class="w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
            <button type="button" id="detect-duration" class="rounded-xl border border-cyan-200 bg-cyan-50 px-3 py-2.5 text-xs font-medium text-cyan-700 hover:bg-cyan-100">
                Auto
            </button>
        </div>
        <p class="mt-1 text-xs text-slate-500">Audio/video file choose karte hi duration auto detect hoga.</p>
        @error('duration')
            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror
    </div>

    <div class="sm:col-span-1">
        <label for="tags-input" class="block text-sm font-medium text-slate-700">Tags (Auto + Manual)</label>
        <input id="tags-hidden" type="hidden" name="tags" value="{{ $initialTags }}">
        <div class="mt-1 rounded-xl border border-slate-300 bg-slate-50 p-2">
            <div id="tags-list" class="mb-2 flex flex-wrap gap-2"></div>
            <div class="flex gap-2">
                <input id="tags-input" type="text" placeholder="Type tag and press Enter" class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                <button type="button" id="auto-tags" class="rounded-lg border border-cyan-200 bg-cyan-50 px-3 py-2 text-xs font-medium text-cyan-700 hover:bg-cyan-100">
                    Auto
                </button>
            </div>
        </div>
        @error('tags')
            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror
    </div>

    <div class="sm:col-span-2">
        <label for="description" class="block text-sm font-medium text-slate-700">Description</label>
        <textarea id="description" name="description" rows="4" class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">{{ old('description', $ringtone->description ?? '') }}</textarea>
    </div>

    <div class="sm:col-span-2 rounded-xl border border-slate-200 bg-slate-50 p-4">
        <div class="mb-3 flex items-center justify-between">
            <h3 class="text-sm font-semibold text-slate-800">SEO Settings</h3>
            <button type="button" id="auto-seo-ringtone" class="rounded-lg border border-cyan-200 bg-cyan-50 px-2.5 py-1 text-xs font-medium text-cyan-700 hover:bg-cyan-100">
                Auto Generate
            </button>
        </div>
        <div class="grid gap-3 sm:grid-cols-2">
            <div class="sm:col-span-2">
                <label for="seo_title" class="block text-xs font-medium text-slate-700">SEO Title</label>
                <input id="seo_title" name="seo_title" value="{{ old('seo_title', $ringtone->seo_title ?? '') }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                @error('seo_title')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            <div class="sm:col-span-2">
                <label for="seo_description" class="block text-xs font-medium text-slate-700">SEO Description</label>
                <textarea id="seo_description" name="seo_description" rows="3" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">{{ old('seo_description', $ringtone->seo_description ?? '') }}</textarea>
                @error('seo_description')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            <div class="sm:col-span-2">
                <label for="seo_keywords" class="block text-xs font-medium text-slate-700">SEO Keywords (comma separated)</label>
                <input id="seo_keywords" name="seo_keywords" value="{{ old('seo_keywords', $ringtone->seo_keywords ?? '') }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                @error('seo_keywords')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>
    </div>

    <label class="sm:col-span-2 inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm">
        <input type="checkbox" name="is_active" value="1" class="h-4 w-4 rounded border-slate-300 text-cyan-600 focus:ring-cyan-500" @checked((bool) old('is_active', $ringtone->is_active ?? true))>
        <span id="active-label">Active Content</span>
    </label>
</div>

<script src="https://cdn.jsdelivr.net/npm/nouislider@15.8.1/dist/nouislider.min.js"></script>
<script>
    (() => {
        const TYPE_CONFIG = {
            ringtone: { label: 'Ringtone', accept: '.mp3,.wav,.ogg,.m4a,audio/*', kind: 'audio' },
            sound_effect: { label: 'Sound Effect', accept: '.mp3,.wav,.ogg,.m4a,audio/*', kind: 'audio' },
            wallpaper: { label: 'Wallpaper', accept: '.jpg,.jpeg,.png,.webp,.gif,image/*', kind: 'image' },
            image: { label: 'Image', accept: '.jpg,.jpeg,.png,.webp,.gif,image/*', kind: 'image' },
            meme: { label: 'Meme', accept: '.jpg,.jpeg,.png,.webp,.gif,.mp4,.mov,.webm,image/*,video/*', kind: 'mixed' },
            reel: { label: 'Reel', accept: '.mp4,.mov,.webm,video/*', kind: 'video' },
            other: { label: 'Content', accept: '.mp3,.wav,.ogg,.m4a,.jpg,.jpeg,.png,.webp,.gif,.mp4,.mov,.webm,audio/*,image/*,video/*', kind: 'other' },
        };

        const AUDIO_TYPES = new Set(['ringtone', 'sound_effect']);
        const DURATION_TYPES = new Set(['ringtone', 'sound_effect', 'reel']);

        const titleInput = document.getElementById('title');
        const slugInput = document.getElementById('slug');
        const typeInput = document.getElementById('content_type');
        const sourceTypeInput = document.getElementById('source_type');
        const saavnLinkWrap = document.getElementById('saavn-link-wrap');
        const saavnLinkInput = document.getElementById('saavn_link');
        const instagramLinkWrap = document.getElementById('instagram-link-wrap');
        const instagramLinkInput = document.getElementById('instagram_link');
        const instagramPreviewWrap = document.getElementById('instagram-preview-wrap');
        const instagramPreviewVideo = document.getElementById('instagram-preview-video');
        const instagramPreviewImage = document.getElementById('instagram-preview-image');
        const instagramPreviewPlaceholder = document.getElementById('instagram-preview-placeholder');
        const instagramPreviewTitle = document.getElementById('instagram-preview-title');
        const instagramPreviewShortcode = document.getElementById('instagram-preview-shortcode');
        const instagramPreviewNote = document.getElementById('instagram-preview-note');
        const instagramPreviewRefresh = document.getElementById('instagram-preview-refresh');
        const instagramPreviewEndpoint = @json(route('frontend.instagram.reel.preview'));
        const contentFileWrap = document.getElementById('content-file-wrap');
        const contentUrlWrap = document.getElementById('content-url-wrap');
        const contentFileLabel = document.getElementById('content-file-label');
        const fileInput = document.getElementById('content_file');
        const contentUrlInput = document.getElementById('content_url');
        const durationInput = document.getElementById('duration');
        const durationWrap = document.getElementById('duration-wrap');
        const detectDurationBtn = document.getElementById('detect-duration');
        const tagsInput = document.getElementById('tags-input');
        const tagsHidden = document.getElementById('tags-hidden');
        const tagsList = document.getElementById('tags-list');
        const autoTagsBtn = document.getElementById('auto-tags');
        const descriptionInput = document.getElementById('description');
        const seoTitleInput = document.getElementById('seo_title');
        const seoDescriptionInput = document.getElementById('seo_description');
        const seoKeywordsInput = document.getElementById('seo_keywords');
        const autoSeoBtn = document.getElementById('auto-seo-ringtone');
        const categoryInput = document.getElementById('category_id');
        const form = titleInput?.closest('form');
        const activeLabel = document.getElementById('active-label');
        const isEditMode = {{ $isEditMode ? 'true' : 'false' }};

        const audioOnlyElements = Array.from(document.querySelectorAll('[data-audio-only]'));
        const convertToM4r = document.getElementById('convert_to_m4r');
        const enableCutterInput = document.getElementById('enable-cutter');
        const cutterPanel = document.getElementById('cutter-panel');
        const cutStartInput = document.getElementById('cut_start');
        const cutEndInput = document.getElementById('cut_end');
        const previewCutBtn = document.getElementById('preview-cut');
        const cutPreviewAudio = document.getElementById('cut-preview-audio');
        const cutPreviewNote = document.getElementById('cut-preview-note');
        const cutStartValue = document.getElementById('cut-start-value');
        const cutEndValue = document.getElementById('cut-end-value');
        const cutterSlider = document.getElementById('cutter-slider');
        const cutterSliderWrap = document.getElementById('cutter-slider-wrap');

        if (!titleInput || !slugInput || !typeInput || !tagsHidden || !tagsList || !tagsInput || !form) return;

        let slugTouched = slugInput.value.trim() !== '';
        let titleTouched = titleInput.value.trim() !== '';
        const tags = new Set();
        let baseDuration = durationInput?.value ? Number(durationInput.value) : null;
        let instagramPreviewData = null;

        const toSlug = (value) =>
            value
                .toLowerCase()
                .trim()
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-');

        const normalizeTag = (value) => value.trim().replace(/\s+/g, ' ');
        const normalizeTitle = (value) => value.trim().replace(/[\s_-]+/g, ' ').replace(/\s+/g, ' ');

        const currentType = () => typeInput.value || 'ringtone';
        const currentSource = () => sourceTypeInput?.value || 'local';
        const isSaavnSource = () => !isEditMode && currentSource() === 'jiosaavn';
        const isUrlSource = () => !isEditMode && currentSource() === 'url';
        const isAudioType = () => AUDIO_TYPES.has(currentType());
        const hasDuration = () => DURATION_TYPES.has(currentType());

        const fileExtension = (name) => {
            const parts = (name || '').toLowerCase().split('.');
            return parts.length > 1 ? parts.pop() : '';
        };

        const syncSlugFromTitle = (value) => {
            if (!slugTouched && slugInput && !slugInput.value.trim()) {
                slugInput.value = toSlug(value);
            }
        };

        const autoFillTitle = (value) => {
            const clean = normalizeTitle(value);
            if (!clean) return false;
            if (titleInput.value.trim()) return false;

            titleInput.value = clean;
            titleTouched = false;
            syncSlugFromTitle(clean);
            autoSeo(false);
            return true;
        };

        const titleFromFile = (file) => {
            const name = (file?.name || '').trim();
            if (!name) return '';
            return normalizeTitle(name.replace(/\.[^.]+$/, ''));
        };

        const titleFromUrl = (url) => {
            if (!url) return '';
            try {
                const parsed = new URL(url, window.location.origin);
                const slug = (parsed.pathname.split('/').filter(Boolean).pop() || '').replace(/\.[^.]+$/, '');
                return normalizeTitle(decodeURIComponent(slug).replace(/[-_]+/g, ' '));
            } catch (error) {
                return '';
            }
        };

        const isAllowedFileForType = (file, type) => {
            if (!file) return true;
            const mime = (file.type || '').toLowerCase();
            const ext = fileExtension(file.name);

            const audioExt = ['mp3', 'wav', 'ogg', 'm4a'];
            const imageExt = ['jpg', 'jpeg', 'png', 'webp', 'gif'];
            const videoExt = ['mp4', 'mov', 'webm'];

            if (type === 'ringtone' || type === 'sound_effect') {
                return mime.startsWith('audio/') || audioExt.includes(ext);
            }

            if (type === 'wallpaper' || type === 'image') {
                return mime.startsWith('image/') || imageExt.includes(ext);
            }

            if (type === 'meme') {
                return mime.startsWith('image/') || mime.startsWith('video/') || imageExt.includes(ext) || videoExt.includes(ext);
            }

            if (type === 'reel') {
                return mime.startsWith('video/') || videoExt.includes(ext);
            }

            return mime.startsWith('audio/') || mime.startsWith('image/') || mime.startsWith('video/') || audioExt.includes(ext) || imageExt.includes(ext) || videoExt.includes(ext);
        };

        const setFieldError = (field, message) => {
            const id = `js-error-${field.id || field.name}`;
            let error = document.getElementById(id);
            if (!error) {
                error = document.createElement('p');
                error.id = id;
                error.className = 'mt-1 text-sm text-red-600';
                field.parentElement?.appendChild(error);
            }
            error.textContent = message;
        };

        const clearFieldError = (field) => {
            const id = `js-error-${field.id || field.name}`;
            const error = document.getElementById(id);
            if (error) error.remove();
        };

        const syncTags = () => {
            tagsHidden.value = Array.from(tags).join(', ');
            tagsList.innerHTML = '';

            Array.from(tags).forEach((tag) => {
                const chip = document.createElement('span');
                chip.className = 'inline-flex items-center gap-1 rounded-full bg-cyan-100 px-2.5 py-1 text-xs text-cyan-800';
                chip.innerHTML = `<span>${tag}</span><button type="button" data-tag="${tag}" class="text-cyan-700 hover:text-cyan-900">&times;</button>`;
                tagsList.appendChild(chip);
            });
        };

        const addTag = (tag) => {
            const clean = normalizeTag(tag);
            if (!clean) return;
            tags.add(clean);
            syncTags();
        };

        const buildAutoTags = () => {
            const words = (titleInput.value || '')
                .split(/[\s\-_,.()]+/)
                .map((word) => normalizeTag(word))
                .filter((word) => word.length > 2)
                .slice(0, 8);

            words.forEach(addTag);
        };

        const detectDuration = () => {
            if (!fileInput || !durationInput || !fileInput.files || fileInput.files.length === 0 || !hasDuration()) return;
            const file = fileInput.files[0];
            const media = document.createElement(currentType() === 'reel' ? 'video' : 'audio');
            media.preload = 'metadata';
            media.src = URL.createObjectURL(file);
            media.onloadedmetadata = () => {
                if (isFinite(media.duration) && media.duration > 0) {
                    baseDuration = Math.max(1, Math.round(media.duration));
                    if (!enableCutterInput?.checked) {
                        durationInput.value = String(baseDuration);
                    }
                }
                URL.revokeObjectURL(media.src);
            };
        };

        const setPreviewNote = (message = '') => {
            if (!cutPreviewNote) return;
            cutPreviewNote.textContent = message;
        };

        const setupCutPreviewSource = async () => {
            if (!cutPreviewAudio || !isAudioType()) return;
            if (fileInput && fileInput.files && fileInput.files.length > 0) {
                const file = fileInput.files[0];
                const src = URL.createObjectURL(file);
                cutPreviewAudio.src = src;
                setPreviewNote('');
                cutPreviewAudio.onloadedmetadata = () => {
                    if (isFinite(cutPreviewAudio.duration)) {
                        const duration = Math.max(1, Math.round(cutPreviewAudio.duration));
                        baseDuration = duration;
                        updateSliderRange(duration);
                        if (!enableCutterInput?.checked && durationInput) {
                            durationInput.value = String(duration);
                        }
                        updateCutLabels();
                    }
                };
                return;
            }

            if (!isEditMode && isSaavnSource()) {
                const saavnLink = (saavnLinkInput?.value || '').trim();
                if (!saavnLink) {
                    cutPreviewAudio.removeAttribute('src');
                    cutPreviewAudio.load();
                    setPreviewNote('JioSaavn link add karo, phir preview available hoga.');
                    return;
                }

                try {
                    setPreviewNote('Fetching JioSaavn preview...');
                    const response = await fetch(`https://saavn.sumit.co/api/songs?link=${encodeURIComponent(saavnLink)}`);
                    if (!response.ok) {
                        throw new Error('Unable to fetch song details');
                    }

                    const payload = await response.json();
                    const downloadUrlList = Array.isArray(payload?.data?.[0]?.downloadUrl) ? payload.data[0].downloadUrl : [];
                    const lastItem = downloadUrlList[downloadUrlList.length - 1];
                    const url = typeof lastItem?.url === 'string' ? lastItem.url : '';

                    if (!url) {
                        throw new Error('No preview URL in response');
                    }

                    cutPreviewAudio.src = url;
                    cutPreviewAudio.load();
                    setPreviewNote('Preview ready. Agar play fail ho, source server playback block kar raha ho sakta hai.');
                } catch (error) {
                    cutPreviewAudio.removeAttribute('src');
                    cutPreviewAudio.load();
                    setPreviewNote('Preview load nahi hua. Link check karo, ya save ke baad local file se cut karo.');
                }

                return;
            }

            if (!isEditMode && currentSource() === 'instagram') {
                if (!instagramPreviewData?.video_url) {
                    const instagramLink = (instagramLinkInput?.value || '').trim();
                    if (!instagramLink) {
                        cutPreviewAudio.removeAttribute('src');
                        cutPreviewAudio.load();
                        setPreviewNote('Instagram link add karo, phir cutter preview available hoga.');
                        return;
                    }

                    await loadInstagramPreview();
                }

                if (instagramPreviewData?.video_url) {
                    cutPreviewAudio.src = instagramPreviewData.video_url;
                    cutPreviewAudio.load();
                    setPreviewNote('Instagram reel cutter preview loaded.');
                    return;
                }

                cutPreviewAudio.removeAttribute('src');
                cutPreviewAudio.load();
                setPreviewNote('Instagram preview load nahi hua. Link check karo, ya save ke baad local file se cut karo.');
                return;
            }

            const existingSrc = cutPreviewAudio.getAttribute('data-existing-src');
            if (existingSrc) {
                cutPreviewAudio.src = existingSrc;
                setPreviewNote('');
            }
        };

        const formatTimestamp = (seconds) => {
            const s = Math.max(0, Math.floor(Number(seconds) || 0));
            return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
        };

        const updateCutLabels = () => {
            if (cutStartValue && cutStartInput) cutStartValue.textContent = formatTimestamp(cutStartInput.value);
            if (cutEndValue && cutEndInput) cutEndValue.textContent = formatTimestamp(cutEndInput.value);
        };

        const syncDurationFromCut = () => {
            if (!durationInput || !enableCutterInput || !enableCutterInput.checked || !isAudioType()) return;
            const start = Number(cutStartInput?.value || 0);
            const end = Number(cutEndInput?.value || 0);
            if (!Number.isFinite(start) || !Number.isFinite(end) || end <= start) return;
            durationInput.value = String(Math.max(1, Math.round(end - start)));
        };

        const updateSliderRange = (duration) => {
            if (!cutterSlider || !cutterSlider.noUiSlider) return;
            const start = Number(cutStartInput?.value || 0);
            const end = Number(cutEndInput?.value || Math.min(duration, 30));
            const safeStart = Math.max(0, Math.min(start, Math.max(0, duration - 1)));
            const safeEnd = Math.max(safeStart + 1, Math.min(end, duration));

            cutterSlider.noUiSlider.updateOptions({
                range: { min: 0, max: duration },
                start: [safeStart, safeEnd],
            }, false);
        };

        const initCutterSlider = () => {
            if (!cutterSlider || !window.noUiSlider || cutterSlider.noUiSlider) return;
            const start = Number(cutStartInput?.value || 0);
            const end = Number(cutEndInput?.value || 30);

            window.noUiSlider.create(cutterSlider, {
                start: [start, Math.max(start + 1, end)],
                connect: true,
                range: { min: 0, max: 300 },
                step: 1,
            });

            cutterSlider.noUiSlider.on('update', (values) => {
                if (cutStartInput) cutStartInput.value = String(Math.round(Number(values[0])));
                if (cutEndInput) cutEndInput.value = String(Math.round(Number(values[1])));
                updateCutLabels();
                syncDurationFromCut();
            });
        };

        const toggleCutterPanel = () => {
            if (!enableCutterInput || !cutterPanel) return;
            if (!isAudioType()) {
                cutterPanel.style.display = 'none';
                return;
            }

            cutterPanel.style.display = enableCutterInput.checked ? 'grid' : 'none';
            if (!enableCutterInput.checked) {
                if (cutStartInput) cutStartInput.value = '0';
                if (cutEndInput) cutEndInput.value = '30';
                if (durationInput) {
                    durationInput.value = baseDuration && Number.isFinite(baseDuration) ? String(baseDuration) : '';
                }
            } else {
                initCutterSlider();
                setupCutPreviewSource();
                syncDurationFromCut();
            }
            updateCutLabels();
        };

        const hideInstagramPreview = () => {
            instagramPreviewData = null;
            if (instagramPreviewWrap) instagramPreviewWrap.classList.add('hidden');
            if (instagramPreviewVideo) {
                instagramPreviewVideo.pause?.();
                instagramPreviewVideo.removeAttribute('src');
                instagramPreviewVideo.load?.();
                instagramPreviewVideo.classList.add('hidden');
            }
            if (instagramPreviewImage) {
                instagramPreviewImage.removeAttribute('src');
                instagramPreviewImage.style.display = 'none';
            }
            if (instagramPreviewPlaceholder) {
                instagramPreviewPlaceholder.style.display = '';
            }
            if (instagramPreviewTitle) instagramPreviewTitle.textContent = '-';
            if (instagramPreviewShortcode) instagramPreviewShortcode.textContent = '-';
            if (instagramPreviewNote) instagramPreviewNote.textContent = 'The file will be imported from this reel when you save.';
            if (durationInput && !enableCutterInput?.checked) {
                durationInput.value = '';
            }
        };

        const renderInstagramPreview = (data) => {
            if (!instagramPreviewWrap) return;

            instagramPreviewData = data || null;
            instagramPreviewWrap.classList.remove('hidden');
            if (instagramPreviewTitle) instagramPreviewTitle.textContent = data?.title || 'Instagram Reel';
            if (instagramPreviewShortcode) instagramPreviewShortcode.textContent = data?.shortcode || '-';
            if (instagramPreviewNote) instagramPreviewNote.textContent = data?.video_url ? 'Video preview loaded from Instagram.' : 'Preview loaded.';

            if (instagramPreviewPlaceholder) {
                instagramPreviewPlaceholder.style.display = 'none';
            }

            if (data?.video_url && instagramPreviewVideo) {
                instagramPreviewVideo.src = data.video_url;
                instagramPreviewVideo.classList.remove('hidden');
                instagramPreviewVideo.style.display = '';
                instagramPreviewVideo.load?.();
            } else if (data?.thumbnail && instagramPreviewImage) {
                instagramPreviewImage.src = data.thumbnail;
                instagramPreviewImage.style.display = '';
            }

            if (data?.duration && Number.isFinite(Number(data.duration))) {
                baseDuration = Math.max(1, Math.round(Number(data.duration)));
                if (durationInput && !enableCutterInput?.checked) {
                    durationInput.value = String(baseDuration);
                }
                updateSliderRange(baseDuration);
                updateCutLabels();
            }

            if (!titleInput.value.trim()) {
                autoFillTitle(data?.title || data?.shortcode || data?.url || '');
            }

            if (isAudioType() && enableCutterInput?.checked) {
                setupCutPreviewSource();
            }
        };

        const loadInstagramPreview = async () => {
            if (!instagramLinkInput) return;

            const url = (instagramLinkInput.value || '').trim();
            if (!url) {
                hideInstagramPreview();
                return;
            }

            if (!instagramPreviewWrap) return;

            try {
                if (instagramPreviewNote) instagramPreviewNote.textContent = 'Loading Instagram preview...';
                const endpoint = new URL(instagramPreviewEndpoint, window.location.origin);
                endpoint.searchParams.set('url', url);
                const response = await fetch(endpoint.toString(), {
                    headers: {
                        'Accept': 'application/json',
                    },
                });
                if (!response.ok) {
                    throw new Error('Preview request failed');
                }

                const payload = await response.json();
                renderInstagramPreview(payload?.data || {});
                return payload?.data || {};
            } catch (error) {
                if (instagramPreviewWrap) instagramPreviewWrap.classList.remove('hidden');
                if (instagramPreviewPlaceholder) instagramPreviewPlaceholder.style.display = '';
                if (instagramPreviewVideo) {
                    instagramPreviewVideo.pause?.();
                    instagramPreviewVideo.removeAttribute('src');
                    instagramPreviewVideo.load?.();
                    instagramPreviewVideo.classList.add('hidden');
                }
                if (instagramPreviewImage) {
                    instagramPreviewImage.removeAttribute('src');
                    instagramPreviewImage.style.display = 'none';
                }
                if (instagramPreviewTitle) instagramPreviewTitle.textContent = 'Preview unavailable';
                if (instagramPreviewShortcode) instagramPreviewShortcode.textContent = '-';
                if (instagramPreviewNote) instagramPreviewNote.textContent = 'Instagram preview could not be loaded right now.';
                return null;
            }
        };

        const updateSourceUi = () => {
            if (isEditMode) {
                if (contentFileWrap) contentFileWrap.style.display = '';
                if (contentUrlWrap) contentUrlWrap.style.display = '';
                if (instagramLinkWrap) instagramLinkWrap.style.display = '';
                if (fileInput) fileInput.required = false;
                if (contentUrlInput) contentUrlInput.required = false;
                if (instagramLinkInput) instagramLinkInput.required = false;
                return;
            }

            const saavn = isSaavnSource();
            const urlSource = isUrlSource();
            const instagramSource = currentSource() === 'instagram';
            const local = !saavn && !urlSource && !instagramSource;

            if (saavnLinkWrap) {
                saavnLinkWrap.style.display = saavn ? '' : 'none';
            }

            if (instagramLinkWrap) {
                instagramLinkWrap.style.display = instagramSource ? '' : 'none';
            }

            if (contentFileWrap) {
                contentFileWrap.style.display = local ? '' : 'none';
            }

            if (contentUrlWrap) {
                contentUrlWrap.style.display = urlSource ? '' : 'none';
            }

            if (fileInput) {
                fileInput.required = local;
                if (!local) {
                    fileInput.value = '';
                }
            }

            if (contentUrlInput) {
                contentUrlInput.required = urlSource;
                if (!urlSource) {
                    contentUrlInput.value = '';
                }
            }

            if (saavnLinkInput) {
                saavnLinkInput.required = saavn;
            }

            if (instagramLinkInput) {
                instagramLinkInput.required = instagramSource;
                if (!instagramSource) {
                    hideInstagramPreview();
                }
            }
        };

        const updateTypeUi = () => {
            const type = currentType();
            const config = TYPE_CONFIG[type] || TYPE_CONFIG.ringtone;
            const audioMode = isAudioType();

            if (contentFileLabel) {
                contentFileLabel.innerHTML = `${config.label} File <span class="text-red-600">*</span>`;
            }

            if (fileInput) {
                fileInput.setAttribute('accept', config.accept);
            }

            if (activeLabel) {
                activeLabel.textContent = `Active ${config.label}`;
            }

            audioOnlyElements.forEach((element) => {
                element.style.display = audioMode ? '' : 'none';
            });

            if (!audioMode) {
                if (convertToM4r) convertToM4r.checked = false;
                if (enableCutterInput) enableCutterInput.checked = false;
                if (cutStartInput) cutStartInput.value = '';
                if (cutEndInput) cutEndInput.value = '';
            }

            if (durationWrap) {
                durationWrap.style.display = hasDuration() ? '' : 'none';
                if (!hasDuration() && durationInput) {
                    durationInput.value = '';
                }
            }

            updateSourceUi();
            toggleCutterPanel();
            autoSeo(false);
        };

        (tagsHidden.value || '')
            .split(',')
            .map((tag) => normalizeTag(tag))
            .filter(Boolean)
            .forEach((tag) => tags.add(tag));
        syncTags();

        slugInput.addEventListener('input', () => {
            slugTouched = slugInput.value.trim() !== '';
        });

        titleInput.addEventListener('input', () => {
            titleTouched = titleInput.value.trim() !== '';
            if (!slugTouched) {
                slugInput.value = toSlug(titleInput.value);
            }
        });

        const autoSeo = (force = false) => {
            const title = titleInput.value.trim();
            const description = (descriptionInput?.value || '').trim();
            const typeLabel = (TYPE_CONFIG[currentType()]?.label || 'Content').toLowerCase();
            const generatedTitle = title ? `${title} ${typeLabel} Download` : '';
            const generatedDescription = (description || (title ? `Download ${title} ${typeLabel} free in high quality.` : '')).slice(0, 155);
            const generatedKeywords = title ? `${title}, ${title} ${typeLabel}, free ${typeLabel}, download ${typeLabel}`.toLowerCase() : '';

            if (seoTitleInput && (force || !seoTitleInput.value.trim())) seoTitleInput.value = generatedTitle;
            if (seoDescriptionInput && (force || !seoDescriptionInput.value.trim())) seoDescriptionInput.value = generatedDescription;
            if (seoKeywordsInput && (force || !seoKeywordsInput.value.trim())) seoKeywordsInput.value = generatedKeywords;
        };

        tagsInput.addEventListener('keydown', (event) => {
            if (event.key === 'Enter' || event.key === ',') {
                event.preventDefault();
                addTag(tagsInput.value.replace(',', ''));
                tagsInput.value = '';
            }
        });

        tagsList.addEventListener('click', (event) => {
            const target = event.target;
            if (!(target instanceof HTMLElement)) return;
            const tag = target.getAttribute('data-tag');
            if (!tag) return;
            tags.delete(tag);
            syncTags();
        });

        autoTagsBtn?.addEventListener('click', buildAutoTags);
        autoSeoBtn?.addEventListener('click', () => autoSeo(true));
        titleInput.addEventListener('input', () => autoSeo(false));
        descriptionInput?.addEventListener('input', () => autoSeo(false));
        fileInput?.addEventListener('change', () => {
            if (titleInput && !titleInput.value.trim()) {
                autoFillTitle(titleFromFile(fileInput.files?.[0]));
            }
            detectDuration();
            setupCutPreviewSource();
        });
        saavnLinkInput?.addEventListener('change', () => {
            if (!isSaavnSource()) return;
            if (titleInput && !titleInput.value.trim()) {
                autoFillTitle(titleFromUrl(saavnLinkInput.value));
            }
            setupCutPreviewSource();
        });
        contentUrlInput?.addEventListener('input', () => {
            if (isUrlSource() && titleInput && !titleInput.value.trim()) {
                autoFillTitle(titleFromUrl(contentUrlInput.value));
            }
        });
        contentUrlInput?.addEventListener('change', () => {
            if (isUrlSource() && titleInput && !titleInput.value.trim()) {
                autoFillTitle(titleFromUrl(contentUrlInput.value));
            }
        });
        detectDurationBtn?.addEventListener('click', detectDuration);
        enableCutterInput?.addEventListener('change', toggleCutterPanel);
        typeInput.addEventListener('change', updateTypeUi);
        sourceTypeInput?.addEventListener('change', updateTypeUi);
        instagramLinkInput?.addEventListener('input', () => {
            if (currentSource() === 'instagram' || isEditMode) {
                loadInstagramPreview();
            }
        });
        instagramLinkInput?.addEventListener('change', () => {
            if (currentSource() === 'instagram' || isEditMode) {
                loadInstagramPreview();
            }
        });
        instagramPreviewRefresh?.addEventListener('click', loadInstagramPreview);

        previewCutBtn?.addEventListener('click', () => {
            if (!cutPreviewAudio || !cutStartInput || !cutEndInput || !isAudioType()) return;
            const start = Number(cutStartInput.value || 0);
            const end = Number(cutEndInput.value || 0);
            if (!isFinite(start) || !isFinite(end) || end <= start) return;

            cutPreviewAudio.currentTime = start;
            cutPreviewAudio.play();

            const stopAtEnd = () => {
                if (cutPreviewAudio.currentTime >= end) {
                    cutPreviewAudio.pause();
                    cutPreviewAudio.removeEventListener('timeupdate', stopAtEnd);
                }
            };

            cutPreviewAudio.addEventListener('timeupdate', stopAtEnd);
        });

        initCutterSlider();
        setupCutPreviewSource();
        updateCutLabels();
        syncDurationFromCut();
        updateTypeUi();
        if ((instagramLinkInput?.value || '').trim() !== '') {
            loadInstagramPreview();
        }

        form.addEventListener('submit', (event) => {
            let hasError = false;

            [titleInput, typeInput, categoryInput, durationInput, fileInput, contentUrlInput, tagsInput, cutterSliderWrap].forEach((field) => {
                if (field) clearFieldError(field);
            });
            if (saavnLinkInput) clearFieldError(saavnLinkInput);
            if (contentUrlInput) clearFieldError(contentUrlInput);

            if (!titleInput.value.trim()) {
                if (fileInput && fileInput.files && fileInput.files.length > 0) {
                    autoFillTitle(titleFromFile(fileInput.files[0]));
                } else if (isUrlSource()) {
                    autoFillTitle(titleFromUrl(contentUrlInput?.value || ''));
                } else if (isSaavnSource()) {
                    autoFillTitle(titleFromUrl(saavnLinkInput?.value || ''));
                } else if (currentSource() === 'instagram' && instagramPreviewData?.title) {
                    autoFillTitle(instagramPreviewData.title);
                }
            }

            if (!titleInput.value.trim()) {
                setFieldError(titleInput, 'Title is required.');
                hasError = true;
            }

            if (!typeInput.value) {
                setFieldError(typeInput, 'Content type is required.');
                hasError = true;
            }

            if (!categoryInput.value) {
                setFieldError(categoryInput, 'Category is required.');
                hasError = true;
            }

            if (hasDuration() && durationInput.value) {
                const duration = Number(durationInput.value);
                if (!Number.isInteger(duration) || duration < 1 || duration > 7200) {
                    setFieldError(durationInput, 'Duration must be between 1 and 7200 seconds.');
                    hasError = true;
                }
            }

            if (tagsHidden.value.length > 1000) {
                setFieldError(tagsInput, 'Tags must not be greater than 1000 characters.');
                hasError = true;
            }

            if (!isEditMode && isSaavnSource()) {
                const value = (saavnLinkInput?.value || '').trim();
                const isValidUrl = /^https?:\/\/\S+$/i.test(value);
                if (!value || !isValidUrl) {
                    if (saavnLinkInput) setFieldError(saavnLinkInput, 'Please enter a valid JioSaavn song link.');
                    hasError = true;
                }

                if (!isAudioType()) {
                    setFieldError(typeInput, 'JioSaavn import supports only ringtone and sound effect.');
                    hasError = true;
                }
            }

            if (!isEditMode && isUrlSource()) {
                const value = (contentUrlInput?.value || '').trim();
                const isValidUrl = /^https?:\/\/\S+$/i.test(value);
                if (!value || !isValidUrl) {
                    if (contentUrlInput) setFieldError(contentUrlInput, 'Please provide a valid file URL.');
                    hasError = true;
                }
            }

            if (!isEditMode && !isSaavnSource() && !isUrlSource() && currentSource() !== 'instagram' && fileInput && (!fileInput.files || fileInput.files.length === 0)) {
                setFieldError(fileInput, 'Please select a file to upload.');
                hasError = true;
            }


            if (fileInput && fileInput.files && fileInput.files.length > 0) {
                const file = fileInput.files[0];
                const maxBytes = 100 * 1024 * 1024;

                if (!isAllowedFileForType(file, currentType())) {
                    setFieldError(fileInput, 'Selected file is not valid for chosen content type.');
                    hasError = true;
                }

                if (file.size > maxBytes) {
                    setFieldError(fileInput, 'The file must not be greater than 100 MB.');
                    hasError = true;
                }
            }

            if (isAudioType() && enableCutterInput && enableCutterInput.checked) {
                const start = Number(cutStartInput?.value || 0);
                const end = Number(cutEndInput?.value || 0);
                if (!Number.isFinite(start) || start < 0) {
                    if (cutterSliderWrap) setFieldError(cutterSliderWrap, 'Cut start must be 0 or greater.');
                    hasError = true;
                }
                if (!Number.isFinite(end) || end <= start) {
                    if (cutterSliderWrap) setFieldError(cutterSliderWrap, 'Cut end must be greater than cut start.');
                    hasError = true;
                }
            } else {
                if (cutStartInput) cutStartInput.value = '';
                if (cutEndInput) cutEndInput.value = '';
                if (convertToM4r && !isAudioType()) convertToM4r.checked = false;
            }

            if (hasError) {
                event.preventDefault();
            }
        });
    })();
</script>