@extends('install.layout', ['currentStep' => 3])

@section('title', 'Run Migrations')

@section('content')
<div class="p-8 flex flex-col flex-1">

    {{-- ── Step header ── --}}
    <div class="mb-7">
        <h2 class="text-xl font-bold text-slate-800">Database Migration</h2>
        <p class="text-sm text-slate-500 mt-1">
            This step will generate the application key, JWT secret, and create all
            required database tables.
        </p>
    </div>

    {{-- ── Success flash ── --}}
    @if (session('success'))
        <div class="mb-5 flex items-center gap-3 px-4 py-3 bg-emerald-50 border border-emerald-200 rounded-xl">
            <svg class="w-5 h-5 text-emerald-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <p class="text-sm text-emerald-700">{{ session('success') }}</p>
        </div>
    @endif

    {{-- ── Migration error ── --}}
    @error('migration')
        <div class="mb-5 flex items-start gap-3 px-4 py-3 bg-red-50 border border-red-200 rounded-xl">
            <svg class="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <div>
                <p class="text-sm font-semibold text-red-700">Migration failed</p>
                <p class="text-sm text-red-600 mt-1 font-mono whitespace-pre-wrap">{{ $message }}</p>
            </div>
        </div>
    @enderror

    {{-- ── Artisan output (after failed attempt) ── --}}
    @if (session('migration_output') && $errors->any())
        <div class="mb-5 bg-slate-900 rounded-xl p-4 overflow-x-auto">
            <p class="text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-2">Output</p>
            <pre class="text-xs text-slate-300 whitespace-pre-wrap">{{ session('migration_output') }}</pre>
        </div>
    @endif

    {{-- ── What will happen ── --}}
    <div class="rounded-xl border border-slate-100 overflow-hidden divide-y divide-slate-100 mb-6">
        @foreach ([
            ['Generate APP_KEY',   'Generates a unique application encryption key and writes it to .env.'],
            ['Generate JWT_SECRET','Creates the JWT signing secret used to sign customer authentication tokens.'],
            ['Run Migrations',     'Creates all database tables: operators, users, routers, hotspots, packages, tickets, customers, purchases, payments.'],
        ] as [$title, $desc])
            <div class="flex items-start gap-4 px-5 py-4 bg-white">
                <span class="w-5 h-5 rounded-full bg-brand-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                    <svg class="w-3 h-3 text-brand-600" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                    </svg>
                </span>
                <div>
                    <p class="text-sm font-semibold text-slate-700">{{ $title }}</p>
                    <p class="text-xs text-slate-500 mt-0.5">{{ $desc }}</p>
                </div>
            </div>
        @endforeach
    </div>

    {{-- ── Warning: safe to re-run ── --}}
    <div class="flex items-start gap-3 px-4 py-3 bg-amber-50 border border-amber-200 rounded-xl text-sm text-amber-800 mb-6">
        <svg class="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
        </svg>
        <p>
            <strong>Safe to re-run.</strong>
            Migrations are idempotent — running them again on an existing database
            will only apply missing tables.
        </p>
    </div>

    {{-- ── Actions ── --}}
    <div class="mt-auto pt-6 border-t border-slate-100 flex items-center justify-between">
        <a href="{{ route('install.database') }}"
           class="text-sm text-slate-500 hover:text-slate-700 flex items-center gap-1.5">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
            </svg>
            Back
        </a>

        <form method="POST" action="{{ route('install.migrate') }}" id="migrateForm">
            @csrf
            <button type="submit" id="btnMigrate"
                    class="inline-flex items-center gap-2 px-6 py-2.5 bg-brand-600 text-white text-sm font-semibold rounded-xl hover:bg-brand-700 transition-colors shadow-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V7c0-2-1-3-3-3H7C5 4 4 5 4 7z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4"/>
                </svg>
                Run Migrations
            </button>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('migrateForm').addEventListener('submit', function () {
    const btn = document.getElementById('btnMigrate');
    btn.disabled = true;
    btn.innerHTML = `
        <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
        </svg>
        Running…`;
});
</script>
@endpush