@extends('admin.install-layout')
@section('title', 'Step 3 — Migrate & Seed')
@php $step = 3; @endphp

@section('install-content')
<div class="bg-white rounded-2xl shadow-lg p-8">
    <div class="flex items-center space-x-3 mb-6">
        <div class="w-12 h-12 rounded-full bg-emerald-100 flex items-center justify-center">
            <i class="fas fa-table text-emerald-600 text-xl"></i>
        </div>
        <div>
            <h1 class="text-2xl font-bold text-gray-800">Database Migration & Seeding</h1>
            <p class="text-gray-500 text-sm">Creates all tables and populates demo data</p>
        </div>
    </div>

    <!-- Info box -->
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
        <p class="text-blue-800 text-sm font-medium mb-2"><i class="fas fa-info-circle mr-1"></i> What this step does:</p>
        <ul class="text-blue-700 text-sm space-y-1 list-disc list-inside">
            <li>Creates all database tables (users, surveys, plans, payments, referrals…)</li>
            <li>Seeds demo plans: Free, Basic, VIP</li>
            <li>Seeds 8 sample surveys</li>
            <li>Seeds payment methods (PayPal, Bank Transfer, Bitcoin)</li>
            <li>Creates 2 demo user accounts for testing</li>
            <li>Sets default referral commission rates</li>
        </ul>
    </div>

    <!-- Log output -->
    <div id="log-box" class="bg-gray-900 text-green-400 font-mono text-xs rounded-xl p-4 h-48 overflow-y-auto mb-6 hidden">
        <div id="log-content"></div>
    </div>

    <!-- Status -->
    <div id="status-idle" class="text-center py-4">
        <i class="fas fa-database text-gray-300 text-5xl mb-3"></i>
        <p class="text-gray-500">Click the button below to run migrations and seed the database.</p>
    </div>

    <div id="status-running" class="hidden text-center py-4">
        <div class="inline-block w-12 h-12 border-4 border-purple-500 border-t-transparent rounded-full animate-spin mb-3"></div>
        <p class="text-purple-600 font-medium">Running migrations and seeding data…</p>
        <p class="text-gray-400 text-sm">This may take 10–30 seconds.</p>
    </div>

    <div id="status-success" class="hidden bg-emerald-50 border border-emerald-200 rounded-xl p-4 mb-4">
        <div class="flex items-center space-x-3">
            <i class="fas fa-check-circle text-emerald-500 text-2xl"></i>
            <div>
                <p class="text-emerald-700 font-semibold">Migrations & seeding completed successfully!</p>
                <p class="text-emerald-600 text-sm">All tables created. Demo data loaded.</p>
            </div>
        </div>
    </div>

    <div id="status-error" class="hidden bg-red-50 border border-red-200 rounded-xl p-4 mb-4">
        <div class="flex items-center space-x-3">
            <i class="fas fa-times-circle text-red-500 text-2xl"></i>
            <div>
                <p class="text-red-700 font-semibold">Migration failed.</p>
                <p id="error-msg" class="text-red-600 text-sm"></p>
            </div>
        </div>
    </div>

    <!-- Buttons -->
    <div id="btn-run-wrap">
        <button id="btn-run" onclick="runMigrations()"
            class="w-full bg-gradient-to-r from-emerald-500 to-teal-600 text-white py-3 px-6 rounded-xl font-semibold hover:from-emerald-600 hover:to-teal-700 transition">
            <i class="fas fa-play mr-2"></i> Run Migrations & Seed Database
        </button>
    </div>

    <a id="btn-next" href="{{ route('install.admin') }}"
        class="hidden w-full block text-center bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-3 px-6 rounded-xl font-semibold hover:from-purple-700 hover:to-indigo-700 transition mt-3">
        Continue to Admin Setup <i class="fas fa-arrow-right ml-2"></i>
    </a>
</div>
@endsection

@section('install-scripts')
<script>
async function runMigrations() {
    document.getElementById('btn-run-wrap').classList.add('hidden');
    document.getElementById('status-idle').classList.add('hidden');
    document.getElementById('status-running').classList.remove('hidden');
    document.getElementById('log-box').classList.remove('hidden');

    try {
        const resp = await fetch('{{ route('install.migrate.run') }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            }
        });

        const data = await resp.json();
        document.getElementById('status-running').classList.add('hidden');

        if (data.output) {
            document.getElementById('log-content').innerText = data.output;
        }

        if (data.success) {
            document.getElementById('status-success').classList.remove('hidden');
            document.getElementById('btn-next').classList.remove('hidden');
        } else {
            document.getElementById('status-error').classList.remove('hidden');
            document.getElementById('error-msg').innerText = data.message;
            document.getElementById('btn-run-wrap').classList.remove('hidden');
        }
    } catch (e) {
        document.getElementById('status-running').classList.add('hidden');
        document.getElementById('status-error').classList.remove('hidden');
        document.getElementById('error-msg').innerText = 'Network error: ' + e.message;
        document.getElementById('btn-run-wrap').classList.remove('hidden');
    }
}
</script>
@endsection