@extends('install.layout')
@section('title', 'Setup — AI Vision Attendance')
@section('tagline', 'Setup wizard — no SSH, Composer, or command line required')
@section('footnote', 'This wizard runs entirely in your browser. Nothing above is sent anywhere except this server.')

@php
    // Decide which step to land on after a server round-trip (validation
    // error, failed migration, etc.) or a "re-check requirements" reload —
    // the install itself stays a single atomic POST (see InstallController);
    // this only decides where the *user* lands, never re-runs partial work.
    $startStep = 0;
    if ($errors->any()) {
        if ($errors->has('preflight')) {
            $startStep = 1;
        } elseif ($errors->has('db') || $errors->hasAny(['db_host', 'db_port', 'db_database', 'db_username', 'db_password'])) {
            $startStep = 2;
        } elseif ($errors->hasAny(['app_name', 'app_url', 'site_count', 'admin_name', 'admin_email', 'admin_password', 'admin_password_confirmation'])) {
            $startStep = 3;
        } else {
            // e.g. 'migrate' failures, or anything unforeseen — land back
            // on Review, where the Install button that triggered it lives.
            $startStep = 4;
        }
    } elseif (request('step') === 'requirements') {
        $startStep = 1;
    }
@endphp

@section('content')
<div class="installing-overlay">
    <div class="spinner" aria-hidden="true"></div>
    <h3>Installing…</h3>
    <p>This can take up to a minute — writing configuration, creating tables, and seeding your sites. Please don't close this tab.</p>
</div>

@if($errors->any())
    <div class="alert alert-error">
        <strong>Please fix the following before continuing:</strong>
        <ul>
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div data-install-wizard
     data-preflight-ok="{{ $preflightOk ? '1' : '0' }}"
     data-start-step="{{ $startStep }}"
     data-test-db-url="{{ route('install.test-db') }}">

    <ol class="step-dots">
        <li class="step-dot" data-step-index="0"><span class="dot-num">1</span><span class="dot-label">Welcome</span></li>
        <li class="step-dot" data-step-index="1"><span class="dot-num">2</span><span class="dot-label">Requirements</span></li>
        <li class="step-dot" data-step-index="2"><span class="dot-num">3</span><span class="dot-label">Database</span></li>
        <li class="step-dot" data-step-index="3"><span class="dot-num">4</span><span class="dot-label">Site &amp; Admin</span></li>
        <li class="step-dot" data-step-index="4"><span class="dot-num">5</span><span class="dot-label">Review</span></li>
    </ol>

    <form method="POST" action="{{ route('install.store') }}" id="install-form">
        @csrf

        {{-- Step 1: Welcome ------------------------------------------------ --}}
        <div class="step-panel" id="step-welcome">
            <div class="welcome-hero">
                <div class="welcome-icon" aria-hidden="true">AV</div>
                <h2>Welcome to AI Vision Attendance</h2>
                <p>Face-recognition attendance tracking for your sites — install once, then manage everything from the dashboard. This wizard checks your server, connects your database, and creates your admin account in about five steps.</p>
            </div>
            <div class="step-nav">
                <span class="spacer"></span>
                <button type="button" class="btn btn-primary btn-lg" data-goto-next>Let's get started</button>
            </div>
        </div>

        {{-- Step 2: Requirements --------------------------------------------- --}}
        <div class="step-panel" id="step-requirements">
            <h2 class="step-heading">Environment check</h2>
            <p class="step-subhead">These are re-checked live on this server. All rows must pass before you can continue.</p>

            <div class="table-wrap">
                <table class="req-table">
                    <thead><tr><th>Check</th><th>Result</th><th>Detail</th></tr></thead>
                    <tbody>
                    @foreach($preflight as $row)
                        <tr>
                            <td>{{ $row['label'] }}</td>
                            <td>
                                @if($row['ok'])
                                    <span class="badge badge-pass">PASS</span>
                                @else
                                    <span class="badge badge-fail">FAIL</span>
                                @endif
                            </td>
                            <td class="muted">{{ $row['detail'] }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

            @if(! $preflightOk)
                <div class="alert alert-error">
                    Fix the FAIL rows above before continuing — usually a folder permission (chmod) or a missing PHP extension your host can enable. Then re-check.
                </div>
            @else
                <div class="alert alert-success">Everything looks good — you can continue.</div>
            @endif

            <div class="step-nav">
                <a class="btn" href="{{ route('install.index') }}?step=requirements">Re-check</a>
                <span class="spacer"></span>
                <button type="button" class="btn" data-goto-back>Back</button>
                <button type="button" class="btn btn-primary" data-goto-next @if(! $preflightOk) disabled @endif>Continue</button>
            </div>
        </div>

        {{-- Step 3: Database --------------------------------------------- --}}
        <div class="step-panel" id="step-database">
            <h2 class="step-heading">Database</h2>
            <p class="step-subhead">Create the MySQL database in your host's control panel first — this wizard connects to an existing database, it cannot create one for you.</p>

            <div class="field-grid">
                <div class="field">
                    <label for="db_host">Database host</label>
                    <input type="text" id="db_host" name="db_host" value="{{ old('db_host', 'localhost') }}" required>
                </div>
                <div class="field">
                    <label for="db_port">Database port</label>
                    <input type="text" id="db_port" name="db_port" value="{{ old('db_port', '3306') }}" required>
                </div>
                <div class="field field-full">
                    <label for="db_database">Database name</label>
                    <input type="text" id="db_database" name="db_database" value="{{ old('db_database') }}" required>
                </div>
                <div class="field">
                    <label for="db_username">Database username</label>
                    <input type="text" id="db_username" name="db_username" value="{{ old('db_username') }}" required>
                </div>
                <div class="field">
                    <label for="db_password">Database password</label>
                    <input type="password" id="db_password" name="db_password">
                </div>
            </div>

            <div class="db-test-row">
                <button type="button" class="btn" id="db-test-btn">Test connection</button>
                <span class="db-test-result" id="db-test-result" role="status" aria-live="polite"></span>
            </div>
            <p class="db-test-hint alert alert-warn" id="db-test-required-hint" role="alert">Test the connection successfully before continuing.</p>

            <div class="step-nav">
                <span class="spacer"></span>
                <button type="button" class="btn" data-goto-back>Back</button>
                <button type="button" class="btn btn-primary" data-goto-next>Continue</button>
            </div>
        </div>

        {{-- Step 4: Site & Admin --------------------------------------------- --}}
        <div class="step-panel" id="step-site-admin">
            <h2 class="step-heading">Site &amp; admin account</h2>
            <p class="step-subhead">One admin login, plus the sites/devices you want provisioned right away (you can add more later).</p>

            <div class="section-divider">Application</div>
            <div class="field-grid">
                <div class="field field-full">
                    <label for="app_name">Application name</label>
                    <input type="text" id="app_name" name="app_name" value="{{ old('app_name', 'AI Vision Attendance') }}">
                </div>
                <div class="field field-full">
                    <label for="app_url">Public URL of this site</label>
                    <input type="text" id="app_url" name="app_url" value="{{ old('app_url', $defaultAppUrl) }}" required>
                    <p class="hint">Prefilled from the address you used to reach this page — change it if that's not your real public domain.</p>
                </div>
                <div class="field">
                    <label for="site_count">Number of sites/devices to create</label>
                    <input type="number" id="site_count" name="site_count" min="1" max="20" value="{{ old('site_count', 5) }}" required>
                    <p class="hint">Each site gets one door-camera device with a fresh token.</p>
                </div>
            </div>

            <div class="section-divider">Admin account</div>
            <div class="field-grid">
                <div class="field">
                    <label for="admin_name">Name</label>
                    <input type="text" id="admin_name" name="admin_name" value="{{ old('admin_name', 'Admin') }}" required>
                </div>
                <div class="field">
                    <label for="admin_email">Email</label>
                    <input type="email" id="admin_email" name="admin_email" value="{{ old('admin_email') }}" required>
                </div>
                <div class="field">
                    <label for="admin_password">Password</label>
                    <input type="password" id="admin_password" name="admin_password" minlength="8" required>
                    <p class="pw-strength" id="pw-strength"></p>
                </div>
                <div class="field">
                    <label for="admin_password_confirmation">Confirm password</label>
                    <input type="password" id="admin_password_confirmation" name="admin_password_confirmation" minlength="8" required>
                    <p class="pw-mismatch" id="pw-mismatch"></p>
                </div>
            </div>

            <div class="step-nav">
                <span class="spacer"></span>
                <button type="button" class="btn" data-goto-back>Back</button>
                <button type="button" class="btn btn-primary" data-goto-next>Continue</button>
            </div>
        </div>

        {{-- Step 5: Review & Install --------------------------------------------- --}}
        <div class="step-panel" id="step-review">
            <h2 class="step-heading">Review &amp; install</h2>
            <p class="step-subhead">Double-check everything below, then click Install. This runs once, in a single step — tables, admin user, sites/devices, and tokens are all created together.</p>

            <div class="review-group-title">Application</div>
            <table class="review-table">
                <tr><th>Name</th><td id="review_app_name">—</td></tr>
                <tr><th>Public URL</th><td id="review_app_url">—</td></tr>
                <tr><th>Sites/devices</th><td id="review_site_count">—</td></tr>
            </table>

            <div class="review-group-title">Database</div>
            <table class="review-table">
                <tr><th>Host</th><td id="review_db_host">—</td></tr>
                <tr><th>Database</th><td id="review_db_database">—</td></tr>
                <tr><th>Username</th><td id="review_db_username">—</td></tr>
            </table>

            <div class="review-group-title">Admin account</div>
            <table class="review-table">
                <tr><th>Name</th><td id="review_admin_name">—</td></tr>
                <tr><th>Email</th><td id="review_admin_email">—</td></tr>
                <tr><th>Password</th><td>••••••••</td></tr>
            </table>

            <div class="step-nav">
                <span class="spacer"></span>
                <button type="button" class="btn" data-goto-back>Back</button>
                <button type="submit" class="btn btn-primary btn-lg">Install</button>
            </div>
        </div>
    </form>
</div>
@endsection
