@extends('layouts.app')

@section('title', 'Instagram – Social Networks')

@section('content')
<div class="social-networks-section-page">
    <p class="social-networks-back">
        <a href="{{ route('social-networks.index') }}">← Social Networks</a>
    </p>
    <header class="setting-header">
        <h1>Instagram</h1>
        <p class="setting-subtitle">Connect your Instagram Business or Creator account via the Instagram Graph API to view followers and recent media (reels and posts) here.</p>
    </header>

    {{-- Flash success/error come from layouts.app (avoid duplicate green banners). --}}

    @if($apiError ?? null)
        <div class="alert alert-error">
            <strong>API error:</strong> {{ $apiError }}<br>
            <span class="inst-help-text">Check that your Access Token is valid and has not expired, and that the Instagram User ID is correct. You can update the credentials below.</span>
        </div>
    @endif

    @php $igConnected = $instagramSetting->isConnected(); @endphp
    <section class="setting-section setting-card instagram-connect-section">
        <div class="instagram-connect-head">
            <div>
                <h2 class="setting-section-title">Connection</h2>
                <p class="setting-section-desc">Connect Instagram via Meta Graph API for growth metrics, reels, and storefront carousel sync.</p>
            </div>
            @if($igConnected && !($apiError ?? null))
                <span class="instagram-connect-badge instagram-connect-badge--ok">Connected</span>
            @elseif($igConnected && ($apiError ?? null))
                <span class="instagram-connect-badge instagram-connect-badge--warn">Token issue</span>
            @else
                <span class="instagram-connect-badge">Not connected</span>
            @endif
        </div>

        <form action="{{ route('social-networks.instagram.settings') }}" method="POST" class="instagram-settings-form" id="instagram-connection-form" autocomplete="off">
            @csrf

            <div class="instagram-settings-row">
                <div class="instagram-settings-label-row">
                    <label class="instagram-settings-label" for="ig_graph_access_token">Access Token</label>
                    @if($igConnected)
                        <button type="button" class="instagram-token-toggle" id="instagram-token-replace-btn" aria-expanded="false">Replace token</button>
                    @endif
                </div>

                @if($igConnected)
                    <div class="instagram-token-saved" id="instagram-token-saved">
                        <span class="instagram-token-saved-mask" aria-hidden="true">••••••••••••••••••••••••••••••••</span>
                        <span class="instagram-token-saved-text">Token saved securely</span>
                    </div>
                    <div class="instagram-token-replace" id="instagram-token-replace" hidden>
                        <input
                            type="password"
                            name="access_token"
                            id="ig_graph_access_token"
                            class="instagram-settings-input"
                            placeholder="Paste new long-lived token from Meta"
                            value=""
                            autocomplete="new-password"
                            data-lpignore="true"
                            data-1p-ignore="true"
                            disabled
                        >
                        <span class="instagram-settings-hint">Paste a Meta token starting with <code>IG</code> or <code>EAA</code>, then Save. Cancel to keep the current token.</span>
                        <button type="button" class="instagram-token-cancel" id="instagram-token-cancel-btn">Cancel</button>
                    </div>
                @else
                    <input
                        type="password"
                        name="access_token"
                        id="ig_graph_access_token"
                        class="instagram-settings-input"
                        placeholder="Paste long-lived access token from Meta"
                        value=""
                        autocomplete="new-password"
                        data-lpignore="true"
                        data-1p-ignore="true"
                    >
                    <span class="instagram-settings-hint">Generate a long-lived token in <a href="https://developers.facebook.com/" target="_blank" rel="noopener noreferrer">Meta for Developers</a>.</span>
                @endif
            </div>

            <div class="instagram-settings-row">
                <label class="instagram-settings-label" for="ig_user_id">Instagram User ID</label>
                <input type="text" name="ig_user_id" id="ig_user_id" class="instagram-settings-input" placeholder="e.g. 17841405822304914" value="{{ old('ig_user_id', $instagramSetting->ig_user_id ?? '') }}" autocomplete="off">
                <span class="instagram-settings-hint">Numeric ID of your Instagram Business / Creator account.</span>
            </div>

            <div class="instagram-settings-row instagram-playback-row">
                <span class="instagram-settings-label">Reel playback</span>
                <p class="instagram-playback-note">Reels play on your site (muted by default; visitors can unmute). No redirect to Instagram.</p>
            </div>

            <div class="instagram-settings-actions">
                <button type="submit" class="btn btn-primary">Save connection</button>
                @if($igConnected)
                    <button type="submit" class="btn btn-secondary" form="instagram-disconnect-form" onclick="return confirm('Disconnect Instagram? Your token and IG User ID will be removed.');">Disconnect</button>
                @endif
            </div>
        </form>

        @if($igConnected)
            <form action="{{ route('social-networks.instagram.disconnect') }}" method="POST" id="instagram-disconnect-form" class="instagram-disconnect-form" hidden>
                @csrf
            </form>
        @endif
    </section>

    @if(($profile ?? null) && !($apiError ?? null))
    @php
        $growth = $growth ?? ['has_data' => false, 'followers' => 0, 'views' => 0, 'interactions' => 0];
        $formatMetric = function ($n) {
            if ($n === null) return '—';
            $n = (int) $n;
            if ($n >= 1000000) return round($n / 1000000, 1) . 'M';
            if ($n >= 1000) return round($n / 1000, 1) . 'K';
            return (string) $n;
        };
    @endphp
    <section class="setting-section setting-card instagram-growth-section">
        <h2 class="instagram-growth-title">Instagram Growth</h2>
        <div class="instagram-growth-header">
            <div class="instagram-growth-profile">
                @if(!empty($profile['profile_picture_url']))
                    <img src="{{ $profile['profile_picture_url'] }}" alt="" class="instagram-growth-avatar" width="48" height="48">
                @else
                    <div class="instagram-growth-avatar-placeholder" aria-hidden="true"></div>
                @endif
                <div class="instagram-growth-profile-info">
                    <span class="instagram-growth-username">&#64;{{ $profile['username'] ?? $instagramSetting->username ?? '—' }}</span>
                    <span class="instagram-growth-account-type">Business / Creator Account</span>
                </div>
            </div>
            <div class="instagram-growth-header-actions">
                <button type="button" class="btn instagram-growth-refresh-btn" id="instagram-growth-refresh-btn" data-refresh-url="{{ route('social-networks.instagram.refresh-stats') }}">
                    Refresh metrics
                </button>
                <a href="https://www.instagram.com/{{ $profile['username'] ?? '' }}" target="_blank" rel="noopener noreferrer" class="btn instagram-growth-view-btn">View Instagram</a>
            </div>
        </div>
        <p class="instagram-growth-period">Last 30 days</p>
        <div class="instagram-growth-live-badge" aria-hidden="true">
            <span class="instagram-growth-live-dot"></span>
            <span class="instagram-growth-live-text">Live</span>
        </div>
        <div class="instagram-growth-metrics">
            <div class="instagram-growth-metric instagram-growth-metric-followers">
                <span class="instagram-growth-label">Followers</span>
                @if($growth['has_data'] && $growth['followers'] > 0)
                <div class="instagram-growth-value-row">
                    <span class="instagram-growth-value" data-exact="{{ number_format($growth['followers']) }}" data-abbrev="{{ $formatMetric($growth['followers']) }}">{{ $formatMetric($growth['followers']) }}</span>
                    <button type="button" class="instagram-growth-value-toggle" aria-label="View exact number" title="Toggle full / abbreviated number"><span class="instagram-growth-toggle-icon" aria-hidden="true">⇄</span></button>
                </div>
                @else
                <span class="instagram-growth-value">{{ $formatMetric($growth['followers']) }}</span>
                @endif
            </div>
            <div class="instagram-growth-metric">
                <span class="instagram-growth-label">Views</span>
                <span class="instagram-growth-value">{{ $formatMetric($growth['views']) }}</span>
            </div>
            <div class="instagram-growth-metric">
                <span class="instagram-growth-label">Interactions</span>
                <span class="instagram-growth-value">{{ $formatMetric($growth['interactions']) }}</span>
            </div>
        </div>
        @if(!($growth['has_data'] ?? false))
            <p class="instagram-growth-note">Metrics are synced by a scheduled job. Run <code>php artisan instagram:sync-growth-stats</code> once, or wait for the next run (every 12 hours).</p>
        @endif
    </section>
    <section class="setting-section setting-card instagram-stats-section">
        <h2 class="setting-section-title">Profile &amp; stats</h2>
        <div class="instagram-profile-header">
            @if(!empty($profile['profile_picture_url']))
                <img src="{{ $profile['profile_picture_url'] }}" alt="" class="instagram-profile-pic" width="80" height="80">
            @endif
            <div class="instagram-profile-info">
                <p class="instagram-username">&#64;{{ $profile['username'] ?? $instagramSetting->username ?? '—' }}</p>
                @if(!empty($profile['name']))
                    <p class="instagram-name">{{ $profile['name'] }}</p>
                @endif
            </div>
        </div>
        <ul class="instagram-stats-list">
            <li><strong>{{ number_format($profile['followers_count'] ?? 0) }}</strong> followers</li>
            <li><strong>{{ number_format($profile['follows_count'] ?? 0) }}</strong> following</li>
            <li><strong>{{ number_format($profile['media_count'] ?? 0) }}</strong> media</li>
        </ul>
    </section>

    <section class="setting-section setting-card instagram-posts-section">
        <h2 class="setting-section-title">Recent media</h2>
        <p class="setting-section-desc">Showing <strong>{{ $totalMediaCount ?? count($media ?? []) }}</strong> reels/posts (first {{ $perPage ?? 10 }} load quickly; use <strong>Load more</strong> for the rest). Assign each one a category: <strong>Available Online</strong>, <strong>Custom Piece</strong>, or <strong>In-Store Only</strong>. Check <strong>Do not show on web</strong> for items you don't want on the storefront. Each sync picks <strong>15 at random</strong> from the non-excluded pool for the carousel. Click the image to open on Instagram.</p>
        @if(count($media ?? []) > 0)
            <form action="{{ route('social-networks.instagram.excluded-media') }}" method="POST" class="instagram-excluded-media-form">
                @csrf
                <ul class="instagram-media-grid" id="instagram-media-grid">
                    @include('social_networks.partials.instagram_media_page', [
                        'media' => $media,
                        'reelSettings' => $reelSettings ?? [],
                        'reelDetailsByMediaId' => $reelDetailsByMediaId ?? [],
                        'excludedMediaIds' => $excludedMediaIds ?? [],
                    ])
                </ul>
                @if(!empty($hasMoreMedia))
                <div class="instagram-load-more-wrap" id="instagram-load-more-wrap" data-next-page="{{ $nextMediaPage ?? 2 }}" data-total="{{ $totalMediaCount ?? 0 }}" data-per-page="{{ $perPage ?? 10 }}">
                    <button type="button" class="btn btn-secondary" id="instagram-load-more-btn" data-loading-text="Loading…">
                        Load more ({{ ($totalMediaCount ?? 0) - ($perPage ?? 10) }} left)
                    </button>
                </div>
                @endif
                <div class="instagram-excluded-actions">
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        @else
            <p class="instagram-no-posts">No media to show.</p>
        @endif
    </section>

    {{-- Reel settings modal --}}
    <div id="instagram-reel-settings-modal" class="instagram-modal" role="dialog" aria-labelledby="instagram-reel-settings-modal-title" aria-modal="true" hidden>
        <div class="instagram-modal-backdrop" data-close-modal></div>
        <div class="instagram-modal-box">
            <header class="instagram-modal-header">
                <h2 id="instagram-reel-settings-modal-title" class="instagram-modal-title">Reel settings</h2>
                <button type="button" class="instagram-modal-close" aria-label="Close" data-close-modal>&times;</button>
            </header>
            <form id="instagram-reel-settings-form" action="{{ route('social-networks.instagram.reel-settings') }}" method="POST" class="instagram-reel-settings-form">
                @csrf
                <input type="hidden" name="media_id" id="instagram-reel-settings-media-id" value="">
                <div class="instagram-modal-body">
                    <div class="instagram-modal-row">
                        <label class="instagram-modal-label">Type</label>
                        <p id="instagram-reel-settings-type" class="instagram-modal-readonly">—</p>
                    </div>
                    <div class="instagram-modal-row">
                        <label class="instagram-modal-label" for="instagram-reel-settings-category">Category</label>
                        <select name="category" id="instagram-reel-settings-category" class="instagram-modal-select">
                            @foreach(\App\Models\InstagramReelCategory::CATEGORIES as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="instagram-modal-row instagram-modal-row--full">
                        <label class="instagram-modal-label" for="instagram-reel-settings-title">Title</label>
                        <input type="text" name="title" id="instagram-reel-settings-title" class="instagram-modal-input" maxlength="255" placeholder="Default is reel caption">
                    </div>
                    <div class="instagram-modal-row">
                        <label class="instagram-modal-label" for="instagram-reel-settings-piece-type">Piece Type</label>
                        <select name="piece_type" id="instagram-reel-settings-piece-type" class="instagram-modal-select">
                            <option value="">— No piece type</option>
                            @foreach(\App\Models\InstagramReelCategory::PIECE_TYPES as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        <span class="instagram-modal-hint">e.g. Rings, Pendants, Watch, Grillz, Jewelry Set</span>
                    </div>
                    <div class="instagram-modal-row" id="instagram-reel-settings-jewelry-category-row">
                        <label class="instagram-modal-label" for="instagram-reel-settings-jewelry-category">Jewelry Category</label>
                        <select name="jewelry_category" id="instagram-reel-settings-jewelry-category" class="instagram-modal-select">
                            <option value="">— No jewelry category</option>
                            @foreach(\App\Models\InstagramReelCategory::JEWELRY_CATEGORIES as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        <span class="instagram-modal-hint">Options within: Gold Jewelry, Diamond Jewelry</span>
                    </div>
                    <div class="instagram-modal-row" id="instagram-reel-settings-watch-brand-row" style="display: none;">
                        <label class="instagram-modal-label" for="instagram-reel-settings-watch-brand">Brand</label>
                        <select name="watch_brand" id="instagram-reel-settings-watch-brand" class="instagram-modal-select">
                            <option value="">— No brand</option>
                            @foreach(\App\Models\InstagramReelCategory::WATCH_BRANDS as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        <span class="instagram-modal-hint">When Piece Type is Watch: Rolex or Cartier</span>
                    </div>
                    <div class="instagram-modal-row instagram-modal-row--full" id="instagram-reel-settings-watch-models-row" style="display: none;">
                        <label class="instagram-modal-label">Models</label>
                        <p class="instagram-modal-hint" style="margin-bottom: 0.5rem;">Add, edit, or remove watch models (e.g. Date Just).</p>
                        <input type="hidden" name="watch_models" id="instagram-reel-settings-watch-models-input" value="[]">
                        <ul id="instagram-reel-settings-watch-models-list" class="instagram-grillz-combinations-list" aria-label="Watch models"></ul>
                        <button type="button" id="instagram-reel-settings-watch-models-add" class="btn btn-secondary instagram-grillz-add-combo-btn">Add model</button>
                        <div id="instagram-reel-settings-watch-model-form" class="instagram-grillz-combo-form" hidden>
                            <div class="instagram-grillz-combo-form-row">
                                <label class="instagram-modal-label" for="instagram-watch-model-name">Model name</label>
                                <input type="text" id="instagram-watch-model-name" class="instagram-modal-input" maxlength="80" placeholder="e.g. Date Just">
                            </div>
                            <div class="instagram-grillz-combo-form-actions">
                                <button type="button" id="instagram-watch-model-save" class="btn btn-primary">Save</button>
                                <button type="button" id="instagram-watch-model-cancel" class="btn btn-secondary">Cancel</button>
                            </div>
                        </div>
                    </div>
                    <div class="instagram-modal-row instagram-modal-row--full" id="instagram-reel-settings-watch-case-sizes-row" style="display: none;">
                        <label class="instagram-modal-label">Case size</label>
                        <p class="instagram-modal-hint" style="margin-bottom: 0.5rem;">Add, edit, or remove case sizes (e.g. 26 MM, 36 MM, 41 MM).</p>
                        <input type="hidden" name="watch_case_sizes" id="instagram-reel-settings-watch-case-sizes-input" value="[]">
                        <ul id="instagram-reel-settings-watch-case-sizes-list" class="instagram-grillz-combinations-list" aria-label="Case sizes"></ul>
                        <button type="button" id="instagram-reel-settings-watch-case-sizes-add" class="btn btn-secondary instagram-grillz-add-combo-btn">Add case size</button>
                        <div id="instagram-reel-settings-watch-case-size-form" class="instagram-grillz-combo-form" hidden>
                            <div class="instagram-grillz-combo-form-row">
                                <label class="instagram-modal-label" for="instagram-watch-case-size-value">Case size</label>
                                <input type="text" id="instagram-watch-case-size-value" class="instagram-modal-input" maxlength="80" placeholder="e.g. 41 MM">
                            </div>
                            <div class="instagram-grillz-combo-form-actions">
                                <button type="button" id="instagram-watch-case-size-save" class="btn btn-primary">Save</button>
                                <button type="button" id="instagram-watch-case-size-cancel" class="btn btn-secondary">Cancel</button>
                            </div>
                        </div>
                    </div>
                    <div class="instagram-modal-row instagram-modal-row--full" id="instagram-reel-settings-piece-detail-row" style="display: none;">
                        <label class="instagram-modal-label">Details</label>
                        <p class="instagram-modal-hint" style="margin-bottom: 0.5rem;">Add one or more details (description + single price or price range). You can edit or remove each.</p>
                        <input type="hidden" name="piece_details" id="instagram-reel-settings-piece-details-input" value="[]">
                        <ul id="instagram-reel-settings-piece-details-list" class="instagram-grillz-combinations-list" aria-label="Piece details"></ul>
                        <button type="button" id="instagram-reel-settings-piece-details-add" class="btn btn-secondary instagram-grillz-add-combo-btn">Add detail</button>
                        <div id="instagram-reel-settings-piece-detail-form" class="instagram-grillz-combo-form" hidden>
                            <div class="instagram-grillz-combo-form-row">
                                <label class="instagram-modal-label" for="instagram-piece-detail-description">Description</label>
                                <input type="text" id="instagram-piece-detail-description" class="instagram-modal-input" maxlength="120" placeholder="e.g. Custom Ring">
                            </div>
                            <div class="instagram-grillz-combo-form-row">
                                <label class="instagram-modal-label" for="instagram-piece-detail-material">Material</label>
                                <select id="instagram-piece-detail-material" class="instagram-modal-select">
                                    <option value="">— No material</option>
                                    @foreach(\App\Models\InstagramReelCategory::MATERIALS as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="instagram-grillz-combo-form-row">
                                <label class="instagram-modal-label" for="instagram-piece-detail-diamond-type">Diamond Type</label>
                                <select id="instagram-piece-detail-diamond-type" class="instagram-modal-select">
                                    <option value="">— No diamond type</option>
                                    @foreach(\App\Models\InstagramReelCategory::DIAMOND_TYPES as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="instagram-grillz-combo-form-row">
                                <span class="instagram-modal-label">Price</span>
                                <label class="instagram-grillz-radio-label"><input type="radio" name="instagram-piece-detail-price-type" value="single" id="instagram-piece-detail-price-type-single" checked> Single</label>
                                <label class="instagram-grillz-radio-label"><input type="radio" name="instagram-piece-detail-price-type" value="range" id="instagram-piece-detail-price-type-range"> Range</label>
                            </div>
                            <div class="instagram-grillz-combo-form-row" id="instagram-piece-detail-single-row">
                                <label class="instagram-modal-label" for="instagram-piece-detail-price">Price ($)</label>
                                <input type="text" id="instagram-piece-detail-price" class="instagram-modal-input instagram-grillz-price-input" placeholder="e.g. 500" inputmode="decimal" maxlength="20">
                            </div>
                            <div class="instagram-grillz-combo-form-row" id="instagram-piece-detail-range-row" style="display: none;">
                                <label class="instagram-modal-label">Min – Max ($)</label>
                                <div class="instagram-grillz-range-inputs">
                                    <input type="text" id="instagram-piece-detail-price-min" class="instagram-modal-input instagram-grillz-price-input" placeholder="Min" inputmode="decimal" maxlength="20">
                                    <span class="instagram-grillz-range-sep">–</span>
                                    <input type="text" id="instagram-piece-detail-price-max" class="instagram-modal-input instagram-grillz-price-input" placeholder="Max" inputmode="decimal" maxlength="20">
                                </div>
                            </div>
                            <div class="instagram-grillz-combo-form-actions">
                                <button type="button" id="instagram-piece-detail-save" class="btn btn-primary">Save</button>
                                <button type="button" id="instagram-piece-detail-cancel" class="btn btn-secondary">Cancel</button>
                            </div>
                        </div>
                    </div>
                    <div class="instagram-modal-row">
                        <label class="instagram-modal-label" for="instagram-reel-settings-primary-caption">Primary Action</label>
                        <input type="text" name="primary_action_caption" id="instagram-reel-settings-primary-caption" class="instagram-modal-input" maxlength="120">
                    </div>
                    <div class="instagram-modal-row">
                        <label class="instagram-modal-label" for="instagram-reel-settings-primary-url">Primary Action URL</label>
                        <input type="url" name="primary_action_url" id="instagram-reel-settings-primary-url" class="instagram-modal-input" maxlength="500" placeholder="https://">
                    </div>
                    <div class="instagram-modal-row">
                        <label class="instagram-modal-label" for="instagram-reel-settings-secondary-caption">Secondary Action</label>
                        <input type="text" name="secondary_action_caption" id="instagram-reel-settings-secondary-caption" class="instagram-modal-input" maxlength="120">
                    </div>
                    <div class="instagram-modal-row">
                        <label class="instagram-modal-label" for="instagram-reel-settings-secondary-url">Secondary Action URL</label>
                        <input type="url" name="secondary_action_url" id="instagram-reel-settings-secondary-url" class="instagram-modal-input" maxlength="500" placeholder="https://">
                    </div>
                    <div class="instagram-modal-row instagram-modal-row--full instagram-modal-row--preview">
                        <label class="instagram-modal-label">Preview</label>
                        <div id="instagram-reel-settings-preview" class="instagram-reel-preview">
                            <div class="instagram-reel-preview-img-wrap">
                                <img id="instagram-reel-preview-img" src="" alt="" class="instagram-reel-preview-img">
                            </div>
                            <p id="instagram-reel-preview-title" class="instagram-reel-preview-title"></p>
                            <div class="instagram-reel-preview-actions">
                                <a id="instagram-reel-preview-primary" href="#" class="instagram-reel-preview-btn instagram-reel-preview-btn--primary" target="_blank" rel="noopener">Primary</a>
                                <a id="instagram-reel-preview-secondary" href="#" class="instagram-reel-preview-btn instagram-reel-preview-btn--secondary" target="_blank" rel="noopener">Secondary</a>
                            </div>
                        </div>
                    </div>
                </div>
                <footer class="instagram-modal-footer">
                    <button type="button" class="btn btn-secondary" data-close-modal>Cancel</button>
                    <button type="submit" class="btn btn-primary">Save settings</button>
                </footer>
            </form>
        </div>
    </div>
    @endif
</div>

@push('styles')
<style>
.social-networks-section-page { max-width: 800px; }
.social-networks-back { margin: 0 0 1rem 0; font-size: 0.9rem; }
.social-networks-back a { color: #2563eb; text-decoration: none; }
.social-networks-back a:hover { text-decoration: underline; }
.social-networks-section-page .setting-header { margin-bottom: 1.5rem; }
.social-networks-section-page .setting-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem 0; color: #111; }
.social-networks-section-page .setting-subtitle { margin: 0; font-size: 0.95rem; color: #4b5563; line-height: 1.5; }
.setting-section { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.25rem; margin-bottom: 1.5rem; }
.setting-section-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem 0; color: #111; }
.setting-section-desc { font-size: 0.85rem; color: #6b7280; line-height: 1.45; margin: 0 0 1rem 0; }
.setting-section-desc a { color: #2563eb; }
.setting-section-desc code { background: #f3f4f6; padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.85em; }
.inst-help-text { font-size: 0.85rem; margin-top: 0.5rem; display: block; }
.instagram-connect-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.25rem; }
.instagram-connect-head .setting-section-title { margin: 0 0 0.35rem 0; }
.instagram-connect-head .setting-section-desc { margin: 0; }
.instagram-connect-badge { display: inline-flex; align-items: center; flex-shrink: 0; padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; }
.instagram-connect-badge--ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.instagram-connect-badge--warn { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.instagram-settings-form { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.1rem; }
.instagram-settings-row { display: flex; flex-direction: column; gap: 0.35rem; }
.instagram-settings-label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.instagram-settings-label { font-size: 0.9rem; font-weight: 600; color: #374151; }
.instagram-settings-input { max-width: 100%; width: 100%; padding: 0.55rem 0.7rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.9rem; box-sizing: border-box; background: #fff; }
.instagram-settings-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.instagram-settings-hint { font-size: 0.8rem; color: #6b7280; line-height: 1.4; }
.instagram-settings-hint code { font-size: 0.78rem; background: #f3f4f6; padding: 0.1rem 0.3rem; border-radius: 4px; }
.instagram-token-saved { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.7rem 0.85rem; border: 1px solid #e5e7eb; border-radius: 8px; background: linear-gradient(180deg, #fafafa 0%, #f3f4f6 100%); }
.instagram-token-saved-mask { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; letter-spacing: 0.08em; color: #111827; line-height: 1.2; }
.instagram-token-saved-text { font-size: 0.8rem; color: #059669; font-weight: 600; }
.instagram-token-replace { display: flex; flex-direction: column; gap: 0.35rem; }
.instagram-token-toggle, .instagram-token-cancel { appearance: none; border: none; background: none; padding: 0; font-size: 0.8rem; font-weight: 600; color: #2563eb; cursor: pointer; text-decoration: none; }
.instagram-token-toggle:hover, .instagram-token-cancel:hover { text-decoration: underline; color: #1d4ed8; }
.instagram-token-cancel { align-self: flex-start; margin-top: 0.15rem; color: #6b7280; }
.instagram-token-cancel:hover { color: #374151; }
.instagram-playback-row { padding: 0.75rem 0.85rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; }
.instagram-playback-note { margin: 0; font-size: 0.85rem; color: #4b5563; line-height: 1.45; }
.instagram-settings-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.instagram-disconnect-form { display: none; }
.instagram-profile-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.instagram-profile-pic { border-radius: 50%; object-fit: cover; }
.instagram-username { font-size: 1.1rem; font-weight: 600; margin: 0; color: #111; }
.instagram-name { font-size: 0.9rem; color: #6b7280; margin: 0.25rem 0 0 0; }
.instagram-stats-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.instagram-stats-list li { font-size: 0.95rem; color: #374151; }
.instagram-stats-list strong { color: #111; margin-right: 0.25rem; }
.instagram-media-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; }
.instagram-media-item { margin: 0; position: relative; }
.instagram-media-settings-btn { position: absolute; top: 6px; right: 6px; z-index: 2; width: 28px; height: 28px; padding: 0; border: none; border-radius: 6px; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s; }
.instagram-media-settings-btn:hover { background: rgba(0,0,0,0.85); }
.instagram-media-link { display: block; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb; text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
.instagram-media-link:hover { border-color: #2563eb; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15); }
.instagram-media-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.instagram-media-caption { display: block; font-size: 0.75rem; color: #6b7280; padding: 0.35rem 0.5rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.instagram-media-stats { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: #374151; padding: 0.25rem 0.5rem 0.4rem; line-height: 1.3; flex-wrap: wrap; }
.instagram-media-stat { display: inline-flex; align-items: center; gap: 0.2rem; }
.instagram-media-category-label { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.35rem 0 0 0; font-size: 0.75rem; color: #6b7280; }
.instagram-media-category-text { font-weight: 600; color: #374151; }
.instagram-media-category-select { width: 100%; padding: 0.3rem 0.4rem; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.75rem; background: #fff; }
.instagram-media-hide-label { display: flex; align-items: center; gap: 0.4rem; margin: 0.35rem 0 0 0; font-size: 0.75rem; color: #6b7280; cursor: pointer; }
.instagram-media-hide-label input { margin: 0; }
.instagram-excluded-media-form { margin: 0; }
.instagram-load-more-wrap { margin-top: 1rem; }
.instagram-excluded-actions { margin-top: 1rem; }
.instagram-no-posts { font-size: 0.9rem; color: #6b7280; margin: 0; }

/* Instagram Growth card */
.instagram-growth-section { background: #faf9f7; border: 1px solid #e8e6e3; }
.instagram-growth-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; color: #a67c52; margin: 0 0 1rem 0; text-transform: uppercase; }
.instagram-growth-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.instagram-growth-profile { display: flex; align-items: center; gap: 0.75rem; }
.instagram-growth-avatar { border-radius: 50%; object-fit: cover; background: #e8e6e3; }
.instagram-growth-avatar-placeholder { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #d4a574 0%, #a67c52 100%); }
.instagram-growth-profile-info { display: flex; flex-direction: column; gap: 0.15rem; }
.instagram-growth-username { font-size: 1.1rem; font-weight: 700; color: #111; }
.instagram-growth-account-type { font-size: 0.8rem; color: #6b7280; }
.instagram-growth-header-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.instagram-growth-refresh-btn { background: #fff; color: #111; border: 1px solid #d1d5db; padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.instagram-growth-refresh-btn:hover:not(:disabled) { background: #f3f4f6; border-color: #9ca3af; }
.instagram-growth-refresh-btn:disabled { opacity: 0.8; cursor: not-allowed; }
.instagram-growth-refresh-btn .instagram-growth-spinner { display: inline-block; width: 1em; height: 1em; margin-right: 0.5rem; vertical-align: -0.15em; border: 2px solid rgba(0,0,0,0.2); border-top-color: #111; border-radius: 50%; animation: instagram-growth-spin 0.7s linear infinite; }
@keyframes instagram-growth-spin { to { transform: rotate(360deg); } }
.instagram-growth-view-btn { background: #111; color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer; display: inline-block; }
.instagram-growth-view-btn:hover { background: #333; color: #fff; }
.instagram-growth-period { font-size: 0.75rem; color: #6b7280; margin: 0 0 0.35rem 0; text-transform: uppercase; letter-spacing: 0.04em; }
.instagram-growth-live-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.5rem; margin-bottom: 0.5rem; border: 1px solid #a7f3d0; border-radius: 6px; background: #f0fdf4; }
.instagram-growth-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #059669; flex-shrink: 0; }
.instagram-growth-live-text { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; color: #047857; text-transform: uppercase; }
.instagram-growth-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
@media (max-width: 640px) { .instagram-growth-metrics { grid-template-columns: repeat(2, 1fr); } }
.instagram-growth-metric { background: #fff; border: 1px solid #e8e6e3; border-radius: 6px; padding: 0.5rem 0.65rem; display: flex; flex-direction: column; gap: 0.2rem; min-height: 0; }
.instagram-growth-metric-followers { position: relative; }
.instagram-growth-value { font-size: 1.25rem; font-weight: 700; color: #111; line-height: 1.2; }
.instagram-growth-label { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; color: #6b7280; text-transform: uppercase; }
.instagram-growth-value-row { display: flex; align-items: center; gap: 0.35rem; flex-wrap: nowrap; }
.instagram-growth-value-row .instagram-growth-value { flex: 0 1 auto; min-width: 0; }
.instagram-growth-value-toggle { flex-shrink: 0; width: 20px; height: 20px; padding: 0; border: none; border-radius: 4px; background: #f3f4f6; color: #6b7280; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
.instagram-growth-value-toggle:hover { background: #e5e7eb; color: #111; }
.instagram-growth-toggle-icon { font-size: 0.7rem; line-height: 1; font-weight: 600; }
.instagram-growth-note { font-size: 0.8rem; color: #6b7280; margin: 1rem 0 0 0; }
.instagram-growth-note code { background: #eee; padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.85em; }

/* Reel settings modal */
.instagram-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; }
.instagram-modal[hidden] { display: none; }
.instagram-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); cursor: pointer; }
.instagram-modal-box { position: relative; width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.instagram-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #e5e7eb; }
.instagram-modal-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: #111; }
.instagram-modal-close { width: 32px; height: 32px; padding: 0; border: none; background: transparent; font-size: 1.5rem; line-height: 1; color: #6b7280; cursor: pointer; border-radius: 4px; }
.instagram-modal-close:hover { background: #f3f4f6; color: #111; }
.instagram-modal-body { padding: 1.25rem; }
.instagram-modal-row { margin-bottom: 1rem; }
.instagram-modal-row:last-child { margin-bottom: 0; }
.instagram-modal-label { display: block; font-size: 0.8rem; font-weight: 600; color: #374151; margin-bottom: 0.35rem; }
.instagram-modal-hint { display: block; font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem; }
.instagram-modal-readonly { margin: 0; font-size: 0.9rem; color: #6b7280; }
.instagram-modal-input, .instagram-modal-select { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem; box-sizing: border-box; }
.instagram-modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid #e5e7eb; }
.instagram-reel-preview { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: #f9fafb; max-width: 200px; }
.instagram-reel-preview-img-wrap { aspect-ratio: 1; background: #e5e7eb; }
.instagram-reel-preview-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.instagram-reel-preview-title { margin: 0; padding: 0.5rem 0.6rem; font-size: 0.8rem; color: #374151; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.instagram-reel-preview-actions { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem 0.6rem 0.75rem; }
.instagram-reel-preview-btn { display: block; text-align: center; padding: 0.45rem 0.75rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; text-decoration: none; transition: opacity 0.2s; }
.instagram-reel-preview-btn:hover { opacity: 0.9; }
.instagram-reel-preview-btn--primary { background: #111; color: #fff; }
.instagram-reel-preview-btn--secondary { background: #fff; color: #111; border: 1px solid #d1d5db; }
/* Grillz combinations */
.instagram-grillz-combinations-list { list-style: none; margin: 0 0 0.75rem 0; padding: 0; }
.instagram-grillz-combination-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.6rem; border: 1px solid #e5e7eb; border-radius: 6px; margin-bottom: 0.4rem; background: #f9fafb; font-size: 0.85rem; }
.instagram-grillz-combination-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.instagram-grillz-combination-item .instagram-grillz-combo-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.instagram-grillz-combination-item .instagram-grillz-combo-actions button { padding: 0.25rem 0.5rem; font-size: 0.75rem; border-radius: 4px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; }
.instagram-grillz-combination-item .instagram-grillz-combo-actions button:hover { background: #f3f4f6; }
.instagram-grillz-add-combo-btn { margin-bottom: 0.75rem; }
.instagram-grillz-combo-form { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; background: #f9fafb; margin-top: 0.5rem; }
.instagram-grillz-combo-form-row { margin-bottom: 0.75rem; }
.instagram-grillz-combo-form-row:last-of-type { margin-bottom: 0; }
.instagram-grillz-radio-label { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: 1rem; font-size: 0.85rem; font-weight: normal; cursor: pointer; }
.instagram-grillz-range-inputs { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.instagram-grillz-range-inputs .instagram-modal-input { flex: 1; min-width: 80px; }
.instagram-grillz-range-sep { color: #6b7280; font-weight: 600; }
.instagram-grillz-combo-form-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

@media (min-width: 768px) {
  .instagram-modal-box { max-width: 720px; max-height: 88vh; }
  .instagram-modal-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.25rem; padding: 1.25rem 1.5rem; align-content: start; }
  .instagram-modal-row { margin-bottom: 0; }
  .instagram-modal-row--full { grid-column: 1 / -1; }
  .instagram-modal-row--preview { align-self: start; grid-row: span 1; }
  .instagram-reel-preview { max-width: 240px; }
}
</style>
@endpush

@if(($profile ?? null) && !($apiError ?? null))
@push('scripts')
<script>
window.instagramReelPrimaryDefaults = @json(\App\Models\InstagramReelCategory::DEFAULT_PRIMARY_ACTION);
window.instagramReelSecondaryDefaults = @json(\App\Models\InstagramReelCategory::DEFAULT_SECONDARY_ACTION);
</script>
<script>
(function() {
    // Access token: show saved mask by default; only enable input when replacing.
    var tokenSaved = document.getElementById('instagram-token-saved');
    var tokenReplace = document.getElementById('instagram-token-replace');
    var tokenInput = document.getElementById('ig_graph_access_token');
    var replaceBtn = document.getElementById('instagram-token-replace-btn');
    var cancelBtn = document.getElementById('instagram-token-cancel-btn');
    function setTokenReplaceMode(on) {
        if (!tokenSaved || !tokenReplace || !tokenInput) return;
        tokenSaved.hidden = !!on;
        tokenReplace.hidden = !on;
        tokenInput.disabled = !on;
        if (!on) tokenInput.value = '';
        if (replaceBtn) {
            replaceBtn.hidden = !!on;
            replaceBtn.setAttribute('aria-expanded', on ? 'true' : 'false');
        }
        if (on) tokenInput.focus();
    }
    if (replaceBtn) replaceBtn.addEventListener('click', function() { setTokenReplaceMode(true); });
    if (cancelBtn) cancelBtn.addEventListener('click', function() { setTokenReplaceMode(false); });

    // Toggle exact / abbreviated followers (botón ⇄)
    document.querySelectorAll('.instagram-growth-value-toggle').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var row = this.closest('.instagram-growth-value-row');
            if (!row) return;
            var val = row.querySelector('.instagram-growth-value');
            var exact = val.getAttribute('data-exact');
            if (!exact) return;
            if (val.getAttribute('data-showing') === 'exact') {
                val.textContent = val.getAttribute('data-abbrev') || val.textContent;
                val.removeAttribute('data-showing');
                btn.setAttribute('aria-label', 'View exact number');
            } else {
                val.setAttribute('data-abbrev', val.textContent);
                val.textContent = exact;
                val.setAttribute('data-showing', 'exact');
                btn.setAttribute('aria-label', 'View abbreviated number');
            }
        });
    });

    // Refresh metrics button: same loading pattern as rest of project (spinner + "Syncing...")
    var refreshBtn = document.getElementById('instagram-growth-refresh-btn');
    if (refreshBtn) {
        var refreshUrl = refreshBtn.getAttribute('data-refresh-url');
        var originalHtml = refreshBtn.innerHTML;
        refreshBtn.addEventListener('click', function() {
            if (refreshBtn.disabled) return;
            refreshBtn.disabled = true;
            refreshBtn.innerHTML = '<span class="instagram-growth-spinner" aria-hidden="true"></span> Syncing...';
            var csrfToken = document.querySelector('meta[name="csrf-token"]');
            var headers = { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' };
            if (csrfToken) headers['X-CSRF-TOKEN'] = csrfToken.getAttribute('content');
            fetch(refreshUrl, { method: 'POST', headers: headers })
                .then(function(r) {
                    var ct = r.headers.get('content-type');
                    if (ct && ct.indexOf('application/json') !== -1) {
                        return r.json().then(function(data) { return { ok: r.ok, data: data }; });
                    }
                    return { ok: r.ok, data: {} };
                })
                .then(function(result) {
                    if (result.ok && result.data && result.data.success) {
                        window.location.reload();
                    } else {
                        refreshBtn.disabled = false;
                        refreshBtn.innerHTML = originalHtml;
                        alert(result.data && result.data.message ? result.data.message : 'Refresh failed.');
                    }
                })
                .catch(function() {
                    refreshBtn.disabled = false;
                    refreshBtn.innerHTML = originalHtml;
                    alert('Refresh failed.');
                });
        });
    }

    // Reel settings modal
    var modal = document.getElementById('instagram-reel-settings-modal');
    var form = document.getElementById('instagram-reel-settings-form');
    var mediaIdInput = document.getElementById('instagram-reel-settings-media-id');
    var typeEl = document.getElementById('instagram-reel-settings-type');
    var titleInput = document.getElementById('instagram-reel-settings-title');
    var categorySelect = document.getElementById('instagram-reel-settings-category');
    var pieceTypeSelect = document.getElementById('instagram-reel-settings-piece-type');
    var jewelryCategorySelect = document.getElementById('instagram-reel-settings-jewelry-category');
    var jewelryCategoryRow = document.getElementById('instagram-reel-settings-jewelry-category-row');
    var pieceDetailRow = document.getElementById('instagram-reel-settings-piece-detail-row');
    var pieceDetailsInput = document.getElementById('instagram-reel-settings-piece-details-input');
    var pieceDetailsList = document.getElementById('instagram-reel-settings-piece-details-list');
    var pieceDetailForm = document.getElementById('instagram-reel-settings-piece-detail-form');
    var pieceDetailDescInput = document.getElementById('instagram-piece-detail-description');
    var pieceDetailMaterialSelect = document.getElementById('instagram-piece-detail-material');
    var pieceDetailDiamondTypeSelect = document.getElementById('instagram-piece-detail-diamond-type');
    var pieceDetailPriceInput = document.getElementById('instagram-piece-detail-price');
    var pieceDetailPriceMinInput = document.getElementById('instagram-piece-detail-price-min');
    var pieceDetailPriceMaxInput = document.getElementById('instagram-piece-detail-price-max');
    var pieceDetailSingleRow = document.getElementById('instagram-piece-detail-single-row');
    var pieceDetailRangeRow = document.getElementById('instagram-piece-detail-range-row');
    var pieceDetailsData = [];
    var pieceDetailEditingIndex = -1;
    var watchBrandRow = document.getElementById('instagram-reel-settings-watch-brand-row');
    var watchModelsRow = document.getElementById('instagram-reel-settings-watch-models-row');
    var watchCaseSizesRow = document.getElementById('instagram-reel-settings-watch-case-sizes-row');
    var watchBrandSelect = document.getElementById('instagram-reel-settings-watch-brand');
    var watchModelsInput = document.getElementById('instagram-reel-settings-watch-models-input');
    var watchModelsList = document.getElementById('instagram-reel-settings-watch-models-list');
    var watchCaseSizesInput = document.getElementById('instagram-reel-settings-watch-case-sizes-input');
    var watchCaseSizesList = document.getElementById('instagram-reel-settings-watch-case-sizes-list');
    var watchModelForm = document.getElementById('instagram-reel-settings-watch-model-form');
    var watchModelNameInput = document.getElementById('instagram-watch-model-name');
    var watchCaseSizeForm = document.getElementById('instagram-reel-settings-watch-case-size-form');
    var watchCaseSizeValueInput = document.getElementById('instagram-watch-case-size-value');
    var watchModelsData = [];
    var watchCaseSizesData = [];
    var watchModelEditingIndex = -1;
    var watchCaseSizeEditingIndex = -1;
    var watchModelsDefault = @json(\App\Models\InstagramReelCategory::WATCH_MODELS_DEFAULT);
    var watchCaseSizesDefault = @json(\App\Models\InstagramReelCategory::WATCH_CASE_SIZES_DEFAULT);
    var primaryCaptionInput = document.getElementById('instagram-reel-settings-primary-caption');
    var secondaryCaptionInput = document.getElementById('instagram-reel-settings-secondary-caption');
    var primaryUrlInput = document.getElementById('instagram-reel-settings-primary-url');
    var secondaryUrlInput = document.getElementById('instagram-reel-settings-secondary-url');
    var previewImg = document.getElementById('instagram-reel-preview-img');
    var previewTitle = document.getElementById('instagram-reel-preview-title');
    var previewPrimary = document.getElementById('instagram-reel-preview-primary');
    var previewSecondary = document.getElementById('instagram-reel-preview-secondary');

    function isValidActionUrl(url) {
        var t = (url || '').trim();
        return t.length > 0 && t !== 'https://' && t !== 'http://';
    }

    function updatePreview() {
        var title = titleInput.value.trim() || titleInput.getAttribute('data-default-title') || '';
        previewTitle.textContent = title || '—';
        previewTitle.title = title;
        var pu = primaryUrlInput.value.trim();
        var su = secondaryUrlInput.value.trim();
        var hasPrimary = isValidActionUrl(pu);
        var hasSecondary = isValidActionUrl(su);
        previewPrimary.textContent = primaryCaptionInput.value.trim() || 'Primary';
        previewPrimary.href = hasPrimary ? pu : '#';
        previewPrimary.style.display = hasPrimary ? '' : 'none';
        previewPrimary.style.pointerEvents = hasPrimary ? 'auto' : 'none';
        previewSecondary.textContent = secondaryCaptionInput.value.trim() || 'Secondary';
        previewSecondary.href = hasSecondary ? su : '#';
        previewSecondary.style.display = hasSecondary ? '' : 'none';
        previewSecondary.style.pointerEvents = hasSecondary ? 'auto' : 'none';
    }

    function openReelSettingsModal(card) {
        var mediaId = card.getAttribute('data-media-id');
        var mediaType = card.getAttribute('data-media-type') || '—';
        var caption = card.getAttribute('data-caption') || '';
        var thumbUrl = card.getAttribute('data-thumbnail-url') || '';
        var settingsJson = card.getAttribute('data-reel-settings') || '{}';
        var settings = {};
        try { settings = JSON.parse(settingsJson); } catch (e) {}
        if (!settings || typeof settings !== 'object') settings = {};
        if (settings.piece_details === undefined || !Array.isArray(settings.piece_details)) settings.piece_details = [];
        var cardCategory = (card.getAttribute('data-category') || '').trim();
        var cardCategorySelect = card.querySelector('select[name^="reel_categories"]');
        if (cardCategorySelect && cardCategorySelect.value && cardCategorySelect.value !== '_none') {
            cardCategory = cardCategorySelect.value;
        }
        var cardPieceDetailsRaw = (card.getAttribute('data-piece-details') || '[]').trim();
        var cardPieceDetailsArr = [];
        try {
            var rawForParse = cardPieceDetailsRaw
                .replace(/&quot;/g, '"')
                .replace(/&amp;/g, '&')
                .replace(/&lt;/g, '<')
                .replace(/&gt;/g, '>');
            var parsedDetails = JSON.parse(rawForParse);
            cardPieceDetailsArr = Array.isArray(parsedDetails) ? parsedDetails : [];
        } catch (e) {
            cardPieceDetailsArr = [];
        }
        var cardPieceType = (card.getAttribute('data-piece-type') || '').trim();
        var cardJewelryCategory = (card.getAttribute('data-jewelry-category') || '').trim();

        mediaIdInput.value = mediaId;
        typeEl.textContent = mediaType;
        titleInput.setAttribute('data-default-title', caption);
        var cardTitle = (card.getAttribute('data-title') || '').trim();
        var titleVal = (settings.title != null && String(settings.title).trim() !== '') ? String(settings.title).trim() : (cardTitle || caption);
        titleInput.value = titleVal;
        categorySelect.value = (settings.category && settings.category !== '') ? settings.category : (cardCategory || 'available_online');
        var pieceDetailsVal = (Array.isArray(cardPieceDetailsArr) && cardPieceDetailsArr.length > 0)
            ? cardPieceDetailsArr
            : (Array.isArray(settings.piece_details) ? settings.piece_details : []);
        var pieceTypeVal = (settings.piece_type != null && String(settings.piece_type).trim() !== '') ? String(settings.piece_type).trim() : cardPieceType;
        if (pieceTypeSelect) pieceTypeSelect.value = pieceTypeVal || '';
        var jewelryCategoryVal = (settings.jewelry_category != null && String(settings.jewelry_category).trim() !== '') ? String(settings.jewelry_category).trim() : cardJewelryCategory;
        if (jewelryCategorySelect) jewelryCategorySelect.value = jewelryCategoryVal || '';
        pieceDetailsData = pieceDetailsVal.map(function(d) {
            return {
                description: (d && d.description != null) ? String(d.description) : '',
                material: (d && d.material != null) ? String(d.material) : '',
                diamond_type: (d && d.diamond_type != null) ? String(d.diamond_type) : '',
                price_type: (d && d.price_type === 'range') ? 'range' : 'single',
                price: (d && d.price != null) ? String(d.price) : '',
                price_min: (d && d.price_min != null) ? String(d.price_min) : '',
                price_max: (d && d.price_max != null) ? String(d.price_max) : ''
            };
        });
        if (pieceDetailsInput) pieceDetailsInput.value = JSON.stringify(pieceDetailsData);
        renderPieceDetailsList();
        if (pieceDetailForm) pieceDetailForm.hidden = true;
        pieceDetailEditingIndex = -1;
        var cardWatchBrand = (card.getAttribute('data-watch-brand') || '').trim();
        var watchBrandVal = (settings.watch_brand != null && String(settings.watch_brand).trim() !== '') ? String(settings.watch_brand).trim() : cardWatchBrand;
        if (watchBrandSelect) watchBrandSelect.value = watchBrandVal || '';
        var cardWatchModels = (card.getAttribute('data-watch-models') || '[]').trim();
        var cardWatchCaseSizes = (card.getAttribute('data-watch-case-sizes') || '[]').trim();
        var parsedWatchModels = watchModelsDefault.slice();
        try {
            var pm = JSON.parse(cardWatchModels);
            if (Array.isArray(pm) && pm.length > 0) parsedWatchModels = pm;
            else if (Array.isArray(settings.watch_models) && settings.watch_models.length > 0) parsedWatchModels = settings.watch_models.slice();
        } catch (err) {
            if (Array.isArray(settings.watch_models) && settings.watch_models.length > 0) parsedWatchModels = settings.watch_models.slice();
        }
        var parsedWatchCaseSizes = watchCaseSizesDefault.slice();
        try {
            var pcs = JSON.parse(cardWatchCaseSizes);
            if (Array.isArray(pcs) && pcs.length > 0) parsedWatchCaseSizes = pcs;
            else if (Array.isArray(settings.watch_case_sizes) && settings.watch_case_sizes.length > 0) parsedWatchCaseSizes = settings.watch_case_sizes.slice();
        } catch (err) {
            if (Array.isArray(settings.watch_case_sizes) && settings.watch_case_sizes.length > 0) parsedWatchCaseSizes = settings.watch_case_sizes.slice();
        }
        watchModelsData = (Array.isArray(settings.watch_models) && settings.watch_models.length > 0) ? settings.watch_models.slice() : parsedWatchModels;
        watchCaseSizesData = (Array.isArray(settings.watch_case_sizes) && settings.watch_case_sizes.length > 0) ? settings.watch_case_sizes.slice() : parsedWatchCaseSizes;
        if (watchModelsInput) watchModelsInput.value = JSON.stringify(watchModelsData);
        if (watchCaseSizesInput) watchCaseSizesInput.value = JSON.stringify(watchCaseSizesData);
        renderWatchModelsList();
        renderWatchCaseSizesList();
        togglePieceTypeVisibility();
        var cardPrimaryCaption = (card.getAttribute('data-primary-action-caption') || '').trim();
        var cardSecondaryCaption = (card.getAttribute('data-secondary-action-caption') || '').trim();
        var cardPrimaryUrl = (card.getAttribute('data-primary-action-url') || '').trim();
        var cardSecondaryUrl = (card.getAttribute('data-secondary-action-url') || '').trim();
        var primaryCaptionVal = (settings.primary_action_caption != null && String(settings.primary_action_caption).trim() !== '') ? String(settings.primary_action_caption).trim() : (cardPrimaryCaption || (window.instagramReelPrimaryDefaults && window.instagramReelPrimaryDefaults[categorySelect.value]) || 'View Similar Pieces');
        var secondaryCaptionVal = (settings.secondary_action_caption != null && String(settings.secondary_action_caption).trim() !== '') ? String(settings.secondary_action_caption).trim() : (cardSecondaryCaption || (window.instagramReelSecondaryDefaults && window.instagramReelSecondaryDefaults[categorySelect.value]) || 'Chat on WhatsApp');
        var primaryUrlVal = (settings.primary_action_url != null && String(settings.primary_action_url).trim() !== '') ? String(settings.primary_action_url).trim() : cardPrimaryUrl;
        var secondaryUrlVal = (settings.secondary_action_url != null && String(settings.secondary_action_url).trim() !== '') ? String(settings.secondary_action_url).trim() : cardSecondaryUrl;
        primaryCaptionInput.value = primaryCaptionVal;
        secondaryCaptionInput.value = secondaryCaptionVal;
        primaryUrlInput.value = primaryUrlVal;
        secondaryUrlInput.value = secondaryUrlVal;

        previewImg.src = thumbUrl || '';
        previewImg.alt = '';
        updatePreview();


        modal.removeAttribute('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeReelSettingsModal() {
        modal.setAttribute('hidden', '');
        document.body.style.overflow = '';
    }

    var mediaGrid = document.getElementById('instagram-media-grid');
    if (mediaGrid) {
        mediaGrid.addEventListener('click', function(e) {
            var btn = e.target.closest('.instagram-media-settings-btn');
            if (!btn) return;
            e.preventDefault();
            e.stopPropagation();
            var card = btn.closest('.instagram-media-item');
            if (card) openReelSettingsModal(card);
        });
    }

    var loadMoreWrap = document.getElementById('instagram-load-more-wrap');
    var loadMoreBtn = document.getElementById('instagram-load-more-btn');
    if (loadMoreWrap && loadMoreBtn && mediaGrid) {
        loadMoreBtn.addEventListener('click', function() {
            var page = parseInt(loadMoreWrap.getAttribute('data-next-page') || '2', 10);
            var loadingText = loadMoreBtn.getAttribute('data-loading-text') || 'Loading…';
            loadMoreBtn.disabled = true;
            loadMoreBtn.textContent = loadingText;
            fetch('{{ route("social-networks.instagram.media-page") }}?page=' + page, {
                method: 'GET',
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            }).then(function(r) { return r.json(); }).then(function(data) {
                if (data.html) {
                    mediaGrid.insertAdjacentHTML('beforeend', data.html);
                }
                loadMoreBtn.disabled = false;
                if (data.hasMore) {
                    loadMoreWrap.setAttribute('data-next-page', page + 1);
                    var total = parseInt(loadMoreWrap.getAttribute('data-total') || '0', 10);
                    var perPage = parseInt(loadMoreWrap.getAttribute('data-per-page') || '10', 10);
                    var left = Math.max(0, total - (page * perPage));
                    loadMoreBtn.textContent = left > 0 ? 'Load more (' + left + ' left)' : 'Load more';
                } else {
                    loadMoreWrap.style.display = 'none';
                }
            }).catch(function() {
                loadMoreBtn.disabled = false;
                loadMoreBtn.textContent = 'Load more';
            });
        });
    }

    form.addEventListener('submit', function(e) {
        if (!mediaIdInput || !(mediaIdInput.value || '').trim()) {
            e.preventDefault();
            alert('Cannot save: reel ID is missing. Close the modal and open it again from the reel card.');
            return;
        }
        if (watchModelsInput) watchModelsInput.value = JSON.stringify(watchModelsData);
        if (watchCaseSizesInput) watchCaseSizesInput.value = JSON.stringify(watchCaseSizesData);
        if (pieceDetailsInput) pieceDetailsInput.value = JSON.stringify(pieceDetailsData);
    });

    function renderPieceDetailsList() {
        if (!pieceDetailsList) return;
        pieceDetailsList.innerHTML = '';
        pieceDetailsData.forEach(function(d, index) {
            var li = document.createElement('li');
            li.className = 'instagram-grillz-combination-item';
            var priceText = d.price_type === 'range'
                ? (d.price_min || '') + ' – ' + (d.price_max || '')
                : (d.price || '');
            var parts = [(d.description || '').replace(/</g, '&lt;').replace(/>/g, '&gt;') || '—'];
            if (d.material && d.material.trim() !== '') parts.push(d.material.trim());
            if (d.diamond_type && d.diamond_type.trim() !== '') parts.push(d.diamond_type.trim());
            parts.push('$' + (priceText || '—'));
            var desc = parts.join(' · ');
            li.innerHTML = '<span>' + desc + '</span>' +
                '<div class="instagram-grillz-combo-actions">' +
                '<button type="button" data-action="edit" data-index="' + index + '">Edit</button>' +
                '<button type="button" data-action="delete" data-index="' + index + '">Delete</button>' +
                '</div>';
            pieceDetailsList.appendChild(li);
        });
        pieceDetailsList.querySelectorAll('[data-action="edit"]').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var idx = parseInt(btn.getAttribute('data-index'), 10);
                var d = pieceDetailsData[idx];
                if (pieceDetailDescInput) pieceDetailDescInput.value = (d && d.description) ? d.description : '';
                if (pieceDetailMaterialSelect) pieceDetailMaterialSelect.value = (d && d.material) ? d.material : '';
                if (pieceDetailDiamondTypeSelect) pieceDetailDiamondTypeSelect.value = (d && d.diamond_type) ? d.diamond_type : '';
                document.querySelectorAll('input[name="instagram-piece-detail-price-type"]').forEach(function(r) { r.checked = (d && d.price_type) === 'range' ? r.value === 'range' : r.value === 'single'; });
                if (pieceDetailPriceInput) pieceDetailPriceInput.value = (d && d.price) ? d.price : '';
                if (pieceDetailPriceMinInput) pieceDetailPriceMinInput.value = (d && d.price_min) ? d.price_min : '';
                if (pieceDetailPriceMaxInput) pieceDetailPriceMaxInput.value = (d && d.price_max) ? d.price_max : '';
                if (pieceDetailSingleRow) pieceDetailSingleRow.style.display = (d && d.price_type === 'range') ? 'none' : '';
                if (pieceDetailRangeRow) pieceDetailRangeRow.style.display = (d && d.price_type === 'range') ? '' : 'none';
                pieceDetailEditingIndex = idx;
                if (pieceDetailForm) pieceDetailForm.hidden = false;
            });
        });
        pieceDetailsList.querySelectorAll('[data-action="delete"]').forEach(function(btn) {
            btn.addEventListener('click', function() {
                pieceDetailsData.splice(parseInt(btn.getAttribute('data-index'), 10), 1);
                if (pieceDetailsInput) pieceDetailsInput.value = JSON.stringify(pieceDetailsData);
                renderPieceDetailsList();
            });
        });
    }

    function togglePieceTypeVisibility() {
        var pieceType = pieceTypeSelect ? pieceTypeSelect.value : '';
        var isWatch = pieceType === 'watch';
        if (jewelryCategoryRow) jewelryCategoryRow.style.display = isWatch ? 'none' : '';
        if (watchBrandRow) watchBrandRow.style.display = isWatch ? '' : 'none';
        if (watchModelsRow) watchModelsRow.style.display = isWatch ? '' : 'none';
        if (watchCaseSizesRow) watchCaseSizesRow.style.display = isWatch ? '' : 'none';
        if (!isWatch && watchBrandSelect) watchBrandSelect.value = '';
        if (pieceDetailRow) pieceDetailRow.style.display = pieceType ? '' : 'none';
    }

    function renderWatchModelsList() {
        if (!watchModelsList) return;
        watchModelsList.innerHTML = '';
        watchModelsData.forEach(function(name, index) {
            var li = document.createElement('li');
            li.className = 'instagram-grillz-combination-item';
            li.innerHTML = '<span>' + (name.replace(/</g, '&lt;').replace(/>/g, '&gt;')) + '</span>' +
                '<div class="instagram-grillz-combo-actions">' +
                '<button type="button" data-action="edit" data-index="' + index + '">Edit</button>' +
                '<button type="button" data-action="delete" data-index="' + index + '">Delete</button>' +
                '</div>';
            watchModelsList.appendChild(li);
        });
        watchModelsList.querySelectorAll('[data-action="edit"]').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var idx = parseInt(btn.getAttribute('data-index'), 10);
                watchModelNameInput.value = watchModelsData[idx] || '';
                watchModelEditingIndex = idx;
                watchModelForm.hidden = false;
            });
        });
        watchModelsList.querySelectorAll('[data-action="delete"]').forEach(function(btn) {
            btn.addEventListener('click', function() {
                watchModelsData.splice(parseInt(btn.getAttribute('data-index'), 10), 1);
                if (watchModelsInput) watchModelsInput.value = JSON.stringify(watchModelsData);
                renderWatchModelsList();
            });
        });
    }

    function renderWatchCaseSizesList() {
        if (!watchCaseSizesList) return;
        watchCaseSizesList.innerHTML = '';
        watchCaseSizesData.forEach(function(name, index) {
            var li = document.createElement('li');
            li.className = 'instagram-grillz-combination-item';
            li.innerHTML = '<span>' + (name.replace(/</g, '&lt;').replace(/>/g, '&gt;')) + '</span>' +
                '<div class="instagram-grillz-combo-actions">' +
                '<button type="button" data-action="edit" data-index="' + index + '">Edit</button>' +
                '<button type="button" data-action="delete" data-index="' + index + '">Delete</button>' +
                '</div>';
            watchCaseSizesList.appendChild(li);
        });
        watchCaseSizesList.querySelectorAll('[data-action="edit"]').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var idx = parseInt(btn.getAttribute('data-index'), 10);
                watchCaseSizeValueInput.value = watchCaseSizesData[idx] || '';
                watchCaseSizeEditingIndex = idx;
                watchCaseSizeForm.hidden = false;
            });
        });
        watchCaseSizesList.querySelectorAll('[data-action="delete"]').forEach(function(btn) {
            btn.addEventListener('click', function() {
                watchCaseSizesData.splice(parseInt(btn.getAttribute('data-index'), 10), 1);
                if (watchCaseSizesInput) watchCaseSizesInput.value = JSON.stringify(watchCaseSizesData);
                renderWatchCaseSizesList();
            });
        });
    }

    if (jewelryCategorySelect) {
        jewelryCategorySelect.addEventListener('change', function() {
            toggleDiamondTypeRow();
        });
    }
    if (pieceTypeSelect) {
        pieceTypeSelect.addEventListener('change', function() {
            togglePieceTypeVisibility();
        });
    }
    if (watchModelForm) {
        document.getElementById('instagram-reel-settings-watch-models-add').addEventListener('click', function() {
            watchModelEditingIndex = -1;
            watchModelNameInput.value = '';
            watchModelForm.hidden = false;
        });
    }
    if (document.getElementById('instagram-watch-model-save')) {
        document.getElementById('instagram-watch-model-save').addEventListener('click', function() {
            var name = (watchModelNameInput.value || '').trim();
            if (!name) return;
            if (watchModelEditingIndex >= 0) watchModelsData[watchModelEditingIndex] = name;
            else watchModelsData.push(name);
            if (watchModelsInput) watchModelsInput.value = JSON.stringify(watchModelsData);
            renderWatchModelsList();
            watchModelForm.hidden = true;
            watchModelNameInput.value = '';
            watchModelEditingIndex = -1;
        });
    }
    if (document.getElementById('instagram-watch-model-cancel')) {
        document.getElementById('instagram-watch-model-cancel').addEventListener('click', function() {
            watchModelForm.hidden = true;
            watchModelNameInput.value = '';
            watchModelEditingIndex = -1;
        });
    }
    if (watchCaseSizeForm) {
        document.getElementById('instagram-reel-settings-watch-case-sizes-add').addEventListener('click', function() {
            watchCaseSizeEditingIndex = -1;
            watchCaseSizeValueInput.value = '';
            watchCaseSizeForm.hidden = false;
        });
    }
    if (document.getElementById('instagram-watch-case-size-save')) {
        document.getElementById('instagram-watch-case-size-save').addEventListener('click', function() {
            var val = (watchCaseSizeValueInput.value || '').trim();
            if (!val) return;
            if (watchCaseSizeEditingIndex >= 0) watchCaseSizesData[watchCaseSizeEditingIndex] = val;
            else watchCaseSizesData.push(val);
            if (watchCaseSizesInput) watchCaseSizesInput.value = JSON.stringify(watchCaseSizesData);
            renderWatchCaseSizesList();
            watchCaseSizeForm.hidden = true;
            watchCaseSizeValueInput.value = '';
            watchCaseSizeEditingIndex = -1;
        });
    }
    if (document.getElementById('instagram-watch-case-size-cancel')) {
        document.getElementById('instagram-watch-case-size-cancel').addEventListener('click', function() {
            watchCaseSizeForm.hidden = true;
            watchCaseSizeValueInput.value = '';
            watchCaseSizeEditingIndex = -1;
        });
    }
    document.querySelectorAll('input[name="instagram-piece-detail-price-type"]').forEach(function(radio) {
        radio.addEventListener('change', function() {
            var isSingle = this.value === 'single';
            if (pieceDetailSingleRow) pieceDetailSingleRow.style.display = isSingle ? '' : 'none';
            if (pieceDetailRangeRow) pieceDetailRangeRow.style.display = isSingle ? 'none' : '';
        });
    });

    if (document.getElementById('instagram-reel-settings-piece-details-add')) {
        document.getElementById('instagram-reel-settings-piece-details-add').addEventListener('click', function() {
            if (pieceDetailDescInput) pieceDetailDescInput.value = '';
            if (pieceDetailMaterialSelect) pieceDetailMaterialSelect.value = '';
            if (pieceDetailDiamondTypeSelect) pieceDetailDiamondTypeSelect.value = '';
            document.querySelectorAll('input[name="instagram-piece-detail-price-type"]').forEach(function(r) { r.checked = r.value === 'single'; });
            if (pieceDetailPriceInput) pieceDetailPriceInput.value = '';
            if (pieceDetailPriceMinInput) pieceDetailPriceMinInput.value = '';
            if (pieceDetailPriceMaxInput) pieceDetailPriceMaxInput.value = '';
            if (pieceDetailSingleRow) pieceDetailSingleRow.style.display = '';
            if (pieceDetailRangeRow) pieceDetailRangeRow.style.display = 'none';
            pieceDetailEditingIndex = -1;
            if (pieceDetailForm) pieceDetailForm.hidden = false;
        });
    }
    if (document.getElementById('instagram-piece-detail-save')) {
        document.getElementById('instagram-piece-detail-save').addEventListener('click', function() {
            var desc = pieceDetailDescInput ? pieceDetailDescInput.value.trim() : '';
            var material = pieceDetailMaterialSelect ? (pieceDetailMaterialSelect.value || '').trim() : '';
            var diamondType = pieceDetailDiamondTypeSelect ? (pieceDetailDiamondTypeSelect.value || '').trim() : '';
            var priceType = document.getElementById('instagram-piece-detail-price-type-range') && document.getElementById('instagram-piece-detail-price-type-range').checked ? 'range' : 'single';
            var price = pieceDetailPriceInput ? pieceDetailPriceInput.value.trim() : '';
            var priceMin = pieceDetailPriceMinInput ? pieceDetailPriceMinInput.value.trim() : '';
            var priceMax = pieceDetailPriceMaxInput ? pieceDetailPriceMaxInput.value.trim() : '';
            var item = { description: desc, material: material, diamond_type: diamondType, price_type: priceType, price: price, price_min: priceMin, price_max: priceMax };
            if (pieceDetailEditingIndex >= 0) {
                pieceDetailsData[pieceDetailEditingIndex] = item;
            } else {
                pieceDetailsData.push(item);
            }
            if (pieceDetailsInput) pieceDetailsInput.value = JSON.stringify(pieceDetailsData);
            renderPieceDetailsList();
            if (pieceDetailForm) pieceDetailForm.hidden = true;
            pieceDetailEditingIndex = -1;
        });
    }
    if (document.getElementById('instagram-piece-detail-cancel')) {
        document.getElementById('instagram-piece-detail-cancel').addEventListener('click', function() {
            if (pieceDetailForm) pieceDetailForm.hidden = true;
            pieceDetailEditingIndex = -1;
        });
    }

    categorySelect.addEventListener('change', function() {
        var cat = this.value;
        if (window.instagramReelPrimaryDefaults && window.instagramReelPrimaryDefaults[cat])
            primaryCaptionInput.value = window.instagramReelPrimaryDefaults[cat];
        if (window.instagramReelSecondaryDefaults && window.instagramReelSecondaryDefaults[cat])
            secondaryCaptionInput.value = window.instagramReelSecondaryDefaults[cat];
        updatePreview();
    });

    [primaryCaptionInput, secondaryCaptionInput, titleInput, primaryUrlInput, secondaryUrlInput].forEach(function(el) {
        el.addEventListener('input', updatePreview);
        el.addEventListener('change', updatePreview);
    });

    modal.querySelectorAll('[data-close-modal]').forEach(function(el) {
        el.addEventListener('click', closeReelSettingsModal);
    });

    modal.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeReelSettingsModal();
    });
})();
</script>
@endpush
@endif
@endsection