<div class="container-fluid py-4">
    <x-title>
        Communication Templates
        <x-slot:buttons>
            @canany(['templates.view', 'templates.create', 'templates.edit'])
                <button wire:click="openCategoryPanel" class="btn btn-outline-secondary me-2">
                    <i class="mdi mdi-folder-cog-outline me-1"></i>Manage categories
                </button>
            @endcanany
            @can('templates.create')
                <a wire:navigate href="{{ route('templates.create') }}" wire:navigate class="btn btn-primary">
                    <i class="mdi mdi-plus me-1"></i>New template
                </a>
            @endcan
        </x-slot:buttons>
    </x-title>

    @if($showCategoryForm)
        <div class="card mb-4 shadow-sm border-info">
            <div class="card-body">
                <h5 class="card-title">Add New Category</h5>
                <div class="input-group">
                    <input type="text" wire:model="newCategoryName" class="form-control" placeholder="Category Name...">
                    @can('templates.create')
                        <button wire:click="saveCategory" class="btn btn-info text-white">Save Category</button>
                    @endcan
                </div>
                @error('newCategoryName') <small class="text-danger">{{ $message }}</small> @enderror
            </div>
        </div>
    @endif

    {{-- Categories offcanvas --}}
    @if($showCategoryPanel)
        <div class="offcanvas offcanvas-end show" tabindex="-1"
             style="visibility: visible; --bs-offcanvas-width: 520px;">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title">
                    <i class="mdi mdi-folder-cog-outline me-1"></i>Manage categories
                </h5>
                <button type="button" class="btn-close" wire:click.prevent="closeCategoryPanel"></button>
            </div>
            <div class="offcanvas-body">
                @error('categoryName')
                <div class="alert alert-danger py-2 small">{{ $message }}</div>
                @enderror

                @if($editingCategoryId === null)
                    @can('templates.create')
                        <button type="button" class="btn btn-primary btn-sm mb-3" wire:click="newCategory">
                            <i class="mdi mdi-plus me-1"></i>New category
                        </button>
                    @endcan
                @else
                    <div class="card mb-3 border-primary">
                        <div class="card-body">
                            <h6 class="mb-2">
                                {{ $editingCategoryId ? 'Edit category' : 'New category' }}
                            </h6>
                            <form wire:submit.prevent="saveCategory">
                                <div class="input-group">
                                    <input type="text"
                                           class="form-control"
                                           wire:model="categoryName"
                                           placeholder="Category name..."
                                           autofocus>
                                    <button type="submit" class="btn btn-success">
                                        <i class="mdi mdi-content-save"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary"
                                            wire:click="cancelCategoryEdit">
                                        Cancel
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                @endif

                <div class="list-group">
                    @forelse($categories as $cat)
                        <div class="list-group-item d-flex justify-content-between align-items-center"
                             wire:key="cat-{{ $cat->id }}">
                            <div>
                                <div class="fw-semibold">{{ $cat->name }}</div>
                                <small class="text-muted">
                                    {{ $cat->templates_count }} template{{ $cat->templates_count === 1 ? '' : 's' }}
                                </small>
                            </div>
                            <div class="btn-group btn-group-sm">
                                @can('templates.edit')
                                    <button class="btn btn-outline-primary"
                                            wire:click="editCategory({{ $cat->id }})"
                                            title="Rename">
                                        <i class="mdi mdi-pencil"></i>
                                    </button>
                                @endcan
                                @can('templates.delete')
                                    <button class="btn btn-outline-danger"
                                            wire:click="deleteCategory({{ $cat->id }})"
                                            wire:confirm="Delete category &quot;{{ $cat->name }}&quot;?"
                                            @disabled($cat->templates_count > 0)
                                            title="{{ $cat->templates_count > 0 ? 'Cannot delete — category is in use' : 'Delete' }}">
                                        <i class="mdi mdi-delete"></i>
                                    </button>
                                @endcan
                            </div>
                        </div>
                    @empty
                        <div class="text-muted text-center py-4">
                            <i class="mdi mdi-folder-outline" style="font-size:2rem;"></i>
                            <div>No categories yet.</div>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
        <div class="offcanvas-backdrop fade show" wire:click="closeCategoryPanel"></div>
    @endif

    {{-- Filters --}}
    <div class="card mb-3">
        <div class="card-body py-3">
            <div class="row g-2 align-items-center">
                <div class="col-md-4">
                    <input type="search" wire:model.live.debounce.400ms="search"
                           class="form-control form-control-sm"
                           placeholder="Search name, key, subject...">
                </div>
                <div class="col-md-2">
                    <select wire:model.live="filterChannel" class="form-select form-select-sm">
                        <option value="">All channels</option>
                        @foreach($channels as $channel)
                            <option value="{{ $channel->value }}">{{ $channel->label() }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <select wire:model.live="filterCategoryId" class="form-select form-select-sm">
                        <option value="">All categories</option>
                        @foreach($categories as $c)
                            <option value="{{ $c->id }}">{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <select wire:model.live="filterActive" class="form-select form-select-sm">
                        <option value="">Any status</option>
                        <option value="1">Active only</option>
                        <option value="0">Inactive only</option>
                    </select>
                </div>
                <div class="col-md-1 text-end">
                    <small class="text-muted">{{ $templates->total() }} total</small>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                <tr>
                    <th>Template</th>
                    <th>Channel</th>
                    <th>Category</th>
                    <th>Default sender</th>
                    <th>Flags</th>
                    <th>Triggers</th>
                    <th>Updated</th>
                    <th class="text-end">Actions</th>
                </tr>
                </thead>
                <tbody>
                @forelse($templates as $template)
                    <tr wire:key="tpl-{{ $template->id }}">
                        <td>
                            <div class="fw-semibold">
                                {{ $template->name }}
                                @if(!$template->is_active)
                                    <span class="badge bg-secondary ms-1">inactive</span>
                                @endif
                            </div>
                            @if($template->subject)
                                <small class="text-muted d-block">{{ $template->subject }}</small>
                            @endif
                            @if($template->key)
                                <small class="text-muted"><code>{{ $template->key }}</code></small>
                            @endif
                        </td>
                        <td>
                            @if($template->channel)
                                <span class="badge bg-{{ $template->channel->color() }}">
                                        <i class="{{ $template->channel->icon() }} me-1"></i>
                                        {{ $template->channel->label() }}
                                    </span>
                            @endif
                        </td>
                        <td>
                            @if($template->category)
                                <span class="badge bg-info text-dark">{{ $template->category->name }}</span>
                            @endif
                        </td>
                        <td class="small text-muted">
                            @if($template->defaultSenderEmail)
                                {{ $template->defaultSenderEmail->email_address }}
                            @elseif($template->defaultSmsSender)
                                {{ $template->defaultSmsSender->label() }}
                            @else
                                —
                            @endif
                        </td>
                        <td>
                            @if($template->allow_manual_send)
                                <span class="badge bg-primary" title="Manual send"><i
                                            class="mdi mdi-cursor-pointer"></i></span>
                            @endif
                            @if($template->allow_automatic_send)
                                <span class="badge bg-warning text-dark" title="Automatic send"><i
                                            class="mdi mdi-robot"></i></span>
                            @endif
                        </td>
                        <td>
                            @if($template->triggers_count > 0)
                                <span class="badge bg-dark">{{ $template->triggers_count }}</span>
                            @else
                                <small class="text-muted">—</small>
                            @endif
                        </td>
                        <td class="small text-muted">{{ $template->updated_at?->diffForHumans() }}</td>
                        <td class="text-end">
                            @can('templates.edit')
                                <a wire:navigate href="{{ route('templates.edit', $template) }}" wire:navigate
                                   class="btn btn-sm btn-outline-primary">Edit</a>
                            @endcan
                            @can('templates.delete')
                                <button
                                        onclick="confirm('Delete this template?') || event.stopImmediatePropagation()"
                                        wire:click="deleteTemplate({{ $template->id }})"
                                        class="btn btn-sm btn-outline-danger"
                                >Delete
                                </button>
                            @endcan
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center py-5 text-muted">
                            <i class="mdi mdi-email-off-outline" style="font-size:2rem;"></i>
                            <div>No templates found.</div>
                            @can('templates.create')
                                <a wire:navigate href="{{ route('templates.create') }}" wire:navigate
                                   class="btn btn-primary btn-sm mt-2">
                                    Create your first template
                                </a>
                            @endcan
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
        <div class="card-footer">
            {{ $templates->links() }}
        </div>
    </div>
</div>
