<div x-data="{
    content: @entangle('content'),
    email_content: @entangle('email_content'),
    setValue() {
        this.$refs.trix.editor.loadHTML(this.content || '');
        this.$refs.trixEmail.editor.loadHTML(this.email_content || '');
    },
    insertToken(token, target) {
        const ref = target === 'email_content' ? this.$refs.trixEmail : this.$refs.trix;
        ref.editor.insertString('%' + token + '%');
        ref.focus();
    }
}"
     x-init="setValue()">

    <div class="card shadow-sm border-0 mb-3">
        <div class="card-header bg-white py-3">
            <h5 class="mb-0">{{ $dsarId ? 'Edit DSAR Type' : 'Create New DSAR Type' }}</h5>
        </div>
        <div class="card-body">
            @if(!empty($unknownAtSave))
                <div class="alert alert-warning py-2 small mb-3">
                    <strong>Unknown placeholders detected:</strong> {{ implode(', ', $unknownAtSave) }}
                    <div class="small mt-1">These will render as literal text (e.g. %{{ $unknownAtSave[0] }}%) in the generated letter.</div>
                </div>
            @endif
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-bold">Name</label>
                    <input type="text" wire:model="display_name" class="form-control @error('display_name') is-invalid @enderror">
                    @error('display_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold">Description</label>
                    <input type="text" wire:model="description" class="form-control @error('description') is-invalid @enderror">
                    @error('description') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3">
        {{-- LEFT: content editors --}}
        <div class="col-lg-7">
            <div class="card shadow-sm border-0 mb-3">
                <div class="card-header bg-white py-2"><strong>Letter Content</strong></div>
                <div class="card-body">
                    <div wire:ignore>
                        <input id="x" type="hidden" name="content">
                        <trix-editor
                                x-ref="trix"
                                input="x"
                                class="trix-content form-control"
                                @trix-change="content = $event.target.value"
                        ></trix-editor>
                    </div>
                    @error('content') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-2">
                    <strong>Email Content</strong>
                    <span class="fw-normal text-secondary small">(optional — falls back to the letter content above if left blank)</span>
                </div>
                <div class="card-body">
                    <div wire:ignore>
                        <input id="email_content_input" type="hidden" name="email_content">
                        <trix-editor
                                x-ref="trixEmail"
                                input="email_content_input"
                                class="trix-content form-control"
                                @trix-change="email_content = $event.target.value"
                        ></trix-editor>
                    </div>
                    @error('email_content') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                </div>
            </div>
        </div>

        {{-- RIGHT: placeholders + live preview --}}
        <div class="col-lg-5">
            <div class="card shadow-sm mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span class="fw-bold"><i class="mdi mdi-code-braces me-1"></i>Available placeholders</span>
                    <small class="text-muted">click to insert</small>
                </div>
                <div class="card-body" style="max-height: 320px; overflow-y: auto;">
                    @foreach($placeholdersByCategory as $category => $group)
                        @if($group->isNotEmpty())
                            <div class="mb-2">
                                <div class="small text-uppercase text-muted fw-bold">{{ $category }}</div>
                                @foreach($group as $p)
                                    <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
                                        <div>
                                            <code class="small">%{{ $p->token }}%</code>
                                            @if($p->description)
                                                <div class="small text-muted">{{ $p->description }}</div>
                                            @endif
                                        </div>
                                        <div class="btn-group btn-group-sm">
                                            <button type="button" class="btn btn-outline-secondary btn-sm"
                                                    @click="insertToken('{{ $p->token }}', 'content')"
                                                    title="Insert into letter content">Letter</button>
                                            <button type="button" class="btn btn-outline-secondary btn-sm"
                                                    @click="insertToken('{{ $p->token }}', 'email_content')"
                                                    title="Insert into email content">Email</button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>

            <div class="card shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span class="fw-bold"><i class="mdi mdi-eye-outline me-1"></i>Live preview</span>
                </div>
                <div class="card-body">
                    <div class="row g-2 mb-2">
                        <div class="col-6">
                            <select wire:model.live="previewClientId" class="form-select form-select-sm">
                                <option value="">Sample client...</option>
                                @foreach($previewClients as $c)
                                    <option value="{{ $c->id }}">{{ $c->name_first }} {{ $c->name_last }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6">
                            <select wire:model.live="previewInstitutionId" class="form-select form-select-sm">
                                <option value="">Sample institution...</option>
                                @foreach($previewInstitutions as $i)
                                    <option value="{{ $i->id }}">{{ $i->display_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    @if(!empty($previewUnknown))
                        <div class="alert alert-warning py-2 small mb-2">
                            Unknown placeholders: {{ implode(', ', $previewUnknown) }}
                        </div>
                    @endif

                    <div class="small text-muted fw-bold mb-1">Letter content</div>
                    <div class="bg-light border rounded p-3 mb-3 overflow-auto rich-text-content" style="max-height: 260px;">
                        {!! $previewContent ?: '<em class="text-muted">Start typing to see a preview...</em>' !!}
                    </div>

                    @if($email_content)
                        <div class="small text-muted fw-bold mb-1">Email content</div>
                        <div class="bg-light border rounded p-3 overflow-auto rich-text-content" style="max-height: 260px;">
                            {!! $previewEmailContent !!}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="mt-3 d-flex justify-content-end gap-2">
        <button type="button" wire:click="cancel" class="btn btn-light border">Cancel</button>
        <button type="button" wire:click="save" class="btn btn-primary px-4">
            <span wire:loading wire:target="save" class="spinner-border spinner-border-sm me-1"></span>
            Save Configuration
        </button>
    </div>

    <style>
        trix-editor {
            min-height: 300px !important;
            max-height: 400px;
            overflow-y: auto;
        }
        /* Custom styles for the preview and editor content */
        .rich-text-content, .trix-content { font-family: initial; line-height: 1.6; }
        .rich-text-content h1, .trix-content h1 { font-size: 1.75rem; font-weight: bold; margin-bottom: 1rem; }
        .rich-text-content h2, .trix-content h2 { font-size: 1.4rem; font-weight: bold; margin-bottom: 0.8rem; }
        .rich-text-content ul, .trix-content ul { padding-left: 1.5rem; }
    </style>
</div>
