@php
    use App\Support\MediaUrl;

    $isEdit = $fragrance->exists;
    $previewImageUrl = MediaUrl::fromStored(old('image_url', $fragrance->image_url));
@endphp

<div class="space-y-6">
    <div class="rounded-xl border-l-4 bg-white p-5 shadow-sm" style="border-color: var(--color-ink-12); border-left-color: var(--color-lilac);">
        <div class="mb-5 pb-4 border-b" style="border-color: var(--color-ink-12);">
            <h3 class="text-lg font-semibold" style="color: var(--color-ink);">Catalog Basics</h3>
            <p class="mt-1 text-sm" style="color: var(--color-ink-70);">Core identity fields and product image for catalog and storefront.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label for="brand_id" class="label block mb-2" style="color: var(--color-ink-70);">Brand</label>
                <select id="brand_id" name="brand_id" class="input" required>
                    <option value="">Select a brand...</option>
                    @foreach ($brands as $brand)
                        <option value="{{ $brand->id }}" @selected((int) old('brand_id', $fragrance->brand_id) === $brand->id)>
                            {{ $brand->name }}
                        </option>
                    @endforeach
                </select>
                @error('brand_id')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="name" class="label block mb-2" style="color: var(--color-ink-70);">Fragrance Name</label>
                <input id="name" name="name" type="text" class="input" required maxlength="255"
                       value="{{ old('name', $fragrance->name) }}" placeholder="e.g. Aventus">
                @error('name')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="slug" class="label block mb-2" style="color: var(--color-ink-70);">Slug (optional)</label>
                <input id="slug" name="slug" type="text" class="input" maxlength="255"
                       value="{{ old('slug', $fragrance->slug) }}" placeholder="auto-generated if left empty">
                @error('slug')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="tag" class="label block mb-2" style="color: var(--color-ink-70);">Tag (optional)</label>
                <input id="tag" name="tag" type="text" class="input" maxlength="100"
                       value="{{ old('tag', $fragrance->tag) }}" placeholder="e.g. Bestseller">
                @error('tag')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="mt-6">
            <label for="image_url" class="label block mb-2" style="color: var(--color-ink-70);">Product Image</label>
            <div id="fragrance-image-dropzone" class="upload-dropzone">
                <input type="hidden" name="remove_image" id="fragrance-remove-image" value="{{ old('remove_image') ? '1' : '0' }}">
                <div class="upload-dropzone__hero">
                    <i class="fi fi-rr-cloud-upload upload-dropzone__icon" aria-hidden="true"></i>
                    <p class="upload-dropzone__hero-text">
                        Drag & drop image here or
                        <button type="button" class="upload-dropzone__link" id="fragrance-image-picker-btn">Choose file</button>
                    </p>
                </div>
                <input
                    id="image_url"
                    name="image_url"
                    type="text"
                    value="{{ old('image_url', $fragrance->image_url) }}"
                    class="input"
                    maxlength="2048"
                    placeholder="Or paste an image URL (https://...)"
                >
                <div class="upload-dropzone__actions">
                    <input
                        id="image"
                        name="image"
                        type="file"
                        accept=".jpg,.jpeg,.png,.webp,.gif"
                        class="hidden"
                    >
                    <span id="fragrance-image-file-name" class="text-xs upload-dropzone__hint">Accepted: JPG, PNG, WEBP, GIF (max 4MB)</span>
                    <button type="button" class="upload-dropzone__remove-btn" id="fragrance-remove-image-btn">Remove image</button>
                </div>
                <div id="fragrance-upload-status" class="upload-status hidden">
                    <div class="upload-status__row">
                        <img id="fragrance-upload-thumb" class="upload-status__thumb hidden" alt="Selected image preview">
                        <div class="upload-status__meta">
                            <p id="fragrance-upload-title" class="upload-status__title"></p>
                            <p id="fragrance-upload-subtitle" class="upload-status__subtitle"></p>
                        </div>
                    </div>
                    <div class="upload-status__progress-track">
                        <div id="fragrance-upload-progress" class="upload-status__progress-bar" style="width: 0%;"></div>
                    </div>
                </div>
            </div>
            @error('image_url')
                <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
            @enderror
            @error('image')
                <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
            @enderror
        </div>
    </div>

    <div class="rounded-xl border-l-4 bg-white p-5 shadow-sm" style="border-color: var(--color-ink-12); border-left-color: var(--color-lilac);">
        <div class="mb-5 pb-4 border-b" style="border-color: var(--color-ink-12);">
            <h3 class="text-lg font-semibold" style="color: var(--color-ink);">Classification</h3>
            <p class="mt-1 text-sm" style="color: var(--color-ink-70);">Audience and concentration metadata for filtering and browse UX.</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label for="gender" class="label block mb-2" style="color: var(--color-ink-70);">Gender</label>
                <select id="gender" name="gender" class="input">
                    <option value="">Select...</option>
                    @foreach ($genders as $gender)
                        <option value="{{ $gender->value }}" @selected(old('gender', $fragrance->gender?->value ?? null) === $gender->value)>
                            {{ ucfirst($gender->value) }}
                        </option>
                    @endforeach
                </select>
                @error('gender')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="concentration" class="label block mb-2" style="color: var(--color-ink-70);">Concentration</label>
                <select id="concentration" name="concentration" class="input">
                    <option value="">Select...</option>
                    @foreach ($concentrations as $concentration)
                        <option value="{{ $concentration->value }}" @selected(old('concentration', $fragrance->concentration?->value ?? null) === $concentration->value)>
                            {{ strtoupper($concentration->value) }}
                        </option>
                    @endforeach
                </select>
                @error('concentration')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="release_year" class="label block mb-2" style="color: var(--color-ink-70);">Release Year</label>
                <input id="release_year" name="release_year" type="number" class="input" min="1900" max="2100"
                       value="{{ old('release_year', $fragrance->release_year) }}" placeholder="e.g. 2010">
                @error('release_year')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            </div>
        </div>
    </div>

    <div class="rounded-xl border-l-4 bg-white p-5 shadow-sm" style="border-color: var(--color-ink-12); border-left-color: var(--color-lilac);">
        <div class="mb-5 pb-4 border-b" style="border-color: var(--color-ink-12);">
            <h3 class="text-lg font-semibold" style="color: var(--color-ink);">Description & Notes</h3>
            <p class="mt-1 text-sm" style="color: var(--color-ink-70);">Editorial copy and accord pyramid shown on product details.</p>
        </div>
        <div class="space-y-4">
            <div>
                <label for="description" class="label block mb-2" style="color: var(--color-ink-70);">Description</label>
                <textarea id="description" name="description" class="input" rows="4" placeholder="Short fragrance description...">{{ old('description', $fragrance->description) }}</textarea>
                @error('description')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label for="notes_top" class="label block mb-2" style="color: var(--color-ink-70);">Top Notes</label>
                    <input id="notes_top" name="notes_top" class="input" value="{{ old('notes_top', $noteFields['top']) }}"
                           placeholder="Bergamot, Pineapple">
                </div>
                <div>
                    <label for="notes_middle" class="label block mb-2" style="color: var(--color-ink-70);">Middle Notes</label>
                    <input id="notes_middle" name="notes_middle" class="input" value="{{ old('notes_middle', $noteFields['middle']) }}"
                           placeholder="Jasmine, Rose">
                </div>
                <div>
                    <label for="notes_base" class="label block mb-2" style="color: var(--color-ink-70);">Base Notes</label>
                    <input id="notes_base" name="notes_base" class="input" value="{{ old('notes_base', $noteFields['base']) }}"
                           placeholder="Musk, Vanilla">
                </div>
            </div>
            @foreach (['notes_top', 'notes_middle', 'notes_base'] as $noteField)
                @error($noteField)
                    <p class="text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            @endforeach
        </div>
    </div>

    <div class="rounded-xl border-l-4 bg-white p-5 shadow-sm" style="border-color: var(--color-ink-12); border-left-color: var(--color-lilac);">
        <div class="mb-5 pb-4 border-b" style="border-color: var(--color-ink-12);">
            <h3 class="text-lg font-semibold" style="color: var(--color-ink);">Wear Profile</h3>
            <p class="mt-1 text-sm" style="color: var(--color-ink-70);">Performance profile and recommendation tags used by shoppers.</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
            <div>
                <label for="longevity_hours_min" class="label block mb-2" style="color: var(--color-ink-70);">Longevity Min (hours)</label>
                <input id="longevity_hours_min" name="longevity_hours_min" type="number" min="1" max="48" class="input"
                       value="{{ old('longevity_hours_min', $fragrance->longevity_hours_min) }}" placeholder="e.g. 6">
                @error('longevity_hours_min')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="longevity_hours_max" class="label block mb-2" style="color: var(--color-ink-70);">Longevity Max (hours)</label>
                <input id="longevity_hours_max" name="longevity_hours_max" type="number" min="1" max="72" class="input"
                       value="{{ old('longevity_hours_max', $fragrance->longevity_hours_max) }}" placeholder="e.g. 10">
                @error('longevity_hours_max')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="projection_level" class="label block mb-2" style="color: var(--color-ink-70);">Projection</label>
                <select id="projection_level" name="projection_level" class="input">
                    <option value="">Select...</option>
                    @foreach (['soft', 'moderate', 'strong', 'beast'] as $projection)
                        <option value="{{ $projection }}" @selected(old('projection_level', $fragrance->projection_level) === $projection)>{{ ucfirst($projection) }}</option>
                    @endforeach
                </select>
                @error('projection_level')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="sillage_level" class="label block mb-2" style="color: var(--color-ink-70);">Sillage</label>
                <select id="sillage_level" name="sillage_level" class="input">
                    <option value="">Select...</option>
                    @foreach (['intimate', 'moderate', 'noticeable', 'trail'] as $sillage)
                        <option value="{{ $sillage }}" @selected(old('sillage_level', $fragrance->sillage_level) === $sillage)>{{ ucfirst($sillage) }}</option>
                    @endforeach
                </select>
                @error('sillage_level')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
            <div>
                <label for="best_for_input" class="label block mb-2" style="color: var(--color-ink-70);">Best For (comma-separated)</label>
                <input id="best_for_input" name="best_for_input" class="input"
                       value="{{ old('best_for_input', $profileFields['best_for'] ?? '') }}" placeholder="Office, Date Night, Party">
                @error('best_for_input')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="seasons_input" class="label block mb-2" style="color: var(--color-ink-70);">Seasons (comma-separated)</label>
                <input id="seasons_input" name="seasons_input" class="input"
                       value="{{ old('seasons_input', $profileFields['seasons'] ?? '') }}" placeholder="Summer, Spring">
                @error('seasons_input')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="time_of_day_input" class="label block mb-2" style="color: var(--color-ink-70);">Time of Day (comma-separated)</label>
                <input id="time_of_day_input" name="time_of_day_input" class="input"
                       value="{{ old('time_of_day_input', $profileFields['time_of_day'] ?? '') }}" placeholder="Day, Evening">
                @error('time_of_day_input')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            </div>
        </div>
    </div>

    <div class="rounded-xl border-l-4 bg-white p-5 shadow-sm" style="border-color: var(--color-ink-12); border-left-color: var(--color-lilac);">
        <div class="mb-5 pb-4 border-b" style="border-color: var(--color-ink-12);">
            <h3 class="text-lg font-semibold" style="color: var(--color-ink);">Publishing & Visibility</h3>
            <p class="mt-1 text-sm" style="color: var(--color-ink-70);">Control listing visibility and featured merchandising badges.</p>
        </div>

        <div class="flex flex-wrap items-center gap-x-5 gap-y-2 text-sm" style="color: var(--color-ink-70);">
            <label class="flex items-center gap-2">
                <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $fragrance->is_active)) class="accent-current">
                <span>Visible and active</span>
            </label>
            <label class="flex items-center gap-2">
                <input type="checkbox" name="is_new_arrival" value="1" @checked(old('is_new_arrival', $fragrance->is_new_arrival ?? false)) class="accent-current">
                <span>New arrival</span>
            </label>
            <label class="flex items-center gap-2">
                <input type="checkbox" name="is_best_seller" value="1" @checked(old('is_best_seller', $fragrance->is_best_seller ?? false)) class="accent-current">
                <span>Best seller</span>
            </label>
            <label class="flex items-center gap-2">
                <input type="checkbox" name="is_featured" value="1" @checked(old('is_featured', $fragrance->is_featured ?? false)) class="accent-current">
                <span>Featured</span>
            </label>
        </div>

        <div class="flex items-center justify-end gap-3 mt-6 pt-4 border-t" style="border-color: var(--color-ink-12);">
            <a href="{{ route('admin.fragrances.index') }}" class="btn btn-ghost">Cancel</a>
            <button type="submit" class="btn btn-primary">
                {{ $isEdit ? 'Update Fragrance' : 'Create Fragrance' }}
            </button>
        </div>
    </div>
</div>

<script>
    (function () {
        const urlInput = document.getElementById('image_url');
        const fileInput = document.getElementById('image');
        const trigger = document.getElementById('fragrance-image-picker-btn');
        const fileName = document.getElementById('fragrance-image-file-name');
        const removeInput = document.getElementById('fragrance-remove-image');
        const removeBtn = document.getElementById('fragrance-remove-image-btn');
        const dropzone = document.getElementById('fragrance-image-dropzone');
        const statusWrap = document.getElementById('fragrance-upload-status');
        const progressBar = document.getElementById('fragrance-upload-progress');
        const title = document.getElementById('fragrance-upload-title');
        const subtitle = document.getElementById('fragrance-upload-subtitle');
        const thumb = document.getElementById('fragrance-upload-thumb');
        const existingImageUrl = @json($previewImageUrl);
        if (!urlInput || !fileInput || !trigger || !fileName || !removeInput || !removeBtn || !dropzone || !statusWrap || !progressBar || !title || !subtitle || !thumb) return;

        function normalizePreviewUrl(value) {
            const url = (value || '').trim();
            if (url === '') return '';
            if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('data:') || url.startsWith('blob:')) {
                return url;
            }
            if (url.startsWith('/')) {
                return url;
            }

            return `/${url}`;
        }

        function renderUrlState() {
            const url = (urlInput.value || '').trim();
            if (url === '') return;
            statusWrap.classList.remove('hidden');
            progressBar.style.width = '100%';
            title.textContent = 'Image link detected';
            subtitle.textContent = 'Will use this URL after save.';
            thumb.src = normalizePreviewUrl(url);
            thumb.classList.remove('hidden');
            removeInput.value = '0';
        }

        function renderFileState(file) {
            statusWrap.classList.remove('hidden');
            progressBar.style.width = '0%';
            title.textContent = file.name;
            subtitle.textContent = 'Preparing file...';
            thumb.classList.add('hidden');

            const reader = new FileReader();
            reader.onprogress = function (event) {
                if (!event.lengthComputable) return;
                const percent = Math.max(5, Math.round((event.loaded / event.total) * 100));
                progressBar.style.width = `${percent}%`;
                subtitle.textContent = `Reading file... ${percent}%`;
            };
            reader.onload = function (event) {
                progressBar.style.width = '100%';
                subtitle.textContent = 'Ready to upload on save.';
                if (typeof event.target?.result === 'string') {
                    thumb.src = event.target.result;
                    thumb.classList.remove('hidden');
                }
            };
            reader.readAsDataURL(file);
            removeInput.value = '0';
        }

        function applyFile(file) {
            const dt = new DataTransfer();
            dt.items.add(file);
            fileInput.files = dt.files;
            urlInput.value = '';
            fileName.textContent = `Selected: ${file.name}`;
            renderFileState(file);
        }

        trigger.addEventListener('click', function () {
            fileInput.click();
        });

        fileInput.addEventListener('change', function () {
            const file = fileInput.files && fileInput.files[0];
            if (!file) {
                fileName.textContent = 'Accepted: JPG, PNG, WEBP, GIF (max 4MB)';
                return;
            }
            fileName.textContent = `Selected: ${file.name}`;
            renderFileState(file);
        });

        urlInput.addEventListener('paste', function (event) {
            const items = event.clipboardData && event.clipboardData.items ? event.clipboardData.items : [];
            for (const item of items) {
                if (!item.type || !item.type.startsWith('image/')) continue;

                const blob = item.getAsFile();
                if (!blob) continue;

                const extension = (blob.type.split('/')[1] || 'png').replace('jpeg', 'jpg');
                const pastedFile = new File([blob], `pasted-image.${extension}`, { type: blob.type });
                applyFile(pastedFile);
                event.preventDefault();
                break;
            }
        });

        urlInput.addEventListener('input', renderUrlState);
        removeBtn.addEventListener('click', function () {
            fileInput.value = '';
            urlInput.value = '';
            removeInput.value = '1';
            statusWrap.classList.remove('hidden');
            progressBar.style.width = '100%';
            title.textContent = 'Image will be removed';
            subtitle.textContent = 'Save this form to apply removal.';
            thumb.classList.add('hidden');
            fileName.textContent = 'Image marked for removal.';
        });

        dropzone.addEventListener('dragover', function (event) {
            event.preventDefault();
            dropzone.classList.add('is-dragover');
        });

        dropzone.addEventListener('dragleave', function () {
            dropzone.classList.remove('is-dragover');
        });

        dropzone.addEventListener('drop', function (event) {
            event.preventDefault();
            dropzone.classList.remove('is-dragover');
            const file = event.dataTransfer?.files?.[0];
            if (!file || !file.type.startsWith('image/')) return;
            applyFile(file);
        });

        if ((urlInput.value || '').trim() !== '') {
            renderUrlState();
            return;
        }

        if (removeInput.value !== '1' && existingImageUrl) {
            statusWrap.classList.remove('hidden');
            progressBar.style.width = '100%';
            title.textContent = 'Current image';
            subtitle.textContent = 'No changes yet.';
            thumb.src = existingImageUrl;
            thumb.classList.remove('hidden');
        }
    })();
</script>