{% extends "base.html" %}

{% block title %}Backup Details - Hop3 Dashboard{% endblock %}

{% block content %}
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Breadcrumb -->
    <nav class="flex mb-4" aria-label="Breadcrumb">
        <ol class="flex items-center space-x-2">
            <li>
                <a href="/dashboard" class="text-gray-400 hover:text-gray-500">
                    Dashboard
                </a>
            </li>
            <li>
                <span class="text-gray-400">/</span>
            </li>
            <li>
                <a href="/dashboard/backups" class="text-gray-400 hover:text-gray-500">
                    Backups
                </a>
            </li>
            <li>
                <span class="text-gray-400">/</span>
            </li>
            <li>
                <span class="text-gray-900 font-medium">{{ backup.backup_id }}</span>
            </li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="sm:flex sm:items-center sm:justify-between mb-8">
        <div>
            <h1 class="text-3xl font-bold leading-6 text-gray-900">Backup Details</h1>
            <p class="mt-2 text-sm text-gray-700">
                Detailed information about this backup
            </p>
        </div>
        <div class="mt-4 sm:ml-16 sm:mt-0 flex flex-col sm:flex-row gap-2">
            <form method="post" action="/dashboard/backups/{{ backup.backup_id }}/restore" class="inline">
                <button type="submit"
                        onclick="return confirm('Are you sure you want to restore this backup? This will overwrite the current application data.')"
                        class="inline-flex items-center justify-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500">
                    Restore Backup
                </button>
            </form>
            <form method="post" action="/dashboard/backups/{{ backup.backup_id }}/delete" class="inline">
                <button type="submit"
                        onclick="return confirm('Are you sure you want to delete this backup? This action cannot be undone!')"
                        class="inline-flex items-center justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500">
                    Delete Backup
                </button>
            </form>
        </div>
    </div>

    <!-- Integrity Status -->
    <div class="mb-6">
        {% if backup.all_valid %}
        <div class="rounded-md bg-green-50 p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-green-800">Backup Integrity Verified</h3>
                    <div class="mt-2 text-sm text-green-700">
                        <p>All checksums are valid. This backup is ready to restore.</p>
                    </div>
                </div>
            </div>
        </div>
        {% else %}
        <div class="rounded-md bg-red-50 p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800">Backup Integrity Check Failed</h3>
                    <div class="mt-2 text-sm text-red-700">
                        <p>Some checksums do not match. This backup may be corrupted.</p>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Basic Information -->
    <div class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-2">
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">Basic Information</h3>
                <dl class="grid grid-cols-1 gap-x-4 gap-y-6">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Backup ID</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-mono">{{ backup.backup_id }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Application</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            <a href="/dashboard/apps/{{ backup.app_name }}" class="text-blue-600 hover:text-blue-900">
                                {{ backup.app_name }}
                            </a>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Created At</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ backup.created_at }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Total Size</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ backup.size }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Format Version</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ backup.format_version }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Hop3 Version</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ backup.hop3_version }}</dd>
                    </div>
                </dl>
            </div>
        </div>

        <!-- Application Metadata -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">Application State</h3>
                <dl class="grid grid-cols-1 gap-x-4 gap-y-6">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Hostname</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ backup.app_metadata.hostname or 'N/A' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Port</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ backup.app_metadata.port or 'N/A' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Run State</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset
                                {% if backup.app_metadata.run_state == 'RUNNING' %}
                                    bg-green-50 text-green-700 ring-green-600/20
                                {% elif backup.app_metadata.run_state == 'STOPPED' %}
                                    bg-gray-50 text-gray-700 ring-gray-600/20
                                {% elif backup.app_metadata.run_state == 'STARTING' or backup.app_metadata.run_state == 'STOPPING' %}
                                    bg-blue-50 text-blue-700 ring-blue-600/20
                                {% elif backup.app_metadata.run_state == 'FAILED' %}
                                    bg-red-50 text-red-700 ring-red-600/20
                                {% else %}
                                    bg-yellow-50 text-yellow-700 ring-yellow-600/20
                                {% endif %}
                            ">
                                {{ backup.app_metadata.run_state }}
                            </span>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Environment Variables</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ backup.env_vars_count }} variables</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>

    <!-- Addons -->
    {% if backup.services %}
    <div class="mt-8 bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">Included Addons</h3>
            <div class="overflow-hidden">
                <table class="min-w-full divide-y divide-gray-300">
                    <thead>
                        <tr>
                            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">
                                Addon Name
                            </th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                Type
                            </th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                Size
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        {% for service in backup.services %}
                        <tr>
                            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">
                                {{ service.name }}
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset
                                    {% if service.type == 'postgres' %}
                                        bg-blue-50 text-blue-700 ring-blue-600/20
                                    {% elif service.type == 'redis' %}
                                        bg-red-50 text-red-700 ring-red-600/20
                                    {% else %}
                                        bg-gray-50 text-gray-700 ring-gray-600/20
                                    {% endif %}
                                ">
                                    {{ service.type }}
                                </span>
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                {% set size_bytes = service.size_bytes %}
                                {% if size_bytes < 1024 %}
                                    {{ size_bytes }} B
                                {% elif size_bytes < 1048576 %}
                                    {{ "%.1f"|format(size_bytes / 1024) }} KB
                                {% elif size_bytes < 1073741824 %}
                                    {{ "%.1f"|format(size_bytes / 1048576) }} MB
                                {% else %}
                                    {{ "%.1f"|format(size_bytes / 1073741824) }} GB
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- File Checksums -->
    <div class="mt-8 bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">File Checksums</h3>
            <div class="overflow-hidden">
                <table class="min-w-full divide-y divide-gray-300">
                    <thead>
                        <tr>
                            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">
                                Status
                            </th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                File
                            </th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                Checksum
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        {% for file in backup.checksums %}
                        <tr>
                            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-0">
                                {% if file.valid %}
                                <span class="text-green-600">✓</span>
                                {% else %}
                                <span class="text-red-600">✗</span>
                                {% endif %}
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm font-medium text-gray-900">
                                {{ file.filename }}
                            </td>
                            <td class="px-3 py-4 text-sm text-gray-500 font-mono text-xs">
                                {{ file.checksum }}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}