simulated UI flow added

TuneRipper/Pages/Home.razor

@@ -1,4 +1,6 @@
 @page "/"
+@using Microsoft.AspNetCore.Components.Web
+@inject IJSRuntime JSRuntime
 
 <PageTitle>TuneRipper - YouTube to MP3 Downloader</PageTitle>
 
@@ -15,16 +17,34 @@
                    @bind="youtubeUrl" 
                    @onkeypress="HandleKeyPress"
                    placeholder="Paste your YouTube link here..." 
-                   class="url-input" />
+                   class="url-input"
+                   disabled="@isProcessing" />
             <button @onclick="DownloadMp3" 
                     class="download-btn" 
-                    disabled="@string.IsNullOrWhiteSpace(youtubeUrl)">
+                    disabled="@(string.IsNullOrWhiteSpace(youtubeUrl) || isProcessing)">
                 <span class="btn-icon">🎵</span>
-                Download MP3
+                @if (isProcessing)
+                {
+                    <span>Processing...</span>
+                }
+                else
+                {
+                    <span>Download MP3</span>
+                }
             </button>
         </div>
         
-        @if (!string.IsNullOrWhiteSpace(outputMessage))
+        @if (isProcessing)
+        {
+            <div class="progress-container">
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: @(progressPercentage)%"></div>
+                </div>
+                <div class="progress-text">@progressMessage (@progressPercentage%)</div>
+            </div>
+        }
+        
+        @if (!string.IsNullOrWhiteSpace(outputMessage) && !isProcessing)
         {
             <div class="output-message">
                 <p>@outputMessage</p>
@@ -32,6 +52,28 @@
         }
     </div>
     
+    @if (downloadLinks.Any())
+    {
+        <div class="download-links-section">
+            <h3 class="downloads-title">📥 Your Downloads</h3>
+            <div class="download-links">
+                @foreach (var download in downloadLinks.AsEnumerable().Reverse())
+                {
+                    <div class="download-item">
+                        <div class="download-info">
+                            <span class="download-title">@download.Title</span>
+                            <span class="download-date">@download.CreatedAt.ToString("MMM dd, yyyy HH:mm")</span>
+                        </div>
+                        <button class="download-link-btn" @onclick="() => DownloadFile(download.FileName)">
+                            <span class="download-icon">⬇️</span>
+                            Download MP3
+                        </button>
+                    </div>
+                }
+            </div>
+        </div>
+    }
+    
     <div class="features">
         <div class="feature">
             <span class="feature-icon">⚡</span>
@@ -48,28 +90,231 @@
     </div>
 </div>
 
+<style>
+    .progress-container {
+        margin-top: 20px;
+        width: 100%;
+    }
+
+    .progress-bar {
+        width: 100%;
+        height: 8px;
+        background-color: #e0e0e0;
+        border-radius: 4px;
+        overflow: hidden;
+        margin-bottom: 10px;
+    }
+
+    .progress-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #4CAF50, #45a049);
+        border-radius: 4px;
+        transition: width 0.3s ease;
+    }
+
+    .progress-text {
+        text-align: center;
+        font-size: 14px;
+        color: #666;
+        font-weight: 500;
+    }
+
+    .download-links-section {
+        margin-top: 30px;
+        width: 100%;
+        max-width: 600px;
+    }
+
+    .downloads-title {
+        color: #333;
+        margin-bottom: 20px;
+        text-align: center;
+        font-size: 20px;
+        font-weight: 600;
+    }
+
+    .download-links {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .download-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: #f8f9fa;
+        border: 1px solid #e9ecef;
+        border-radius: 8px;
+        padding: 15px;
+        transition: all 0.2s ease;
+    }
+
+    .download-item:hover {
+        background: #e9ecef;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+
+    .download-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .download-title {
+        font-weight: 600;
+        color: #333;
+        font-size: 14px;
+    }
+
+    .download-date {
+        font-size: 12px;
+        color: #666;
+    }
+
+    .download-link-btn {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border: none;
+        padding: 8px 16px;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .download-link-btn:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+    }
+
+    .download-icon {
+        font-size: 16px;
+    }
+</style>
+
 @code {
     private string youtubeUrl = "";
     private string outputMessage = "";
+    private bool isProcessing = false;
+    private int progressPercentage = 0;
+    private string progressMessage = "";
+    private List<DownloadItem> downloadLinks = new();
+
+    public class DownloadItem
+    {
+        public string Title { get; set; } = "";
+        public string FileName { get; set; } = "";
+        public DateTime CreatedAt { get; set; }
+    }
 
     private async Task DownloadMp3()
     {
         if (!string.IsNullOrWhiteSpace(youtubeUrl))
         {
-            outputMessage = $"Processing YouTube URL: {youtubeUrl}";
+            isProcessing = true;
+            progressPercentage = 0;
+            outputMessage = "";
             
-            // Simulate processing delay
+            await SimulateProgress();
-            await Task.Delay(1000);
             
-            outputMessage += "\n✅ Ready to download! (This is test functionality)";
+            string title = ExtractTitleFromUrl(youtubeUrl);
+            
+            downloadLinks.Add(new DownloadItem
+            {
+                Title = title,
+                FileName = "sample.mp3",
+                CreatedAt = DateTime.Now
+            });
+            
+            outputMessage = $"✅ Successfully converted: {title}";
+            isProcessing = false;
+            youtubeUrl = "";
+            
+            StateHasChanged();
         }
     }
 
+    private async Task SimulateProgress()
+    {
+        string[] progressSteps = {
+            "Fetching video information...",
+            "Analyzing audio stream...",
+            "Downloading audio data...",
+            "Converting to MP3...",
+            "Optimizing quality...",
+            "Finalizing download..."
+        };
+
+        int stepDuration = 800;
+        int stepsPerProgress = 100 / progressSteps.Length;
+
+        for (int i = 0; i < progressSteps.Length; i++)
+        {
+            progressMessage = progressSteps[i];
+            
+            int startProgress = i * stepsPerProgress;
+            int endProgress = (i + 1) * stepsPerProgress;
+            
+            for (int progress = startProgress; progress <= endProgress; progress++)
+            {
+                progressPercentage = Math.Min(progress, 100);
+                StateHasChanged();
+                await Task.Delay(stepDuration / stepsPerProgress);
+            }
+        }
+        
+        progressPercentage = 100;
+        progressMessage = "Complete!";
+        StateHasChanged();
+        await Task.Delay(500);
+    }
+
+    private string ExtractTitleFromUrl(string url)
+    {
+        if (url.Contains("youtube.com/watch?v=") || url.Contains("youtu.be/"))
+        {
+            var videoId = url.Contains("youtu.be/") 
+                ? url.Substring(url.LastIndexOf('/') + 1).Split('?')[0]
+                : url.Split("v=")[1].Split('&')[0];
+            return $"YouTube Video {videoId.Substring(0, Math.Min(8, videoId.Length))}";
+        }
+        return $"Audio File {DateTime.Now:HHmmss}";
+    }
+
+    private async Task DownloadFile(string fileName)
+    {
+        await JSRuntime.InvokeVoidAsync("downloadFile", fileName);
+    }
+
     private async Task HandleKeyPress(KeyboardEventArgs e)
     {
-        if (e.Key == "Enter" && !string.IsNullOrWhiteSpace(youtubeUrl))
+        if (e.Key == "Enter" && !string.IsNullOrWhiteSpace(youtubeUrl) && !isProcessing)
         {
             await DownloadMp3();
         }
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await JSRuntime.InvokeVoidAsync("eval", @"
+                window.downloadFile = function(fileName) {
+                    const link = document.createElement('a');
+                    link.href = fileName;
+                    link.download = fileName;
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                };
+            ");
+        }
+    }
 }