@extends('install.layout')

@section('title', $steps[$step])

@php
    $input = 'w-full px-3.5 py-2.5 rounded-xl border border-slate-300 text-sm focus:ring-2 focus:ring-indigo-500';
    $label = 'block text-xs font-bold uppercase tracking-wider text-slate-600 mb-1.5';
    $button = 'px-5 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-bold';
    $stepKeys = array_keys($steps);
    $currentIndex = array_search($step, $stepKeys, true);
@endphp

@section('content')
    <!-- Progress -->
    <ol class="flex items-center gap-1 mb-6">
        @foreach($steps as $key => $name)
            @php($index = array_search($key, $stepKeys, true))
            <li class="flex-1">
                <div class="h-1.5 rounded-full {{ $index < $currentIndex ? 'bg-emerald-500' : ($index === $currentIndex ? 'bg-indigo-600' : 'bg-slate-200') }}"></div>
                <div class="mt-1 text-[10px] text-center truncate {{ $index === $currentIndex ? 'font-bold text-slate-800' : 'text-slate-400' }}">{{ $index + 1 }}. {{ $name }}</div>
            </li>
        @endforeach
    </ol>

    @if($errors->any())
        <div class="mb-5 p-3.5 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-sm">
            {{ $errors->first() }}
        </div>
    @endif

    @switch($step)
        @case('prerequis')
            <h2 class="text-lg font-bold text-slate-900 mb-1">Vérification du serveur</h2>
            <p class="text-sm text-slate-500 mb-4">DevApp a besoin de ces éléments pour fonctionner.</p>

            <ul class="divide-y divide-slate-100 border border-slate-200 rounded-xl mb-5">
                @foreach($checks as $check)
                    <li class="px-4 py-2.5 flex items-start justify-between gap-3 text-sm">
                        <div>
                            <div class="font-semibold {{ $check['ok'] ? 'text-slate-800' : 'text-rose-700' }}">{{ $check['label'] }}</div>
                            <div class="text-[11px] text-slate-400 break-all">{{ $check['detail'] }}</div>
                        </div>
                        <span class="shrink-0 font-bold {{ $check['ok'] ? 'text-emerald-600' : 'text-rose-600' }}">{{ $check['ok'] ? '✓' : '✕' }}</span>
                    </li>
                @endforeach
            </ul>

            <form method="POST" action="{{ route('install.requirements') }}" class="text-right">
                @csrf
                <button type="submit" class="{{ $button }}">Continuer</button>
            </form>
            @break

        @case('base')
            <h2 class="text-lg font-bold text-slate-900 mb-1">Base de données MySQL</h2>
            <p class="text-sm text-slate-500 mb-4">Créez une base <strong>vide</strong> chez votre hébergeur (ou dans Laragon), puis indiquez ses accès.</p>

            <form method="POST" action="{{ route('install.database') }}" class="space-y-4">
                @csrf
                <div class="grid grid-cols-3 gap-3">
                    <div class="col-span-2">
                        <label for="host" class="{{ $label }}">Serveur</label>
                        <input type="text" id="host" name="host" value="{{ old('host', '127.0.0.1') }}" required class="{{ $input }}">
                    </div>
                    <div>
                        <label for="port" class="{{ $label }}">Port</label>
                        <input type="number" id="port" name="port" value="{{ old('port', 3306) }}" required class="{{ $input }}">
                    </div>
                </div>
                <div>
                    <label for="database" class="{{ $label }}">Nom de la base</label>
                    <input type="text" id="database" name="database" value="{{ old('database', 'devapp') }}" required class="{{ $input }}">
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label for="username" class="{{ $label }}">Utilisateur</label>
                        <input type="text" id="username" name="username" value="{{ old('username') }}" required autocomplete="off" class="{{ $input }}">
                    </div>
                    <div>
                        <label for="password" class="{{ $label }}">Mot de passe</label>
                        <input type="password" id="password" name="password" autocomplete="off" class="{{ $input }}">
                    </div>
                </div>
                <div class="text-right">
                    <button type="submit" class="{{ $button }}">Tester et enregistrer</button>
                </div>
            </form>
            @break

        @case('installation')
            <h2 class="text-lg font-bold text-slate-900 mb-1">Création des tables</h2>
            <p class="text-sm text-slate-500 mb-4">
                Connexion réussie à la base <strong>{{ $database['database'] ?? '' }}</strong> sur <strong>{{ $database['host'] ?? '' }}</strong>.
                DevApp va maintenant créer ses tables. Cela prend quelques secondes.
            </p>
            <form method="POST" action="{{ route('install.run') }}" class="text-right" onsubmit="this.querySelector('button').disabled = true; this.querySelector('button').textContent = 'Installation…';">
                @csrf
                <button type="submit" class="{{ $button }}">Installer</button>
            </form>
            @break

        @case('administrateur')
            <h2 class="text-lg font-bold text-slate-900 mb-1">Votre compte administrateur</h2>
            <p class="text-sm text-slate-500 mb-4">Les tables sont créées. Il reste à créer votre compte.</p>

            <form method="POST" action="{{ route('install.administrator') }}" class="space-y-4">
                @csrf
                <div>
                    <label for="app_name" class="{{ $label }}">Nom de l'application</label>
                    <input type="text" id="app_name" name="app_name" value="{{ old('app_name', 'Dev App') }}" required maxlength="100" class="{{ $input }}">
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                        <label for="name" class="{{ $label }}">Votre nom</label>
                        <input type="text" id="name" name="name" value="{{ old('name') }}" required class="{{ $input }}">
                    </div>
                    <div>
                        <label for="email" class="{{ $label }}">Adresse e-mail</label>
                        <input type="email" id="email" name="email" value="{{ old('email') }}" required class="{{ $input }}">
                    </div>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                        <label for="password" class="{{ $label }}">Mot de passe</label>
                        <input type="password" id="password" name="password" required minlength="12" autocomplete="new-password" class="{{ $input }}">
                    </div>
                    <div>
                        <label for="password_confirmation" class="{{ $label }}">Confirmation</label>
                        <input type="password" id="password_confirmation" name="password_confirmation" required autocomplete="new-password" class="{{ $input }}">
                    </div>
                </div>
                <p class="text-[11px] text-slate-400">12 caractères minimum, avec majuscules, minuscules et chiffres.</p>
                <label class="flex items-start gap-2 p-3 rounded-xl border border-slate-200 bg-slate-50 cursor-pointer">
                    <input type="hidden" name="production" value="0">
                    <input type="checkbox" name="production" value="1" @checked(old('production', true)) class="mt-0.5 w-4 h-4 rounded text-indigo-600">
                    <span class="text-xs text-slate-700">
                        <strong>Installation de production</strong> (recommandé) : les messages d'erreur techniques sont masqués aux visiteurs.
                        Décochez seulement pour une installation de développement.
                    </span>
                </label>
                <div class="text-right">
                    <button type="submit" class="{{ $button }}">Créer le compte</button>
                </div>
            </form>
            @break

        @case('licence')
            <h2 class="text-lg font-bold text-slate-900 mb-1">Licence (facultatif)</h2>
            <p class="text-sm text-slate-500 mb-4">
                Si vous avez une clé de licence if-Licences, saisissez-la. Sans licence, DevApp fonctionne aussi : vous pourrez l'activer plus tard dans Administration &gt; Licence.
            </p>

            @unless($licenceConfigured)
                <p class="mb-4 p-3 rounded-xl bg-amber-50 border border-amber-200 text-amber-900 text-xs">
                    La clé publique de vérification n'est pas encore réglée (DEVAPP_LICENCE_CLES_PUBLIQUES dans .env) : terminez l'installation, la licence s'activera ensuite.
                </p>
            @endunless

            <form method="POST" action="{{ route('install.licence') }}" class="space-y-4">
                @csrf
                <div>
                    <label for="key" class="{{ $label }}">Clé de licence</label>
                    <input type="text" id="key" name="key" value="{{ old('key') }}" maxlength="64" placeholder="DEVA-XXXX-XXXX-XXXX-XXXX" autocomplete="off" @disabled(! $licenceConfigured)
                        class="{{ $input }} font-mono uppercase disabled:bg-slate-100">
                </div>
                <div class="flex items-center justify-end gap-2">
                    <button type="submit" class="px-4 py-2.5 rounded-xl border border-slate-300 text-slate-700 text-sm font-semibold hover:bg-slate-50" onclick="document.getElementById('key').value = ''">Passer cette étape</button>
                    @if($licenceConfigured)
                        <button type="submit" class="{{ $button }}">Activer et terminer</button>
                    @endif
                </div>
            </form>
            @break
    @endswitch
@endsection