{% extends "layouts/base.njk" %}

{% block title %}OS Management - Unraid Component Test{% endblock %}

{% block pageStyles %}
<style>
  body {
    padding: 0;
  }
  
  .header {
    background: var(--header-background-color, #1f2937);
    color: var(--header-text-primary, white);
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .header h1 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .test-btn.large {
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 500;
  }
</style>
{% endblock %}

{% block content %}
<div class="header">
  <div class="container">
    <h1>
      💿 OS Management
      <unraid-header-os-version></unraid-header-os-version>
    </h1>
  </div>
</div>

<div class="container">
  <div class="info-bar">
    <div class="version-info">
      <div class="version-item">
        <span class="version-label">Current Version</span>
        <span class="version-value" id="current-version">6.12.4</span>
      </div>
      <div class="version-item">
        <span class="version-label">Latest Available</span>
        <span class="version-value" id="latest-version">6.12.5</span>
      </div>
      <div class="version-item">
        <span class="version-label">Update Channel</span>
        <span class="version-value" id="update-channel">Stable</span>
      </div>
    </div>
    <div class="status-indicator update-available" id="update-status">
      <span>●</span> Update Available
    </div>
  </div>

  <div class="main-grid">
    <div class="card">
      <h2>⬆️ System Updates</h2>
      <p class="card-description">Check for and install Unraid OS updates</p>
      <unraid-update-os></unraid-update-os>
    </div>

    <div class="card">
      <h2>⬇️ System Downgrade</h2>
      <p class="card-description">Rollback to a previous Unraid OS version</p>
      <unraid-downgrade-os></unraid-downgrade-os>
    </div>
  </div>

  <div class="card" style="margin-top: 20px; background: #1f2937;">
    <h2 style="color: white;">🧪 Test Scenarios</h2>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px;">
      <button class="test-btn" id="check-updates">Check for Updates</button>
      <button class="test-btn" id="simulate-update">Simulate Update Available</button>
      <button class="test-btn" id="simulate-current">Simulate Up-to-date</button>
      <button class="test-btn" id="change-channel">Switch Channel (Beta)</button>
      <button class="test-btn" id="simulate-download">Simulate Download Progress</button>
      <button class="test-btn" id="simulate-install">Simulate Installation</button>
    </div>
    
    <div style="margin-top: 20px;">
      <div style="background: black; color: #10b981; padding: 15px; border-radius: 6px; font-family: monospace; font-size: 12px; min-height: 120px; max-height: 200px; overflow-y: auto;" id="console">
        > OS Management Test Console
        > Ready for testing...
      </div>
    </div>
  </div>
</div>

<unraid-modals></unraid-modals>
{% endblock %}

{% block scripts %}
<script>
  $(document).ready(function() {
    const $console = $('#console');
    let currentVersion = '6.12.4';
    let latestVersion = '6.12.5';
    let updateChannel = 'stable';
    
    function log(message, type = 'info') {
      const timestamp = new Date().toLocaleTimeString();
      const prefix = type === 'error' ? '❌' : type === 'success' ? '✅' : '>';
      $console.append('\n' + prefix + ' [' + timestamp + '] ' + message);
      $console.scrollTop($console[0].scrollHeight);
    }
    
    $('#check-updates').on('click', function() {
      log('Checking for updates...');
      $('#update-status').removeClass('up-to-date update-available').addClass('checking');
      $('#update-status').html('<span>⟳</span> Checking...');
      
      setTimeout(function() {
        if (currentVersion !== latestVersion) {
          $('#update-status').removeClass('checking up-to-date').addClass('update-available');
          $('#update-status').html('<span>●</span> Update Available');
          log('Update available: ' + latestVersion, 'success');
        } else {
          $('#update-status').removeClass('checking update-available').addClass('up-to-date');
          $('#update-status').html('<span>✓</span> Up to Date');
          log('System is up to date', 'success');
        }
      }, 2000);
    });
    
    $('#simulate-update').on('click', function() {
      latestVersion = '6.12.6';
      $('#latest-version').text(latestVersion);
      $('#update-status').removeClass('up-to-date checking').addClass('update-available');
      $('#update-status').html('<span>●</span> Update Available');
      log('Simulated update available: ' + latestVersion);
      
      $('unraid-update-os').attr('latest-version', latestVersion);
    });
    
    $('#simulate-current').on('click', function() {
      currentVersion = latestVersion = '6.12.5';
      $('#current-version').text(currentVersion);
      $('#latest-version').text(latestVersion);
      $('#update-status').removeClass('update-available checking').addClass('up-to-date');
      $('#update-status').html('<span>✓</span> Up to Date');
      log('System is now up to date');
    });
    
    $('#change-channel').on('click', function() {
      updateChannel = updateChannel === 'stable' ? 'beta' : 'stable';
      $('#update-channel').text(updateChannel.charAt(0).toUpperCase() + updateChannel.slice(1));
      log('Switched to ' + updateChannel + ' channel');
      
      if (updateChannel === 'beta') {
        latestVersion = '6.13.0-beta1';
        $('#latest-version').text(latestVersion);
        log('Beta version available: ' + latestVersion);
      } else {
        latestVersion = '6.12.5';
        $('#latest-version').text(latestVersion);
      }
    });
    
    $('#simulate-download').on('click', function() {
      log('Starting download simulation...');
      
      const $card = $(this).closest('.card');
      if (!$card.find('.progress-bar').length) {
        $card.append('<div class="progress-bar"><div class="progress-fill" style="width: 0%">0%</div></div>');
      }
      
      let progress = 0;
      const interval = setInterval(function() {
        progress += 10;
        $('.progress-fill').css('width', progress + '%').text(progress + '%');
        log('Download progress: ' + progress + '%');
        
        if (progress >= 100) {
          clearInterval(interval);
          log('Download complete!', 'success');
          setTimeout(function() {
            $('.progress-bar').fadeOut();
          }, 2000);
        }
      }, 500);
    });
    
    $('#simulate-install').on('click', function() {
      log('Preparing installation...');
      log('Creating backup...');
      
      setTimeout(function() {
        log('Backup complete', 'success');
        log('Installing update...');
        
        setTimeout(function() {
          log('Installation complete!', 'success');
          log('System will restart in 30 seconds...');
          currentVersion = latestVersion;
          $('#current-version').text(currentVersion);
        }, 3000);
      }, 2000);
    });
    
    $(document).on('unraid:update-started', function(e, data) {
      log('Update started: ' + data.version);
    });
    
    $(document).on('unraid:update-complete', function(e, data) {
      log('Update complete: ' + data.version, 'success');
    });
    
    log('OS Management test page initialized');
  });
</script>
{% endblock %}

