{% extends 'base.html' %}
{% load static %}

{% block title %}Service {{ service_id }} - Inveterate{% endblock %}

{% block content %}
<div x-data="serviceDetail({{ service_id }})" x-init="init()">
    <!-- Back Button -->
    <div class="mb-4">
        <a href="/services/" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
            &larr; Back to Services
        </a>
    </div>

    <!-- Loading State -->
    <div x-show="loading" class="flex justify-center py-12">
        <div class="spinner"></div>
    </div>

    <!-- Service Details -->
    <div x-show="!loading">
        <!-- Header -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <div class="flex justify-between items-start">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900" x-text="service.hostname"></h1>
                    <p class="text-gray-600 mt-1">Machine ID: <span x-text="service.machine_id || 'Pending'"></span></p>
                </div>
                <span :class="`status-badge status-${service.status}`" x-text="service.status"></span>
            </div>

            <!-- Status Message -->
            <div x-show="service.status_msg" class="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
                <p class="text-sm text-yellow-800" x-text="service.status_msg"></p>
            </div>
        </div>

        <!-- VM Controls -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">VM Controls</h2>
            <div class="flex flex-wrap gap-3">
                <button @click="startVM()"
                        :disabled="isActionDisabled || service.status === 'pending'"
                        class="vm-control-btn bg-green-600 hover:bg-green-700 disabled:bg-gray-300 text-white px-4 py-2 rounded-md text-sm font-medium">
                    Start
                </button>
                <button @click="stopVM()"
                        :disabled="isActionDisabled || service.status === 'pending'"
                        class="vm-control-btn bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-300 text-white px-4 py-2 rounded-md text-sm font-medium">
                    Stop
                </button>
                <button @click="shutdownVM()"
                        :disabled="isActionDisabled || service.status === 'pending'"
                        class="vm-control-btn bg-orange-600 hover:bg-orange-700 disabled:bg-gray-300 text-white px-4 py-2 rounded-md text-sm font-medium">
                    Shutdown
                </button>
                <button @click="rebootVM()"
                        :disabled="isActionDisabled || service.status === 'pending'"
                        class="vm-control-btn bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 text-white px-4 py-2 rounded-md text-sm font-medium">
                    Reboot
                </button>
                <button @click="resetVM()"
                        :disabled="isActionDisabled || service.status === 'pending'"
                        class="vm-control-btn bg-red-600 hover:bg-red-700 disabled:bg-gray-300 text-white px-4 py-2 rounded-md text-sm font-medium">
                    Reset
                </button>
                <button @click="openConsole()"
                        :disabled="!service.machine_id"
                        class="vm-control-btn bg-purple-600 hover:bg-purple-700 disabled:bg-gray-300 text-white px-4 py-2 rounded-md text-sm font-medium">
                    Console
                </button>
            </div>
        </div>

        <!-- VM Status & Resources -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <!-- Status -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">Status</h2>
                <div x-show="vmStatus" class="space-y-3">
                    <div class="flex justify-between">
                        <span class="text-gray-600">VM Status:</span>
                        <span :class="`status-badge status-${vmStatus?.status}`" x-text="vmStatus?.status || 'Unknown'"></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">CPU Usage:</span>
                        <span class="font-medium" x-text="`${((vmStatus?.cpu || 0) * 100).toFixed(1)}%`"></span>
                    </div>
                    <div>
                        <div class="flex justify-between mb-1">
                            <span class="text-gray-600">Memory:</span>
                            <span class="font-medium" x-text="`${formatBytes(vmStatus?.mem)} / ${formatBytes(vmStatus?.maxmem)}`"></span>
                        </div>
                        <div class="resource-bar">
                            <div class="resource-bar-fill"
                                 :class="getResourceClass((vmStatus?.mem / vmStatus?.maxmem) * 100)"
                                 :style="`width: ${(vmStatus?.mem / vmStatus?.maxmem) * 100}%`"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between mb-1">
                            <span class="text-gray-600">Disk:</span>
                            <span class="font-medium" x-text="`${formatBytes(vmStatus?.disk)} / ${formatBytes(vmStatus?.maxdisk)}`"></span>
                        </div>
                        <div class="resource-bar">
                            <div class="resource-bar-fill"
                                 :class="getResourceClass((vmStatus?.disk / vmStatus?.maxdisk) * 100)"
                                 :style="`width: ${(vmStatus?.disk / vmStatus?.maxdisk) * 100}%`"></div>
                        </div>
                    </div>
                </div>
                <button @click="refreshStatus()" class="mt-4 text-blue-600 hover:text-blue-800 text-sm font-medium">
                    Refresh Status
                </button>
            </div>

            <!-- IP Addresses -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">IP Addresses</h2>
                <div x-show="ips.length > 0" class="space-y-2">
                    <template x-for="ip in ips" :key="ip.value">
                        <div class="flex items-center justify-between p-2 bg-gray-50 rounded">
                            <div>
                                <span class="font-mono text-sm" x-text="ip.value"></span>
                                <span x-show="ip.primary" class="ml-2 text-xs text-blue-600 font-medium">(Primary)</span>
                            </div>
                            <button @click="copyToClipboard(ip.value)"
                                    class="text-gray-400 hover:text-gray-600">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                                </svg>
                            </button>
                        </div>
                    </template>
                </div>
                <div x-show="ips.length === 0" class="text-sm text-gray-500">
                    No IP addresses assigned
                </div>
            </div>
        </div>

        <!-- Service Plan Details -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">Service Plan</h2>
            <div x-show="service.service_plan" class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div>
                    <p class="text-gray-600 text-sm">CPU Cores</p>
                    <p class="text-xl font-semibold" x-text="service.service_plan?.cores || 'N/A'"></p>
                </div>
                <div>
                    <p class="text-gray-600 text-sm">RAM</p>
                    <p class="text-xl font-semibold" x-text="`${service.service_plan?.ram || 0} MB`"></p>
                </div>
                <div>
                    <p class="text-gray-600 text-sm">Disk</p>
                    <p class="text-xl font-semibold" x-text="`${service.service_plan?.size || 0} GB`"></p>
                </div>
                <div>
                    <p class="text-gray-600 text-sm">Type</p>
                    <p class="text-xl font-semibold uppercase" x-text="service.service_plan?.type || 'N/A'"></p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function serviceDetail(serviceId) {
    return {
        service: {},
        vmStatus: null,
        ips: [],
        loading: true,
        isActionDisabled: false,

        async init() {
            await this.loadService();
            await this.loadIPs();
            if (this.service.machine_id) {
                await this.loadStatus();
                // Auto-refresh status every 30 seconds
                setInterval(() => this.loadStatus(), 30000);
            }
        },

        async loadService() {
            try {
                this.service = await api.getService(serviceId);
            } catch (error) {
                showError('Failed to load service: ' + error.message);
            } finally {
                this.loading = false;
            }
        },

        async loadStatus() {
            try {
                this.vmStatus = await api.getServiceStatus(serviceId);
            } catch (error) {
                console.error('Failed to load VM status:', error);
            }
        },

        async loadIPs() {
            try {
                this.ips = await api.getServiceIPs(serviceId);
            } catch (error) {
                console.error('Failed to load IPs:', error);
            }
        },

        async refreshStatus() {
            await this.loadStatus();
            showSuccess('Status refreshed');
        },

        async startVM() {
            if (!confirm('Start this VM?')) return;
            await this.performAction(api.startService(serviceId), 'Starting VM...');
        },

        async stopVM() {
            if (!confirm('Force stop this VM? (may cause data loss)')) return;
            await this.performAction(api.stopService(serviceId), 'Stopping VM...');
        },

        async shutdownVM() {
            if (!confirm('Gracefully shutdown this VM?')) return;
            await this.performAction(api.shutdownService(serviceId), 'Shutting down VM...');
        },

        async rebootVM() {
            if (!confirm('Reboot this VM?')) return;
            await this.performAction(api.rebootService(serviceId), 'Rebooting VM...');
        },

        async resetVM() {
            if (!confirm('Reset this VM? (equivalent to power cycle)')) return;
            await this.performAction(api.resetService(serviceId), 'Resetting VM...');
        },

        async performAction(promise, message) {
            this.isActionDisabled = true;
            try {
                const result = await promise;
                showSuccess(message);
                // Wait a bit then refresh status
                setTimeout(() => this.loadStatus(), 3000);
            } catch (error) {
                showError('Action failed: ' + error.message);
            } finally {
                setTimeout(() => {
                    this.isActionDisabled = false;
                }, 2000);
            }
        },

        async openConsole() {
            try {
                const consoleData = await api.getConsoleAccess(serviceId);
                window.location.href = `/services/${serviceId}/console/`;
            } catch (error) {
                showError('Failed to access console: ' + error.message);
            }
        },

        getResourceClass(percentage) {
            if (percentage > 80) return 'high';
            if (percentage > 60) return 'medium';
            return 'low';
        }
    }
}
</script>
{% endblock %}