{{-- ───── Styles + Alpine component for the entity notes section ─────
     Include ONCE per page that renders `admin.partials.entity-notes`.
     Pushed into the page's existing `styles` and `scripts` stacks so
     it integrates with the show-page asset pipeline.

     Buttons are styled self-contained (don't rely on a global
     `.btn-primary`) so the partial drops into any show page without
     additional CSS coordination.
─────────────────────────────────────────────────────────────────── --}}
@push('styles')
<style>
    /* The `+` icon that sits in the card header (next to the count).
       role=button + tabindex makes it keyboard-reachable; stopping the
       parent <button>'s collapse-toggle is handled via @click.stop in
       the markup. */
    .rd-notes-add-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 26px; height: 26px;
        background: #4f46e5;
        color: #fff;
        border-radius: 999px;
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        user-select: none;
        margin-inline-start: 6px;
        transition: background .12s, transform .12s;
    }
    .rd-notes-add-btn:hover  { background: #4338ca; transform: scale(1.08); }
    .rd-notes-add-btn:active { transform: scale(.96); }
    .rd-notes-add-btn:focus-visible { outline: 2px solid #c7d2fe; outline-offset: 2px; }

    .rd-notes-composer {
        background: #fff;
        border: 1px solid var(--rd-border, #e5e7eb);
        border-radius: 10px;
        padding: 12px;
        margin-bottom: 14px;
    }
    .rd-notes-textarea {
        width: 100%;
        min-height: 80px;
        padding: 10px 12px;
        border: 1px solid var(--rd-border, #e5e7eb);
        border-radius: 8px;
        font: inherit;
        font-size: 13px;
        line-height: 1.6;
        color: var(--na-text, #0f172a);
        resize: vertical;
        outline: none;
        transition: border-color .12s, box-shadow .12s;
        background: #fff;
        box-sizing: border-box;
    }
    .rd-notes-textarea:focus {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99,102,241,.12);
    }
    .rd-notes-composer__bar {
        display: flex; gap: 8px; justify-content: flex-end;
        margin-top: 10px;
    }

    /* Composer buttons — self-contained so we don't rely on a
       project-wide btn-primary class that varies per page. */
    .rd-notes-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 16px;
        height: 34px;
        border-radius: 8px;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid transparent;
        transition: background .12s, border-color .12s, color .12s, transform .08s;
    }
    .rd-notes-btn:active:not(:disabled) { transform: translateY(1px); }
    .rd-notes-btn:disabled { opacity: .55; cursor: not-allowed; }
    .rd-notes-btn--primary {
        background: #4f46e5;
        color: #fff;
    }
    .rd-notes-btn--primary:hover:not(:disabled) { background: #4338ca; }
    .rd-notes-btn--ghost {
        background: #fff;
        color: var(--na-text, #0f172a);
        border-color: var(--rd-border, #e5e7eb);
    }
    .rd-notes-btn--ghost:hover:not(:disabled) { background: #f8fafc; border-color: #cbd5e1; }

    /* Empty-state card. */
    .rd-notes-empty {
        margin: 0;
        padding: 20px 14px;
        text-align: center;
        font-size: 13px;
        color: var(--na-muted, #64748b);
        background: #f8fafc;
        border: 1px dashed var(--rd-border, #e5e7eb);
        border-radius: 10px;
    }

    /* Individual note row. Body + author + actions are STACKED so the
       button row sits beneath the metadata (per UX direction). */
    .rd-notes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
    .rd-note {
        background: #fff;
        border: 1px solid var(--rd-border, #e5e7eb);
        border-radius: 10px;
        padding: 12px 14px;
        transition: border-color .15s ease;
    }
    .rd-note:hover { border-color: #c7d2fe; }
    .rd-note__body {
        margin: 0 0 10px;
        font-size: 14px;
        line-height: 1.6;
        color: var(--na-text, #0f172a);
        white-space: pre-wrap;
        word-break: break-word;
    }
    /* Footer row — author/timestamp + edit/delete buttons share ONE
       row with space-between. Wraps on very narrow widths so the
       buttons drop beneath the author line rather than overlap. */
    .rd-note__footer {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        padding-top: 8px;
        border-top: 1px dashed var(--rd-border, #e5e7eb);
    }
    .rd-note__author {
        font-size: 12px;
        color: var(--na-muted, #64748b);
        display: inline-flex; align-items: center; gap: 6px;
    }
    .rd-note__author strong { color: var(--na-text, #0f172a); font-weight: 600; }
    .rd-note__time { font-size: 11px; }

    .rd-note__actions {
        display: inline-flex; gap: 6px; flex-wrap: wrap;
    }
    /* Icon-only square buttons — no label text. Keep them small + low
       contrast so they don't compete with the note body. */
    .rd-note__btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 26px; height: 26px;
        padding: 0;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 6px;
        color: var(--na-muted, #64748b);
        cursor: pointer;
        transition: background .12s, color .12s, border-color .12s;
    }
    .rd-note__btn svg { flex-shrink: 0; }
    .rd-note__btn--edit:hover  { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
    .rd-note__btn--delete:hover{ background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('entityNotes', (cfg) => ({
        // Hydrate the list from the server-rendered initial payload so
        // the first paint already shows the notes. Subsequent mutations
        // splice this array directly.
        notes:      cfg.initial ?? [],
        adding:     false,
        draft:      '',
        editingId:  null,
        editDraft:  '',
        busy:       false,
        cfg,

        get i18n() { return this.cfg.i18n; },

        startAdd() {
            // Ensure the card is expanded — the + button stops the
            // collapse toggle, but we still want the body visible so
            // the composer is reachable. Force `data-open=true` on
            // the closest card wrapper.
            const card = this.$root;
            if (card && card.dataset.open !== 'true') card.dataset.open = 'true';
            this.adding = true;
            this.draft  = '';
            this.$nextTick(() => this.$refs.composer?.focus());
        },
        cancelAdd() {
            this.adding = false;
            this.draft  = '';
        },
        async submitAdd() {
            const body = this.draft.trim();
            if (! body || this.busy) return;
            this.busy = true;
            try {
                const res = await fetch(this.cfg.urls.store, {
                    method: 'POST',
                    headers: this._headers(),
                    body: JSON.stringify({
                        type: this.cfg.subjectType,
                        id:   this.cfg.subjectId,
                        body,
                    }),
                });
                const data = await res.json().catch(() => ({}));
                if (! res.ok || data.ok === false) {
                    window.alert(this.i18n.failed + ' ' + (data.message || data.error || res.statusText || ''));
                    return;
                }
                this.notes.unshift(data.note);
                this.cancelAdd();
            } catch (err) {
                window.alert(this.i18n.failed + ' ' + (err.message || err));
            } finally {
                this.busy = false;
            }
        },

        startEdit(note) {
            this.editingId = note.id;
            this.editDraft = note.body;
        },
        cancelEdit() {
            this.editingId = null;
            this.editDraft = '';
        },
        async submitEdit(note) {
            const body = this.editDraft.trim();
            if (! body || this.busy) return;
            this.busy = true;
            try {
                const res = await fetch(`${this.cfg.urls.base}/${note.id}`, {
                    method: 'PATCH',
                    headers: this._headers(),
                    body: JSON.stringify({ body }),
                });
                const data = await res.json().catch(() => ({}));
                if (! res.ok || data.ok === false) {
                    window.alert(this.i18n.failed + ' ' + (data.message || data.error || res.statusText || ''));
                    return;
                }
                const idx = this.notes.findIndex(n => n.id === note.id);
                if (idx >= 0) this.notes.splice(idx, 1, data.note);
                this.cancelEdit();
            } catch (err) {
                window.alert(this.i18n.failed + ' ' + (err.message || err));
            } finally {
                this.busy = false;
            }
        },

        async deleteOne(note) {
            if (! window.confirm(this.i18n.confirm_delete)) return;
            this.busy = true;
            try {
                const res = await fetch(`${this.cfg.urls.base}/${note.id}`, {
                    method: 'DELETE',
                    headers: this._headers(),
                });
                const data = await res.json().catch(() => ({}));
                if (! res.ok || data.ok === false) {
                    window.alert(this.i18n.failed + ' ' + (data.message || data.error || res.statusText || ''));
                    return;
                }
                this.notes = this.notes.filter(n => n.id !== note.id);
            } catch (err) {
                window.alert(this.i18n.failed + ' ' + (err.message || err));
            } finally {
                this.busy = false;
            }
        },

        _headers() {
            return {
                'Content-Type':     'application/json',
                'Accept':           'application/json',
                'X-CSRF-TOKEN':     this.cfg.csrf,
                'X-Requested-With': 'XMLHttpRequest',
            };
        },
    }));
});
</script>
@endpush