@extends('layouts.app')

@section('title', 'Story Purchase')

@section('content')
<div class="sp-page">
    <header class="sp-header">
        <h1>Story Purchase</h1>
        <p class="sp-subtitle">Use one Instagram link for all stories. We sync stories, show only enabled ones in the wizard, detect price with AI, and send customers straight to checkout.</p>
    </header>

    @php
        $spStatsTz = \App\Models\StoryPurchaseCheckout::displayTimezone();
        $funnel = $todayFunnel ?? [
            'shopify_sends' => (int) ($shopifyCheckoutsTodayCount ?? 0),
            'nmi_sends' => (int) ($nmiCheckoutsTodayCount ?? 0),
            'sends' => (int) ($checkoutsTodayCount ?? 0),
            'shopify_paid_count' => 0,
            'nmi_paid_count' => 0,
            'paid_count' => 0,
            'revenue' => 0.0,
            'conversion' => null,
        ];
    @endphp
    <section class="sp-card">
        <div class="sp-stats">
            <div class="sp-stat" title="Stories Instagram returned in the latest sync (live in the Graph API). May differ slightly from the bars you see on Instagram.com."><span>Active in app</span><strong>{{ $activeCount }}</strong></div>
            <div class="sp-stat" title="Stories currently on the public Story Purchase link (Show + live from latest sync)"><span>Shown in link</span><strong>{{ $enabledCount }}</strong></div>
            <div class="sp-stat" title="Checkout links the wizard generated today (Shopify + NMI). Customers reached checkout — this is not a paid order count."><span>Checkouts started today</span><strong>{{ (int) $funnel['sends'] }}</strong>
                <em class="sp-stat-sub">{{ (int) $funnel['shopify_sends'] }} Shopify · {{ (int) $funnel['nmi_sends'] }} NMI</em>
            </div>
            <div class="sp-stat" title="Completed story purchases today: paid Shopify story-wizard orders + paid NMI/layaway story payments."><span>Paid today</span><strong>{{ (int) $funnel['paid_count'] }}</strong>
                <em class="sp-stat-sub">{{ (int) $funnel['shopify_paid_count'] }} Shopify · {{ (int) $funnel['nmi_paid_count'] }} NMI · ${{ number_format((float) $funnel['revenue'], 2) }}</em>
            </div>
            <div class="sp-stat" title="Paid today ÷ checkouts started today. Low % usually means abandoned checkouts, not a counting bug."><span>Conversion today</span><strong>{{ ($funnel['conversion'] ?? null) !== null ? $funnel['conversion'].'%' : '—' }}</strong></div>
        </div>
        <p class="sp-stats-note">Funnel for {{ now($spStatsTz)->format('M j, Y') }} ({{ $spStatsTz }}): checkouts started = wizard sent the customer to checkout; paid = money collected. Do not treat checkout starts as Shopify sales. Abandoned Shopify checkouts are in <a href="{{ route('marketing.index') }}">Marketing</a>.</p>

        @if(!empty($bestToday) && !empty($bestToday['story']))
            @php
                $bestStory = $bestToday['story'];
                $bestStats = $bestToday['stats'] ?? [];
                $bestThumb = $bestStory->thumbnail_url ?: $bestStory->media_url;
            @endphp
            <div class="sp-best-strip" title="Ranked by TODAY only: paid revenue → paid count → checkouts started → views (America/New_York day)">
                <div class="sp-best-label">Best today</div>
                @if($bestThumb)
                    <img src="{{ $bestThumb }}" alt="" class="sp-best-thumb">
                @else
                    <div class="sp-best-thumb sp-thumb-empty">N/A</div>
                @endif
                <div class="sp-best-body">
                    <strong>STORY-S{{ $bestStory->id }}</strong>
                    <span class="sp-best-metrics">
                        @if((int) ($bestStats['views'] ?? 0) > 0)
                            {{ (int) $bestStats['views'] }} views ·
                        @endif
                        ${{ number_format((float) ($bestStats['revenue'] ?? 0), 2) }}
                        · {{ (int) ($bestStats['paid_count'] ?? 0) }} paid
                        · {{ (int) ($bestStats['sends'] ?? 0) }} checkouts started
                        @if(($bestStats['conversion'] ?? null) !== null)
                            · {{ $bestStats['conversion'] }}% conv
                        @endif
                    </span>
                    <span class="sp-best-hint">Today’s activity only — may differ from “Top” (all-time) in the table</span>
                </div>
                <span class="sp-top-badge sp-today-badge">Today</span>
            </div>
        @endif
    </section>

    <section class="sp-card">
        <div class="sp-card-head">
            <h2>Instagram API (Story Scheduler connection)</h2>
            <form action="{{ route('story-purchase.verify-instagram') }}" method="POST">
                @csrf
                <button type="submit" class="btn btn-secondary">Verify API access</button>
            </form>
        </div>
        <p class="sp-help">
            Story Purchase uses the same token and Instagram User ID as
            <a href="{{ route('social.stories.page') }}">Automatic Story Scheduler</a>.
            Publishing stories only needs publish permissions; <strong>reading</strong> live stories for sync needs read access too.
        </p>

        @if(session('instagram_verify'))
            @php $verify = session('instagram_verify'); @endphp
            <div class="sp-verify-summary sp-verify-{{ $verify['ok'] ? 'ok' : 'fail' }}">
                <strong>{{ $verify['summary'] }}</strong>
                <p>{{ $verify['scheduler_note'] }}</p>
                @if(!empty($verify['scheduler_sufficient']))
                    <p class="sp-verify-badge sp-verify-badge-ok">Scheduler connection: sufficient for Story Purchase</p>
                @else
                    <p class="sp-verify-badge sp-verify-badge-warn">Scheduler connection: may work for publish only — fix read permissions for sync</p>
                @endif
            </div>
            <ul class="sp-verify-checks">
                @foreach($verify['checks'] as $check)
                    <li class="sp-verify-item sp-verify-status-{{ $check['status'] }}">
                        <span class="sp-verify-label">{{ $check['label'] }}</span>
                        <span class="sp-verify-msg">{{ $check['message'] }}</span>
                        @if(!empty($check['detail']))
                            <span class="sp-verify-detail">{{ $check['detail'] }}</span>
                        @endif
                    </li>
                @endforeach
            </ul>
        @endif
    </section>

    <section class="sp-card">
        <h2>Settings</h2>
        <form action="{{ route('story-purchase.settings') }}" method="POST" class="sp-form">
            @csrf
            <div class="sp-field">
                <label for="sp-product-search">Shopify base product</label>
                <div class="sp-product-wrap">
                    <input type="text" id="sp-product-search" class="sp-input" placeholder="Search and select a product..." autocomplete="off">
                    <input type="hidden" name="shopify_product_id" id="sp-product-id" value="{{ old('shopify_product_id', $settings->shopify_product_id) }}">
                    <input type="hidden" name="product_title" id="sp-product-title" value="{{ old('product_title', $settings->product_title) }}">
                    <div id="sp-product-dropdown" class="sp-product-dropdown" hidden></div>
                    <div id="sp-product-selected" class="sp-product-selected" @if(!$settings->shopify_product_id) hidden @endif>
                        @if($settings->shopify_product_id)
                            Selected: <strong>{{ $settings->product_title ?: $settings->shopify_product_id }}</strong> <span class="sp-clear-product">Change</span>
                        @endif
                    </div>
                </div>
            </div>

            <div class="sp-row">
                <div class="sp-field sp-checkbox">
                    <label>
                        <input type="checkbox" name="auto_wizard_on_caption_price" value="1" {{ $settings->auto_wizard_on_caption_price ? 'checked' : '' }}>
                        Auto-show in wizard when caption has a price
                    </label>
                    <p class="sp-field-hint">When enabled, stories with a price in the caption (e.g. <code>$399</code>, <code>399$</code>, <code>starting at 399</code>) are auto-shown on sync. If the caption has no price, AI reads the story image or video frame for visible price text (useful for archived videos). Seller Instagram hashtags are assigned under <a href="{{ route('setting.sales-commissions') }}">Setting → Sales commissions</a>.</p>
                </div>
                <div class="sp-field">
                    <label for="fallback_url">Temporary fallback URL (optional)</label>
                    <input type="url" id="fallback_url" name="fallback_url" class="sp-input" value="{{ old('fallback_url', $settings->fallback_url) }}" placeholder="https://...">
                </div>
            </div>

            <div class="sp-field sp-checkbox">
                <label><input type="checkbox" name="enabled" value="1" {{ $settings->enabled ? 'checked' : '' }}> Enable Story Purchase wizard</label>
            </div>

            <div class="sp-field sp-checkbox">
                <label>
                    <input type="checkbox" name="nmi_high_value_enabled" value="1" {{ $settings->nmi_high_value_enabled ? 'checked' : '' }}>
                    Use NMI secure checkout for high-value stories (no SMS)
                </label>
                <p class="sp-field-hint">When enabled, stories at or above the threshold go to NMI Collect Checkout instead of Shopify. Florida IP addresses get sales tax automatically; other locations do not.</p>
            </div>
            <div class="sp-field">
                <label for="nmi_high_value_threshold">NMI high-value threshold (USD)</label>
                <input type="number" id="nmi_high_value_threshold" name="nmi_high_value_threshold" class="sp-input" step="0.01" min="0"
                    value="{{ old('nmi_high_value_threshold', number_format((float) ($settings->nmi_high_value_threshold ?? 10000), 2, '.', '')) }}">
                <p class="sp-field-hint">Default: $10,000. Requires NMI keys configured under Payment Links.</p>
            </div>

            <div class="sp-actions">
                <button type="submit" class="btn btn-primary">Save settings</button>
            </div>
        </form>

        @if($settings->shopify_product_id)
            <div class="sp-reset-box">
                <h3 class="sp-reset-title">Reset Shopify variants (testing)</h3>
                <p class="sp-field-hint sp-danger-hint">Removes every story variant and images on <strong>{{ $settings->product_title ?: 'selected product' }}</strong>. <code>STORY-DEFAULT</code> ($100) only appears when <strong>all</strong> stories expired or after this reset. While any story variant exists, the default is removed from Shopify automatically.</p>
                <form action="{{ route('story-purchase.delete-all-variants') }}" method="POST"
                    onsubmit="return confirm('Delete ALL story variants and images? Only STORY-DEFAULT ($100) will remain. Continue?');">
                    @csrf
                    <button type="submit" class="btn btn-danger">Delete all variants</button>
                </form>
            </div>
        @endif
    </section>

    <section class="sp-card">
        <div class="sp-card-head">
            <h2>Stories</h2>
            <div class="sp-card-head-actions">
                <form action="{{ route('story-purchase.sync-now') }}" method="POST" class="sp-inline-form">
                    @csrf
                    <button type="submit" class="btn btn-secondary">Sync now</button>
                </form>
                <form action="{{ route('story-purchase.repair-variant-images') }}" method="POST" class="sp-inline-form">
                    @csrf
                    <button type="submit" class="btn btn-secondary" title="Re-upload images for existing STORY-S* variants (fixes missing PDP photos)">Repair variant images</button>
                </form>
            </div>
        </div>
        <p class="sp-help">@if($settings->auto_wizard_on_caption_price)Stories with a price in the caption (or AI-detected price in the media) are auto-shown on sync. @endif Seller hashtags from <a href="{{ route('setting.sales-commissions') }}">Sales commissions</a> also auto-show the story and assign that salesperson. Without a match, use <strong>Show</strong> below.</p>

        <form method="GET" action="{{ route('story-purchase.index') }}" class="sp-filters">
            <div class="sp-filters-row">
                <div class="sp-filters-fields">
                    <div class="sp-filter-field">
                        <label for="sp-filter-status">Status</label>
                        <select id="sp-filter-status" name="status" class="sp-filter-select">
                            <option value="active" @selected(($statusFilter ?? 'active') === 'active')>Active</option>
                            <option value="inactive" @selected(($statusFilter ?? '') === 'inactive')>Inactive</option>
                            <option value="all" @selected(($statusFilter ?? '') === 'all')>All</option>
                        </select>
                    </div>
                    <div class="sp-filter-field">
                        <label for="sp-filter-wizard">Wizard</label>
                        <select id="sp-filter-wizard" name="wizard" class="sp-filter-select">
                            <option value="all" @selected(($wizardFilter ?? 'all') === 'all')>All</option>
                            <option value="show" @selected(($wizardFilter ?? '') === 'show')>Show</option>
                            <option value="hide" @selected(($wizardFilter ?? '') === 'hide')>Hide</option>
                        </select>
                    </div>
                    <div class="sp-filter-field">
                        <label for="sp-filter-sort">Sort</label>
                        <select id="sp-filter-sort" name="sort" class="sp-filter-select">
                            <option value="newest" @selected(($sortFilter ?? 'newest') === 'newest')>Newest</option>
                            <option value="best" @selected(($sortFilter ?? '') === 'best')>Best performance</option>
                        </select>
                    </div>
                </div>
                <div class="sp-filters-actions">
                    <button type="submit" class="btn btn-primary sp-filter-apply">Apply</button>
                    <a href="{{ route('story-purchase.index') }}" class="sp-filter-reset">Reset</a>
                </div>
            </div>
        </form>

        @if($stories->total() === 0)
            <p class="sp-empty">No stories match these filters.</p>
        @else
            <p class="sp-list-meta">
                Showing {{ $stories->firstItem() }}–{{ $stories->lastItem() }} of {{ $stories->total() }}
            </p>
            <div class="sp-table-wrap">
                <table class="sp-table">
                    <thead>
                        <tr>
                            <th class="sp-col-story">#</th>
                            <th>Preview</th>
                            <th>Media</th>
                            <th>Caption</th>
                            <th>Performance</th>
                            <th>Status</th>
                            <th>Wizard</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($stories as $story)
                        <tr>
                            <td class="sp-col-story">
                                <strong class="sp-story-num">{{ $story->id }}</strong>
                                <div class="sp-meta">STORY-S{{ $story->id }}</div>
                            </td>
                            <td>
                                @if($story->thumbnail_url || $story->media_url)
                                    <img src="{{ $story->thumbnail_url ?: $story->media_url }}" alt="Story preview" class="sp-thumb">
                                @else
                                    <div class="sp-thumb sp-thumb-empty">N/A</div>
                                @endif
                            </td>
                            <td>
                                <div><strong>{{ $story->media_type }}</strong></div>
                                @php $displayTz = config('app.deals_display_timezone', 'America/New_York'); @endphp
                                <div class="sp-meta">{{ $story->published_at ? $story->published_at->timezone($displayTz)->format('M j, g:i A T') : '—' }}</div>
                                <div class="sp-meta">Expires: {{ $story->expires_at ? $story->expires_at->timezone($displayTz)->format('M j, g:i A T') : '—' }} (24h after post)</div>
                            </td>
                            <td>
                                <div class="sp-caption">{{ $story->caption ?: 'No caption' }}</div>
                                @if($story->salesperson)
                                    <span class="sp-tag">{{ $story->salesperson->instagram_hashtag ?: $story->salesperson->full_name }}</span>
                                @elseif($story->has_shop_tag)
                                    <span class="sp-tag">Seller tag</span>
                                @endif
                                @if($story->detected_price)
                                    <div class="sp-meta sp-price-meta">Price: ${{ number_format((float) $story->detected_price, 2) }}</div>
                                @endif
                            </td>
                            <td class="sp-col-perf">
                                @php $perf = $story->performance ?? []; @endphp
                                <div class="sp-perf" title="Views = times selected in wizard. Checkouts started = Shopify/NMI checkout links generated. Paid/revenue = Shopify story orders + NMI/layaway paid linked to this story (lifetime).">
                                    <div class="sp-perf-badges">
                                        @if(!empty($perf['is_best_today']))
                                            <span class="sp-top-badge sp-today-badge sp-top-badge-inline" title="Best by today’s activity">Today</span>
                                        @endif
                                        @if(!empty($perf['is_top']))
                                            <span class="sp-top-badge sp-top-badge-inline" title="Best in this list (all-time: revenue → paid → checkouts started → views)">Top</span>
                                        @endif
                                    </div>
                                    <div class="sp-perf-line">
                                        <span>{{ (int) ($perf['views'] ?? 0) }} views</span>
                                        <span class="sp-perf-dot">·</span>
                                        <span>{{ (int) ($perf['sends'] ?? 0) }} checkouts started</span>
                                        <span class="sp-perf-dot">·</span>
                                        <span>{{ (int) ($perf['paid_count'] ?? 0) }} paid</span>
                                    </div>
                                    <div class="sp-perf-line sp-perf-strong">
                                        ${{ number_format((float) ($perf['revenue'] ?? 0), 2) }}
                                        @if(($perf['conversion'] ?? null) !== null)
                                            <span class="sp-perf-dot">·</span>
                                            <span>{{ $perf['conversion'] }}% conv</span>
                                        @endif
                                    </div>
                                    @php
                                        $convBar = min(100, max(0, (float) ($perf['conversion'] ?? 0)));
                                    @endphp
                                    <div class="sp-perf-bar" aria-hidden="true">
                                        <span style="width: {{ $convBar }}%"></span>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="sp-pill {{ $story->is_active ? 'sp-pill-on' : 'sp-pill-off' }}">{{ $story->is_active ? 'Active' : 'Inactive' }}</span>
                            </td>
                            <td>
                                <form action="{{ route('story-purchase.toggle-story', $story) }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="show_in_wizard" value="{{ $story->show_in_wizard ? 0 : 1 }}">
                                    <input type="hidden" name="status" value="{{ $statusFilter ?? 'active' }}">
                                    <input type="hidden" name="wizard" value="{{ $wizardFilter ?? 'all' }}">
                                    <input type="hidden" name="sort" value="{{ $sortFilter ?? 'newest' }}">
                                    <input type="hidden" name="page" value="{{ $stories->currentPage() }}">
                                    <button class="btn {{ $story->show_in_wizard ? 'btn-danger' : 'btn-primary' }} sp-btn-sm" type="submit">
                                        {{ $story->show_in_wizard ? 'Hide' : 'Show' }}
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
            @if($stories->hasPages())
                <nav class="sp-pagination" aria-label="Stories pagination">
                    @if($stories->onFirstPage())
                        <span class="sp-page-btn sp-page-btn-disabled">Previous</span>
                    @else
                        <a class="sp-page-btn" href="{{ $stories->previousPageUrl() }}">Previous</a>
                    @endif
                    <span class="sp-page-info">Page {{ $stories->currentPage() }} of {{ $stories->lastPage() }}</span>
                    @if($stories->hasMorePages())
                        <a class="sp-page-btn" href="{{ $stories->nextPageUrl() }}">Next</a>
                    @else
                        <span class="sp-page-btn sp-page-btn-disabled">Next</span>
                    @endif
                </nav>
            @endif
        @endif
    </section>
</div>

<style>
.sp-page { max-width: 1200px; }
.sp-header { margin-bottom: 1rem; }
.sp-header h1 { margin: 0 0 0.4rem; font-size: 1.55rem; }
.sp-subtitle { margin: 0; color: #4b5563; }
.sp-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.sp-card h2 { margin: 0 0 0.8rem; font-size: 1.05rem; }
.sp-stats { display: flex; flex-wrap: wrap; gap: 1rem; }
.sp-stat { min-width: 180px; }
.sp-stat span { display: block; color: #6b7280; font-size: 0.85rem; }
.sp-stat strong { font-size: 1.35rem; color: #111; }
.sp-stat-sub { display: block; margin-top: 0.2rem; color: #9ca3af; font-size: 0.75rem; font-style: normal; font-weight: 500; }
.sp-stats-note { margin: 0.75rem 0 0; color: #6b7280; font-size: 0.82rem; line-height: 1.5; }
.sp-stats-note a { color: #1d4ed8; }
.sp-best-strip {
    margin-top: 0.9rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #d1fae5;
    background: linear-gradient(90deg, #ecfdf5 0%, #f8fafc 55%);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}
.sp-best-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #047857;
}
.sp-best-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: #f3f4f6;
    flex-shrink: 0;
}
.sp-best-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.sp-best-body strong { font-size: 0.92rem; color: #111827; }
.sp-best-metrics { font-size: 0.82rem; color: #4b5563; }
.sp-best-hint { font-size: 0.72rem; color: #6b7280; margin-top: 0.1rem; }
.sp-top-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: #059669;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.sp-today-badge { background: #2563eb; }
.sp-top-badge-inline { margin-bottom: 0; }
.sp-perf-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.3rem; min-height: 0; }
.sp-col-perf { min-width: 168px; }
.sp-perf { display: flex; flex-direction: column; gap: 0.15rem; }
.sp-perf-line { font-size: 0.8rem; color: #6b7280; line-height: 1.35; }
.sp-perf-strong { font-size: 0.88rem; font-weight: 600; color: #111827; }
.sp-perf-dot { margin: 0 0.15rem; color: #d1d5db; }
.sp-perf-bar {
    margin-top: 0.25rem;
    height: 4px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
    max-width: 140px;
}
.sp-perf-bar span {
    display: block;
    height: 100%;
    background: #059669;
    border-radius: 999px;
}
.sp-price-meta { margin-top: 0.25rem; }
.sp-form { display: flex; flex-direction: column; gap: 0.8rem; }
.sp-field label { display: block; font-size: 0.9rem; margin-bottom: 0.3rem; color: #374151; }
.sp-field-hint { margin: 0.35rem 0 0; font-size: 0.8rem; color: #6b7280; max-width: 520px; line-height: 1.4; }
.sp-input { width: 100%; max-width: 430px; border: 1px solid #d1d5db; border-radius: 6px; padding: 0.5rem 0.6rem; font-size: 0.95rem; }
.sp-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.sp-checkbox { margin-top: 0.3rem; }
.sp-actions { margin-top: 0.35rem; }
.sp-actions-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.sp-inline-form { margin: 0; display: inline; }
.sp-danger-hint { color: #b45309; }
.sp-reset-box { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; }
.sp-reset-title { margin: 0 0 0.5rem; font-size: 0.95rem; color: #374151; }
.btn-danger { background: #dc2626; color: #fff; border: 1px solid #dc2626; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.sp-card-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 0.4rem; flex-wrap: wrap; }
.sp-card-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.sp-inline-form { margin: 0; display: inline; }
.sp-help { margin: 0 0 0.9rem; color: #6b7280; font-size: 0.85rem; }
.sp-filters { margin-bottom: 0.85rem; padding: 0.85rem 1rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; }
.sp-filters-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.85rem 1.25rem; }
.sp-filters-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.25rem; }
.sp-filter-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.sp-filter-field label { font-size: 0.78rem; font-weight: 600; color: #374151; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; }
.sp-filter-select {
    width: 11rem;
    max-width: 100%;
    height: 2.35rem;
    padding: 0.35rem 2rem 0.35rem 0.65rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") no-repeat right 0.55rem center;
    font-size: 0.9rem;
    color: #111827;
    appearance: none;
    cursor: pointer;
}
.sp-filter-select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }
.sp-filters-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.sp-filter-apply { margin: 0; height: 2.35rem; padding: 0 1rem; line-height: 2.35rem; font-size: 0.88rem; white-space: nowrap; }
.sp-filter-reset { display: inline-flex; align-items: center; height: 2.35rem; padding: 0 0.35rem; font-size: 0.88rem; color: #4b5563; text-decoration: none; white-space: nowrap; }
.sp-filter-reset:hover { color: #111827; text-decoration: underline; }
.sp-list-meta { margin: 0 0 0.5rem; font-size: 0.82rem; color: #6b7280; }
.sp-col-story { width: 72px; white-space: nowrap; }
.sp-story-num { font-size: 1rem; color: #111827; }
.sp-pagination { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; justify-content: center; margin-top: 1rem; }
.sp-page-btn { padding: 0.4rem 0.85rem; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #111827; text-decoration: none; font-size: 0.88rem; }
.sp-page-btn:hover { background: #f3f4f6; }
.sp-page-btn-disabled { padding: 0.4rem 0.85rem; border: 1px solid #e5e7eb; border-radius: 6px; background: #f9fafb; color: #9ca3af; font-size: 0.88rem; }
.sp-page-info { font-size: 0.88rem; color: #4b5563; }
.sp-empty { margin: 0; color: #6b7280; }
.sp-table-wrap { overflow-x: auto; }
.sp-table { width: 100%; border-collapse: collapse; min-width: 920px; }
.sp-table th, .sp-table td { border-top: 1px solid #e5e7eb; padding: 0.55rem; vertical-align: top; font-size: 0.9rem; text-align: left; }
.sp-table th { color: #374151; background: #f9fafb; }
.sp-table tr:has(.sp-today-badge) { background: #eff6ff; }
.sp-table tr:has(.sp-top-badge-inline):not(:has(.sp-today-badge)) { background: #f0fdf4; }
.sp-thumb { width: 76px; height: 76px; border-radius: 8px; object-fit: cover; display: block; background: #f3f4f6; }
.sp-thumb-empty { display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 0.75rem; }
.sp-meta { font-size: 0.78rem; color: #6b7280; }
.sp-caption { max-width: 340px; white-space: pre-wrap; word-break: break-word; color: #1f2937; }
.sp-tag { display: inline-block; margin-top: 0.25rem; font-size: 0.75rem; background: #ecfdf5; color: #065f46; padding: 0.1rem 0.45rem; border-radius: 999px; }
.sp-pill { font-size: 0.75rem; padding: 0.18rem 0.45rem; border-radius: 999px; }
.sp-pill-on { background: #dcfce7; color: #166534; }
.sp-pill-off { background: #f3f4f6; color: #6b7280; }
.sp-btn-sm { font-size: 0.8rem; padding: 0.3rem 0.55rem; }
.sp-product-wrap { position: relative; max-width: 430px; }
.sp-product-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 8; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; max-height: 240px; overflow-y: auto; box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.sp-product-item { padding: 0.5rem 0.6rem; border-bottom: 1px solid #f3f4f6; cursor: pointer; }
.sp-product-item:hover { background: #f9fafb; }
.sp-product-selected { font-size: 0.86rem; color: #374151; margin-top: 0.35rem; }
.sp-clear-product { margin-left: 0.3rem; color: #6b7280; text-decoration: underline; cursor: pointer; }
.sp-verify-summary { border-radius: 8px; padding: 0.75rem 0.85rem; margin: 0.5rem 0 0.85rem; font-size: 0.9rem; }
.sp-verify-summary p { margin: 0.35rem 0 0; color: #374151; }
.sp-verify-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.sp-verify-fail { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.sp-verify-badge { margin: 0.5rem 0 0; font-size: 0.82rem; font-weight: 600; }
.sp-verify-badge-ok { color: #047857; }
.sp-verify-badge-warn { color: #b45309; }
.sp-verify-checks { list-style: none; margin: 0; padding: 0; }
.sp-verify-item { display: grid; grid-template-columns: 200px 1fr; gap: 0.25rem 0.75rem; padding: 0.45rem 0; border-top: 1px solid #f3f4f6; font-size: 0.86rem; }
.sp-verify-label { font-weight: 600; color: #374151; }
.sp-verify-msg { color: #1f2937; }
.sp-verify-detail { grid-column: 2; color: #6b7280; font-size: 0.8rem; }
.sp-verify-status-ok .sp-verify-label::before { content: "✓ "; color: #059669; }
.sp-verify-status-error .sp-verify-label::before { content: "✗ "; color: #dc2626; }
.sp-verify-status-warning .sp-verify-label::before { content: "! "; color: #d97706; }
.sp-verify-status-info .sp-verify-label::before { content: "· "; color: #6b7280; }
@media (max-width: 640px) {
    .sp-verify-item { grid-template-columns: 1fr; }
    .sp-verify-detail { grid-column: 1; }
}
</style>

@push('scripts')
<script>
(function () {
    var searchInput = document.getElementById('sp-product-search');
    var productIdInput = document.getElementById('sp-product-id');
    var productTitleInput = document.getElementById('sp-product-title');
    var dropdown = document.getElementById('sp-product-dropdown');
    var selected = document.getElementById('sp-product-selected');
    if (!searchInput || !productIdInput || !dropdown || !selected) return;

    var timer = null;

    function clearSelection() {
        productIdInput.value = '';
        productTitleInput.value = '';
        selected.hidden = true;
        selected.innerHTML = '';
        searchInput.hidden = false;
        searchInput.focus();
    }

    function renderItems(items) {
        dropdown.innerHTML = '';
        if (!items.length) {
            var empty = document.createElement('div');
            empty.className = 'sp-product-item';
            empty.textContent = 'No products found';
            dropdown.appendChild(empty);
            dropdown.hidden = false;
            return;
        }
        items.forEach(function (item) {
            var row = document.createElement('div');
            row.className = 'sp-product-item';
            row.textContent = item.title || item.id;
            row.addEventListener('click', function () {
                productIdInput.value = item.id;
                productTitleInput.value = item.title || '';
                selected.innerHTML = 'Selected: <strong>' + (item.title || item.id) + '</strong> <span class="sp-clear-product">Change</span>';
                selected.hidden = false;
                searchInput.hidden = true;
                dropdown.hidden = true;
                searchInput.value = '';
            });
            dropdown.appendChild(row);
        });
        dropdown.hidden = false;
    }

    searchInput.addEventListener('input', function () {
        var q = searchInput.value.trim();
        clearTimeout(timer);
        if (!q) {
            dropdown.hidden = true;
            return;
        }
        timer = setTimeout(function () {
            fetch('{{ route("story-purchase.search-products") }}?q=' + encodeURIComponent(q), { headers: { 'Accept': 'application/json' }})
                .then(function (r) { return r.json(); })
                .then(function (data) { renderItems(data.products || []); })
                .catch(function () { renderItems([]); });
        }, 250);
    });

    selected.addEventListener('click', function (e) {
        if (e.target.classList.contains('sp-clear-product')) {
            clearSelection();
        }
    });

    document.addEventListener('click', function (e) {
        if (!dropdown.contains(e.target) && e.target !== searchInput) dropdown.hidden = true;
    });
})();
</script>
@endpush
@endsection