#!/bin/bash

# MongoDB Migration Web Interface
# Serves migration progress at ROOT_URL/migration-progress

# Source settings
source $SNAP/bin/wekan-read-settings

# Configuration
MIGRATION_STATUS="${SNAP_COMMON}/mongodb-migration-status.json"
MIGRATION_LOG="${SNAP_COMMON}/mongodb-migration-log.txt"
MIGRATION_PROGRESS="${SNAP_COMMON}/mongodb-migration-progress.html"
PORT="${MIGRATION_WEB_PORT:-8081}"

# Create a simple HTTP server using netcat and bash
serve_migration_progress() {
    while true; do
        {
            echo "HTTP/1.1 200 OK"
            echo "Content-Type: text/html; charset=utf-8"
            echo "Cache-Control: no-cache"
            echo "Connection: close"
            echo ""

            # Generate HTML page
            if [ -f "$MIGRATION_STATUS" ]; then
                local status=$(jq -r '.status' "$MIGRATION_STATUS" 2>/dev/null || echo "unknown")
                local step=$(jq -r '.step' "$MIGRATION_STATUS" 2>/dev/null || echo "0")
                local total_steps=$(jq -r '.total_steps' "$MIGRATION_STATUS" 2>/dev/null || echo "0")
                local percentage=$(jq -r '.percentage' "$MIGRATION_STATUS" 2>/dev/null || echo "0")
                local description=$(jq -r '.description' "$MIGRATION_STATUS" 2>/dev/null || echo "Unknown")
                local timestamp=$(jq -r '.timestamp' "$MIGRATION_STATUS" 2>/dev/null || echo "Unknown")

                cat << EOF
<!DOCTYPE html>
<html>
<head>
    <title>MongoDB Migration Progress</title>
    <meta http-equiv="refresh" content="5">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .progress-bar {
            width: 100%;
            background-color: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            margin: 20px 0;
        }
        .progress-fill {
            height: 40px;
            background: linear-gradient(90deg, #4CAF50, #45a049);
            border-radius: 10px;
            width: ${percentage}%;
            transition: width 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        .status {
            margin: 20px 0;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }
        .error { color: #d32f2f; }
        .success { color: #388e3c; }
        .warning { color: #f57c00; }
        .info { color: #1976d2; }
        .log-container {
            margin-top: 30px;
            max-height: 300px;
            overflow-y: auto;
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 5px;
            font-family: monospace;
            font-size: 12px;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .status-running { background-color: #ff9800; }
        .status-completed { background-color: #4caf50; }
        .status-error { background-color: #f44336; }
        .status-unknown { background-color: #9e9e9e; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>MongoDB Migration Progress</h1>
            <p>Migrating from MongoDB 3 to MongoDB 7</p>
        </div>

        <div class="progress-bar">
            <div class="progress-fill">${percentage}%</div>
        </div>

        <div class="status">
            <p><span class="status-indicator status-${status}"></span><strong>Status:</strong> ${status}</p>
            <p><strong>Progress:</strong> $step of $total_steps steps</p>
            <p><strong>Current Step:</strong> $description</p>
            <p><strong>Last Updated:</strong> $timestamp</p>
        </div>

        <div class="log-container">
            <h3>Migration Log (Last 20 lines):</h3>
            <pre>$(tail -20 "$MIGRATION_LOG" 2>/dev/null || echo "No log available")</pre>
        </div>

        <p style="text-align: center; margin-top: 30px; color: #666;">
            <em>This page will refresh automatically every 5 seconds.</em><br>
            <em>Migration URL: ${ROOT_URL:-http://localhost:8080}/migration-progress</em>
        </p>
    </div>
</body>
</html>
EOF
            else
                cat << EOF
<!DOCTYPE html>
<html>
<head>
    <title>MongoDB Migration Progress</title>
    <meta http-equiv="refresh" content="5">
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; }
        .container { max-width: 800px; margin: 0 auto; text-align: center; }
    </style>
</head>
<body>
    <div class="container">
        <h1>MongoDB Migration</h1>
        <p>No migration in progress.</p>
        <p><em>This page will refresh automatically every 5 seconds.</em></p>
    </div>
</body>
</html>
EOF
            fi
        } | nc -l -p "$PORT" -q 1
    done
}

# Start the web server
serve_migration_progress
