@php
    $predefinedResponses = \App\Addons\HelpdeskAutoReply\Models\PredefinedResponse::where('is_active', true)
        ->where(function ($query) use ($ticket) {
            $query->whereNull('department_id')->orWhere('department_id', $ticket->department_id);
        })
        ->orderBy('sort_order')
        ->get();

    $customer = $ticket->customer;
    $prVariables = [
        'name' => $customer->name ?? ($customer->firstname ?? 'Client'),
        'firstname' => $customer->firstname ?? '',
        'lastname' => $customer->lastname ?? '',
        'email' => $customer->email ?? '',
        'ticket_id' => (string) $ticket->id,
        'ticket_uuid' => $ticket->uuid ?? '',
        'department' => $ticket->department->name ?? '',
        'priority' => $ticket->priority ?? '',
        'date' => now()->format('d/m/Y H:i'),
        'app_name' => config('app.name'),
        'app_url' => config('app.url'),
    ];
    $renderedBodies = [];
    foreach ($predefinedResponses as $pr) {
        $renderedBodies[$pr->id] = $pr->renderBody($prVariables);
    }
@endphp

@if ($predefinedResponses->isNotEmpty() && staff_has_permission('admin.helpdesk_autoreply.use_template'))
    <div class="card card-body">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
            <i class="bi bi-chat-quote"></i> {{ __('helpdesk_autoreply::admin.predefined.panel_title') }}
        </h3>

        <div class="mt-3 space-y-2" id="predefined-responses-list">
            @foreach ($predefinedResponses as $pr)
                @php $renderedBody = $renderedBodies[$pr->id]; @endphp
                <div class="bg-white border border-gray-200 rounded-lg p-3 dark:bg-neutral-900 dark:border-neutral-700">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-sm font-medium text-gray-800 dark:text-gray-200">{{ $pr->name }}</span>
                        @if ($pr->department)
                            <span
                                class="inline-flex items-center gap-1.5 py-0.5 px-1.5 rounded-md text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">{{ $pr->department->name }}</span>
                        @endif
                    </div>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-2 line-clamp-2">
                        {{ Str::limit($renderedBody, 100) }}</p>
                    <div class="flex gap-2">
                        <button type="button"
                            class="predefined-copy-btn py-1 px-2 inline-flex items-center gap-1 rounded-md text-xs font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700 transition-colors"
                            data-pr-id="{{ $pr->id }}"
                            title="{{ __('helpdesk_autoreply::admin.predefined.copy_tooltip') }}">
                            <i class="bi bi-clipboard"></i> {{ __('helpdesk_autoreply::admin.predefined.copy') }}
                        </button>
                        @if ($ticket->isOpen())
                            <form method="POST"
                                action="{{ route('admin.helpdesk.tickets.reply', ['ticket' => $ticket]) }}"
                                class="inline">
                                @csrf
                                <input type="hidden" name="content" value="{{ $renderedBody }}">
                                <button type="submit" @if ($pr->close_ticket) name="close" @endif
                                    class="py-1 px-2 inline-flex items-center gap-1 rounded-md text-xs font-medium bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-200 dark:hover:bg-blue-800 transition-colors">
                                    <i class="bi bi-send"></i> {{ __('helpdesk_autoreply::admin.predefined.send') }}
                                </button>
                            </form>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <script>
        var predefinedBodies = @json($renderedBodies);

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.predefined-copy-btn').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    var id = this.getAttribute('data-pr-id');
                    var body = predefinedBodies[id];
                    var self = this;
                    navigator.clipboard.writeText(body).then(function() {
                        var originalText = self.innerHTML;
                        self.innerHTML =
                            '<i class="bi bi-check"></i> {{ __('helpdesk_autoreply::admin.predefined.copied') }}';
                        setTimeout(function() {
                            self.innerHTML = originalText;
                        }, 2000);
                    });
                });
            });
        });
    </script>
@endif