@{
    ViewData["Title"] = "Extrair Resumo";
}

@section Styles {
    <style type="text/css">
        .extract-container {
            max-width: 800px;
            margin: 2rem auto;
        }

        .extract-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            padding: 2rem;
        }

        .form-control-lg {
            font-size: 1.1rem;
            padding: 1rem 1.5rem;
            border-radius: 30px 0 0 30px;
        }

        .btn-extract {
            border-radius: 0 30px 30px 0;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }

        .feature-icon {
            background-color: var(--suma-beige);
            border-radius: 50%;
            width: 70px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem auto;
        }

            .feature-icon i {
                font-size: 2rem;
                color: var(--suma-red);
            }

        .step-number {
            background-color: var(--suma-red);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 1rem;
        }

        .progress-container {
            display: none;
            margin-top: 2rem;
        }

        .progress {
            height: 10px;
            border-radius: 5px;
        }
    </style>
}

<div class="container extract-container">
    <div class="text-center mb-5">
        <h1 class="display-4 mb-3">Resumir Vídeo do YouTube</h1>
        <p class="lead">Cole o link de qualquer vídeo do YouTube para obter um resumo inteligente</p>
    </div>

    <div class="extract-card mb-5">
        <form id="extractForm">
            <div class="form-group">
                <label for="youtubeUrl"><strong>URL do vídeo</strong></label>
                <div class="input-group input-group-lg">
                    <input type="url" class="form-control form-control-lg" id="youtubeUrl" placeholder="https://www.youtube.com/watch?v=..." required>
                    <div class="input-group-append">
                        <button type="submit" class="btn btn-primary btn-lg btn-extract" id="extractButton">
                            <i class="bi bi-magic mr-2"></i> Resumir
                        </button>
                    </div>
                </div>
                <small class="form-text text-muted">Ex: https://www.youtube.com/watch?v=abcde12345</small>
            </div>

            <div class="progress-container" id="progressContainer">
                <p class="text-center mb-2" id="processingStatus">Processando vídeo...</p>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" id="progressBar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
                </div>
            </div>
        </form>
    </div>

    <!-- Como funciona -->
    <div class="mb-5">
        <h3 class="text-center mb-4">Como funciona</h3>
        <div class="row">
            <!-- Passo 1 -->
            <div class="col-md-4 mb-4">
                <div class="feature-icon">
                    <i class="bi bi-link-45deg"></i>
                </div>
                <h5 class="text-center mb-3">Passo 1</h5>
                <div class="d-flex align-items-start">
                    <div class="step-number">1</div>
                    <div>
                        Cole o link do vídeo do YouTube que deseja resumir no campo acima.
                    </div>
                </div>
            </div>

            <!-- Passo 2 -->
            <div class="col-md-4 mb-4">
                <div class="feature-icon">
                    <i class="bi bi-cpu"></i>
                </div>
                <h5 class="text-center mb-3">Passo 2</h5>
                <div class="d-flex align-items-start">
                    <div class="step-number">2</div>
                    <div>
                        Nossa IA extrai as legendas e processa o conteúdo do vídeo automaticamente.
                    </div>
                </div>
            </div>

            <!-- Passo 3 -->
            <div class="col-md-4 mb-4">
                <div class="feature-icon">
                    <i class="bi bi-file-earmark-text"></i>
                </div>
                <h5 class="text-center mb-3">Passo 3</h5>
                <div class="d-flex align-items-start">
                    <div class="step-number">3</div>
                    <div>
                        Receba um resumo completo com os principais pontos, timestamps e transcrição.
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recursos -->
    <div class="row">
        <div class="col-12 text-center mb-4">
            <h3>Recursos incríveis do SumaTube</h3>
        </div>

        <!-- Recurso 1 -->
        <div class="col-md-6 mb-4">
            <div class="summary-section d-flex">
                <div class="mr-4">
                    <i class="bi bi-clock" style="font-size: 2rem; color: var(--suma-red);"></i>
                </div>
                <div>
                    <h5>Economize tempo</h5>
                    <p>Extraia o conteúdo mais importante de vídeos longos em questão de minutos.</p>
                </div>
            </div>
        </div>

        <!-- Recurso 2 -->
        <div class="col-md-6 mb-4">
            <div class="summary-section d-flex">
                <div class="mr-4">
                    <i class="bi bi-translate" style="font-size: 2rem; color: var(--suma-red);"></i>
                </div>
                <div>
                    <h5>Suporte a múltiplos idiomas</h5>
                    <p>Resumos disponíveis em português, inglês, espanhol e outros idiomas.</p>
                </div>
            </div>
        </div>

        <!-- Recurso 3 -->
        <div class="col-md-6 mb-4">
            <div class="summary-section d-flex">
                <div class="mr-4">
                    <i class="bi bi-lightning-charge" style="font-size: 2rem; color: var(--suma-red);"></i>
                </div>
                <div>
                    <h5>Processamento rápido</h5>
                    <p>Nossa tecnologia avançada processa os vídeos em segundos.</p>
                </div>
            </div>
        </div>

        <!-- Recurso 4 -->
        <div class="col-md-6 mb-4">
            <div class="summary-section d-flex">
                <div class="mr-4">
                    <i class="bi bi-download" style="font-size: 2rem; color: var(--suma-red);"></i>
                </div>
                <div>
                    <h5>Download de resumos</h5>
                    <p>Salve os resumos em PDF para referência futura e compartilhamento.</p>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script type="text/javascript">
        $(document).ready(function() {
            $('#extractForm').submit(function(e) {
                e.preventDefault();

                // Validar URL
                var youtubeUrl = $('#youtubeUrl').val();
                if (!isValidYouTubeUrl(youtubeUrl)) {
                    alert('Por favor, insira uma URL válida do YouTube.');
                    return;
                }

                // Mostrar progresso
                $('#extractButton').prop('disabled', true);
                $('#progressContainer').show();
                simulateProgress();

                // Simulação de processamento - em um projeto real, aqui você faria a chamada AJAX para sua WebAPI
                setTimeout(function() {
                    // Redirecionar para a página de resultado (em um caso real, você redirecionaria após receber a resposta da API)
                    window.location.href = '/Video/Summary?id=' + extractVideoId(youtubeUrl);
                }, 5000);
            });

            function isValidYouTubeUrl(url) {
                var regex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+/;
                return regex.test(url);
            }

            function extractVideoId(url) {
                var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
                var match = url.match(regExp);
                return (match && match[7].length == 11) ? match[7] : false;
            }

            function simulateProgress() {
                var progress = 0;
                var interval = setInterval(function() {
                    progress += 5;
                    $('#progressBar').css('width', progress + '%');
                    $('#progressBar').attr('aria-valuenow', progress);

                    // Atualizar mensagem de status
                    if (progress <= 20) {
                        $('#processingStatus').text('Extraindo informações do vídeo...');
                    } else if (progress <= 40) {
                        $('#processingStatus').text('Processando legendas...');
                    } else if (progress <= 60) {
                        $('#processingStatus').text('Identificando pontos principais...');
                    } else if (progress <= 80) {
                        $('#processingStatus').text('Gerando resumo...');
                    } else {
                        $('#processingStatus').text('Finalizando...');
                    }

                    if (progress >= 100) {
                        clearInterval(interval);
                    }
                }, 200);
            }
        });
    </script>
}