@props([
    'interview',
])

@php
    $metrics = $interview->proctor_metrics;
@endphp

<tr class="hover:bg-white/[0.02] transition-colors">
    <!-- Candidate Info & Temp Pass -->
    <td class="py-3.5 px-4">
        <div>
            <strong class="text-white text-sm block">{{ $interview->candidate_name }}</strong>
            <div class="text-xs text-slate-400 mt-0.5">{{ $interview->candidate_email }} &bull; {{ $interview->candidate_phone }}</div>
            <div class="mt-1.5 flex flex-col gap-1">
                <div class="text-[0.7rem] text-emerald-300 bg-emerald-500/10 px-2 py-0.5 rounded inline-block w-fit">
                    <i class="fa-solid fa-key text-[0.65rem] mr-1"></i> Temp Pass: <strong>{{ $interview->temp_password }}</strong>
                </div>
                <div class="text-[0.7rem] text-sky-400">
                    <i class="fa-solid fa-globe text-[0.65rem] mr-1"></i> Login URL: <a href="{{ route('interview.candidate.login') }}" target="_blank" class="text-sky-400 underline">{{ route('interview.candidate.login') }}</a>
                </div>
            </div>
        </div>
    </td>

    <!-- Unique Submission ID -->
    <td class="py-3.5 px-4">
        <code class="bg-white/5 px-2 py-1 rounded text-sky-400 text-xs font-mono">
            {{ $interview->submission_unique_id }}
        </code>
    </td>

    <!-- Status & Validity -->
    <td class="py-3.5 px-4">
        @if($interview->isExpired())
            <x-pill variant="danger" size="sm">EXPIRED</x-pill>
        @elseif($interview->status === 'completed')
            <x-pill variant="success" size="sm">COMPLETED</x-pill>
        @elseif($interview->call_status === 'active')
            <x-pill variant="success" size="sm" icon="fa-solid fa-phone" class="animate-pulse font-extrabold">CALL IN PROGRESS</x-pill>
        @elseif($interview->isActiveTimeline())
            <x-pill variant="info" size="sm" icon="fa-solid fa-bolt">TIMELINE LIVE</x-pill>
        @else
            <x-pill variant="warning" size="sm">SCHEDULED</x-pill>
        @endif
        <div class="text-[0.7rem] text-slate-400 mt-1">
            Timeline: {{ $interview->formatted_timeline }}
        </div>
    </td>

    <!-- Language -->
    <td class="py-3.5 px-4">
        <x-pill variant="ghost" size="sm" class="uppercase font-bold">
            {{ $interview->language }}
        </x-pill>
    </td>

    <!-- Proctoring Alerts -->
    <td class="py-3.5 px-4">
        <x-interview.proctor-badges :metrics="$metrics" />
    </td>

    <!-- Review & Actions -->
    <td class="py-3.5 px-4 text-right whitespace-nowrap">
        <div class="inline-flex items-center gap-2 justify-end">
            <!-- Button 1: Report Page -->
            <a href="{{ route('interview.report', $interview->id) }}" target="_blank">
                <x-button variant="success" size="sm" icon="fa-solid fa-file-pdf" class="bg-emerald-500/15 border-emerald-500/30 text-emerald-300 hover:bg-emerald-500/25">
                    PDF Report
                </x-button>
            </a>

            <!-- Button 2: Join Call -->
            @if($interview->call_status === 'active')
                <a href="{{ route('interview.show', $interview->id) }}?join_call=1">
                    <x-button variant="success" size="sm" icon="fa-solid fa-phone-volume" class="animate-pulse font-extrabold shadow-md shadow-emerald-500/50">
                        Join Active Call
                    </x-button>
                </a>
            @else
                <a href="{{ route('interview.show', $interview->id) }}">
                    <x-button variant="primary" size="sm" icon="fa-solid fa-video" class="bg-indigo-500/15 border-indigo-500/30 text-indigo-300 hover:bg-indigo-500/25">
                        Join Call
                    </x-button>
                </a>
            @endif
        </div>
    </td>
</tr>