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

{% block title %}Plans - Inveterate{% endblock %}

{% block content %}
<div x-data="plansManager()" x-init="init()">
    <div class="mb-8 flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Plans</h1>
            <p class="mt-2 text-gray-600">Manage service plans</p>
        </div>
        <button @click="openCreate()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
            + New Plan
        </button>
    </div>

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

    <!-- Plans Table -->
    <div x-show="!loading" class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cores</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">RAM</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Disk</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bandwidth</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IPs (v4/v6/int)</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <template x-for="plan in plans" :key="plan.id">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900" x-text="plan.name"></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" x-text="plan.cores"></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" x-text="`${plan.ram} MB`"></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" x-text="`${plan.size} GB`"></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" x-text="`${plan.bandwidth} GB`"></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" x-text="`${plan.ipv4_ips} / ${plan.ipv6_ips} / ${plan.internal_ips}`"></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
                                <button @click="openEdit(plan)" class="text-blue-600 hover:text-blue-800">Edit</button>
                                <button @click="confirmDelete(plan)" class="text-red-600 hover:text-red-800">Delete</button>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>

    <div x-show="!loading && plans.length === 0" class="text-center py-12 text-gray-500">
        No plans yet. Create one to get started.
    </div>

    <!-- Create/Edit Modal -->
    <div x-show="showModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" x-cloak>
        <div class="bg-white rounded-lg shadow-xl p-6 max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
            <h3 class="text-lg font-semibold text-gray-900 mb-4" x-text="editing ? 'Edit Plan' : 'New Plan'"></h3>
            <div x-show="error" class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm" x-text="error"></div>
            <div class="space-y-3">
                <div>
                    <label class="form-label">Name</label>
                    <input x-model="form.name" type="text" class="form-input">
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="form-label">Disk (GB)</label>
                        <input x-model.number="form.size" type="number" min="4" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">RAM (MB)</label>
                        <input x-model.number="form.ram" type="number" min="64" class="form-input">
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="form-label">Swap (MB)</label>
                        <input x-model.number="form.swap" type="number" min="0" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">Cores</label>
                        <input x-model.number="form.cores" type="number" min="1" class="form-input">
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="form-label">Bandwidth (GB)</label>
                        <input x-model.number="form.bandwidth" type="number" min="0" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">CPU Units</label>
                        <input x-model.number="form.cpu_units" type="number" min="1" class="form-input">
                    </div>
                </div>
                <div class="grid grid-cols-3 gap-3">
                    <div>
                        <label class="form-label">CPU Limit</label>
                        <input x-model="form.cpu_limit" type="number" step="0.01" min="0" max="9.99" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">IPv4 IPs</label>
                        <input x-model.number="form.ipv4_ips" type="number" min="0" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">IPv6 IPs</label>
                        <input x-model.number="form.ipv6_ips" type="number" min="0" class="form-input">
                    </div>
                </div>
                <div>
                    <label class="form-label">Internal IPs</label>
                    <input x-model.number="form.internal_ips" type="number" min="0" class="form-input">
                </div>
            </div>
            <div class="mt-6 flex justify-end gap-3">
                <button @click="showModal = false" class="px-4 py-2 text-gray-700 hover:text-gray-900 text-sm font-medium">Cancel</button>
                <button @click="save()" :disabled="saving" class="bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white px-4 py-2 rounded-md text-sm font-medium">
                    <span x-text="saving ? 'Saving...' : 'Save'"></span>
                </button>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation -->
    <div x-show="showDeleteModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" x-cloak>
        <div class="bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Delete Plan</h3>
            <p class="text-gray-600 mb-4">Are you sure you want to delete <strong x-text="deleteTarget?.name"></strong>?</p>
            <div class="flex justify-end gap-3">
                <button @click="showDeleteModal = false" class="px-4 py-2 text-gray-700 hover:text-gray-900 text-sm font-medium">Cancel</button>
                <button @click="doDelete()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium">Delete</button>
            </div>
        </div>
    </div>
</div>

<script>
function plansManager() {
    return {
        plans: [],
        loading: true,
        showModal: false,
        showDeleteModal: false,
        editing: null,
        deleteTarget: null,
        saving: false,
        error: '',
        form: {},

        defaultForm() {
            return { name: '', size: 8, ram: 512, swap: 256, cores: 1, bandwidth: 1024, cpu_units: 1024, cpu_limit: '1.00', ipv4_ips: 1, ipv6_ips: 0, internal_ips: 0 };
        },

        async init() {
            await this.load();
        },

        async load() {
            this.loading = true;
            try {
                const res = await api.getPlans({no_page: true});
                this.plans = res.results || res;
            } catch (e) { console.error(e); }
            finally { this.loading = false; }
        },

        openCreate() {
            this.editing = null;
            this.form = this.defaultForm();
            this.error = '';
            this.showModal = true;
        },

        openEdit(plan) {
            this.editing = plan.id;
            this.form = { ...plan };
            this.error = '';
            this.showModal = true;
        },

        async save() {
            this.saving = true;
            this.error = '';
            try {
                if (this.editing) {
                    await api.updatePlan(this.editing, this.form);
                } else {
                    await api.createPlan(this.form);
                }
                this.showModal = false;
                await this.load();
            } catch (e) {
                this.error = e.message;
            } finally {
                this.saving = false;
            }
        },

        confirmDelete(plan) {
            this.deleteTarget = plan;
            this.showDeleteModal = true;
        },

        async doDelete() {
            try {
                await api.deletePlan(this.deleteTarget.id);
                this.showDeleteModal = false;
                await this.load();
            } catch (e) { alert(e.message); }
        }
    }
}
</script>
{% endblock %}