@extends('layouts.admin')

@section('title', 'Compose Message')

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <a href="{{ route('admin.messages') }}" class="btn-back">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Back
        </a>
        <h1 class="page-title">Compose Message</h1>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('admin.messages.send') }}">
            @csrf

            <div class="form-section">
                <div class="form-group">
                    <label for="recipient_type" class="form-label">Recipient Type <span class="required">*</span></label>
                    <select id="recipient_type" name="recipient_type" class="form-select @error('recipient_type') is-invalid @enderror" required>
                        <option value="individual">Individual Customer</option>
                        <option value="bulk">Bulk (Multiple Customers)</option>
                        <option value="all">All Customers</option>
                        <option value="email">Direct Email (any address)</option>
                    </select>
                    @error('recipient_type')
                    <span class="form-error">{{ $message }}</span>
                    @enderror
                </div>

                <div id="individual-search" class="form-group">
                    <label for="recipient_id" class="form-label">Select Customer <span class="required">*</span></label>
                    <input type="text" id="recipient_search" class="form-input" placeholder="Search by name or email..." autocomplete="off">
                    <input type="hidden" id="recipient_id" name="recipient_id">
                    <div id="recipient_results" class="search-results-dropdown" style="display:none;"></div>
                    <div id="selected-recipient" class="selected-recipient" style="display:none;">
                        <span id="selected-recipient-name"></span>
                        <button type="button" class="btn-remove" onclick="clearRecipient()">&times;</button>
                    </div>
                </div>

                <div id="bulk-search" class="form-group" style="display:none;">
                    <label for="bulk_search" class="form-label">Select Customers</label>
                    <input type="text" id="bulk_search" class="form-input" placeholder="Search and add customers..." autocomplete="off">
                    <div id="bulk_results" class="search-results-dropdown" style="display:none;"></div>
                    <div id="bulk-recipients" class="tag-list"></div>
                    <input type="hidden" id="recipients" name="recipients">
                </div>

                <div id="email-recipient" class="form-group" style="display:none;">
                    <label for="recipient_email" class="form-label">Email Address <span class="required">*</span></label>
                    <input type="email" id="recipient_email" name="recipient_email" class="form-input @error('recipient_email') is-invalid @enderror" value="{{ old('recipient_email') }}" placeholder="Type any email address — or search below" autocomplete="off">
                    <div id="email_results" class="search-results-dropdown" style="display:none;"></div>
                    <span class="form-help">Sends a direct email from the system. If the address belongs to a registered user, they also receive an in-app message.</span>
                    @error('recipient_email')
                    <span class="form-error">{{ $message }}</span>
                    @enderror
                </div>
            </div>

            <div class="form-section" style="margin-top: 1rem;">
                <div class="form-grid form-grid-2">
                    <div class="form-group">
                        <label for="type" class="form-label">Message Type</label>
                        <select id="type" name="type" class="form-select @error('type') is-invalid @enderror">
                            <option value="system">System</option>
                            <option value="announcement">Announcement</option>
                            <option value="alert">Alert</option>
                            <option value="notification">Notification</option>
                        </select>
                        @error('type')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="subject" class="form-label">Subject <span class="required">*</span></label>
                        <input type="text" id="subject" name="subject" class="form-input @error('subject') is-invalid @enderror" value="{{ old('subject') }}" required>
                        @error('subject')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="form-group" style="margin-top: 1rem;">
                <label for="body" class="form-label">Message Body <span class="required">*</span></label>
                <textarea id="body" name="body" class="form-input @error('body') is-invalid @enderror" rows="10" required placeholder="Write your message here...">{{ old('body') }}</textarea>
                @error('body')
                <span class="form-error">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-actions" style="margin-top: 2rem;">
                <label class="form-check" style="margin-right: auto;">
                    <input type="checkbox" name="notify_email" value="1" {{ old('notify_email') ? 'checked' : '' }}>
                    <span>Also send as email to recipients</span>
                </label>
                <a href="{{ route('admin.messages') }}" class="btn btn-outline">Cancel</a>
                <button type="submit" class="btn btn-primary">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 8l12-5-5 12-2-5-5-2z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    Send Message
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('recipient_type').addEventListener('change', function() {
    document.getElementById('individual-search').style.display = this.value === 'individual' ? 'block' : 'none';
    document.getElementById('bulk-search').style.display = this.value === 'bulk' ? 'block' : 'none';
    document.getElementById('email-recipient').style.display = this.value === 'email' ? 'block' : 'none';
});

var searchTimeout;
var bulkRecipients = {};

function searchCustomers(inputEl, resultsEl, onPick) {
    var q = inputEl.value;
    if (q.length < 2) { resultsEl.style.display = 'none'; return; }
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
        fetch('{{ route("admin.api.customers.search") }}?q=' + encodeURIComponent(q), {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            resultsEl.innerHTML = '';
            if (data.length === 0) { resultsEl.style.display = 'none'; return; }
            data.forEach(function(user) {
                var div = document.createElement('div');
                div.className = 'search-result-item';
                div.textContent = user.name + ' (' + user.email + ')';
                div.onclick = function() { onPick(user); resultsEl.style.display = 'none'; inputEl.value = ''; };
                resultsEl.appendChild(div);
            });
            resultsEl.style.display = 'block';
        });
    }, 300);
}

document.getElementById('recipient_search').addEventListener('input', function() {
    searchCustomers(this, document.getElementById('recipient_results'), function(user) {
        document.getElementById('recipient_id').value = user.id;
        document.getElementById('selected-recipient-name').textContent = user.name;
        document.getElementById('selected-recipient').style.display = 'flex';
        document.getElementById('recipient_search').style.display = 'none';
    });
});

document.getElementById('bulk_search').addEventListener('input', function() {
    searchCustomers(this, document.getElementById('bulk_results'), function(user) {
        if (bulkRecipients[user.id]) return;
        bulkRecipients[user.id] = user.name + ' (' + user.email + ')';
        renderBulkTags();
    });
});

document.getElementById('recipient_email').addEventListener('input', function() {
    searchCustomers(this, document.getElementById('email_results'), function(user) {
        document.getElementById('recipient_email').value = user.email;
        document.getElementById('email_results').style.display = 'none';
    });
});

function renderBulkTags() {
    var container = document.getElementById('bulk-recipients');
    container.innerHTML = '';
    Object.keys(bulkRecipients).forEach(function(id) {
        var tag = document.createElement('span');
        tag.className = 'tag-item';
        tag.textContent = bulkRecipients[id];
        var remove = document.createElement('button');
        remove.type = 'button';
        remove.className = 'tag-remove';
        remove.innerHTML = '&times;';
        remove.onclick = function() { delete bulkRecipients[id]; renderBulkTags(); };
        tag.appendChild(remove);
        container.appendChild(tag);
    });
    document.getElementById('recipients').value = Object.keys(bulkRecipients).join(',');
}

function clearRecipient() {
    document.getElementById('recipient_id').value = '';
    document.getElementById('selected-recipient').style.display = 'none';
    document.getElementById('recipient_search').style.display = 'block';
    document.getElementById('recipient_search').value = '';
}

@if($customer ?? null)
    document.getElementById('recipient_id').value = {{ $customer->id }};
    document.getElementById('selected-recipient-name').textContent = '{{ $customer->name }} ({{ $customer->email }})';
    document.getElementById('selected-recipient').style.display = 'flex';
    document.getElementById('recipient_search').style.display = 'none';
@endif
</script>
@endpush