@extends('layouts.app', ['title' => 'Web Installer'])

@section('content')
<section
    x-data="installerWizard({
        requirements: @js($requirements),
        defaults: @js($defaults),
        endpoints: {
            requirements: @js(route('install.requirements')),
            application: @js(route('install.application')),
            database: @js(route('install.database')),
            security: @js(route('install.license')),
            admin: @js(route('install.admin')),
        },
        csrf: @js(csrf_token()),
    })"
    class="space-y-8"
>
    <div class="grid gap-6 xl:grid-cols-[0.9fr_1.1fr]">
        <div class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-6 shadow-2xl shadow-cyan-950/30">
            <div class="inline-flex items-center gap-3 rounded-full border border-cyan-400/20 bg-cyan-500/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.3em] text-cyan-200">
                Shared-hosting installer
            </div>
            <h1 class="mt-5 font-display text-3xl font-bold text-white">Deploy License Forge from the browser</h1>
            <p class="mt-3 max-w-2xl text-sm leading-7 text-slate-300">
                Upload the ZIP to cPanel, point the domain to the <code class="rounded bg-white/10 px-2 py-1 text-cyan-100">public/</code> folder, then finish setup here without SSH access.
            </p>

            <div class="mt-8 grid gap-4 sm:grid-cols-2">
                @foreach ($requirements['checks'] as $name => $passed)
                    <div class="rounded-2xl border border-white/10 bg-white/5 px-4 py-4">
                        <div class="text-xs uppercase tracking-[0.25em] text-slate-500">{{ str_replace('_', ' ', $name) }}</div>
                        <div class="mt-2 font-semibold {{ $passed ? 'text-emerald-300' : 'text-rose-300' }}">{{ $passed ? 'Ready' : 'Missing' }}</div>
                    </div>
                @endforeach
            </div>

            <div class="mt-4 grid gap-4 sm:grid-cols-2">
                @foreach ($requirements['writable'] as $name => $passed)
                    <div class="rounded-2xl border border-white/10 bg-white/5 px-4 py-4">
                        <div class="text-xs uppercase tracking-[0.25em] text-slate-500">{{ str_replace('_', ' ', $name) }}</div>
                        <div class="mt-2 font-semibold {{ $passed ? 'text-emerald-300' : 'text-amber-300' }}">{{ $passed ? 'Writable' : 'Check permissions' }}</div>
                    </div>
                @endforeach
            </div>

            <div class="mt-6 rounded-2xl border border-brand-400/20 bg-brand-500/10 p-4 text-sm text-brand-50">
                Cron for cPanel: <code class="rounded bg-black/20 px-2 py-1">* * * * * php /home/username/public_html/artisan schedule:run</code>
            </div>
        </div>

        <div class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-6 shadow-2xl shadow-slate-950/40">
            <div class="flex flex-wrap gap-3">
                <template x-for="step in steps" :key="step.key">
                    <button
                        type="button"
                        @click="active = step.key"
                        :class="active === step.key ? 'bg-brand-500 text-white shadow-lg shadow-brand-500/30' : 'bg-white/5 text-slate-300 hover:bg-white/10'"
                        class="rounded-full px-4 py-2 text-sm font-semibold transition"
                        x-text="step.label"
                    ></button>
                </template>
            </div>

            <template x-if="notice">
                <div class="mt-6 rounded-2xl border border-emerald-400/20 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-100" x-text="notice"></div>
            </template>

            <template x-if="error">
                <div class="mt-6 rounded-2xl border border-rose-400/20 bg-rose-500/10 px-4 py-3 text-sm text-rose-100" x-text="error"></div>
            </template>

            <form x-show="active === 'application'" @submit.prevent="submit('application')" class="mt-6 grid gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <label class="text-sm text-slate-300">Application name</label>
                    <input x-model="forms.application.app_name" name="app_name" type="text" placeholder="FinCoreHub License Forge" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                </div>
                <div class="sm:col-span-2">
                    <label class="text-sm text-slate-300">Application URL</label>
                    <input x-model="forms.application.app_url" name="app_url" type="url" placeholder="https://license.yourdomain.com" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                </div>
                <button type="submit" class="sm:col-span-2 rounded-2xl bg-brand-500 px-5 py-3 font-semibold text-white" :disabled="loading">
                    <span x-text="loading ? 'Saving...' : 'Save application settings'"></span>
                </button>
            </form>

            <form x-show="active === 'database'" @submit.prevent="submit('database')" class="mt-6 grid gap-4 sm:grid-cols-2">
                <div>
                    <label class="text-sm text-slate-300">Database host</label>
                    <input x-model="forms.database.db_host" name="db_host" type="text" placeholder="localhost" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                </div>
                <div>
                    <label class="text-sm text-slate-300">Database port</label>
                    <input x-model="forms.database.db_port" name="db_port" type="number" placeholder="3306" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                </div>
                <div>
                    <label class="text-sm text-slate-300">Database name</label>
                    <input x-model="forms.database.db_name" name="db_name" type="text" placeholder="license_forge" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                </div>
                <div>
                    <label class="text-sm text-slate-300">Database user</label>
                    <input x-model="forms.database.db_user" name="db_user" type="text" placeholder="cpanel_db_user" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                </div>
                <div class="sm:col-span-2">
                    <label class="text-sm text-slate-300">Database password</label>
                    <input x-model="forms.database.db_password" name="db_password" type="password" placeholder="Database password" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                </div>
                <button type="submit" class="sm:col-span-2 rounded-2xl bg-brand-500 px-5 py-3 font-semibold text-white" :disabled="loading">
                    <span x-text="loading ? 'Testing and saving...' : 'Test database and continue'"></span>
                </button>
            </form>

            <form x-show="active === 'security'" @submit.prevent="submit('security')" class="mt-6 grid gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <label class="text-sm text-slate-300">API shared secret</label>
                    <input x-model="forms.security.api_shared_secret" name="api_shared_secret" type="text" placeholder="At least 32 random characters" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                </div>
                <div>
                    <label class="text-sm text-slate-300">Offline grace hours</label>
                    <input x-model="forms.security.offline_grace_hours" name="offline_grace_hours" type="number" min="1" max="8760" placeholder="72" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                </div>
                <div>
                    <label class="text-sm text-slate-300">Revalidation interval (hours)</label>
                    <input x-model="forms.security.revalidate_hours" name="revalidate_hours" type="number" min="1" max="720" placeholder="12" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                </div>
                <label class="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-slate-300">
                    <input x-model="forms.security.enforce_https" name="enforce_https" type="checkbox" class="h-4 w-4 rounded border-white/20 bg-slate-950 text-brand-500">
                    Enforce HTTPS for production requests
                </label>
                <label class="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-slate-300">
                    <input x-model="forms.security.lock_to_fingerprint" name="lock_to_fingerprint" type="checkbox" class="h-4 w-4 rounded border-white/20 bg-slate-950 text-brand-500">
                    Lock activations to server fingerprint
                </label>
                <label class="sm:col-span-2 flex items-center gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-slate-300">
                    <input x-model="forms.security.lock_to_ip" name="lock_to_ip" type="checkbox" class="h-4 w-4 rounded border-white/20 bg-slate-950 text-brand-500">
                    Also lock activations to server IP when your customers use fixed hosting IPs
                </label>
                <button type="submit" class="sm:col-span-2 rounded-2xl bg-brand-500 px-5 py-3 font-semibold text-white" :disabled="loading">
                    <span x-text="loading ? 'Saving...' : 'Save security configuration'"></span>
                </button>
            </form>

            <form x-show="active === 'admin'" @submit.prevent="submit('admin')" class="mt-6 grid gap-4 sm:grid-cols-2">
                <div>
                    <label class="text-sm text-slate-300">Admin name</label>
                    <input x-model="forms.admin.name" name="name" type="text" placeholder="FinCoreHub Admin" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                </div>
                <div>
                    <label class="text-sm text-slate-300">Admin email</label>
                    <input x-model="forms.admin.email" name="email" type="email" placeholder="admin@yourdomain.com" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                </div>
                <div class="sm:col-span-2">
                    <label class="text-sm text-slate-300">Admin password</label>
                    <input x-model="forms.admin.password" name="password" type="password" placeholder="Minimum 10 characters" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
                </div>
                <div class="sm:col-span-2 rounded-2xl border border-white/10 bg-white/5 p-4 text-sm text-slate-300">
                    Finalize the install to run the migrations, create the administrator, and lock the installer automatically.
                </div>
                <button type="submit" class="sm:col-span-2 rounded-2xl bg-emerald-500 px-5 py-3 font-semibold text-white" :disabled="loading">
                    <span x-text="loading ? 'Installing...' : 'Complete installation'"></span>
                </button>
            </form>
        </div>
    </div>
</section>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('installerWizard', (config) => ({
            active: 'application',
            loading: false,
            notice: '',
            error: '',
            steps: [
                { key: 'application', label: 'Application' },
                { key: 'database', label: 'Database' },
                { key: 'security', label: 'Security' },
                { key: 'admin', label: 'Administrator' },
            ],
            forms: {
                application: {
                    app_name: config.defaults.app_name || '',
                    app_url: config.defaults.app_url || '',
                },
                database: {
                    db_host: config.defaults.db_host || 'localhost',
                    db_port: config.defaults.db_port || 3306,
                    db_name: config.defaults.db_name || '',
                    db_user: config.defaults.db_user || '',
                    db_password: '',
                },
                security: {
                    api_shared_secret: config.defaults.security.api_shared_secret || '',
                    offline_grace_hours: config.defaults.security.offline_grace_hours || 72,
                    revalidate_hours: config.defaults.security.revalidate_hours || 12,
                    enforce_https: !!config.defaults.security.enforce_https,
                    lock_to_ip: !!config.defaults.security.lock_to_ip,
                    lock_to_fingerprint: config.defaults.security.lock_to_fingerprint !== false,
                },
                admin: {
                    name: '',
                    email: '',
                    password: '',
                },
            },
            async submit(step) {
                this.loading = true;
                this.notice = '';
                this.error = '';

                try {
                    const payload = new FormData();

                    Object.entries(this.forms[step]).forEach(([key, value]) => {
                        if (typeof value === 'boolean') {
                            if (value) {
                                payload.append(key, '1');
                            }

                            return;
                        }

                        payload.append(key, value ?? '');
                    });

                    const response = await fetch(config.endpoints[step], {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': config.csrf,
                            'Accept': 'application/json',
                        },
                        body: payload,
                    });

                    const data = await response.json();

                    if (!response.ok) {
                        throw new Error(data.message || 'The installer step could not be completed.');
                    }

                    this.notice = this.stepMessage(step);
                    this.moveToNext(step);
                } catch (error) {
                    this.error = error.message || 'The installer step could not be completed.';
                } finally {
                    this.loading = false;
                }
            },
            moveToNext(step) {
                const order = this.steps.map((item) => item.key);
                const currentIndex = order.indexOf(step);

                if (currentIndex === -1 || currentIndex === order.length - 1) {
                    return;
                }

                this.active = order[currentIndex + 1];
            },
            stepMessage(step) {
                if (step === 'application') return 'Application settings saved. Continue with the database connection.';
                if (step === 'database') return 'Database connection succeeded and the credentials are stored.';
                if (step === 'security') return 'Activation API security settings were saved successfully.';
                return 'Installation complete. You can now sign in with the administrator account you just created.';
            },
        }));
    });
</script>
@endsection