@extends('frontend.main_master')

@section('title', 'Panel de Profesor - Astro Sabio')
@section('body-class', 'teacher-panel-body')

@section('content')
    <div class="container py-5 teacher-panel">

        {{-- Encabezado Hero --}}
        <div class="tp-hero rounded-4 p-4 p-md-5 mb-4">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                <div>
                    <h1 class="h3 mb-1 text-white">Panel de Profesor</h1>
                    <p class="mb-0 tp-hero-sub">Gestione sus clases en vivo, grabaciones y anotaciones interactivas en un solo lugar.</p>
                </div>
                <form method="POST" action="{{ route('panel.live.store') }}" class="m-0">
                    @csrf
                    <button type="submit" class="btn tp-btn-start px-4 py-2">
                        <span class="tp-live-dot me-2"></span>Iniciar Nueva Clase en Vivo
                    </button>
                </form>
            </div>
        </div>

        @if(session('teacher_panel_status'))
            <div class="alert alert-success rounded-4 shadow-sm">{{ session('teacher_panel_status') }}</div>
        @endif

        {{-- Estadísticas --}}
        <div class="row g-3 mb-4">
            @foreach ([
                ['Clases Totales', $stats['total'], 'fa-chalkboard-user'],
                ['Clases Activas', $stats['active'], 'fa-tower-broadcast'],
                ['Clases Grabadas', $stats['recorded'], 'fa-clapperboard'],
                ['Duración (min)', $stats['recordedMinutes'], 'fa-clock'],
                ['Estudiantes', $stats['students'], 'fa-user-graduate'],
                ['Anotaciones', $stats['annotations'], 'fa-pen-nib'],
            ] as [$label, $value, $icon])
                <div class="col-6 col-md-4 col-xl-2">
                    <div class="card border-0 shadow-sm rounded-4 h-100 tp-stat">
                        <div class="card-body py-3 text-center">
                            <i class="fa-solid {{ $icon }} tp-stat-icon mb-2"></i>
                            <div class="fs-4 fw-bold lh-1">{{ $value }}</div>
                            <div class="small text-muted mt-1">{{ $label }}</div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Clases Activas --}}
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-header bg-transparent border-0 pt-4 px-4">
                <h2 class="h5 mb-0"><i class="fa-solid fa-tower-broadcast me-2 tp-accent"></i>Clases Activas / Pendientes</h2>
            </div>
            <div class="card-body px-4 pb-4">
                @if($activeSessions->isEmpty())
                    <p class="text-muted mb-0">No hay clases activas actualmente. Haga clic en "Iniciar Nueva Clase en Vivo" para abrir una sala y compartir el enlace de invitación.</p>
                @else
                    <div class="d-flex flex-column gap-3">
                        @foreach($activeSessions as $session)
                            @php $joinUrl = route('panel.live.join', $session->room_id); @endphp
                            <div class="tp-session-row rounded-4 p-3 d-flex flex-wrap align-items-center gap-3">
                                <span class="badge rounded-pill {{ $session->student_id ? 'text-bg-success' : 'text-bg-warning' }}">
                                    {{ $session->student_id ? 'EN VIVO' : 'Esperando Estudiante' }}
                                </span>
                                <div class="flex-grow-1">
                                    <div class="fw-semibold">
                                        Estudiante: {{ $session->student ? trim($session->student->name . ' ' . $session->student->last_name) : 'Aún no se ha unido' }}
                                    </div>
                                    <div class="small text-muted">
                                        Creada: {{ $session->created_at->format('d.m.Y H:i') }}
                                        @if($session->started_at) &middot; Inicio: {{ $session->started_at->format('H:i') }} @endif
                                    </div>
                                </div>
                                <div class="d-flex flex-wrap gap-2">
                                    <a href="{{ $joinUrl }}" class="btn btn-sm btn-primary rounded-pill px-3">
                                        <i class="fa-solid fa-arrow-right-to-bracket me-1"></i>Entrar a la Clase
                                    </a>
                                    <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill px-3 tp-copy-btn"
                                            data-link="{{ $joinUrl }}">
                                        <i class="fa-solid fa-link me-1"></i>Enlace de Invitación
                                    </button>
                                    <form method="POST" action="{{ route('panel.teacher.session.end', $session) }}" class="m-0"
                                          onsubmit="return confirm('¿Está seguro de que desea finalizar esta clase?');">
                                        @csrf
                                        <button type="submit" class="btn btn-sm btn-outline-danger rounded-pill px-3">
                                            <i class="fa-solid fa-stop me-1"></i>Finalizar Clase
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        {{-- Clases Pasadas --}}
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-header bg-transparent border-0 pt-4 px-4 d-flex justify-content-between align-items-center">
                <h2 class="h5 mb-0"><i class="fa-solid fa-clock-rotate-left me-2 tp-accent"></i>Historial de Clases</h2>
                <a href="{{ route('panel.recordings.index') }}" class="small text-decoration-none">Todas mis grabaciones &rarr;</a>
            </div>
            <div class="card-body px-4 pb-4">
                @if($pastSessions->isEmpty())
                    <p class="text-muted mb-0">Aún no hay clases completadas.</p>
                @else
                    <div class="table-responsive">
                        <table class="table align-middle mb-0">
                            <thead class="small text-muted">
                                <tr>
                                    <th>Fecha</th>
                                    <th>Estudiante</th>
                                    <th>Duración</th>
                                    <th>Grabación</th>
                                    <th class="text-end">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($pastSessions as $session)
                                    <tr>
                                        <td class="text-nowrap">{{ optional($session->ended_at ?? $session->created_at)->format('d.m.Y H:i') }}</td>
                                        <td>{{ $session->student ? trim($session->student->name . ' ' . $session->student->last_name) : '—' }}</td>
                                        <td class="text-nowrap">
                                            @if($session->started_at && $session->ended_at)
                                                {{ $session->started_at->diffForHumans($session->ended_at, true) }}
                                            @else
                                                —
                                            @endif
                                        </td>
                                        <td>
                                            @if($session->hasRecording())
                                                <a href="{{ route('panel.recordings.show', $session) }}" class="badge text-bg-primary rounded-pill text-decoration-none">
                                                    <i class="fa-solid fa-play me-1"></i>Ver
                                                </a>
                                            @else
                                                <span class="badge text-bg-light text-muted rounded-pill">Sin grabación</span>
                                            @endif
                                        </td>
                                        <td class="text-end">
                                            @if($session->hasRecording())
                                                <form method="POST" action="{{ route('panel.teacher.recording.delete', $session) }}" class="d-inline m-0"
                                                      onsubmit="return confirm('La grabación de video y el registro se eliminarán permanentemente. ¿Continuar?');">
                                                    @csrf
                                                    <button type="submit" class="btn btn-sm btn-outline-danger rounded-pill px-3">
                                                        <i class="fa-solid fa-trash me-1"></i>Eliminar
                                                    </button>
                                                </form>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3">
                        {{ $pastSessions->links() }}
                    </div>
                @endif
            </div>
        </div>

        {{-- Anotaciones Guardadas --}}
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-header bg-transparent border-0 pt-4 px-4">
                <h2 class="h5 mb-0"><i class="fa-solid fa-pen-nib me-2 tp-accent"></i>Anotaciones y Dibujos Guardados</h2>
            </div>
            <div class="card-body px-4 pb-4">
                @if($annotations->isEmpty())
                    <p class="text-muted mb-0">Aún no hay dibujos guardados. Durante la clase en vivo, congele la pantalla, dibuje y guarde con 💾.</p>
                @else
                    <div class="row g-3">
                        @foreach($annotations as $annotation)
                            <div class="col-6 col-md-4 col-lg-3">
                                <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100 tp-annotation">
                                    @if($annotation->png_path)
                                        <a href="{{ route('panel.teacher.annotation.png', $annotation) }}" target="_blank">
                                            <img src="{{ route('panel.teacher.annotation.png', $annotation) }}"
                                                 alt="Anotación" class="tp-annotation-img" loading="lazy">
                                        </a>
                                    @else
                                        <div class="tp-annotation-img d-flex align-items-center justify-content-center text-muted small">
                                            Sin vista previa
                                        </div>
                                    @endif
                                    <div class="card-body py-2 px-3 d-flex justify-content-between align-items-center">
                                        <div class="small text-muted">
                                            {{ $annotation->created_at->format('d.m.Y H:i') }}<br>
                                            {{ $annotation->liveSession->student ? trim($annotation->liveSession->student->name . ' ' . $annotation->liveSession->student->last_name) : '' }}
                                        </div>
                                        <form method="POST" action="{{ route('panel.teacher.annotation.delete', $annotation) }}" class="m-0"
                                              onsubmit="return confirm('Esta anotación será eliminada. ¿Desea continuar?');">
                                            @csrf
                                            <button type="submit" class="btn btn-sm btn-outline-danger border-0" title="Eliminar">
                                                <i class="fa-solid fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>

    <style>
        .teacher-panel .tp-hero {
            background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #7c3aed 130%);
            box-shadow: 0 16px 40px rgba(2, 6, 23, .25);
        }
        .teacher-panel .tp-hero-sub { color: rgba(226, 232, 240, .8); }
        .teacher-panel .tp-btn-start {
            background: linear-gradient(135deg, #dc2626, #b91c1c);
            color: #fff;
            border: none;
            border-radius: 999px;
            font-weight: 600;
            box-shadow: 0 8px 20px rgba(220, 38, 38, .35);
            transition: transform .12s ease;
        }
        .teacher-panel .tp-btn-start:hover { transform: translateY(-1px); color: #fff; }
        .teacher-panel .tp-live-dot {
            display: inline-block;
            width: 9px; height: 9px;
            border-radius: 50%;
            background: #fff;
            animation: tp-pulse 1.6s ease-in-out infinite;
        }
        @keyframes tp-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
            50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
        }
        .teacher-panel .tp-accent { color: #4f46e5; }
        .teacher-panel .tp-stat-icon { font-size: 1.15rem; color: #4f46e5; }
        .teacher-panel .tp-session-row {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
        }
        .teacher-panel .tp-annotation-img {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: contain;
            background: #f1f5f9;
            display: block;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.tp-copy-btn').forEach((btn) => {
                btn.addEventListener('click', async () => {
                    const original = btn.innerHTML;
                    try {
                        await navigator.clipboard.writeText(btn.dataset.link);
                        btn.innerHTML = '<i class="fa-solid fa-check me-1"></i>¡Copiado!';
                        setTimeout(() => { btn.innerHTML = original; }, 1800);
                    } catch {
                        prompt('Enlace de invitación (copie):', btn.dataset.link);
                    }
                });
            });
        });
    </script>
@endsection