{% extends "base.html" %}

{% block title %}{{ app.name }} - Hop3 Dashboard{% endblock %}

{% block content %}
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Success message for newly created app -->
    {% if request.query_params.get('created') == 'true' %}
    <div class="mb-6 bg-green-50 border border-green-200 rounded-lg 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.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-green-800">App Created Successfully!</h3>
                <p class="mt-1 text-sm text-green-700">
                    Application "{{ app.name }}" has been created. To deploy your code, use the CLI:
                    <code class="bg-green-100 px-2 py-1 rounded text-xs ml-1">hop3 deploy {{ app.name }} /path/to/your/app</code>
                </p>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Success message for actions (restart/stop) -->
    {% if request.query_params.get('success') == 'true' %}
    <div class="mb-6 bg-green-50 border border-green-200 rounded-lg 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.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-green-800">Action Successful!</h3>
                <p class="mt-1 text-sm text-green-700">
                    {% if request.query_params.get('action') == 'restart' %}
                        Application "{{ app.name }}" is restarting.
                    {% elif request.query_params.get('action') == 'stop' %}
                        Application "{{ app.name }}" has been stopped.
                    {% endif %}
                </p>
            </div>
        </div>
    </div>
    {% elif request.query_params.get('success') == 'false' %}
    <div class="mb-6 bg-red-50 border border-red-200 rounded-lg 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.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-red-800">Action Failed!</h3>
                <p class="mt-1 text-sm text-red-700">
                    {% if request.query_params.get('action') == 'restart' %}
                        Failed to restart application "{{ app.name }}". Check the logs for details.
                    {% elif request.query_params.get('action') == 'stop' %}
                        Failed to stop application "{{ app.name }}". Check the logs for details.
                    {% endif %}
                </p>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Header with actions -->
    <div class="sm:flex sm:items-center sm:justify-between mb-8">
        <div>
            <nav class="flex mb-2" aria-label="Breadcrumb">
                <ol class="flex items-center space-x-2">
                    <li>
                        <a href="/dashboard" class="text-gray-400 hover:text-gray-500">
                            Applications
                        </a>
                    </li>
                    <li>
                        <span class="text-gray-400">/</span>
                    </li>
                    <li>
                        <span class="text-gray-900 font-medium">{{ app.name }}</span>
                    </li>
                </ol>
            </nav>
            <h1 class="text-3xl font-bold leading-6 text-gray-900">{{ app.name }}</h1>
            <p class="mt-2 text-sm text-gray-700">
                Application details and process information
            </p>
        </div>
        <div class="mt-4 sm:ml-16 sm:mt-0 flex flex-col sm:flex-row gap-2">
            <a href="/dashboard/apps/{{ app.name }}/logs"
               class="inline-flex items-center justify-center rounded-md bg-gray-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500">
                View Logs
            </a>
            {% if app.state == 'RUNNING' %}
            <form method="post" action="/dashboard/apps/{{ app.name }}/stop" class="inline">
                <button type="submit"
                        onclick="return confirm('Are you sure you want to stop {{ app.name }}?')"
                        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">
                    Stop App
                </button>
            </form>
            {% else %}
            <form method="post" action="/dashboard/apps/{{ app.name }}/restart" class="inline">
                <button type="submit"
                        onclick="return confirm('Are you sure you want to restart {{ app.name }}?')"
                        class="inline-flex items-center justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500">
                    Restart App
                </button>
            </form>
            {% endif %}
        </div>
    </div>

    <!-- Status card with HTMX polling -->
    <div id="status-container"
         hx-get="/dashboard/apps/{{ app.name }}/status"
         hx-trigger="every 5s"
         hx-swap="innerHTML">
        {% include 'dashboard/_app_status.html' %}
    </div>

    <!-- Application Information -->
    <div class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-2">
        <!-- Basic Info Card -->
        <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">Application Name</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ app.name }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Port</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ app.port }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Hostname</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            {% if app.hostname %}
                                <a href="http://{{ app.hostname }}" target="_blank" class="text-blue-600 hover:text-blue-900">
                                    {{ app.hostname }}
                                    <svg class="inline h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                    </svg>
                                </a>
                            {% else %}
                                <span class="text-gray-400">Not configured</span>
                            {% endif %}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Created At</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ app.created_at.strftime('%Y-%m-%d %H:%M:%S') if app.created_at else 'N/A' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Last Updated</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ app.updated_at.strftime('%Y-%m-%d %H:%M:%S') if app.updated_at else 'N/A' }}</dd>
                    </div>
                </dl>
            </div>
        </div>

        <!-- Paths Card -->
        <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 Paths</h3>
                <dl class="grid grid-cols-1 gap-x-4 gap-y-6">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Root Path</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-mono text-xs">{{ app.app_path }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Source Path</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-mono text-xs">{{ app.src_path }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Data Path</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-mono text-xs">{{ app.data_path }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Log Path</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-mono text-xs">{{ app.log_path }}</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>

    <!-- Processes/Workers Card -->
    {% if app.workers %}
    <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">Processes</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">
                                Process Type
                            </th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                Command
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        {% for process_type, command in app.workers.items() %}
                        <tr>
                            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">
                                <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset
                                    {% if process_type in ['web', 'wsgi', 'jwsgi', 'rwsgi'] %}
                                        bg-blue-50 text-blue-700 ring-blue-600/20
                                    {% elif process_type == 'worker' %}
                                        bg-purple-50 text-purple-700 ring-purple-600/20
                                    {% elif process_type == 'cron' %}
                                        bg-yellow-50 text-yellow-700 ring-yellow-600/20
                                    {% else %}
                                        bg-gray-50 text-gray-700 ring-gray-600/20
                                    {% endif %}
                                ">
                                    {{ process_type }}
                                </span>
                            </td>
                            <td class="px-3 py-4 text-sm text-gray-500 font-mono">
                                {{ command }}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Attached Addons Card -->
    {% if addons %}
    <div class="mt-8 bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Attached Addons</h3>
                <span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
                    {{ addons | length }} service(s)
                </span>
            </div>
            <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">
                                Attached
                            </th>
                            <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-0">
                                <span class="sr-only">Actions</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        {% for service in addons %}
                        <tr>
                            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">
                                <a href="/dashboard/addons/{{ addon.addon_name }}" class="text-blue-600 hover:text-blue-900">
                                    {{ addon.addon_name }}
                                </a>
                            </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.service_type == 'postgres' or service.service_type == 'postgresql' %}
                                        bg-blue-50 text-blue-700 ring-blue-600/20
                                    {% elif service.service_type == 'redis' %}
                                        bg-red-50 text-red-700 ring-red-600/20
                                    {% elif service.service_type == 'mysql' %}
                                        bg-orange-50 text-orange-700 ring-orange-600/20
                                    {% else %}
                                        bg-gray-50 text-gray-700 ring-gray-600/20
                                    {% endif %}
                                ">
                                    {{ service.service_type }}
                                </span>
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                {{ service.created_at }}
                            </td>
                            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                                <a href="/dashboard/addons/{{ addon.addon_name }}"
                                   class="inline-flex items-center rounded-md bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-blue-500">
                                    View Details
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Environment Variables Card -->
    {% if app.env_var_count > 0 %}
    <div class="mt-8 bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Environment Variables</h3>
                <span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
                    {{ app.env_var_count }} variables
                </span>
            </div>
            <p class="text-sm text-gray-500">
                Environment variables are managed via the CLI. Use <code class="bg-gray-100 px-2 py-1 rounded text-xs">hop3 config:set</code> to add or update variables.
            </p>
            <div class="mt-4">
                <a href="/dashboard/apps/{{ app.name }}/env" class="text-sm text-blue-600 hover:text-blue-900 font-medium">
                    View and manage environment variables →
                </a>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Quick Actions -->
    <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">Quick Actions</h3>
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                <a href="/dashboard/apps/{{ app.name }}/logs" class="relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-6 text-center hover:border-gray-400">
                    <svg class="mx-auto h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    <span class="mt-2 block text-sm font-medium text-gray-900">View Logs</span>
                </a>

                <a href="/dashboard/apps/{{ app.name }}/env" class="relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-6 text-center hover:border-gray-400">
                    <svg class="mx-auto h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                    <span class="mt-2 block text-sm font-medium text-gray-900">Environment Variables</span>
                </a>

                <form method="post" action="/dashboard/apps/{{ app.name }}/backup" class="block">
                    <button type="submit"
                            onclick="return confirm('Are you sure you want to create a backup of {{ app.name }}? This may take several minutes depending on the size of your application and databases.')"
                            class="relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-6 text-center hover:border-gray-400 cursor-pointer">
                        <svg class="mx-auto h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
                        </svg>
                        <span class="mt-2 block text-sm font-medium text-gray-900">Database Backup</span>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
