@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <h4 class="mb-0">Call Analytics</h4>
        <div class="text-secondary small mt-1">AI-powered insights from call recordings and transcripts.</div>
    </div>
</div>

@if (session('success')) <div class="alert alert-success">{{ session('success') }}</div> @endif

<div class="card mb-3">
    <div class="card-body">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="form-label small mb-1">From</label>
                <input type="date" name="from" value="{{ $from }}" class="form-control form-control-sm">
            </div>
            <div class="col-md-3">
                <label class="form-label small mb-1">To</label>
                <input type="date" name="to" value="{{ $to }}" class="form-control form-control-sm">
            </div>
            <div class="col-md-3">
                <label class="form-label small mb-1">Extension</label>
                <select name="extension" class="form-select form-select-sm">
                    <option value="">All Extensions</option>
                    @foreach($extensions as $ext)
                        <option value="{{ $ext }}" {{ $extension === $ext ? 'selected' : '' }}>{{ $ext }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <button class="btn btn-primary btn-sm w-100">Apply Filters</button>
            </div>
        </form>
    </div>
</div>

<!-- Summary Cards -->
<div class="row g-3 mb-3">
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <h6 class="text-secondary small mb-2">Total Calls</h6>
                <h3 class="mb-0">{{ $totalCalls }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <h6 class="text-secondary small mb-2">Avg Duration</h6>
                <h3 class="mb-0">{{ $avgDuration }}s</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <h6 class="text-secondary small mb-2">With Transcripts</h6>
                <h3 class="mb-0">{{ $withTranscripts }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <h6 class="text-secondary small mb-2">Risky Calls</h6>
                <h3 class="mb-0 text-danger">{{ $riskyCalls }}</h3>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    <!-- Sentiment Breakdown -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <div class="fw-semibold">Sentiment Breakdown</div>
            </div>
            <div class="card-body">
                @if(!empty($sentimentBreakdown))
                    @php
                        $totalSentiment = array_sum($sentimentBreakdown);
                        $positivePct = $totalSentiment > 0 ? round(($sentimentBreakdown['positive'] ?? 0) / $totalSentiment * 100) : 0;
                        $negativePct = $totalSentiment > 0 ? round(($sentimentBreakdown['negative'] ?? 0) / $totalSentiment * 100) : 0;
                        $neutralPct = $totalSentiment > 0 ? round(($sentimentBreakdown['neutral'] ?? 0) / $totalSentiment * 100) : 0;
                    @endphp
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span>Positive</span>
                            <span>{{ $sentimentBreakdown['positive'] ?? 0 }} ({{ $positivePct }}%)</span>
                        </div>
                        <div class="progress" style="height: 8px">
                            <div class="progress-bar bg-success" style="width: {{ $positivePct }}%"></div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span>Neutral</span>
                            <span>{{ $sentimentBreakdown['neutral'] ?? 0 }} ({{ $neutralPct }}%)</span>
                        </div>
                        <div class="progress" style="height: 8px">
                            <div class="progress-bar bg-secondary" style="width: {{ $neutralPct }}%"></div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span>Negative</span>
                            <span>{{ $sentimentBreakdown['negative'] ?? 0 }} ({{ $negativePct }}%)</span>
                        </div>
                        <div class="progress" style="height: 8px">
                            <div class="progress-bar bg-danger" style="width: {{ $negativePct }}%"></div>
                        </div>
                    </div>
                @else
                    <p class="text-secondary small">No sentiment data available.</p>
                @endif
            </div>
        </div>
    </div>

    <!-- Top AI Tags -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <div class="fw-semibold">Top AI Tags</div>
            </div>
            <div class="card-body">
                @if($topTags->isNotEmpty())
                    <ul class="list-group list-group-flush">
                        @foreach($topTags as $tag)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>{{ $tag->tag }}</span>
                                <span class="badge bg-primary">{{ $tag->count }}</span>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <p class="text-secondary small">No AI tags data available.</p>
                @endif
            </div>
        </div>
    </div>

    <!-- Per-Extension Metrics -->
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <div class="fw-semibold">Per-Extension Metrics</div>
            </div>
            <div class="card-body">
                @if($extensionMetrics->isNotEmpty())
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>Extension</th>
                                    <th>Total Calls</th>
                                    <th>Avg Duration</th>
                                    <th>Positive</th>
                                    <th>Negative</th>
                                    <th>Net Sentiment</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($extensionMetrics as $metric)
                                    @php
                                        $netSentiment = ($metric->positive ?? 0) - ($metric->negative ?? 0);
                                        $sentimentColor = $netSentiment > 0 ? 'text-success' : ($netSentiment < 0 ? 'text-danger' : 'text-secondary');
                                    @endphp
                                    <tr>
                                        <td><code>{{ $metric->extension }}</code></td>
                                        <td>{{ $metric->total_calls }}</td>
                                        <td>{{ round($metric->avg_duration ?? 0, 1) }}s</td>
                                        <td>{{ $metric->positive ?? 0 }}</td>
                                        <td>{{ $metric->negative ?? 0 }}</td>
                                        <td class="{{ $sentimentColor }}">{{ $netSentiment }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <p class="text-secondary small">No extension metrics available.</p>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection