@page "/"
@inject HttpClient Http
@inject IPdfSaver PdfSaver
@using VideoStudy.Shared
@using System.Net.Http.Json
@using System.Text.Json
@using System.Threading // Added for Cancellation

<PageTitle>VideoStudy - Video Analysis</PageTitle>

<div class="container-fluid py-4">
    <!-- Header -->
    <header class="text-center mb-5">
        <h1 class="display-4 fw-bold" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
            VideoStudy (Native)
        </h1>
        <p class="lead text-muted">Transforme videos em apostilas inteligentes com IA</p>
    </header>

    <div class="row">
        <div class="col-lg-8 mx-auto">

            <!-- Tabs Navigation -->
            <ul class="nav nav-pills nav-fill mb-4 shadow-sm p-1 bg-light rounded-pill">
                <li class="nav-item">
                    <button class="nav-link rounded-pill py-3 fw-bold @(activeTab == "youtube" ? "active bg-primary text-white" : "text-muted")"
                            @onclick="@(() => activeTab = "youtube")" disabled="@(isProcessing || isFetchingInfo)">
                        <span style="font-size:1.1rem;">YouTube Video</span>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link rounded-pill py-3 fw-bold text-muted" disabled>
                        Local Video (Coming Soon)
                    </button>
                </li>
            </ul>

            <!-- Tab Content -->
            <div class="card shadow-soft border-0 rounded-4 overflow-hidden mb-4 p-4 bg-white">
                @if (activeTab == "youtube")
                {
                    <div class="mb-4">
                        <label class="form-label fw-bold text-muted small">YouTube URL</label>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control form-control-lg" placeholder="https://www.youtube.com/watch?v=..."
                                   @bind="videoUrl" disabled="@(isProcessing || isFetchingInfo)" />
                        </div>
                    </div>
                }

                <!-- Video Info Preview -->
                @if (videoInfo != null)
                {
                    <div class="border rounded-3 p-3 mb-4 d-flex align-items-start gap-3" style="background: #f0f4ff;">
                        @if (!string.IsNullOrEmpty(videoInfo.ThumbnailUrl))
                        {
                            <img src="@videoInfo.ThumbnailUrl" alt="Thumbnail"
                                 style="width: 180px; border-radius: 8px; flex-shrink: 0;" />
                        }
                        <div class="flex-grow-1">
                            <h6 class="fw-bold mb-1">@videoInfo.Title</h6>
                            <div class="text-muted small">
                                <span class="me-3">@videoInfo.Author</span>
                                <span>@videoInfo.Duration.ToString(@"hh\:mm\:ss")</span>
                            </div>
                        </div>
                        <button class="btn btn-sm btn-outline-secondary" @onclick="ClearVideoInfo"
                                disabled="@(isProcessing)" title="Limpar">X</button>
                    </div>
                }

                <!-- Language Selectors -->
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-bold text-muted small">Idioma do Video (Legendas)</label>
                        <select class="form-select" @bind="selectedLanguage" disabled="@(isProcessing || isFetchingInfo)">
                            <option value="en">English</option>
                            <option value="pt">Portuguese (BR)</option>
                            <option value="es">Spanish</option>
                            <option value="fr">French</option>
                            <option value="de">German</option>
                            <option value="ja">Japanese</option>
                            <option value="ko">Korean</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold text-muted small">Idioma de Saida (Tutorial)</label>
                        <select class="form-select" @bind="selectedOutputLanguage" disabled="@(isProcessing || isFetchingInfo)">
                            <option value="pt">Portuguese (BR)</option>
                            <option value="en">English</option>
                            <option value="es">Spanish</option>
                            <option value="fr">French</option>
                            <option value="de">German</option>
                        </select>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="mt-4">
                    @if (videoInfo == null)
                    {
                        <!-- Step 1: Fetch video info -->
                        <button class="btn btn-lg btn-primary w-100 py-3 fw-bold shadow-sm"
                                @onclick="FetchVideoInfo"
                                disabled="@(isProcessing || isFetchingInfo || string.IsNullOrWhiteSpace(videoUrl))">
                            @if (isFetchingInfo)
                            {
                                <span class="spinner-border spinner-border-sm me-2"></span>
                                <span>Verificando video...</span>
                            }
                            else
                            {
                                <span>Generate Tutorial PDF</span>
                            }
                        </button>
                    }
                    else
                    {
                        <!-- Step 2: Confirm and generate -->
                        <div class="d-flex gap-2">
                            <button class="btn btn-lg btn-success flex-grow-1 py-3 fw-bold shadow-sm"
                                    @onclick="StartAnalysis"
                                    disabled="@isProcessing">
                                @if (isProcessing)
                                {
                                    <span class="spinner-border spinner-border-sm me-2"></span>
                                    <span>Gerando PDF...</span>
                                }
                                else
                                {
                                    <span>Confirmar e Gerar PDF</span>
                                }
                            </button>
                        </div>
                    }
                </div>
            </div>

            <!-- Progress Indicator -->
            @if (isProcessing || currentStep > 0)
            {
                <div class="progress mb-3" style="height: 25px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: @(progress)%">
                        @statusMessage
                    </div>
                </div>
            }

            <!-- Logs (Collapsible) -->
            @if (logs.Count > 0)
            {
                <div class="card shadow-sm mb-4 border-0 rounded-4 overflow-hidden">
                    <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center" style="cursor: pointer;" @onclick="ToggleLogs">
                        <small class="fw-bold">Execution Logs</small>
                        <small>@logs.Count items @(showLogs ? "v" : ">")</small>
                    </div>
                    @if (showLogs)
                    {
                        <div class="card-body bg-light" style="max-height: 200px; overflow-y: auto; font-family: monospace; font-size: 0.8rem;">
                            @foreach (var log in logs)
                            {
                                <div class="text-dark border-bottom py-1">
                                    <span class="text-muted">[@log.Timestamp:HH:mm:ss]</span> @log.Message
                                </div>
                            }
                        </div>
                    }
                </div>
            }

        </div>
    </div>
</div>

<style>
    .nav-pills .nav-link.active {
        box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    }
    .shadow-soft {
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }
</style>

@code {
    private string activeTab = "youtube";
    private bool isProcessing = false;
    private bool isFetchingInfo = false;
    private int progress = 0;
    private int currentStep = 0;
    private string statusMessage = "Ready";
    private bool showLogs = false;
    private List<LogEntry> logs = new();

    private string videoUrl = string.Empty;
    private string selectedLanguage = "en";
    private string selectedOutputLanguage = "pt";
    private VideoInfo? videoInfo;

    private class LogEntry
    {
        public DateTime Timestamp { get; set; } = DateTime.Now;
        public string Message { get; set; } = string.Empty;
    }

    private void ToggleLogs() => showLogs = !showLogs;

    private void AddLog(string message, int? eventProgress = null)
    {
        logs.Insert(0, new LogEntry { Message = message });
        if (eventProgress.HasValue) progress = eventProgress.Value;
        StateHasChanged();
    }

    private void ClearVideoInfo()
    {
        videoInfo = null;
    }

    private async Task FetchVideoInfo()
    {
        if (string.IsNullOrWhiteSpace(videoUrl)) return;
        isFetchingInfo = true;
        showLogs = true;

        try
        {
            AddLog("Buscando informacoes do video...");
            var response = await Http.GetAsync($"api/video-info?url={Uri.EscapeDataString(videoUrl)}");

            if (!response.IsSuccessStatusCode)
            {
                var error = await response.Content.ReadAsStringAsync();
                throw new Exception($"API Error: {error}");
            }

            videoInfo = await response.Content.ReadFromJsonAsync<VideoInfo>(
                new JsonSerializerOptions { PropertyNameCaseInsensitive = true });

            if (videoInfo != null)
                AddLog($"Video encontrado: {videoInfo.Title} ({videoInfo.Duration:hh\\:mm\\:ss})");
        }
        catch (Exception ex)
        {
            AddLog($"Erro: {ex.Message}");
        }
        finally
        {
            isFetchingInfo = false;
        }
    }

    private async Task StartAnalysis()
    {
        isProcessing = true;
        progress = 0;
        currentStep = 0;
        logs.Clear();
        showLogs = true;

        CancellationTokenSource? cts = null;

        try
        {
            currentStep = 1;
            statusMessage = "Iniciando análise...";
            AddLog("🚀 Enviando requisição para a API...", 5);

            var request = new AnalysisRequest
            {
                VideoUrl = videoUrl,
                Language = selectedLanguage,
                OutputLanguage = selectedOutputLanguage,
                Mode = "native"
            };

            cts = new CancellationTokenSource();
            var cancellationToken = cts.Token;

            var httpRequestMessage = new HttpRequestMessage(HttpMethod.Post, "api/analyze")
            {
                Content = JsonContent.Create(request)
            };

            using var response = await Http.SendAsync(httpRequestMessage, HttpCompletionOption.ResponseHeadersRead, cancellationToken);
            
            if (!response.IsSuccessStatusCode)
            {
                var error = await response.Content.ReadAsStringAsync();
                throw new Exception($"API Error ({response.StatusCode}): {error}");
            }

            var stream = response.Content.ReadFromJsonAsAsyncEnumerable<AnalysisEvent>(new JsonSerializerOptions { PropertyNameCaseInsensitive = true }, cancellationToken);

            await foreach (var analysisEvent in stream.WithCancellation(cancellationToken))
            {
                if (analysisEvent == null) continue;

                if (analysisEvent.IsError)
                {
                    throw new Exception($"Erro da API: {analysisEvent.Message}");
                }

                AddLog(analysisEvent.Message, analysisEvent.ProgressPercentage);
                statusMessage = analysisEvent.Message;
                progress = analysisEvent.ProgressPercentage;
                StateHasChanged();

                if (analysisEvent.Result != null)
                {
                    var result = analysisEvent.Result;
                    AddLog("✅ Análise concluída!", 100);
                    statusMessage = "Pronto!";

                    if (result.PdfData != null && result.PdfData.Length > 0)
                    {
                        AddLog("Salvando PDF...");
                        var fileName = $"VideoStudy_{result.VideoTitle ?? "Tutorial"}_{DateTime.Now:yyyyMMdd_HHmmss}.pdf";
                        // Remove invalid filename chars
                        fileName = string.Join("_", fileName.Split(Path.GetInvalidFileNameChars()));
                        var savedPath = await PdfSaver.SavePdfAsync(result.PdfData, fileName);
                        if (savedPath != null)
                            AddLog($"✓ PDF salvo: {savedPath}");
                        else
                            AddLog("⚠️ Salvamento do PDF cancelado pelo usuário");
                    }
                    else
                    {
                        AddLog("⚠️ Nenhum dado de PDF retornado da API");
                    }
                    break;
                }
            }
        }
        catch (OperationCanceledException)
        {
            AddLog("⏸️ Operação cancelada.");
            statusMessage = "Cancelado";
        }
        catch (Exception ex)
        {
            AddLog($"❌ Erro: {ex.Message}");
            statusMessage = "Erro";
        }
        finally
        {
            isProcessing = false;
            videoInfo = null;
            cts?.Dispose();
        }
    }
}