@extends('layouts.app')
@section('title', 'Transcripts')
@section('page-title', 'Transcripts')

@section('content')

<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <span>
            <i class="bi bi-chat-left-text-fill me-2" style="color:#38bdf8;"></i>
            <strong>All Conversations from ElevenLabs</strong>
        </span>
        <button onclick="location.reload()" class="btn btn-outline-brand btn-sm">
            <i class="bi bi-arrow-clockwise me-1"></i> Refresh
        </button>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0" id="transcriptTbl">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Title</th>
                        <th>Agent</th>
                        <th>Language</th>
                        <th>Status</th>
                        <th>Duration</th>
                        <th>Messages</th>
                        <th>Date</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($conversations as $i => $conv)
                    @php
                        $convId    = $conv['conversation_id'] ?? '';
                        $status    = $conv['call_successful'] ?? $conv['status'] ?? 'unknown';
                        $duration  = $conv['call_duration_secs'] ?? 0;
                        $agentName = $conv['agent_name'] ?? 'Unknown';
                        $title     = $conv['call_summary_title'] ?? '—';
                        $lang      = $conv['main_language'] ?? '—';
                        $msgCount  = $conv['message_count'] ?? 0;
                        $startTime = $conv['start_time_unix_secs'] ?? null;
                        $mins = intdiv($duration, 60);
                        $secs = $duration % 60;

                        $langLabel = match($lang) {
                            'ta' => '🇮🇳 Tamil',
                            'hi' => '🇮🇳 Hindi',
                            'te' => '🇮🇳 Telugu',
                            'ml' => '🇮🇳 Malayalam',
                            'kn' => '🇮🇳 Kannada',
                            'en' => '🇬🇧 English',
                            default => strtoupper($lang),
                        };

                        // Match customer by finding call created closest to this conversation time
                        $matchedCall = null;
                        if ($startTime) {
                            $matchedCall = $calls->filter(function($call) use ($startTime) {
                                return abs($call->created_at->timestamp - $startTime) < 120;
                            })->first();
                        }
                    @endphp
                    <tr>
                        <td style="color:#94a3b8;font-weight:700;font-size:12px;">{{ $i + 1 }}</td>
                        <td>
                            <div style="font-weight:700;font-size:13px;max-width:180px;
                                        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                                {{ $title }}
                            </div>
                            @if($matchedCall && $matchedCall->customer)
                                <div class="d-flex align-items-center gap-1 mt-1">
                                    <div class="avatar-sm" style="width:20px;height:20px;font-size:10px;">
                                        {{ strtoupper(substr($matchedCall->customer->customer_name, 0, 1)) }}
                                    </div>
                                    <span style="font-size:12px;color:#64748b;font-weight:600;">
                                        {{ $matchedCall->customer->customer_name }}
                                    </span>
                                </div>
                            @endif
                        </td>
                        <td style="font-weight:600;font-size:13px;">{{ $agentName }}</td>
                        <td style="font-weight:700;font-size:13px;">{{ $langLabel }}</td>
                        <td>
                            @if($status === 'success')
                                <span class="status-badge badge-completed">Success</span>
                            @elseif($status === 'failure' || $status === 'failed')
                                <span class="status-badge badge-failed">Failed</span>
                            @else
                                <span class="status-badge badge-neutral">{{ ucfirst($status) }}</span>
                            @endif
                        </td>
                        <td style="font-weight:700;">
                            {{ $duration > 0 ? $mins.'m '.$secs.'s' : '—' }}
                        </td>
                        <td style="font-weight:700;color:#0284c7;">{{ $msgCount }}</td>
                        <td style="font-size:12px;color:#64748b;font-weight:600;">
                            @if($startTime)
                                {{ \Carbon\Carbon::createFromTimestamp($startTime)->format('d M Y, h:i A') }}
                            @else —
                            @endif
                        </td>
                        <td>
                            <a href="{{ route('transcripts.show', $convId) }}"
                               class="btn btn-outline-brand btn-sm">
                                <i class="bi bi-eye me-1"></i>View
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-5" style="color:#94a3b8;">
                            <i class="bi bi-chat-slash d-block mb-2"
                               style="font-size:32px;opacity:.3;color:#38bdf8;"></i>
                            <strong>No conversations found.</strong>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(function () {
    $('#transcriptTbl').DataTable({
        pageLength: 25,
        order: [[7, 'desc']],
        language: { search: '', searchPlaceholder: 'Search transcripts…' },
    });
});
</script>
@endpush