{% extends "base.html" %}

{% block title %}System Testing - SMS Campaign Manager{% endblock %}

{% block content %}
<div x-data="testingApp" x-init="init()" class="p-6">
    <h2 class="text-xl font-semibold mb-4">🧪 System Testing & Diagnostics</h2>

    <!-- Connection Tests -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        <!-- Termux API Test -->
        <div class="border rounded-lg p-4">
            <h3 class="font-medium mb-3">📡 Termux API Test</h3>
            <div class="text-sm text-gray-600 mb-3">
                Endpoint: <code class="bg-gray-100 px-1">http://{{ phone_ip }}:5001</code>
            </div>
            <button @click="testTermuxConnection()"
                    :disabled="testingTermux"
                    class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 disabled:opacity-50 transition-colors">
                <span x-show="!testingTermux">Test Termux API</span>
                <span x-show="testingTermux">Testing...</span>
            </button>
            <div x-show="termuxTestResult" class="mt-3 p-3 rounded text-sm"
                 :class="termuxTestResult?.success ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'">
                <pre x-text="JSON.stringify(termuxTestResult, null, 2)"></pre>
            </div>
        </div>

        <!-- ADB Connection Test -->
        <div class="border rounded-lg p-4">
            <h3 class="font-medium mb-3">🔌 ADB Connection Test</h3>
            <div class="text-sm text-gray-600 mb-3">
                Device: <code class="bg-gray-100 px-1">{{ phone_ip }}:5555</code>
            </div>
            <button @click="testAdbConnection()"
                    :disabled="testingAdb"
                    class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600 disabled:opacity-50 transition-colors">
                <span x-show="!testingAdb">Test ADB</span>
                <span x-show="testingAdb">Testing...</span>
            </button>
            <div x-show="adbTestResult" class="mt-3 p-3 rounded text-sm"
                 :class="adbTestResult?.success ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'">
                <pre x-text="JSON.stringify(adbTestResult, null, 2)"></pre>
            </div>
        </div>
    </div>

    <!-- Test SMS Send -->
    <div class="border rounded-lg p-4 mb-6">
        <h3 class="font-medium mb-3">📨 Test SMS Send</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <input type="tel" x-model="testPhone"
                   placeholder="Phone number (e.g., 7801234567)"
                   class="border rounded px-3 py-2">
            <input type="text" x-model="testMessage"
                   placeholder="Test message"
                   class="border rounded px-3 py-2">
        </div>
        <div class="mt-4 flex gap-2">
            <button @click="sendTestSms('termux')"
                    :disabled="!testPhone || sendingTest"
                    class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 disabled:opacity-50 transition-colors">
                Send via Termux
            </button>
            <button @click="sendTestSms('adb')"
                    :disabled="!testPhone || sendingTest"
                    class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600 disabled:opacity-50 transition-colors">
                Send via ADB
            </button>
            <button @click="sendTestSms('auto')"
                    :disabled="!testPhone || sendingTest"
                    class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 disabled:opacity-50 transition-colors">
                Auto (Best Available)
            </button>
        </div>
        <div x-show="testSmsResult" class="mt-3 p-3 rounded text-sm"
             :class="testSmsResult?.success ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'">
            <pre x-text="JSON.stringify(testSmsResult, null, 2)"></pre>
        </div>
    </div>

    <!-- Database Management -->
    <div class="border rounded-lg p-4 mb-6 border-red-200 bg-red-50">
        <h3 class="font-medium mb-3 text-red-800">⚠️ Database Management</h3>
        <p class="text-sm text-red-700 mb-4">
            <strong>Warning:</strong> This will permanently delete all campaigns, contacts, messages, and conversation history.
        </p>
        <button @click="showResetConfirmation = true"
                :disabled="resettingDatabase"
                class="bg-red-600 text-white px-6 py-2 rounded hover:bg-red-700 disabled:opacity-50 transition-colors font-medium">
            <span x-show="!resettingDatabase">🗑️ Reset Database</span>
            <span x-show="resettingDatabase">Resetting...</span>
        </button>
        <div x-show="resetResult" class="mt-3 p-3 rounded text-sm"
             :class="resetResult?.success ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-100 text-red-800 border border-red-300'">
            <div class="font-medium mb-1" x-text="resetResult?.success ? '✅ Success' : '❌ Error'"></div>
            <div x-text="resetResult?.message"></div>
        </div>
    </div>

    <!-- System Information -->
    <div class="border rounded-lg p-4">
        <h3 class="font-medium mb-3">ℹ️ System Information</h3>
        <div class="grid grid-cols-2 gap-4 text-sm">
            <div>
                <span class="font-medium">Phone IP:</span>
                <span x-text="phoneIP"></span>
            </div>
            <div>
                <span class="font-medium">Preferred Method:</span>
                <span x-text="phoneStatus.prefer_termux ? 'Termux API' : 'ADB'"></span>
            </div>
            <div>
                <span class="font-medium">Last Check:</span>
                <span x-text="formatTime(phoneStatus.last_check)"></span>
            </div>
            <div>
                <span class="font-medium">Active Connection:</span>
                <span x-text="phoneStatus.termux_connected ? 'Termux' : (phoneStatus.adb_connected ? 'ADB' : 'None')"></span>
            </div>
        </div>
    </div>

    <!-- Reset Database Confirmation Modal -->
    <div x-show="showResetConfirmation"
         x-cloak
         class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
         @click.self="showResetConfirmation = false">
        <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4 shadow-2xl">
            <div class="flex items-start mb-4">
                <div class="flex-shrink-0 w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mr-4">
                    <span class="text-2xl">⚠️</span>
                </div>
                <div class="flex-1">
                    <h3 class="text-lg font-bold text-gray-900 mb-2">Reset Database?</h3>
                    <p class="text-sm text-gray-600">
                        This action will permanently delete:
                    </p>
                    <ul class="text-sm text-gray-600 mt-2 space-y-1 list-disc list-inside">
                        <li>All campaigns and their messages</li>
                        <li>All contact lists</li>
                        <li>All conversation history</li>
                        <li>All message templates</li>
                    </ul>
                    <p class="text-sm font-semibold text-red-600 mt-3">
                        This cannot be undone!
                    </p>
                </div>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Type <span class="font-mono bg-gray-100 px-1 rounded">RESET</span> to confirm:
                </label>
                <input type="text"
                       x-model="resetConfirmText"
                       @keyup.enter="resetConfirmText === 'RESET' && resetDatabase()"
                       placeholder="Type RESET"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent">
            </div>

            <div class="flex gap-3 justify-end">
                <button @click="showResetConfirmation = false; resetConfirmText = ''"
                        class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-medium">
                    Cancel
                </button>
                <button @click="resetDatabase()"
                        :disabled="resetConfirmText !== 'RESET' || resettingDatabase"
                        class="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium">
                    <span x-show="!resettingDatabase">Reset Database</span>
                    <span x-show="resettingDatabase">Resetting...</span>
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/testing.js?v={{ cache_version }}"></script>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('testingApp', () => {
            const app = testingApp();
            app.phoneIP = window.PHONE_IP;
            // Access phoneStatus from baseApp
            app.phoneStatus = Alpine.raw(Alpine.store('baseApp')?.phoneStatus) || {
                termux_connected: false,
                adb_connected: false,
                prefer_termux: true,
                last_check: null
            };
            return app;
        });
    });
</script>
{% endblock %}