@extends('layouts.app')

@section('title', 'Install Application')

@section('content')
    @php
        $hasDbErrors = $errors->has('db_connection') || $errors->has('db_host') || $errors->has('db_port') || $errors->has('db_database') || $errors->has('db_username') || $errors->has('db_password');
        $hasFinalStepErrors = $errors->has('admin_name') || $errors->has('admin_email') || $errors->has('admin_password') || $errors->has('install');
        $initialStep = $hasFinalStepErrors ? 3 : ($hasDbErrors ? 2 : 1);
    @endphp

    <div class="mx-auto max-w-4xl rounded-2xl border border-slate-200 bg-white p-6 shadow-sm" data-install-wizard data-initial-step="{{ $initialStep }}">
        <h1 class="mb-1 text-2xl font-bold">First Time Installation</h1>
        <p class="mb-5 text-sm text-slate-600">Complete all steps to configure and install your website.</p>

        <div class="mb-5 grid gap-2 sm:grid-cols-3">
            <button type="button" class="rounded-lg border px-3 py-2 text-left text-sm font-semibold" data-step-indicator="1">1. Requirements</button>
            <button type="button" class="rounded-lg border px-3 py-2 text-left text-sm font-semibold" data-step-indicator="2">2. Database</button>
            <button type="button" class="rounded-lg border px-3 py-2 text-left text-sm font-semibold" data-step-indicator="3">3. Admin Setup</button>
        </div>

        <form action="{{ route('install.run') }}" method="post" class="space-y-4">
            @csrf

            <section data-step-panel="1" class="space-y-3">
                <h2 class="text-lg font-semibold">Server Requirements</h2>
                <div class="overflow-hidden rounded-xl border border-slate-200">
                    <table class="w-full text-sm">
                        <tbody class="divide-y divide-slate-200">
                        @foreach (($requirements['checks'] ?? []) as $check)
                            <tr>
                                <td class="px-3 py-2 font-medium text-slate-700">{{ $check['label'] }}</td>
                                <td class="px-3 py-2 text-slate-600">{{ $check['detail'] }}</td>
                                <td class="px-3 py-2 text-right">
                                    <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-semibold {{ $check['ok'] ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' }}">
                                        {{ $check['ok'] ? 'OK' : 'Fail' }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
                @if (!($requirements['can_install'] ?? false))
                    <p class="rounded-lg border border-rose-300 bg-rose-50 px-3 py-2 text-sm text-rose-700">
                        Requirements failed. Fix failed checks before installation.
                    </p>
                @endif
                <div class="flex justify-end">
                    <button type="button" data-next-step class="btn-primary rounded-lg px-4 py-2 text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-60" @disabled(!($requirements['can_install'] ?? false))>Continue</button>
                </div>
            </section>

            <section data-step-panel="2" class="hidden space-y-4">
                <h2 class="text-lg font-semibold">Database Configuration</h2>
                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label for="db_connection" class="block text-sm font-medium">Database Driver</label>
                        <select id="db_connection" name="db_connection" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                            @php($selectedDriver = old('db_connection', $dbDefaults['connection'] ?? 'mysql'))
                            <option value="mysql" @selected($selectedDriver === 'mysql')>MySQL</option>
                            <option value="pgsql" @selected($selectedDriver === 'pgsql')>PostgreSQL</option>
                            <option value="sqlite" @selected($selectedDriver === 'sqlite')>SQLite</option>
                        </select>
                        @error('db_connection')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="db_database" class="block text-sm font-medium">Database Name / SQLite Path</label>
                        <input id="db_database" name="db_database" value="{{ old('db_database', $dbDefaults['database'] ?? '') }}" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                        @error('db_database')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                    </div>
                    <div data-db-server-field>
                        <label for="db_host" class="block text-sm font-medium">Database Host</label>
                        <input id="db_host" name="db_host" value="{{ old('db_host', $dbDefaults['host'] ?? '127.0.0.1') }}" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                        @error('db_host')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                    </div>
                    <div data-db-server-field>
                        <label for="db_port" class="block text-sm font-medium">Database Port</label>
                        <input id="db_port" name="db_port" value="{{ old('db_port', $dbDefaults['port'] ?? '3306') }}" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                        @error('db_port')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                    </div>
                    <div data-db-server-field>
                        <label for="db_username" class="block text-sm font-medium">Database Username</label>
                        <input id="db_username" name="db_username" value="{{ old('db_username', $dbDefaults['username'] ?? '') }}" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                        @error('db_username')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                    </div>
                    <div data-db-server-field>
                        <label for="db_password" class="block text-sm font-medium">Database Password</label>
                        <input id="db_password" type="password" name="db_password" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                        @error('db_password')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <button type="button" data-prev-step class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700">Back</button>
                    <button type="button" data-next-step class="btn-primary rounded-lg px-4 py-2 text-sm font-semibold">Continue</button>
                </div>
            </section>

            <section data-step-panel="3" class="hidden space-y-4">
                <h2 class="text-lg font-semibold">Admin Account Setup</h2>

                @error('install')
                    <div class="rounded-lg border border-rose-300 bg-rose-50 px-3 py-2 text-sm text-rose-700">{{ $message }}</div>
                @enderror

                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label for="admin_name" class="block text-sm font-medium">Admin Name</label>
                        <input id="admin_name" name="admin_name" value="{{ old('admin_name', 'Admin') }}" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                        @error('admin_name')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="admin_email" class="block text-sm font-medium">Admin Email</label>
                        <input id="admin_email" type="email" name="admin_email" value="{{ old('admin_email') }}" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                        @error('admin_email')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="admin_password" class="block text-sm font-medium">Admin Password</label>
                        <input id="admin_password" type="password" name="admin_password" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                        @error('admin_password')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="admin_password_confirmation" class="block text-sm font-medium">Confirm Password</label>
                        <input id="admin_password_confirmation" type="password" name="admin_password_confirmation" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                    </div>
                </div>

                <div class="flex items-center justify-between">
                    <button type="button" data-prev-step class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700">Back</button>
                    <button class="btn-primary rounded-lg px-4 py-2 text-sm font-semibold">Install Now</button>
                </div>
            </section>
        </form>
    </div>

    <script>
        (function () {
            var root = document.querySelector('[data-install-wizard]');
            if (!root) return;

            var currentStep = Number(root.getAttribute('data-initial-step') || '1');
            var stepPanels = root.querySelectorAll('[data-step-panel]');
            var stepIndicators = root.querySelectorAll('[data-step-indicator]');
            var nextButtons = root.querySelectorAll('[data-next-step]');
            var prevButtons = root.querySelectorAll('[data-prev-step]');
            var dbConnection = document.getElementById('db_connection');
            var dbServerFields = root.querySelectorAll('[data-db-server-field]');

            function updateDbFieldVisibility() {
                if (!dbConnection) return;
                var hideServerFields = dbConnection.value === 'sqlite';
                dbServerFields.forEach(function (el) {
                    el.classList.toggle('hidden', hideServerFields);
                });
            }

            function setStep(step) {
                currentStep = step;
                stepPanels.forEach(function (panel) {
                    var isActive = Number(panel.getAttribute('data-step-panel')) === step;
                    panel.classList.toggle('hidden', !isActive);
                });
                stepIndicators.forEach(function (indicator) {
                    var indicatorStep = Number(indicator.getAttribute('data-step-indicator'));
                    var active = indicatorStep === step;
                    indicator.classList.toggle('bg-sky-600', active);
                    indicator.classList.toggle('text-white', active);
                    indicator.classList.toggle('border-sky-600', active);
                    indicator.classList.toggle('border-slate-300', !active);
                    indicator.classList.toggle('text-slate-700', !active);
                });
            }

            nextButtons.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    if (currentStep < 3) setStep(currentStep + 1);
                });
            });

            prevButtons.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    if (currentStep > 1) setStep(currentStep - 1);
                });
            });

            stepIndicators.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var target = Number(btn.getAttribute('data-step-indicator'));
                    if (!Number.isNaN(target)) setStep(target);
                });
            });

            if (dbConnection) {
                dbConnection.addEventListener('change', updateDbFieldVisibility);
            }

            updateDbFieldVisibility();
            setStep(currentStep);
        })();
    </script>
@endsection