@extends('layouts.app')
@section('title', 'AI Analytics & Training')

@section('content')
<div class="page-wrapper">
    <div class="page-body">
        <div class="container-xl">
            <x-page-header 
                title="AI Analytics & Monitoring"
                :breadcrumbs="[
                    ['url' => route('client.balasan-otomatis.index'), 'label' => 'Auto Reply'],
                    ['url' => route('client.ai-analytics.index'), 'label' => 'AI Analytics']
                ]"
                current="Monitoring"
            />

            <!-- Stats Row -->
            <div class="row row-cards mb-4">
                <div class="col-sm-6 col-lg-4">
                    <div class="card card-sm border-0 shadow-sm">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <span class="bg-primary text-white avatar"><i class="ti ti-message-chatbot"></i></span>
                                </div>
                                <div class="col">
                                    <div class="font-weight-medium">Total Pesan Hari Ini</div>
                                    <div class="text-muted">{{ number_format($totalMessagesToday) }} pesan diproses AI</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="card card-sm border-0 shadow-sm">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <span class="bg-danger text-white avatar"><i class="ti ti-hand-stop"></i></span>
                                </div>
                                <div class="col">
                                    <div class="font-weight-medium">Eskalasi ke Admin (Hari Ini)</div>
                                    <div class="text-muted">{{ number_format($totalHandoffsToday) }} percakapan diserahkan</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="card card-sm border-0 shadow-sm">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <span class="bg-success text-white avatar"><i class="ti ti-cpu"></i></span>
                                </div>
                                <div class="col">
                                    <div class="font-weight-medium">Token Terpakai (Hari Ini)</div>
                                    <div class="text-muted">{{ number_format($totalTokensToday) }} tokens (estimasi)</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Unanswered Questions -->
            <div class="row row-cards">
                <div class="col-12">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white py-4 border-bottom-0 align-items-center">
                            <div>
                                <h3 class="card-title fw-bold text-dark"><i class="ti ti-question-mark me-2 text-warning fs-2 bg-warning-lt p-1 rounded"></i>Pertanyaan Tidak Terjawab (Unanswered)</h3>
                                <p class="text-muted mb-0 mt-1 small">Daftar pertanyaan pelanggan yang gagal dijawab AI dengan baik. Gunakan data ini untuk melatih Intent atau menambah Knowledge Base baru.</p>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-vcenter card-table table-hover">
                                <thead class="bg-light">
                                    <tr>
                                        <th class="px-4 py-3 text-secondary text-uppercase font-weight-bold" width="35%">Pesan Pelanggan</th>
                                        <th class="px-3 py-3 text-secondary text-uppercase font-weight-bold" width="35%">Respon Fallback AI</th>
                                        <th class="px-3 py-3 text-secondary text-uppercase font-weight-bold" width="15%">Waktu</th>
                                        <th class="px-4 py-3 text-secondary text-uppercase font-weight-bold text-end" width="15%">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($unansweredQuestions as $q)
                                        <tr>
                                            <td class="px-4 text-dark font-weight-medium">
                                                <i class="ti ti-user text-muted me-1"></i> "{{ $q->customer_message }}"
                                            </td>
                                            <td class="px-3 text-muted small fst-italic">
                                                {{ Str::limit($q->ai_response_fallback, 80) }}
                                            </td>
                                            <td class="px-3 text-muted small">
                                                {{ $q->created_at->format('d M H:i') }}
                                            </td>
                                            <td class="px-4 text-end">
                                                <div class="btn-group">
                                                    <form action="{{ route('client.ai-analytics.resolve', $q) }}" method="POST" class="d-inline">
                                                        @csrf @method('PUT')
                                                        <button type="submit" class="btn btn-sm btn-outline-success shadow-sm" data-bs-toggle="tooltip" title="Tandai Selesai / Abaikan">
                                                            <i class="ti ti-check"></i>
                                                        </button>
                                                    </form>
                                                    <a href="{{ route('client.ai-intents.create', ['training_phrase' => $q->customer_message]) }}" class="btn btn-sm btn-outline-primary shadow-sm" data-bs-toggle="tooltip" title="Buat Intent Baru dari pesan ini">
                                                        <i class="ti ti-target"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center py-5">
                                                <div class="empty">
                                                    <div class="empty-img text-muted mb-3">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-checks" width="48" height="48" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                            <path d="M7 12l5 5l10 -10"></path>
                                                            <path d="M2 12l5 5m5 -5l5 -5"></path>
                                                        </svg>
                                                    </div>
                                                    <p class="empty-title fw-bold text-success mb-1">Semua pertanyaan terjawab!</p>
                                                    <p class="empty-subtitle text-muted small">AI saat ini mampu menjawab semua pertanyaan pelanggan dengan baik.</p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        @if($unansweredQuestions->hasPages())
                            <div class="card-footer d-flex align-items-center py-3 bg-white">
                                {{ $unansweredQuestions->links() }}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection