@extends('layouts.app')

@section('title', 'Automatic Story Scheduler')

@section('content')
@php
    /** Create Story form: which ISO weekdays (1–7) start checked. Must stay in sync with config/story_scheduler.repeat_weekdays_default. */
    $createFormDefaultWeekdays = array_values(array_unique(array_map(
        static fn ($d): int => (int) $d,
        array_filter(
            (array) config('story_scheduler.repeat_weekdays_default', [3, 4, 5, 7]),
            static fn ($d) => (int) $d >= 1 && (int) $d <= 7
        )
    )));
    sort($createFormDefaultWeekdays);
@endphp
<div class="stories-dash">
    <header class="stories-dash-header">
        <div>
            <h1>Automatic Story Scheduler</h1>
            <p class="stories-dash-sub">Control center for Instagram Stories automation (Miami time: {{ config('app.timezone') }}).</p>
        </div>
        <div id="storiesStats" class="stories-stats" aria-live="polite"></div>
    </header>

    <section class="stories-card">
        <h2>1. Account Connection</h2>
        <form id="accountForm" class="stories-form-grid">
            <label>
                <span>Instagram User ID</span>
                <input type="text" name="instagram_user_id" value="{{ $connection->instagram_user_id ?? '' }}" />
            </label>
            <label>
                <span>Facebook Page ID</span>
                <input type="text" name="facebook_page_id" value="{{ $connection->facebook_page_id ?? '' }}" placeholder="Optional (Instagram-only OK)" />
            </label>
            <label class="stories-field-full">
                <span>Access Token</span>
                <input type="password" name="access_token" placeholder="Paste token from Meta (Copy button)" />
            </label>
            <div class="stories-field-full stories-actions-row">
                <button class="btn btn-primary" type="submit">Connect Account</button>
                <button class="btn btn-secondary" type="button" id="refreshConnectionBtn">Refresh status</button>
            </div>
            <div id="connectionStatus" class="stories-connection-status stories-connection-status-neutral stories-field-full">
                Checking account connection...
            </div>
        </form>
    </section>

    <section class="stories-card">
        <h2>2. Create Story</h2>
        <form id="storyForm" class="stories-form-grid" enctype="multipart/form-data">
            <label class="stories-field-full">
                <span>Media Upload (image or video)</span>
                <input type="file" name="media" accept="image/*,video/*" required />
                <p class="stories-hint">Videos MP4/MOV/WebM OK. If upload fails it is usually file size: use a shorter clip or raise <code>upload_max_filesize</code> / <code>post_max_size</code> in PHP (your host).</p>
            </label>
            <label class="stories-field-full">
                <span>Caption</span>
                <textarea name="caption" class="stories-caption-textarea" rows="12" spellcheck="true" placeholder="Optional — edit or clear the default below">{{ $defaultStoryCaption ?? '' }}</textarea>
                <p class="stories-hint">Default store copy for every new story (change anytime). Line breaks are kept when publishing. On Instagram Stories the caption may show more subtly than on feed posts—important promos can also be burned into the image/video.</p>
            </label>

            <div class="stories-field-full">
                <span class="stories-label">Platforms</span>
                <div class="stories-checkboxes">
                    <label><input type="checkbox" name="platforms[]" value="instagram" checked /> Instagram Story</label>
                    <label><input type="checkbox" name="platforms[]" value="facebook" /> Facebook Story</label>
                </div>
                <p class="stories-hint">Instagram-only works without Facebook Page ID.</p>
            </div>

            <div class="stories-field-full stories-schedule-card">
                <span class="stories-schedule-heading">Daily time (required)</span>
                <div class="stories-time-row">
                    <select id="storyHour12" required aria-label="Hour">
                        <option value="">Hour</option>
                        @for ($h = 1; $h <= 12; $h++)
                            <option value="{{ $h }}">{{ str_pad((string) $h, 2, '0', STR_PAD_LEFT) }}</option>
                        @endfor
                    </select>
                    <select id="storyMinute" required aria-label="Minute">
                        <option value="">Minute</option>
                        @for ($m = 0; $m <= 59; $m++)
                            <option value="{{ $m }}">{{ str_pad((string) $m, 2, '0', STR_PAD_LEFT) }}</option>
                        @endfor
                    </select>
                    <select id="storyAmPm" required aria-label="AM or PM">
                        <option value="AM">AM</option>
                        <option value="PM">PM</option>
                    </select>
                </div>
                <p class="stories-hint stories-schedule-hint">One-time: pick a time <strong>later than now</strong> today. Repeat daily: runs every day at this clock time (today’s slot can already be gone).</p>
                <div class="stories-repeat-inline">
                    <label class="stories-repeat-switch">
                        <input type="checkbox" id="storyRepeatDaily" name="repeat_daily" value="1" checked />
                        <span class="stories-repeat-text">Repeat on a weekly schedule</span>
                    </label>
                    <span class="stories-repeat-caption">Pick which weekdays below (ignored for one-time).</span>
                </div>
                <div class="stories-weekdays-box" id="storyWeekdaysBox">
                    <span class="stories-weekdays-title">Days to post</span>
                    <p class="stories-hint stories-weekdays-micro">Monday &amp; Tuesday start <strong>unchecked</strong> (same as Saturday). Adjust any day below.</p>
                    <div class="stories-weekdays-pills">
                        @foreach ([1 => 'Mon', 2 => 'Tue', 3 => 'Wed', 4 => 'Thu', 5 => 'Fri', 6 => 'Sat', 7 => 'Sun'] as $isoD => $short)
                            <label class="stories-day-pill">
                                <input type="checkbox" name="repeat_weekdays[]" value="{{ $isoD }}" @checked(in_array((int) $isoD, $createFormDefaultWeekdays, true)) />
                                <span class="stories-day-pill-label">{{ $short }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="stories-field-full">
                <button class="btn btn-primary" type="submit">Save &amp; Activate</button>
            </div>
        </form>
    </section>

    <section class="stories-card">
        <div class="stories-section-head">
            <h2>3. Story Command Center</h2>
            <p class="stories-hint">Scheduled → Publishing → Live (24h window) → Expired. Edit time only before publish.</p>
        </div>
        <div id="storiesList" class="stories-grid"></div>
    </section>
</div>
@endsection

@push('styles')
<style>
.stories-dash { max-width: 1100px; margin: 0 auto; display: grid; gap: 1.25rem; }
.stories-dash-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.stories-dash-header h1 { margin: 0 0 0.35rem 0; font-size: 1.65rem; }
.stories-dash-sub { margin: 0; color: #64748b; font-size: 0.95rem; }
.stories-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.stories-stat-pill { background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.82rem; color: #334155; }
.stories-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); }
.stories-card h2 { margin: 0 0 1rem 0; font-size: 1.15rem; }
.stories-section-head { margin-bottom: 1rem; }
.stories-section-head h2 { margin: 0 0 0.35rem 0; }
.stories-form-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stories-form-grid label { display: grid; gap: 0.35rem; color: #374151; font-size: 0.9rem; }
.stories-form-grid input[type="text"],
.stories-form-grid input[type="password"],
.stories-form-grid input[type="file"],
.stories-form-grid textarea { border: 1px solid #d1d5db; border-radius: 8px; padding: 0.6rem 0.7rem; font-size: 0.93rem; width: 100%; }
.stories-form-grid select { border: 1px solid #d1d5db; border-radius: 8px; padding: 0.6rem 0.7rem; font-size: 0.93rem; width: 100%; background: #fff; }
.stories-form-grid textarea { resize: vertical; }
.stories-caption-textarea { line-height: 1.5; white-space: pre-wrap; min-height: 14rem; }
.stories-field-full { grid-column: 1 / -1; }
.stories-label { display: block; margin-bottom: 0.4rem; font-size: 0.9rem; color: #374151; }
.stories-checkboxes { display: flex; flex-wrap: wrap; gap: 1rem; }
.stories-time-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; }
.stories-schedule-card {
    display: grid;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.stories-schedule-heading { font-size: 0.9rem; font-weight: 600; color: #374151; }
.stories-schedule-hint { margin: 0 !important; }
.stories-repeat-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    padding-top: 0.25rem;
    margin-top: 0.2rem;
    border-top: 1px solid #e2e8f0;
}
.stories-repeat-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}
.stories-repeat-switch input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #2563eb;
    cursor: pointer;
}
.stories-repeat-text { user-select: none; }
.stories-repeat-caption { font-size: 0.78rem; color: #64748b; flex: 1 1 160px; min-width: 0; }
.stories-weekdays-box { margin-top: 0.2rem; padding-top: 0.35rem; }
.stories-weekdays-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; display: block; margin-bottom: 0.12rem; }
.stories-weekdays-micro { margin: 0 0 0.4rem !important; font-size: 0.76rem !important; line-height: 1.35 !important; }
.stories-weekdays-pills,
.story-weekdays-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
}
.stories-day-pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    min-width: 0;
    padding: 0.35rem 0.2rem;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #475569;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.stories-day-pill:hover { border-color: #94a3b8; background: #f8fafc; }
.stories-day-pill:focus-within {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37, 99, 235, 0.45);
}
.stories-day-pill input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.stories-day-pill-label {
    pointer-events: none;
    position: relative;
    z-index: 1;
}
.stories-day-pill:has(input:checked) {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #2563eb;
    color: #1d4ed8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.stories-weekdays-box.stories-weekdays-disabled { opacity: 0.55; }
.stories-weekdays-box.stories-weekdays-disabled .stories-day-pill { pointer-events: none; }
.story-weekdays-edit { margin-top: 0.5rem; padding-top: 0.55rem; border-top: 1px dashed #e5e7eb; width: 100%; max-width: none; }
.story-weekdays-row { margin: 0.35rem 0 0.45rem; }
.stories-hint { margin: 0.35rem 0 0 0; font-size: 0.82rem; color: #64748b; }
.stories-actions-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.btn-secondary { background: #64748b; color: #fff; border: none; border-radius: 8px; padding: 0.5rem 0.85rem; cursor: pointer; font-size: 0.92rem; }
.btn-secondary:hover { background: #475569; }
.stories-connection-status { border-radius: 10px; padding: 0.65rem 0.85rem; font-size: 0.9rem; border: 1px solid transparent; }
.stories-connection-status-neutral { background: #f8fafc; color: #334155; border-color: #e2e8f0; }
.stories-connection-status-success { background: #f0fdf4; color: #166534; border-color: #86efac; }
.stories-connection-status-warning { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
.stories-connection-status-error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

.stories-grid { display: grid; gap: 0.85rem; }
.story-card { border: 1px solid #e5e7eb; border-radius: 14px; padding: 0.9rem; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 0.65rem 0.75rem; align-items: start; background: #fafafa; }
.story-card-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem 0.85rem;
    align-items: start;
    width: 100%;
    min-width: 0;
}
.story-thumb { width: 108px; height: 108px; border-radius: 12px; overflow: hidden; background: #e5e7eb; display: flex; align-items: center; justify-content: center; }
.story-thumb img, .story-thumb video { width: 100%; height: 100%; object-fit: cover; }
.story-body { display: grid; gap: 0.35rem; min-width: 0; }
.story-title-row { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.story-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.45rem; border-radius: 999px; border: 1px solid transparent; }
.badge-scheduled { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge-running { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.badge-live { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.badge-expired { background: #f4f4f5; color: #52525b; border-color: #e4e4e7; }
.badge-paused { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.badge-failed { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.story-meta-line { font-size: 0.88rem; color: #475569; }
.story-meta-line strong { color: #0f172a; }
.story-side {
    display: grid;
    gap: 0.6rem;
    justify-items: stretch;
    justify-self: end;
    width: min(100%, 380px);
    min-width: min(272px, 100%);
    max-width: 100%;
}
.story-actions-wrap { width: 100%; display: grid; gap: 0.45rem; }
.story-actions-hint { margin: 0; font-size: 0.75rem; color: #64748b; line-height: 1.4; }
.story-actions-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
/* Card buttons — one visual system */
.btn-story {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.05s;
    line-height: 1.2;
    white-space: nowrap;
}
.btn-story:active { transform: translateY(1px); }
.btn-story-emphasis {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.55rem 1rem;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    border-color: #1e40af;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.35);
}
.btn-story-emphasis:hover { filter: brightness(1.06); box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4); }
.btn-story-muted {
    background: #fff;
    border-color: #cbd5e1;
    color: #334155;
}
.btn-story-muted:hover { background: #f8fafc; border-color: #94a3b8; }
.btn-story-remove {
    background: #fff;
    border-color: #fca5a5;
    color: #b91c1c;
}
.btn-story-remove:hover { background: #fef2f2; border-color: #f87171; }
.btn-story-remove-pending {
    outline: 2px dashed #b91c1c;
    outline-offset: 2px;
    font-weight: 800;
}
.story-actions-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; margin: 0 0 0.15rem 0; }
.btn-small { padding: 0.45rem 0.65rem; border: 1px solid #d1d5db; background: #fff; border-radius: 8px; cursor: pointer; font-size: 0.82rem; }
.btn-small:hover { border-color: #9ca3af; }
.btn-small-primary { border-color: #2563eb; color: #1d4ed8; }
.btn-small-danger { border-color: #fecaca; color: #b91c1c; }
.story-edit { display: grid; gap: 0.35rem; font-size: 0.82rem; color: #475569; width: 100%; max-width: 280px; }
.story-edit-row { display: grid; grid-template-columns: 1fr 1fr 0.75fr; gap: 0.35rem; }
.story-edit-row select { border: 1px solid #cbd5e1; border-radius: 8px; padding: 0.4rem 0.35rem; font-size: 0.82rem; background: #fff; }
.story-repeat-convert {
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    width: 100%;
    text-align: left;
}
.story-repeat-title { font-size: 0.85rem; font-weight: 700; color: #0f172a; margin: 0 0 0.25rem 0; }
.stories-empty { color: #6b7280; font-size: 0.92rem; }
@media (max-width: 640px) {
    .stories-weekdays-pills,
    .story-weekdays-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .stories-form-grid { grid-template-columns: 1fr; }
    .story-card { grid-template-columns: minmax(0, 1fr); }
    .story-card-main {
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
    }
    .story-side {
        justify-self: stretch;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}
</style>
@endpush

@push('scripts')
<script>
(() => {
    const defaultStoryCaption = @json($defaultStoryCaption ?? '');
    const defaultRepeatWeekdaysConvert = @json($createFormDefaultWeekdays);
    const csrf = document.querySelector('meta[name="csrf-token"]').content;
    const accountForm = document.getElementById('accountForm');
    const storyForm = document.getElementById('storyForm');
    const storiesList = document.getElementById('storiesList');
    const storiesStats = document.getElementById('storiesStats');
    const storyHour12 = document.getElementById('storyHour12');
    const storyMinute = document.getElementById('storyMinute');
    const storyAmPm = document.getElementById('storyAmPm');
    const connectionStatus = document.getElementById('connectionStatus');
    const refreshConnectionBtn = document.getElementById('refreshConnectionBtn');

    let storiesCache = [];
    let countdownTimer = null;

    async function sendStoryClientLog(payload) {
        try {
            await fetch('/api/stories/client-log', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrf,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(payload),
            });
        } catch (_) {
            // no-op — logging must never block the UI
        }
    }

    // #region agent log
    function ingestRemoveDebug(hypothesisId, message, data = {}) {
        fetch('http://127.0.0.1:7495/ingest/cfd696e0-d505-4f34-9aad-af090e33a768', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-Debug-Session-Id': '9dd3ab' },
            body: JSON.stringify({
                sessionId: '9dd3ab',
                location: 'stories.blade.php:remove',
                message,
                data,
                timestamp: Date.now(),
                hypothesisId,
            }),
        }).catch(() => {});
    }

    async function traceStoryRemove(step, hypothesisId, context) {
        ingestRemoveDebug(hypothesisId, step, context);
        await sendStoryClientLog({
            event: 'story_remove_trace',
            message: step,
            hypothesisId,
            context,
        });
    }
    // #endregion

    function storyMediaClientDebug() {
        const input = storyForm.querySelector('input[name="media"]');
        const file = input?.files?.[0];
        if (!file) {
            return { file_selected: false };
        }
        return {
            file_selected: true,
            name: file.name,
            type: file.type,
            size_bytes: file.size,
        };
    }

    async function parseJsonResponse(response) {
        const text = await response.text();
        const trimmed = text.replace(/\s+/g, ' ').trim();
        try {
            return JSON.parse(text);
        } catch (e) {
            const snippet = trimmed.slice(0, 240);
            const suffix = snippet ? ` body="${snippet}"` : '';
            throw new Error(`HTTP ${response.status} (non-JSON)${suffix}`);
        }
    }

    function isVideo(url) {
        const clean = (url || '').toLowerCase();
        return clean.endsWith('.mp4') || clean.endsWith('.mov') || clean.endsWith('.webm') || clean.endsWith('.m4v');
    }

    function formatPlatforms(platforms) {
        return (platforms || []).map((platform) => platform === 'instagram' ? 'Instagram' : 'Facebook').join(' + ');
    }

    function formatTime12(time24) {
        if (!time24 || !time24.includes(':')) {
            return time24 || '';
        }
        const [hoursRaw, minutes] = time24.split(':');
        const hours = parseInt(hoursRaw, 10);
        if (Number.isNaN(hours)) {
            return time24;
        }
        const suffix = hours >= 12 ? 'PM' : 'AM';
        const normalized = hours % 12 || 12;
        return `${String(normalized).padStart(2, '0')}:${minutes} ${suffix}`;
    }

    function to24Hour(hour12, minute, ampm) {
        let hour = parseInt(hour12, 10);
        let min = parseInt(minute, 10);
        if (Number.isNaN(hour) || Number.isNaN(min) || hour < 1 || hour > 12 || min < 0 || min > 59) {
            return null;
        }
        if (ampm === 'AM') {
            hour = hour === 12 ? 0 : hour;
        } else {
            hour = hour === 12 ? 12 : hour + 12;
        }
        return `${String(hour).padStart(2, '0')}:${String(min).padStart(2, '0')}`;
    }

    function splitTime24(time24) {
        if (!time24 || !time24.includes(':')) {
            return { hour12: '', minute: '', ampm: 'AM' };
        }
        const [hRaw, mRaw] = time24.split(':');
        let h = parseInt(hRaw, 10);
        const m = parseInt(mRaw, 10);
        const ampm = h >= 12 ? 'PM' : 'AM';
        const hour12 = (h % 12) || 12;
        return { hour12: String(hour12), minute: String(m).padStart(2, '0'), ampm };
    }

    function badgeClass(badge) {
        const map = {
            scheduled: 'badge-scheduled',
            running: 'badge-running',
            live: 'badge-live',
            expired: 'badge-expired',
            paused: 'badge-paused',
            failed: 'badge-failed',
        };
        return map[badge] || 'badge-scheduled';
    }

    function renderConnectionStatus(status, fallbackMessage = null) {
        const level = status?.level || 'neutral';
        connectionStatus.className = 'stories-connection-status stories-field-full';
        connectionStatus.classList.add(`stories-connection-status-${level}`);
        connectionStatus.textContent = fallbackMessage || status?.message || 'Connection status unavailable.';
    }

    async function fetchConnectionStatus() {
        try {
            const response = await fetch('/api/stories/connection-status', {
                headers: { 'Accept': 'application/json' }
            });
            const data = await parseJsonResponse(response);
            if (!response.ok) {
                renderConnectionStatus({ level: 'error', message: data.message || 'Failed to check connection status.' });
                return;
            }
            renderConnectionStatus(data.status);
        } catch (error) {
            renderConnectionStatus({ level: 'error', message: 'Could not check connection status. Try again.' });
        }
    }

    function renderStats(stories) {
        const counts = { scheduled: 0, publishing: 0, live: 0, expired: 0, failed: 0, paused: 0 };
        stories.forEach((s) => {
            const key = s.lifecycle?.key;
            const badge = s.lifecycle?.badge;
            if (badge === 'paused' || s.status === 'paused') {
                counts.paused += 1;
            }
            if (key === 'failed') counts.failed += 1;
            else if (key === 'publishing') counts.publishing += 1;
            else if (key === 'live') counts.live += 1;
            else if (key === 'expired') counts.expired += 1;
            else counts.scheduled += 1;
        });
        storiesStats.innerHTML = `
            <span class="stories-stat-pill">Queued / waiting: <strong>${counts.scheduled}</strong></span>
            <span class="stories-stat-pill">Publishing: <strong>${counts.publishing}</strong></span>
            <span class="stories-stat-pill">Live (24h): <strong>${counts.live}</strong></span>
            <span class="stories-stat-pill">Expired: <strong>${counts.expired}</strong></span>
            <span class="stories-stat-pill">Failed: <strong>${counts.failed}</strong></span>
            <span class="stories-stat-pill">Paused rules: <strong>${counts.paused}</strong></span>
        `;
    }

    function formatRepeatSummary(story) {
        if (!story.repeat_daily) {
            return 'One-time';
        }
        if (story.repeat_weekdays_label) {
            return `Weekly: ${story.repeat_weekdays_label}`;
        }
        return 'Weekly (all days)';
    }

    function buildStoryWeekdayPills(selectedArr, checkboxClass) {
        const labels = { 1: 'Mon', 2: 'Tue', 3: 'Wed', 4: 'Thu', 5: 'Fri', 6: 'Sat', 7: 'Sun' };
        const set = Array.isArray(selectedArr) ? selectedArr.map((n) => Number(n)) : [];
        return [1, 2, 3, 4, 5, 6, 7].map((n) => {
            const sel = set.includes(n) ? 'checked' : '';
            return `<label class="stories-day-pill"><input type="checkbox" class="${checkboxClass}" value="${n}" ${sel} /><span class="stories-day-pill-label">${labels[n]}</span></label>`;
        }).join('');
    }

    function formatCountdown(expiresAtIso) {
        if (!expiresAtIso) return '';
        const end = new Date(expiresAtIso);
        const now = new Date();
        const ms = end - now;
        if (Number.isNaN(ms)) return '';
        if (ms <= 0) return 'Expired';
        const totalSec = Math.floor(ms / 1000);
        const h = Math.floor(totalSec / 3600);
        const m = Math.floor((totalSec % 3600) / 60);
        const s = totalSec % 60;
        return `${h}h ${String(m).padStart(2, '0')}m ${String(s).padStart(2, '0')}s left`;
    }

    function renderStories(stories) {
        storiesCache = stories || [];
        renderStats(storiesCache);

        if (!storiesCache.length) {
            storiesList.innerHTML = '<p class="stories-empty">No automations yet. Create your first story above.</p>';
            return;
        }

        storiesList.innerHTML = storiesCache.map((story) => {
            const preview = isVideo(story.media_url)
                ? `<video src="${story.media_url}" muted playsinline></video>`
                : `<img src="${story.media_url}" alt="" />`;

            const lifecycle = story.lifecycle || {};
            const badge = lifecycle.badge || 'scheduled';
            const automation = story.status === 'paused' ? '<span class="badge badge-paused">Automation paused</span>' : '<span class="badge badge-scheduled">Automation on</span>';
            const repeat = formatRepeatSummary(story);
            const countdown = (lifecycle.key === 'live' && story.expires_at)
                ? `<div class="story-meta-line"><strong>24h window:</strong> <span data-expires="${story.expires_at}">${formatCountdown(story.expires_at)}</span></div>`
                : '';

            const err = story.last_error
                ? `<div class="story-meta-line" style="color:#b91c1c;"><strong>Last error:</strong> ${story.last_error}</div>`
                : '';

            const parts = splitTime24(story.time);
            const editBlock = story.can_edit_time ? `
                <div class="story-edit">
                    <div><strong>Reschedule</strong> (before publish)</div>
                    <div class="story-edit-row">
                        <select class="js-edit-hour" data-id="${story.id}">
                            ${[...Array(12)].map((_, i) => {
                                const v = i + 1;
                                const sel = String(v) === parts.hour12 ? 'selected' : '';
                                return `<option value="${v}" ${sel}>${String(v).padStart(2, '0')}</option>`;
                            }).join('')}
                        </select>
                        <select class="js-edit-minute" data-id="${story.id}">
                            ${[...Array(60)].map((_, m) => {
                                const sel = m === parseInt(parts.minute, 10) ? 'selected' : '';
                                return `<option value="${m}" ${sel}>${String(m).padStart(2, '0')}</option>`;
                            }).join('')}
                        </select>
                        <select class="js-edit-ampm" data-id="${story.id}">
                            <option value="AM" ${parts.ampm === 'AM' ? 'selected' : ''}>AM</option>
                            <option value="PM" ${parts.ampm === 'PM' ? 'selected' : ''}>PM</option>
                        </select>
                    </div>
                    <button type="button" class="btn-story btn-story-emphasis js-save-schedule" data-id="${story.id}" title="Save the new daily run time (only before first publish)">Save new time</button>
                </div>
            ` : `<div class="story-meta-line" style="font-size:0.8rem;color:#64748b;">Schedule locked after publish starts.</div>`;

            const repeatDailyBlock = story.can_convert_to_repeat_daily ? `
                <div class="story-repeat-convert">
                    <div class="story-actions-label">Step: turn on weekly repeat</div>
                    <p class="story-repeat-title">Repeat this story on a schedule</p>
                    <p class="stories-hint" style="margin:0 0 0.45rem;">Same media posts on the weekdays you choose, at the clock time below.</p>
                    <div class="story-edit-row">
                        <select class="js-repeat-hour" data-id="${story.id}" aria-label="Hour">
                            ${[...Array(12)].map((_, i) => {
                                const v = i + 1;
                                const sel = String(v) === parts.hour12 ? 'selected' : '';
                                return `<option value="${v}" ${sel}>${String(v).padStart(2, '0')}</option>`;
                            }).join('')}
                        </select>
                        <select class="js-repeat-minute" data-id="${story.id}" aria-label="Minute">
                            ${[...Array(60)].map((_, m) => {
                                const sel = m === parseInt(parts.minute, 10) ? 'selected' : '';
                                return `<option value="${m}" ${sel}>${String(m).padStart(2, '0')}</option>`;
                            }).join('')}
                        </select>
                        <select class="js-repeat-ampm" data-id="${story.id}" aria-label="AM or PM">
                            <option value="AM" ${parts.ampm === 'AM' ? 'selected' : ''}>AM</option>
                            <option value="PM" ${parts.ampm === 'PM' ? 'selected' : ''}>PM</option>
                        </select>
                    </div>
                    <p class="stories-hint" style="margin:0.5rem 0 0.35rem;font-size:0.78rem;">Weekdays (Mon &amp; Tue off by default)</p>
                    <div class="story-weekdays-row">${buildStoryWeekdayPills(defaultRepeatWeekdaysConvert, 'js-convert-weekday')}</div>
                    <button type="button" class="btn-story btn-story-emphasis js-save-repeat-daily" data-id="${story.id}" title="Enable repeat with selected weekdays">Save — enable repeat</button>
                </div>
            ` : '';

            const weekdaysEditBlock = story.can_edit_repeat_weekdays ? `
                <div class="story-weekdays-edit">
                    <div class="story-actions-label">Weekday schedule</div>
                    <p class="stories-hint" style="margin:0 0 0.35rem;font-size:0.78rem;">Uncheck days you skip. Applies to future runs.</p>
                    <div class="story-weekdays-row">${buildStoryWeekdayPills(story.repeat_weekdays || [], 'js-edit-weekday')}</div>
                    <button type="button" class="btn-story btn-story-muted js-save-weekdays" data-id="${story.id}">Save weekday schedule</button>
                </div>
            ` : '';

            return `
                <article class="story-card" data-id="${story.id}">
                    <div class="story-thumb">${preview}</div>
                    <div class="story-card-main">
                    <div class="story-body">
                        <div class="story-title-row">
                            <div class="story-badges">
                                <span class="badge ${badgeClass(badge)}">${lifecycle.label || 'Story'}</span>
                                ${automation}
                            </div>
                        </div>
                        <div class="story-meta-line"><strong>Run:</strong> ${formatTime12(story.time)} · ${repeat}</div>
                        <div class="story-meta-line"><strong>Platforms:</strong> ${formatPlatforms(story.platforms)}</div>
                        ${countdown}
                        ${err}
                    </div>
                    <div class="story-side">
                        ${editBlock}
                        ${repeatDailyBlock}
                        ${weekdaysEditBlock}
                        <div class="story-actions-wrap">
                            <div class="story-actions-label">Automation control</div>
                            <p class="story-actions-hint">${story.status === 'active'
                                ? '<strong>Pause</strong> stops future scheduled posts from this rule (Instagram stays as-is).'
                                : '<strong>Resume</strong> turns scheduling back on for this rule.'}</p>
                            <div class="story-actions-buttons">
                                <button type="button" class="btn-story btn-story-muted js-toggle" data-id="${story.id}"
                                    title="${story.status === 'active' ? 'Pause: no more automatic posts until you resume' : 'Resume: allow automatic posts again'}">
                                    ${story.status === 'active' ? 'Pause scheduling' : 'Resume scheduling'}
                                </button>
                                <button type="button" class="btn-story btn-story-remove js-remove" data-id="${story.id}"
                                    title="Remove this row from your dashboard only — does not delete stories on Instagram">
                                    Remove from app
                                </button>
                            </div>
                        </div>
                    </div>
                    </div>
                </article>
            `;
        }).join('');

        if (countdownTimer) {
            clearInterval(countdownTimer);
        }
        countdownTimer = setInterval(() => {
            document.querySelectorAll('[data-expires]').forEach((el) => {
                el.textContent = formatCountdown(el.getAttribute('data-expires'));
            });
        }, 1000);
    }

    async function fetchStories() {
        const response = await fetch('/api/stories', {
            headers: { 'Accept': 'application/json' }
        });
        const data = await parseJsonResponse(response);
        renderStories(data.stories || []);
    }

    accountForm.addEventListener('submit', async (event) => {
        event.preventDefault();
        const formData = new FormData(accountForm);

        const response = await fetch('/api/stories/connect', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
            body: formData
        });
        const data = await parseJsonResponse(response);
        if (!response.ok) {
            renderConnectionStatus({ level: 'error', message: data.message || 'Failed to connect account.' });
            return;
        }
        renderConnectionStatus(data.status, data.message || 'Saved.');
    });

    refreshConnectionBtn.addEventListener('click', () => fetchConnectionStatus());

    function syncStoryWeekdaysUi() {
        const cb = document.getElementById('storyRepeatDaily');
        const box = document.getElementById('storyWeekdaysBox');
        if (!cb || !box) {
            return;
        }
        const on = cb.checked;
        box.classList.toggle('stories-weekdays-disabled', !on);
        box.querySelectorAll('input[type="checkbox"]').forEach((el) => {
            el.disabled = !on;
        });
    }

    document.getElementById('storyRepeatDaily')?.addEventListener('change', syncStoryWeekdaysUi);
    syncStoryWeekdaysUi();

    storyForm.addEventListener('submit', async (event) => {
        event.preventDefault();
        const normalizedTime = to24Hour(storyHour12.value, storyMinute.value, storyAmPm.value);

        if (!normalizedTime) {
            alert('Please choose a valid time.');
            return;
        }

        const repeatOn = document.getElementById('storyRepeatDaily')?.checked;
        let formData = new FormData(storyForm);
        formData.set('time', normalizedTime);

        if (repeatOn) {
            const wd = formData.getAll('repeat_weekdays[]');
            if (wd.length === 0) {
                alert('Select at least one weekday for the repeat schedule.');
                return;
            }
        } else {
            const fd = new FormData();
            for (const [key, val] of formData.entries()) {
                if (key === 'repeat_weekdays[]') {
                    continue;
                }
                fd.append(key, val);
            }
            formData = fd;
        }

        if (!formData.getAll('platforms[]').length) {
            alert('Please select at least one platform.');
            return;
        }

        let response;
        let data;
        try {
            response = await fetch('/api/stories', {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                body: formData
            });
            data = await parseJsonResponse(response);
        } catch (e) {
            await sendStoryClientLog({
                event: 'story_save_upload',
                hypothesisId: 'H-story-client-upload',
                message: e?.message || String(e),
                context: {
                    phase: 'fetch_or_parse',
                    media: storyMediaClientDebug(),
                    time: normalizedTime,
                    platforms: formData.getAll('platforms[]'),
                },
            });
            alert('Upload failed (often file too large for server PHP limits, or network). Details: ' + (e.message || e));
            return;
        }
        if (!response.ok) {
            let msg = data.message;
            if (!msg && data.errors) {
                msg = Object.values(data.errors).flat().join(' ');
            }
            if (!msg) {
                msg = 'HTTP ' + response.status;
            }
            await sendStoryClientLog({
                event: 'story_save_http_error',
                hypothesisId: 'H-story-client-upload',
                message: msg,
                context: {
                    phase: 'http_error',
                    status: response.status,
                    media: storyMediaClientDebug(),
                    time: normalizedTime,
                    platforms: formData.getAll('platforms[]'),
                    server: data,
                },
            });
            alert(msg);
            return;
        }

        storyForm.reset();
        const igPlatform = storyForm.querySelector('input[name="platforms[]"][value="instagram"]');
        if (igPlatform) {
            igPlatform.checked = true;
        }
        const rd = document.getElementById('storyRepeatDaily');
        if (rd) {
            rd.checked = true;
        }
        storyForm.querySelectorAll('input[name="repeat_weekdays[]"]').forEach((inp) => {
            inp.checked = defaultRepeatWeekdaysConvert.includes(Number(inp.value));
        });
        syncStoryWeekdaysUi();
        const capEl = storyForm.querySelector('textarea[name="caption"]');
        if (capEl) {
            capEl.value = defaultStoryCaption;
        }
        await fetchStories();
    });

    storiesList.addEventListener('click', async (event) => {
        const target = event.target;
        const targetEl = target instanceof Element ? target : null;
        if (!targetEl) {
            return;
        }

        const card = targetEl.closest('.story-card');
        if (!card) {
            return;
        }

        const id = card.dataset.id;

        if (targetEl.closest('.js-save-repeat-daily')) {
            const hour = card.querySelector('.js-repeat-hour')?.value;
            const minute = card.querySelector('.js-repeat-minute')?.value;
            const ampm = card.querySelector('.js-repeat-ampm')?.value;
            const time24 = to24Hour(hour, minute, ampm);
            if (!time24) {
                alert('Invalid time.');
                return;
            }
            const repeat_weekdays = [...card.querySelectorAll('.js-convert-weekday:checked')].map((c) => parseInt(c.value, 10));
            if (!repeat_weekdays.length) {
                alert('Pick at least one weekday.');
                return;
            }
            const response = await fetch(`/api/stories/${id}`, {
                method: 'PATCH',
                headers: {
                    'X-CSRF-TOKEN': csrf,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ repeat_daily: true, time: time24, repeat_weekdays }),
            });
            const text = await response.text();
            let data = {};
            try {
                if (text.trim()) {
                    data = JSON.parse(text);
                }
            } catch (_) {
                data = {};
            }
            if (!response.ok) {
                let msg = data.message || data.error?.message;
                if (!msg && data.errors) {
                    msg = Object.values(data.errors).flat().join(' ');
                }
                alert(msg || (response.status === 419 ? 'Session expired. Refresh the page.' : 'Could not enable repeat.'));
                return;
            }
            alert(data.message || 'Repeat enabled.');
            await fetchStories();
            return;
        }

        if (targetEl.closest('.js-save-weekdays')) {
            const repeat_weekdays = [...card.querySelectorAll('.js-edit-weekday:checked')].map((c) => parseInt(c.value, 10));
            if (!repeat_weekdays.length) {
                alert('Select at least one weekday.');
                return;
            }
            const response = await fetch(`/api/stories/${id}/repeat-weekdays`, {
                method: 'PATCH',
                headers: {
                    'X-CSRF-TOKEN': csrf,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ repeat_weekdays }),
            });
            const textW = await response.text();
            let data = {};
            try {
                if (textW.trim()) {
                    data = JSON.parse(textW);
                }
            } catch (_) {
                data = {};
            }
            if (!response.ok) {
                let msg = data.message || data.error?.message;
                if (!msg && data.errors) {
                    msg = Object.values(data.errors).flat().join(' ');
                }
                alert(msg || (response.status === 419 ? 'Session expired. Refresh the page.' : 'Could not update weekdays.'));
                return;
            }
            alert(data.message || 'Weekdays updated.');
            await fetchStories();
            return;
        }

        if (targetEl.closest('.js-save-schedule')) {
            const hour = card.querySelector('.js-edit-hour')?.value;
            const minute = card.querySelector('.js-edit-minute')?.value;
            const ampm = card.querySelector('.js-edit-ampm')?.value;
            const time24 = to24Hour(hour, minute, ampm);
            if (!time24) {
                alert('Invalid time.');
                return;
            }
            const response = await fetch(`/api/stories/${id}`, {
                method: 'PATCH',
                headers: {
                    'X-CSRF-TOKEN': csrf,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ time: time24 }),
            });
            const textS = await response.text();
            let data = {};
            try {
                if (textS.trim()) {
                    data = JSON.parse(textS);
                }
            } catch (_) {
                data = {};
            }
            if (!response.ok) {
                let msg = data.message || data.error?.message;
                if (!msg && data.errors) {
                    msg = Object.values(data.errors).flat().join(' ');
                }
                alert(msg || (response.status === 419 ? 'Session expired. Refresh the page.' : 'Could not update time.'));
                return;
            }
            await fetchStories();
            return;
        }

        const removeBtn = targetEl.closest('.js-remove');
        if (removeBtn) {
            const targetId = removeBtn.dataset.id || id;
            await traceStoryRemove('remove_branch_entered', 'H1', {
                cardDatasetId: id,
                btnDatasetId: removeBtn.dataset.id || null,
                targetId,
                tagName: targetEl.tagName,
                armed: removeBtn.dataset.removeArmed === '1',
            });
            /* Native confirm() was cancelling in ~100ms in production logs — use two-tap confirm on the same button. */
            if (removeBtn.dataset.removeArmed !== '1') {
                removeBtn.dataset.removeArmed = '1';
                if (!removeBtn.dataset.removeLabelOrig) {
                    removeBtn.dataset.removeLabelOrig = removeBtn.textContent.trim();
                }
                removeBtn.textContent = 'Tap again to remove from app';
                removeBtn.classList.add('btn-story-remove-pending');
                removeBtn.setAttribute('aria-label', 'Confirm removal from app dashboard only');
                await traceStoryRemove('remove_armed_wait_second_tap', 'H7', { targetId });
                if (removeBtn._removeArmTimer) {
                    clearTimeout(removeBtn._removeArmTimer);
                }
                removeBtn._removeArmTimer = setTimeout(() => {
                    removeBtn.dataset.removeArmed = '0';
                    removeBtn.textContent = removeBtn.dataset.removeLabelOrig || 'Remove from app';
                    removeBtn.classList.remove('btn-story-remove-pending');
                    removeBtn.removeAttribute('aria-label');
                    removeBtn._removeArmTimer = null;
                    void traceStoryRemove('remove_arm_timeout_reset', 'H7', { targetId });
                }, 12000);
                return;
            }
            removeBtn.dataset.removeArmed = '0';
            if (removeBtn._removeArmTimer) {
                clearTimeout(removeBtn._removeArmTimer);
                removeBtn._removeArmTimer = null;
            }
            removeBtn.textContent = removeBtn.dataset.removeLabelOrig || 'Remove from app';
            removeBtn.classList.remove('btn-story-remove-pending');
            removeBtn.removeAttribute('aria-label');
            await traceStoryRemove('remove_second_tap_confirmed', 'H7', { targetId });
            removeBtn.disabled = true;
            try {
                await traceStoryRemove('remove_delete_fetch_start', 'H2', { targetId, url: `/api/stories/${targetId}` });
                const response = await fetch(`/api/stories/${targetId}`, {
                    method: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                });
                const text = await response.text();
                let data = {};
                try {
                    if (text.trim()) {
                        data = JSON.parse(text);
                    }
                } catch (_) {
                    data = {};
                }
                await traceStoryRemove('remove_delete_response', 'H3', {
                    targetId,
                    httpStatus: response.status,
                    ok: response.ok,
                    bodyLen: text.length,
                    bodySnippet: text.slice(0, 180),
                });
                if (!response.ok) {
                    const apiMsg = data.message || data.error?.message;
                    const msg = apiMsg
                        || (response.status === 419
                            ? 'Session expired. Refresh the page and try again.'
                            : `Could not remove (HTTP ${response.status}). Try again.`);
                    alert(msg);
                    return;
                }
                if (data.message) {
                    alert(data.message);
                }
                try {
                    await traceStoryRemove('remove_fetch_stories_start', 'H5', { targetId });
                    await fetchStories();
                    await traceStoryRemove('remove_fetch_stories_ok', 'H5', { targetId });
                } catch (re) {
                    await traceStoryRemove('remove_fetch_stories_fail', 'H5', {
                        targetId,
                        err: re?.message || String(re),
                    });
                    throw re;
                }
            } catch (e) {
                await traceStoryRemove('remove_delete_network_or_throw', 'H4', {
                    targetId,
                    err: e?.message || String(e),
                });
                alert('Network error while removing. Check your connection and try again.');
            } finally {
                removeBtn.disabled = false;
            }
            return;
        }

        const toggleBtn = targetEl.closest('.js-toggle');
        if (toggleBtn) {
            toggleBtn.disabled = true;
            try {
                const targetId = toggleBtn.dataset.id || id;
                const response = await fetch(`/api/stories/${targetId}/toggle`, {
                    method: 'PATCH',
                    headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                });
                const text = await response.text();
                let data = {};
                try {
                    if (text.trim()) {
                        data = JSON.parse(text);
                    }
                } catch (_) {
                    data = {};
                }
                if (!response.ok) {
                    const apiMsg = data.message || data.error?.message;
                    alert(apiMsg || (response.status === 419
                        ? 'Session expired. Refresh the page and try again.'
                        : `Could not update pause (HTTP ${response.status}).`));
                    return;
                }
                await fetchStories();
            } catch (e) {
                alert('Network error. Check your connection and try again.');
            } finally {
                toggleBtn.disabled = false;
            }
            return;
        }

    });

    fetchStories();
    fetchConnectionStatus();
})();
</script>
@endpush