@extends('layouts.app')

@section('title', 'Chatbot AI — Log & Monitoring')

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Chatbot AI — Log & Monitoring</h1>
        <p class="page-subtitle">Pantau performa dan respons AI chatbot secara realtime</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('chatbot.settings') }}" class="btn btn-secondary">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            Pengaturan AI
        </a>
    </div>
</div>

{{-- Stats --}}
<div class="stats-grid" style="grid-template-columns:repeat(4,1fr);margin-bottom:1rem;">
    <div class="stat-card">
        <div class="stat-icon blue">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
        </div>
        <div>
            <div class="stat-value">{{ number_format($stats['today_total']) }}</div>
            <div class="stat-label">Respons Hari Ini</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon yellow">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
        <div>
            <div class="stat-value">{{ number_format($stats['today_escalated']) }}</div>
            <div class="stat-label">Eskalasi Hari Ini</div>
            @if($stats['today_total'] > 0)
            <div class="stat-change" style="color:var(--gray-500);">
                {{ round(($stats['today_escalated'] / $stats['today_total']) * 100, 1) }}% dari total
            </div>
            @endif
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon purple">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
        </div>
        <div>
            <div class="stat-value">{{ number_format($stats['month_total']) }}</div>
            <div class="stat-label">Respons Bulan Ini</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon green">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
        <div>
            <div class="stat-value">{{ $stats['avg_ms'] > 0 ? $stats['avg_ms'] . 'ms' : '—' }}</div>
            <div class="stat-label">Rata-rata Respons</div>
        </div>
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 280px;gap:1rem;align-items:start;">

    {{-- Log Table --}}
    <div>
        {{-- Filter --}}
        <div class="card" style="margin-bottom:1rem;">
            <div class="card-body" style="padding:.75rem 1.25rem;">
                <form method="GET" action="{{ route('chatbot.logs') }}">
                    <div style="display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;">
                        <div style="flex:1;min-width:180px;position:relative;">
                            <span style="position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--gray-400);">
                                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:16px;height:16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                            </span>
                            <input type="text" name="search" value="{{ request('search') }}"
                                   placeholder="Cari intent / pesan..." class="form-control"
                                   style="padding-left:2.25rem;" onchange="this.form.submit()">
                        </div>
                        <select name="escalated" class="form-control" style="width:150px;" onchange="this.form.submit()">
                            <option value="">Semua</option>
                            <option value="1" {{ request('escalated') === '1' ? 'selected' : '' }}>Eskalasi Saja</option>
                            <option value="0" {{ request('escalated') === '0' ? 'selected' : '' }}>Non-Eskalasi</option>
                        </select>
                        <input type="date" name="date" class="form-control" style="width:150px;"
                               value="{{ request('date') }}" onchange="this.form.submit()">
                        @if(request()->hasAny(['search','escalated','date']))
                        <a href="{{ route('chatbot.logs') }}" class="btn btn-ghost btn-sm">Reset</a>
                        @endif
                    </div>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="table-wrapper">
                @if($logs->isEmpty())
                <div class="empty-state">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                    <div class="empty-state-title">Belum ada log chatbot</div>
                    <p class="empty-state-text">Log akan muncul setelah chatbot aktif menerima pesan</p>
                </div>
                @else
                <table>
                    <thead>
                        <tr>
                            <th>Waktu</th>
                            <th>Kontak</th>
                            <th>Intent</th>
                            <th>Pesan User</th>
                            <th>Respons AI</th>
                            <th>Waktu (ms)</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($logs as $log)
                        <tr>
                            <td class="text-small text-muted" style="white-space:nowrap;">
                                {{ $log->created_at->locale('id')->isoFormat('D MMM, HH:mm') }}
                            </td>
                            <td>
                                @if($log->conversation?->contact)
                                <a href="{{ route('contacts.show', $log->conversation->contact) }}"
                                   style="font-size:.875rem;color:var(--primary);text-decoration:none;">
                                    {{ $log->conversation->contact->name }}
                                </a>
                                @elseif($log->conversation)
                                <span class="text-small text-muted">{{ $log->conversation->wa_number }}</span>
                                @else
                                <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td>
                                <span class="badge badge-blue" style="font-size:.6875rem;">
                                    {{ $log->intent ?? 'general' }}
                                </span>
                            </td>
                            <td>
                                <div class="truncate text-small" style="max-width:160px;color:var(--gray-700);"
                                     title="{{ $log->user_input }}">
                                    {{ Str::limit($log->user_input, 50) }}
                                </div>
                            </td>
                            <td>
                                <div class="truncate text-small" style="max-width:160px;color:var(--gray-600);"
                                     title="{{ $log->ai_response }}">
                                    {{ Str::limit($log->ai_response, 50) }}
                                </div>
                            </td>
                            <td>
                                @if($log->response_ms)
                                <span class="text-small" style="color:{{ $log->response_ms > 3000 ? 'var(--danger)' : ($log->response_ms > 1500 ? 'var(--warning)' : 'var(--success)') }};">
                                    {{ number_format($log->response_ms) }}ms
                                </span>
                                @else
                                <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td>
                                @if($log->escalated)
                                <span class="badge badge-yellow">Eskalasi</span>
                                @else
                                <span class="badge badge-green">OK</span>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @endif
            </div>
            @if($logs->hasPages())
            <div class="pagination-wrapper">
                <div class="pagination-info">{{ $logs->firstItem() }}–{{ $logs->lastItem() }} dari {{ $logs->total() }}</div>
                <div class="pagination">
                    @if(!$logs->onFirstPage())<a class="page-link" href="{{ $logs->previousPageUrl() }}">‹</a>@endif
                    @foreach($logs->getUrlRange(max(1,$logs->currentPage()-2),min($logs->lastPage(),$logs->currentPage()+2)) as $p => $url)
                    <a class="page-link {{ $p===$logs->currentPage()?'active':'' }}" href="{{ $url }}">{{ $p }}</a>
                    @endforeach
                    @if($logs->hasMorePages())<a class="page-link" href="{{ $logs->nextPageUrl() }}">›</a>@endif
                </div>
            </div>
            @endif
        </div>
    </div>

    {{-- Intent Chart --}}
    <div>
        <div class="card">
            <div class="card-header"><span class="card-title">Intent Bulan Ini</span></div>
            <div class="card-body">
                @if($intentChart->isEmpty())
                <p style="font-size:.875rem;color:var(--gray-400);text-align:center;padding:.5rem 0;">Belum ada data</p>
                @else
                <div style="display:flex;flex-direction:column;gap:.625rem;">
                    @php $maxCount = $intentChart->max('total'); @endphp
                    @foreach($intentChart as $item)
                    <div>
                        <div style="display:flex;justify-content:space-between;margin-bottom:.25rem;">
                            <span style="font-size:.8125rem;font-weight:500;color:var(--gray-700);">{{ $item->intent ?? 'general' }}</span>
                            <span style="font-size:.8125rem;color:var(--gray-500);">{{ number_format($item->total) }}</span>
                        </div>
                        <div style="height:6px;background:var(--gray-200);border-radius:3px;overflow:hidden;">
                            <div style="height:100%;background:var(--primary);border-radius:3px;width:{{ $maxCount > 0 ? round(($item->total / $maxCount) * 100) : 0 }}%;transition:width .4s;"></div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>

        {{-- Quick actions --}}
        <div class="card" style="margin-top:1rem;">
            <div class="card-header"><span class="card-title">Aksi Cepat</span></div>
            <div class="card-body" style="display:flex;flex-direction:column;gap:.625rem;">
                <a href="{{ route('chatbot.settings') }}" class="btn btn-secondary" style="justify-content:center;">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    Pengaturan Chatbot
                </a>
                <a href="{{ route('settings.index') }}?tab=fonnte" class="btn btn-secondary" style="justify-content:center;">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                    Konfigurasi Fonnte
                </a>
                <a href="{{ route('wa.inbox') }}" class="btn btn-secondary" style="justify-content:center;">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                    WA Inbox
                </a>
            </div>
        </div>
    </div>
</div>

@endsection