@extends('layouts.app')

@section('content')
<div x-data="playLogEntry()" x-init="init()" class="sca-app" data-search-url="{{ url('/api/albums/search') }}" data-context-url-template="{{ url('/api/albums/__ALBUM__/play-log-context') }}" data-init-url="{{ url('/api/play-log/init') }}" data-store-url="{{ url('/api/play-log') }}">
    <style>
        :root {
            --sca-yellow: #FFB81C;
            --sca-black: #000000;
            --sca-white: #FFFFFF;
            --sca-font-display: Georgia, serif;
            --sca-font-ui: Arial, Helvetica, sans-serif;
        }

        .sca-app {
            min-height: 100vh;
            background: var(--sca-white);
            color: var(--sca-black);
            font-family: var(--sca-font-ui);
        }

        .sca-shell {
            max-width: 1240px;
            margin: 0 auto;
            padding: 24px;
        }

        .sca-top-rule,
        .sca-section-rule {
            height: 6px;
            background: var(--sca-yellow);
            border: 1px solid var(--sca-black);
            border-radius: 999px;
        }

        .sca-top-rule {
            margin-bottom: 24px;
        }

        .sca-header {
            display: grid;
            gap: 18px;
            margin-bottom: 28px;
        }

        .sca-header-grid {
            display: grid;
            gap: 24px;
        }

        .sca-wordmark {
            max-width: min(760px, 100%);
            height: auto;
            display: block;
        }

        .sca-display-title {
            font-family: var(--sca-font-display);
            font-size: 30px;
            line-height: 1;
            font-weight: 700;
            margin: 16px 0 0 0;
            white-space: nowrap;
        }

        .sca-meta {
            font-size: 14px;
            line-height: 1.5;
            color: rgba(0,0,0,0.72);
        }

        .sca-page-grid {
            display: grid;
            gap: 24px;
        }

        .sca-main-column {
            display: grid;
            gap: 18px;
            align-content: start;
        }

        .sca-side-column {
            display: grid;
            gap: 24px;
            align-content: start;
        }

        .sca-panel {
            border: 1px solid var(--sca-black);
            border-radius: 14px;
            background: var(--sca-white);
            overflow: hidden;
        }

        .sca-panel-accent {
            background: var(--sca-yellow);
        }

        .sca-panel-head {
            padding: 14px 14px 0 14px;
            display: grid;
            gap: 10px;
        }

        .sca-panel-body {
            padding: 14px;
            display: grid;
            gap: 12px;
        }

        .sca-side-column .sca-panel-head {
            padding: 18px 18px 0 18px;
            gap: 14px;
        }

        .sca-side-column .sca-panel-body {
            padding: 18px;
            gap: 16px;
        }

        .sca-panel-title {
            font-family: var(--sca-font-display);
            font-size: 18px;
            line-height: 1;
            font-weight: 700;
            margin: 0;
        }

        .sca-label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .sca-input,
        .sca-select,
        .sca-textarea {
            width: 100%;
            box-sizing: border-box;
            display: block;
            border: 1px solid var(--sca-black);
            border-radius: 10px;
            background: var(--sca-white);
            color: var(--sca-black);
            font-family: var(--sca-font-ui);
            font-size: 16px;
            font-weight: 500;
        }

        .sca-input,
        .sca-select {
            min-height: 48px;
            padding: 12px 14px;
        }

        .sca-textarea {
            min-height: 112px;
            padding: 12px 14px;
            resize: vertical;
        }

        .sca-input::placeholder,
        .sca-textarea::placeholder {
            color: rgba(0,0,0,0.52);
        }

        .sca-input:focus-visible,
        .sca-select:focus-visible,
        .sca-textarea:focus-visible,
        .sca-result-card:focus-visible,
        .sca-side-radio:focus-visible + .sca-side-label,
        .sca-btn:focus-visible {
            outline: 2px solid var(--sca-black);
            outline-offset: 2px;
        }

        .sca-search-wrap {
            display: grid;
            gap: 10px;
        }

        .sca-result-list {
            display: grid;
            gap: 8px;
            max-height: 360px;
            overflow-y: auto;
            padding-right: 2px;
        }

        .sca-result-card {
            width: 100%;
            text-align: left;
            border: 1px solid var(--sca-black);
            border-radius: 10px;
            background: rgba(255,255,255,0.90);
            padding: 12px 14px;
            cursor: pointer;
        }

        .sca-result-card:hover {
            background: var(--sca-white);
        }

        .sca-result-card[aria-selected="true"] {
            background: var(--sca-black);
            color: var(--sca-white);
        }

        .sca-result-title {
            font-size: 15px;
            font-weight: 600;
            line-height: 1.3;
        }

        .sca-result-card[aria-selected="true"] .sca-meta {
            color: rgba(255,255,255,0.78);
        }

        .sca-album-title {
            display: grid;
            gap: 0;
        }

        .sca-album-artist {
            font-size: 18px;
            line-height: 1.1;
            font-weight: 600;
        }

        .sca-album-name {
            font-family: var(--sca-font-display);
            font-size: 22px;
            line-height: 1.1;
            font-weight: 700;
        }

        .sca-chip-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .sca-badge {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 3px 8px;
            border: 1px solid var(--sca-black);
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
            line-height: 1;
            background: var(--sca-white);
        }

        .sca-badge-accent {
            background: var(--sca-yellow);
        }

        .sca-badge-inverse {
            background: var(--sca-black);
            color: var(--sca-white);
        }

        .sca-two-col {
            display: grid;
            gap: 12px;
        }

        .sca-subpanel {
            border: 1px solid var(--sca-black);
            border-radius: 10px;
            padding: 10px;
            background: rgba(255,255,255,0.88);
            display: grid;
            gap: 8px;
        }

        .sca-subpanel-title {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .sca-stat-list {
            display: grid;
            gap: 8px;
        }

        .sca-stat-row {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: baseline;
            padding-bottom: 6px;
            border-bottom: 1px solid rgba(0,0,0,0.12);
        }

        .sca-stat-row:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .sca-stat-label {
            font-size: 14px;
            color: rgba(0,0,0,0.70);
        }

        .sca-stat-value {
            font-size: 15px;
            font-weight: 600;
            text-align: right;
        }

        .sca-usage-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 8px 10px;
            border: 1px solid transparent;
            border-radius: 10px;
        }

        .sca-usage-item-current {
            background: var(--sca-yellow);
            border-color: var(--sca-black);
        }

        .sca-inverse-panel {
            background: var(--sca-black);
            color: var(--sca-white);
            border-radius: 12px;
            padding: 16px;
            display: grid;
            gap: 14px;
        }

        .sca-inverse-panel .sca-stat-row {
            border-bottom-color: rgba(255,255,255,0.14);
        }

        .sca-inverse-panel .sca-stat-label {
            color: rgba(255,255,255,0.72);
        }

        .sca-side-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 120px));
            gap: 8px;
            justify-content: start;
        }

        .sca-side-option {
            position: relative;
        }

        .sca-side-option {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 42px;
            padding: 0 10px;
            border: 1px solid var(--sca-black);
            border-radius: 10px;
            background: var(--sca-white);
        }

        .sca-side-radio {
            width: 16px;
            height: 16px;
            margin: 0;
            accent-color: var(--sca-black);
            cursor: pointer;
            flex: 0 0 auto;
        }

        .sca-side-label {
            display: inline-flex;
            align-items: center;
            min-height: 42px;
            color: var(--sca-black);
            font-family: var(--sca-font-ui);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }

        .sca-side-option:has(.sca-side-radio:checked) {
            background: var(--sca-yellow);
        }

        .sca-side-option:has(.sca-side-radio:disabled) {
            background: var(--sca-white);
            color: rgba(0,0,0,0.28);
        }

        .sca-side-radio:disabled,
        .sca-side-radio:disabled + .sca-side-label {
            cursor: not-allowed;
            color: rgba(0,0,0,0.28);
        }

        .sca-form-grid {
            display: grid;
            gap: 16px;
        }

        .sca-field {
            display: grid;
            gap: 8px;
        }

        .sca-btn-row {
            display: grid;
            gap: 12px;
        }

        .sca-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 52px;
            padding: 12px 18px;
            border: 1px solid var(--sca-black);
            border-radius: 999px;
            font-family: var(--sca-font-ui);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
        }

        .sca-btn-primary {
            background: var(--sca-black);
            color: var(--sca-white);
        }

        .sca-btn-secondary {
            background: var(--sca-white);
            color: var(--sca-black);
        }

        .sca-btn-ghost {
            background: transparent;
            color: var(--sca-black);
        }

        .sca-recent-list {
            display: grid;
            gap: 10px;
        }

        .sca-recent-item {
            border: 1px solid var(--sca-black);
            border-radius: 10px;
            padding: 12px 14px;
            background: rgba(255,255,255,0.90);
        }

        .sca-toast {
            justify-self: start;
            background: var(--sca-black);
            color: var(--sca-white);
            border-radius: 999px;
            padding: 10px 14px;
            font-size: 14px;
            font-weight: 600;
        }

        @media (min-width: 900px) {
            .sca-header-grid {
                grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
                align-items: end;
            }

            .sca-page-grid {
                grid-template-columns: minmax(280px, 0.6fr) minmax(560px, 1.4fr);
                align-items: start;
            }

            .sca-two-col {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .sca-btn-row {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .sca-toast {
                justify-self: end;
            }
        }

        @media (max-width: 720px) {
            .sca-side-grid {
                grid-template-columns: repeat(3, minmax(0, 72px));
            }

            .sca-display-title {
                white-space: normal;
            }
        }
    </style>

    <div class="sca-shell">
        <div class="sca-top-rule"></div>

        <header class="sca-header">
            <div class="sca-header-grid">
                <div>
                    <img class="sca-wordmark" src="{{ asset('images/SCA_wordmark.png') }}" alt="Secret Chord Analogue">
                    <h1 class="sca-display-title">Play Log Entry</h1>
                </div>

                <div class="sca-header-meta">
                    <div class="sca-meta">Fast, low-friction play logging with record care visibility, cartridge usage tracking, and session-based defaults for cartridge and tonearm.</div>
                    <div class="sca-meta">Get more from the music you love.</div>
                    <div style="display:flex; gap:12px; flex-wrap:wrap; margin-top:8px;">
                        <a href="{{ route('albums.index') }}" style="border:1px solid #000; border-radius:999px; padding:10px 14px; text-decoration:none; color:#000; background:#FFB81C; font-weight:600;">Albums</a>
                        <a href="{{ route('cartridges.index') }}" style="border:1px solid #000; border-radius:999px; padding:10px 14px; text-decoration:none; color:#000; background:#fff; font-weight:600;">Cartridges</a>
                        <a href="{{ route('tonearms.index') }}" style="border:1px solid #000; border-radius:999px; padding:10px 14px; text-decoration:none; color:#000; background:#fff; font-weight:600;">Tonearms</a>
                    </div>
                </div>
            </div>

            <div x-show="toast" x-transition class="sca-toast" x-text="toast"></div>
        </header>

        <main class="sca-page-grid">
            <div class="sca-main-column">
                <section class="sca-panel sca-panel-accent">
                    <div class="sca-panel-head">
                        <div class="sca-panel-title">Search Artist or Album</div>
                        <div class="sca-section-rule"></div>
                    </div>
                    <div class="sca-panel-body">
                        <div class="sca-search-wrap">
                            <div class="sca-meta" x-show="query.length > 0 && !results.length && !searching">No matches found.</div>
                            <div class="sca-field">
                                <input
                                    id="album-search"
                                    x-model="query"
                                    x-on:focus="showAllAlbumsIfEmpty()"
                                    x-on:input.debounce.200ms="searchAlbums()"
                                    type="text"
                                    class="sca-input"
                                    placeholder="Type artist or album name"
                                    autocomplete="off">
                            </div>

                            <div class="sca-result-list" x-show="results.length > 0">
                                <template x-for="album in results" :key="album.id">
                                    <button
                                        type="button"
                                        class="sca-result-card"
                                        :aria-selected="selectedAlbum && selectedAlbum.id === album.id"
                                        @click="selectAlbum(album.id)">
                                        <div class="sca-result-title" x-text="`${album.artist} — ${album.title}`"></div>
                                        <div class="sca-meta" x-text="`${album.format_size}\" / ${album.play_speed} / ${album.side_count} sides${album.storage_location ? ' / ' + album.storage_location : ''}`"></div>
                                    </button>
                                </template>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="sca-panel sca-panel-accent">
                    <div class="sca-panel-head">
                        <div class="sca-panel-title">Selected Album</div>
                        <div class="sca-section-rule"></div>
                    </div>
                    <div class="sca-panel-body">
                        <template x-if="selectedAlbum">
                            <div class="sca-main-column" style="gap:14px;">
                                <div class="sca-album-title">
                                    <div class="sca-album-artist" x-text="selectedAlbum.artist"></div>
                                    <div class="sca-album-name" x-text="selectedAlbum.title"></div>
                                    <div class="sca-meta" x-text="`${selectedAlbum.format_size}\" / ${selectedAlbum.play_speed} / ${selectedAlbum.side_count} sides${selectedAlbum.storage_location ? ' / ' + selectedAlbum.storage_location : ''}`"></div>
                                </div>

                                <div class="sca-two-col">
                                    <div class="sca-subpanel">
                                        <div class="sca-subpanel-title">Record Care</div>
                                        <div class="sca-chip-row">
                                            <span class="sca-badge" :class="recordCare.relaxed ? 'sca-badge-accent' : ''" x-text="`Relaxed ${recordCare.relaxed ? 'Yes' : 'No'}`"></span>
                                            <span class="sca-badge" :class="recordCare.record_restored ? 'sca-badge-inverse' : ''" x-text="`Restored ${recordCare.record_restored ? 'Yes' : 'No'}`"></span>
                                        </div>
                                        <div class="sca-stat-list">
                                            <div class="sca-stat-row">
                                                <div class="sca-stat-label">Relaxed Date</div>
                                                <div class="sca-stat-value" x-text="recordCare.relaxed_date || '—'"></div>
                                            </div>
                                            <div class="sca-stat-row">
                                                <div class="sca-stat-label">Last Record Restore</div>
                                                <div class="sca-stat-value" x-text="recordCare.last_record_restore_date || '—'"></div>
                                            </div>
                                            <div class="sca-stat-row">
                                                <div class="sca-stat-label">Restore Count</div>
                                                <div class="sca-stat-value" x-text="recordCare.record_restore_count ?? 0"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="sca-subpanel">
                                        <div class="sca-subpanel-title">Album Usage</div>
                                        <div class="sca-stat-list">
                                            <div class="sca-stat-row">
                                                <div class="sca-stat-label">Logged Plays</div>
                                                <div class="sca-stat-value" x-text="albumUsage.logged_plays ?? 0"></div>
                                            </div>
                                        </div>
                                        <div class="sca-main-column" style="gap:8px;">
                                            <template x-for="item in albumUsage.by_cartridge" :key="`${item.cartridge_id ?? 'unknown'}-${item.cartridge_name}`">
                                                <div class="sca-usage-item" :class="item.cartridge_id === form.cartridge_id ? 'sca-usage-item-current' : ''">
                                                    <div class="sca-meta" style="color:black;" x-text="item.cartridge_name"></div>
                                                    <div class="sca-result-title" x-text="item.play_count"></div>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </div>

                                <div class="sca-inverse-panel">
                                    <div>
                                        <div class="sca-subpanel-title" style="color:rgba(255,255,255,0.72);">Selected Cartridge Usage</div>
                                        <div class="sca-chip-row" style="margin-top:10px;">
                                            <span class="sca-result-title" style="color:white;" x-text="selectedCartridgeUsage.cartridge_name || '—'"></span>
                                            <span class="sca-badge sca-badge-accent" x-text="selectedCartridgeUsage.cartridge_type || '—'"></span>
                                        </div>
                                    </div>
                                    <div class="sca-stat-list">
                                        <div class="sca-stat-row">
                                            <div class="sca-stat-label">Tonearm</div>
                                            <div class="sca-stat-value" x-text="selectedCartridgeUsage.tonearm_name || '—'"></div>
                                        </div>
                                        <div class="sca-stat-row">
                                            <div class="sca-stat-label">Total Hours</div>
                                            <div class="sca-stat-value" x-text="formatHours(selectedCartridgeUsage.total_hours)"></div>
                                        </div>
                                        <div class="sca-stat-row">
                                            <div class="sca-stat-label">Since Retip</div>
                                            <div class="sca-stat-value" x-text="formatHours(selectedCartridgeUsage.hours_since_retip)"></div>
                                        </div>
                                        <div class="sca-stat-row">
                                            <div class="sca-stat-label">Remaining Life</div>
                                            <div class="sca-stat-value" x-text="formatHours(selectedCartridgeUsage.remaining_hours)"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>

                        <template x-if="!selectedAlbum">
                            <div class="sca-meta">Select an album from search results to see record care, usage, and cartridge context.</div>
                        </template>
                    </div>
                </section>

                <section class="sca-panel sca-panel-accent">
                    <div class="sca-panel-head">
                        <div class="sca-panel-title">Side Played</div>
                        <div class="sca-section-rule"></div>
                    </div>
                    <div class="sca-panel-body">
                        <div class="sca-side-grid">
                            <template x-for="side in [1,2,3,4,5,6]" :key="side">
                                <div class="sca-side-option">
                                    <input
                                        class="sca-side-radio"
                                        type="radio"
                                        name="side_number"
                                        :id="`side-${side}`"
                                        :value="side"
                                        x-model.number="form.side_number"
                                        :disabled="!selectedAlbum || side > selectedAlbum.side_count"
                                        @change="selectSide(side)">
                                    <label
                                        class="sca-side-label"
                                        :for="`side-${side}`"
                                        x-text="side"></label>
                                </div>
                            </template>
                        </div>
                    </div>
                </section>
            </div>

            <aside class="sca-side-column">
                <section class="sca-panel sca-panel-accent">
                    <div class="sca-panel-head">
                        <div class="sca-panel-title">Play Details</div>
                        <div class="sca-section-rule"></div>
                    </div>
                    <div class="sca-panel-body">
                        <div class="sca-form-grid">
                            <div class="sca-field">
                                <label for="played-at" class="sca-label">Date</label>
                                <input id="played-at" x-model="form.played_at" type="date" class="sca-input">
                            </div>

                            <div class="sca-field">
                                <label for="play-time" class="sca-label">Play Time</label>
                                <input id="play-time" x-model="form.play_time_minutes" type="number" min="0" step="0.1" class="sca-input" placeholder="Auto-filled from side timing">
                            </div>

                            <div class="sca-field">
                                <label for="cartridge" class="sca-label">Cartridge</label>
                                <select id="cartridge" x-model.number="form.cartridge_id" @change="cartridgeChanged" class="sca-select">
                                    <template x-for="cartridge in cartridges" :key="cartridge.id">
                                        <option :value="cartridge.id" x-text="`${cartridge.name} (${cartridge.type})`"></option>
                                    </template>
                                </select>
                            </div>

                            <div class="sca-field">
                                <label for="tonearm" class="sca-label">Tonearm</label>
                                <input id="tonearm" :value="currentTonearmName()" readonly type="text" class="sca-input">
                            </div>

                            <div class="sca-field">
                                <button type="button" class="sca-btn sca-btn-ghost" @click="noteOpen = !noteOpen" x-text="noteOpen ? 'Hide Note' : '+ Add Note'"></button>
                            </div>

                            <div class="sca-field" x-show="noteOpen">
                                <label for="play-note" class="sca-label">Note</label>
                                <textarea id="play-note" x-model="form.notes" class="sca-textarea" placeholder="Optional note"></textarea>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="sca-panel sca-panel-accent">
                    <div class="sca-panel-head">
                        <div class="sca-panel-title">Actions</div>
                        <div class="sca-section-rule"></div>
                    </div>
                    <div class="sca-panel-body">
                        <div class="sca-btn-row">
                            <button type="button" class="sca-btn sca-btn-primary" @click="save(false)">Save Play</button>
                            <button type="button" class="sca-btn sca-btn-secondary" @click="save(true)">Save + Same Album</button>
                        </div>
                    </div>
                </section>

                <section class="sca-panel sca-panel-accent">
                    <div class="sca-panel-head">
                        <div class="sca-panel-title">Recent Plays</div>
                        <div class="sca-section-rule"></div>
                    </div>
                    <div class="sca-panel-body">
                        <div class="sca-recent-list">
                            <template x-for="item in recentPlays" :key="item.id">
                                <div class="sca-recent-item">
                                    <div class="sca-meta" x-text="`${item.played_at} • ${item.artist ? item.artist + ' • ' : ''}${item.title} • Side ${item.side_number}${item.cartridge_name ? ' • ' + item.cartridge_name : ''}`"></div>
                                </div>
                            </template>
                        </div>
                    </div>
                </section>
            </aside>
        </main>
    </div>
</div>

<script>
function playLogEntry() {
    return {
        isLoading: false,
        toast: '',
        searching: false,
        query: '',
        noteOpen: false,
        results: [],
        cartridges: [],
        recentPlays: [],
        selectedAlbum: null,
        sides: [],
        recordCare: {},
        albumUsage: { logged_plays: 0, by_cartridge: [] },
        selectedCartridgeUsage: {},
        form: {
            played_at: '',
            album_id: null,
            side_number: null,
            play_time_minutes: '',
            cartridge_id: null,
            tonearm_id: null,
            notes: '',
        },

        async init() {
            this.isLoading = true;
            try {
                const response = await fetch(this.$root.dataset.initUrl, {
                    headers: { 'Accept': 'application/json' }
                });
                const data = await response.json();

                const now = new Date();
                const localToday =
                    now.getFullYear() +
                    '-' +
                    String(now.getMonth() + 1).padStart(2, '0') +
                    '-' +
                    String(now.getDate()).padStart(2, '0');

                this.form.played_at = data.today || localToday;
                this.cartridges = data.cartridges || [];
                this.recentPlays = data.recent_plays || [];

                this.form.cartridge_id =
                    data.last_selected?.cartridge_id ||
                    data.defaults?.cartridge_id ||
                    this.cartridges[0]?.id ||
                    null;

                this.applyCurrentCartridgeDefaults();
            } catch (e) {
                this.showToast('Unable to load Play Log data.');
            } finally {
                this.isLoading = false;
            }
        },

        applyCurrentCartridgeDefaults() {
            const selected = this.cartridges.find(
                c => Number(c.id) === Number(this.form.cartridge_id)
            );

            if (selected) {
                this.form.tonearm_id = selected.tonearm_id || null;
            } else {
                this.form.tonearm_id = null;
            }
        },

        async showAllAlbumsIfEmpty() {
            if (this.query.trim() !== '') {
                return;
            }

            try {
                const response = await fetch(`${this.$root.dataset.searchUrl}?all=1`, {
                    headers: { 'Accept': 'application/json' }
                });

                const data = await response.json();
                this.results = data.results || [];
            } catch (e) {
                this.results = [];
            } finally {
                this.searching = false;
            }
        },

        async searchAlbums() {
            const q = this.query.trim();

            if (q.length < 1) {
                this.results = [];
                return;
            }

            try {
                this.searching = true;
                const response = await fetch(`${this.$root.dataset.searchUrl}?q=${encodeURIComponent(q)}`, {
                    headers: { 'Accept': 'application/json' }
                });

                const data = await response.json();
                this.results = data.results || [];
            } catch (e) {
                this.results = [];
            } finally {
                this.searching = false;
            }
        },

        async selectAlbum(albumId) {
            this.isLoading = true;
            try {
                const contextUrl = this.$root.dataset.contextUrlTemplate.replace('__ALBUM__', albumId);
                const response = await fetch(`${contextUrl}?cartridge_id=${this.form.cartridge_id ?? ''}`, {
                    headers: { 'Accept': 'application/json' }
                });

                const data = await response.json();
                this.selectedAlbum = data.album;
                this.sides = data.sides || [];
                this.recordCare = data.record_care || {};
                this.albumUsage = data.album_usage || { logged_plays: 0, by_cartridge: [] };
                this.selectedCartridgeUsage = data.selected_cartridge_usage || {};
                this.form.album_id = data.album?.id || null;
                this.form.side_number = null;
                this.form.play_time_minutes = '';
                this.query = `${data.album.artist} - ${data.album.title}`;
                this.results = [];
            } catch (e) {
                this.showToast('Unable to load album context.');
            } finally {
                this.isLoading = false;
            }
        },

        selectSide(sideNumber) {
            this.form.side_number = sideNumber;
            const match = this.sides.find(side => Number(side.side_number) === Number(sideNumber));
            this.form.play_time_minutes = match?.default_play_time_minutes ?? '';
        },

        async cartridgeChanged() {
            this.applyCurrentCartridgeDefaults();

            if (this.selectedAlbum?.id) {
                await this.selectAlbum(this.selectedAlbum.id);
            }
        },

        currentTonearmName() {
            const selected = this.cartridges.find(c => Number(c.id) === Number(this.form.cartridge_id));
            return selected?.tonearm_name || this.selectedCartridgeUsage?.tonearm_name || '';
        },

        formatHours(value) {
            if (value === null || value === undefined || value === '') {
                return '—';
            }

            return `${Number(value).toFixed(1)} hrs`;
        },

        async save(keepAlbum) {
            const payload = { ...this.form, keep_album: keepAlbum };

            try {
                const response = await fetch(this.$root.dataset.storeUrl, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
                    },
                    body: JSON.stringify(payload),
                });

                if (!response.ok) {
                    const error = await response.json().catch(() => ({ message: 'Unable to save play log entry.' }));
                    this.showToast(error.message || 'Unable to save play log entry.');
                    return;
                }

                const data = await response.json();
                this.showToast(data.message || 'Play logged successfully.');

                if (data.saved) {
                    this.recentPlays.unshift({
                        id: data.saved.id,
                        played_at: data.saved.played_at,
                        album_id: data.saved.album_id,
                        artist: data.saved.artist,
                        title: data.saved.title,
                        side_number: data.saved.side_number,
                        cartridge_name: data.saved.cartridge_name,
                    });
                    this.recentPlays = this.recentPlays.slice(0, 10);
                }

                if (data.ui_state?.last_selected) {
                    this.form.cartridge_id = data.ui_state.last_selected.cartridge_id;
                    this.applyCurrentCartridgeDefaults();
                }

                this.albumUsage = data.updated_album_usage || this.albumUsage;
                this.selectedCartridgeUsage = data.updated_selected_cartridge_usage || this.selectedCartridgeUsage;

                if (keepAlbum) {
                    this.form.side_number = null;
                    this.form.play_time_minutes = '';
                    this.form.notes = '';
                    return;
                }

                this.selectedAlbum = null;
                this.sides = [];
                this.recordCare = {};
                this.albumUsage = { logged_plays: 0, by_cartridge: [] };
                this.selectedCartridgeUsage = {};
                this.form.album_id = null;
                this.form.side_number = null;
                this.form.play_time_minutes = '';
                this.form.notes = '';
                this.query = '';
                this.results = [];
            } catch (e) {
                this.showToast('Unable to save play log entry.');
            }
        },

        showToast(message) {
            this.toast = message;
            window.clearTimeout(this._toastTimer);
            this._toastTimer = window.setTimeout(() => {
                this.toast = '';
            }, 2200);
        },
    };
}
</script>
@endsection