<x-mb-layout pageTitle="Chats">
    @push('styles')
        <link href="{{ asset('assets/mb/css/creatives.css') }}?v={{ filemtime(public_path('assets/mb/css/creatives.css')) }}" rel="stylesheet">
    @endpush

    <div class="mb-page">
        <div class="mb-page-inner">

            <div class="mb-page-head">
                <div>
                    <h1 class="mb-page-title">Chats</h1>
                    <p class="mb-page-sub">{{ $stats['all'] }} total campaign conversations</p>
                </div>
                <div class="mb-page-head-actions">
                    <a href="{{ route('chat.new') }}" class="mb-btn-primary mb-btn-lg" wire:navigate>
                        <i class="bi bi-plus-lg"></i>New Chat
                    </a>
                </div>
            </div>

            <div class="mb-stats">
                <div class="mb-stat">
                    <span class="mb-stat-icon is-all"><i class="bi bi-chat-dots"></i></span>
                    <span><span class="mb-stat-num">{{ $stats['all'] }}</span><span class="mb-stat-label d-block">Total Chats</span></span>
                </div>
                <div class="mb-stat">
                    <span class="mb-stat-icon is-ok"><i class="bi bi-clock-history"></i></span>
                    <span><span class="mb-stat-num">{{ $stats['today'] }}</span><span class="mb-stat-label d-block">Active Today</span></span>
                </div>
            </div>

            <div class="mb-card">
                <form class="mb-toolbar" method="GET" action="{{ route('chats.index') }}">
                    <label class="mb-search">
                        <i class="bi bi-search"></i>
                        <input type="search" name="q" value="{{ request('q') }}" placeholder="Search chats…" aria-label="Search chats">
                    </label>
                    <div class="mb-toolbar-end">
                        <button type="submit" class="mb-btn-ghost"><i class="bi bi-search"></i>Search</button>
                        @if (request('q'))
                            <a href="{{ route('chats.index') }}" class="mb-btn-ghost">Clear</a>
                        @endif
                    </div>
                </form>

                <div class="mb-table-wrap">
                    <table class="mb-table">
                        <thead>
                            <tr>
                                <th>Conversation</th>
                                <th>Last Active</th>
                                <th>Created</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($conversationsList as $chat)
                                <tr>
                                    <td>
                                        <a href="{{ route('chat.show', ['conversation' => $chat->id]) }}" class="fw-semibold text-decoration-none d-flex align-items-center gap-2" style="color: var(--mb-text);" wire:navigate>
                                            <span class="mb-stat-icon is-all" style="width: 28px; height: 28px; font-size: .8rem; margin: 0;">
                                                <i class="bi bi-chat-left-text"></i>
                                            </span>
                                            <span>{{ $chat->title ?: 'Untitled conversation' }}</span>
                                        </a>
                                    </td>
                                    <td>
                                        <span class="text-muted">{{ $chat->updated_at ? $chat->updated_at->diffForHumans() : '—' }}</span>
                                    </td>
                                    <td>
                                        <span class="text-muted">{{ $chat->created_at ? $chat->created_at->format('M d, Y') : '—' }}</span>
                                    </td>
                                    <td class="text-end mb-td-actions">
                                        <a href="{{ route('chat.show', ['conversation' => $chat->id]) }}" class="mb-btn-secondary mb-btn-sm" wire:navigate>
                                            <i class="bi bi-arrow-right"></i> Open
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-5 text-muted">
                                        <div class="mb-2"><i class="bi bi-chat-square-dots" style="font-size: 2rem;"></i></div>
                                        <div>No chats found.</div>
                                        <a href="{{ route('chat.new') }}" class="btn btn-sm btn-outline-primary mt-3" wire:navigate>
                                            Start a new chat
                                        </a>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if ($conversationsList->hasPages())
                    <div class="mb-table-foot">
                        {{ $conversationsList->links() }}
                    </div>
                @endif
            </div>

        </div>
    </div>
</x-mb-layout>
