@using SumaTube.Models;

@model VideoSummaryViewModel
@{
    ViewData["Title"] = "Resumo do Vídeo";
}

@section Styles {
    <style type="text/css">
        .timestamp-link {
            color: var(--suma-red);
            cursor: pointer;
            text-decoration: none;
        }

            .timestamp-link:hover {
                text-decoration: underline;
            }

        .summary-section {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .tag-pill {
            background-color: var(--suma-beige);
            border-radius: 20px;
            padding: 5px 15px;
            margin-right: 8px;
            margin-bottom: 8px;
            display: inline-block;
            font-size: 0.9rem;
        }

        .summary-tab-content {
            min-height: 300px;
        }

        .video-frame {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .transcription-text {
            max-height: 300px;
            overflow-y: auto;
            background-color: var(--suma-light-gray);
            padding: 15px;
            border-radius: 8px;
            line-height: 1.7;
        }
    </style>
}

<div class="container mt-4">
    <div class="row">
        <!-- Coluna do vídeo -->
        <div class="col-lg-8">
            <div class="video-frame mb-4">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/@Model.VideoId" allowfullscreen></iframe>
                </div>
            </div>

            <div class="summary-section">
                <h1>@Model.VideoTitle</h1>
                <div class="d-flex align-items-center mb-3">
                    <img src="@Model.ChannelThumbnail" alt="@Model.ChannelName" class="rounded-circle mr-2" style="width: 40px; height: 40px;">
                    <div>
                        <h6 class="mb-0">@Model.ChannelName</h6>
                        <small class="text-muted">@Model.PublishedDate • @Model.ViewCount visualizações</small>
                    </div>
                </div>

                <div class="d-flex justify-content-between align-items-center mt-3 mb-3">
                    <div>
                        <span class="mr-3">
                            <i class="bi bi-hand-thumbs-up"></i> @Model.LikeCount
                        </span>
                        <span>
                            <i class="bi bi-chat-left-text"></i> @Model.CommentCount
                        </span>
                    </div>
                    <div>
                        <button class="btn btn-sm btn-outline-dark mr-2">
                            <i class="bi bi-share"></i> Compartilhar
                        </button>
                        <button class="btn btn-sm btn-outline-dark">
                            <i class="bi bi-bookmark"></i> Salvar
                        </button>
                    </div>
                </div>
            </div>

            <!-- Tabs de navegação -->
            <ul class="nav nav-tabs" id="summaryTabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="summary-tab" data-toggle="tab" href="#summary" role="tab" aria-controls="summary" aria-selected="true">
                        <i class="bi bi-journal-text"></i> Resumo
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="transcription-tab" data-toggle="tab" href="#transcription" role="tab" aria-controls="transcription" aria-selected="false">
                        <i class="bi bi-body-text"></i> Transcrição
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="keywords-tab" data-toggle="tab" href="#keywords" role="tab" aria-controls="keywords" aria-selected="false">
                        <i class="bi bi-tags"></i> Palavras-chave
                    </a>
                </li>
            </ul>

            <!-- Conteúdo das tabs -->
            <div class="tab-content summary-tab-content p-3 bg-white border border-top-0 rounded-bottom mb-4" id="summaryTabsContent">
                <!-- Tab Resumo -->
                <div class="tab-pane fade show active" id="summary" role="tabpanel" aria-labelledby="summary-tab">
                    <h4 class="mb-3">Principais pontos</h4>

                    @foreach (var point in Model.KeyPoints)
                    {
                        <div class="mb-3">
                            <p>
 @*                                <a class="timestamp-link" data-time="@point.TimestampSeconds">@point.TimestampFormatted</a>
                                <strong>@point.Title</strong>
                            </p>
                            <p>@point.Description</p>

  *@
                                <a class="timestamp-link" data-time="30">30s</a>
                                <strong>Titulo</strong>
                            </p>
                            <p>Description</p>
                        </div>
                    }

                    <h4 class="mt-4 mb-3">Resumo geral</h4>
                    <p>@Model.SummaryText</p>
                </div>

                <!-- Tab Transcrição -->
                <div class="tab-pane fade" id="transcription" role="tabpanel" aria-labelledby="transcription-tab">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <h4 class="mb-3">Transcrição completa</h4>
                            <button class="btn btn-sm btn-outline-secondary">
                                <i class="bi bi-download"></i> Baixar
                            </button>
                        </div>
                        <div class="transcription-text">
                            @foreach (var caption in Model.Captions)
                            {
                                <p>
@* 
                                    <a class="timestamp-link" data-time="@caption.TimestampSeconds">
                                        @caption.TimestampFormatted
                                    </a>
                                    @caption.Text

 *@
                                    <a class="timestamp-link" data-time="30s">
                                        30s
                                    </a>
                                    caption.Text

                                </p>
                            }
                        </div>
                    </div>
                </div>

                <!-- Tab Palavras-chave -->
                <div class="tab-pane fade" id="keywords" role="tabpanel" aria-labelledby="keywords-tab">
                    <h4 class="mb-3">Tópicos principais</h4>
                    <div class="mb-4">
                        @foreach (var keyword in Model.Keywords)
                        {
                            <span class="tag-pill">@keyword</span>
                        }
                    </div>

                    <h4 class="mb-3">Temas relacionados</h4>
                    <div>
                        @foreach (var topic in Model.RelatedTopics)
                        {
                            <span class="tag-pill">@topic</span>
                        }
                    </div>
                </div>
            </div>
        </div>

        <!-- Coluna lateral -->
        <div class="col-lg-4">
            <!-- Vídeos recomendados -->
            <div class="summary-section">
                <h5 class="mb-3">Vídeos relacionados</h5>

                @foreach (var video in Model.RelatedVideos)
                {
                    <div class="media mb-3">
@* 
                        <img src="@video.ThumbnailUrl" class="mr-3" alt="@video.Title" style="width: 120px; border-radius: 4px;">
                        <div class="media-body">
                            <h6 class="mt-0">@video.Title</h6>
                            <small class="text-muted">@video.ChannelName</small><br>
                            <small class="text-muted">@video.ViewCount visualizações</small>
                        </div>
 *@
                        <img src="#ThumbnailUrl" class="mr-3" alt="#Title" style="width: 120px; border-radius: 4px;">
                        <div class="media-body">
                            <h6 class="mt-0">Title</h6>
                            <small class="text-muted">video.ChannelName</small><br>
                            <small class="text-muted">x visualizações</small>
                        </div>

                    </div>
                }
            </div>

            <!-- Call to action para planos premium -->
            <div class="summary-section text-center" style="background-color: var(--suma-beige);">
                <i class="bi bi-star-fill mb-3" style="font-size: 2rem; color: var(--suma-red);"></i>
                <h5>Obtenha mais recursos com o plano Premium</h5>
                <p class="small mb-3">Acesso ilimitado a resumos, download de textos e muito mais.</p>
                <a href="#" class="btn btn-primary btn-block">Ver planos</a>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script type="text/javascript">
        $(document).ready(function() {
            // Função para clicar nos timestamps e pular para o momento do vídeo
            $('.timestamp-link').click(function() {
                var time = $(this).data('time');
                var videoFrame = $('iframe')[0];
                var videoUrl = videoFrame.src;

                // Garantir que a URL tem os parâmetros necessários
                if (videoUrl.indexOf('?') === -1) {
                    videoUrl += '?';
                } else {
                    videoUrl += '&';
                }

                // Adicionar comando para pular para o tempo específico
                videoUrl += 'start=' + time;

                // Atualizar o iframe
                videoFrame.src = videoUrl;
            });
        });
    </script>
}