{{template "base" .}}

{{define "content"}}
<section class="setup-section">
    <h2>First-Time Setup</h2>

    <div class="step-indicators">
        <span class="step-dot active" data-step="1">1</span>
        <span class="step-dot" data-step="2">2</span>
        <span class="step-dot" data-step="3">3</span>
        <span class="step-dot" data-step="4">4</span>
        <span class="step-dot" data-step="5">5</span>
        <span class="step-dot" data-step="6">6</span>
    </div>

    <form id="setup-form" action="/setup" method="POST">

        <!-- Step 1: AP Setup -->
        <div class="setup-step active" data-step="1">
            <h3>Access Point Setup</h3>
            <p>Before we begin, your WiFi access point needs a one-time configuration.</p>
            <div class="ap-setup-guide" style="background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2);border-radius:8px;padding:16px;margin:12px 0;font-size:14px;line-height:1.6;">
                <strong style="display:block;margin-bottom:8px;color:#a5b4fc;">Quick AP Setup (30 seconds):</strong>
                <ol style="margin:0;padding-left:20px;">
                    <li>Connect your phone/laptop directly to the AP's WiFi</li>
                    <li>Open your AP's admin page in a browser (usually <code>192.168.0.1</code> or <code>192.168.1.1</code> &mdash; check the label on your AP)</li>
                    <li>Find <strong>DHCP Settings</strong> and <strong>disable the DHCP server</strong></li>
                    <li>Save and reboot the AP</li>
                    <li>Plug the USB-to-LAN cable into a <strong>LAN port</strong> on the AP (not the WAN port)</li>
                </ol>
                <p style="margin:10px 0 0;color:#64748b;font-size:13px;">This ensures all client devices are visible individually. Without this, the AP hides all clients behind a single MAC address.</p>
            </div>
            <div class="step-nav">
                <span></span>
                <button type="button" class="btn btn-primary step-next">I've Done This</button>
            </div>
        </div>

        <!-- Step 2: Admin Password -->
        <div class="setup-step" data-step="2">
            <h3>Admin Password</h3>
            <p>Set a password for the admin dashboard.</p>
            <div class="form-group">
                <label for="admin-password">Password</label>
                <input type="password" id="admin-password" name="admin_password"
                       minlength="8" required>
            </div>
            <div class="form-group">
                <label for="admin-password-confirm">Confirm Password</label>
                <input type="password" id="admin-password-confirm" name="admin_password_confirm"
                       minlength="8" required>
            </div>
            <div class="form-group" id="password-error" class="message message--error hidden"></div>
            <div class="step-nav">
                <span></span>
                <button type="button" class="btn btn-primary step-next">Next</button>
            </div>
        </div>

        <!-- Step 3: Network Mode -->
        <div class="setup-step" data-step="3">
            <h3>Network Mode</h3>
            <p>Choose how this device connects to the internet.</p>
            <div class="radio-group">
                <label class="radio-card">
                    <input type="radio" name="network_mode" value="bridge" checked>
                    <div class="radio-card-body">
                        <strong>Bridge</strong>
                        <p>This device connects to an external WiFi access point (e.g. TP-Link).</p>
                    </div>
                </label>
                <label class="radio-card">
                    <input type="radio" name="network_mode" value="standalone">
                    <div class="radio-card-body">
                        <strong>Standalone</strong>
                        <p>This device acts as the WiFi access point and router.</p>
                    </div>
                </label>
            </div>
            <div class="step-nav">
                <button type="button" class="btn btn-secondary step-prev">Back</button>
                <button type="button" class="btn btn-primary step-next">Next</button>
            </div>
        </div>

        <!-- Step 4: Network Settings -->
        <div class="setup-step" data-step="4">
            <h3>Network Settings</h3>

            <div id="standalone-settings" class="hidden">
                <div class="form-group">
                    <label for="ssid">WiFi Name (SSID)</label>
                    <input type="text" id="ssid" name="ssid" value="SymfloFi Hotspot"
                           maxlength="32">
                </div>
                <div class="form-group">
                    <label for="channel">WiFi Channel</label>
                    <select id="channel" name="channel">
                        <option value="auto">Auto</option>
                        <option value="1">1</option>
                        <option value="6" selected>6</option>
                        <option value="11">11</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="wifi-password">WiFi Password (leave blank for open)</label>
                    <input type="text" id="wifi-password" name="wifi_password" maxlength="63">
                </div>
            </div>

            <div id="bridge-settings">
                <p class="hint">Built-in Ethernet (eth0) connects to the ISP router. USB-to-LAN adapter (eth1) connects to the external AP.</p>
                <div class="form-group">
                    <label for="lan-iface">LAN Interface (to AP)</label>
                    <select id="lan-iface" name="lan_interface">
                        <option value="eth1" selected>eth1 (USB-to-LAN adapter)</option>
                        <option value="eth0">eth0</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="wan-iface">WAN Interface (to ISP)</label>
                    <select id="wan-iface" name="wan_interface">
                        <option value="eth0" selected>eth0 (built-in Ethernet)</option>
                        <option value="eth1">eth1</option>
                    </select>
                </div>
            </div>

            <div class="step-nav">
                <button type="button" class="btn btn-secondary step-prev">Back</button>
                <button type="button" class="btn btn-primary step-next">Next</button>
            </div>
        </div>

        <!-- Step 5: Timer Rates -->
        <div class="setup-step" data-step="5">
            <h3>Timer Rates</h3>
            <p>Configure how much time customers get per coin.</p>

            <div id="rates-table">
                <div class="rate-row">
                    <div class="form-group">
                        <label>Amount (Pesos)</label>
                        <input type="number" name="rate_amount[]" value="5" min="1" required>
                    </div>
                    <div class="form-group">
                        <label>Duration (minutes)</label>
                        <input type="number" name="rate_duration[]" value="30" min="1" required>
                    </div>
                    <div class="form-group form-group--checkbox">
                        <label>
                            <input type="checkbox" name="rate_promo[]" value="0">
                            Promo
                        </label>
                    </div>
                </div>
            </div>

            <button type="button" class="btn btn-secondary btn-sm" id="add-rate">+ Add Rate</button>

            <div class="step-nav">
                <button type="button" class="btn btn-secondary step-prev">Back</button>
                <button type="button" class="btn btn-primary step-next">Next</button>
            </div>
        </div>

        <!-- Step 6: Summary -->
        <div class="setup-step" data-step="6">
            <h3>Summary</h3>
            <p>Review your settings before finishing setup.</p>

            <div class="summary-table" id="setup-summary">
                <!-- Populated by JS -->
            </div>

            <div class="step-nav">
                <button type="button" class="btn btn-secondary step-prev">Back</button>
                <button type="submit" class="btn btn-primary">Complete Setup</button>
            </div>
        </div>

    </form>
</section>

<div id="toast-container"></div>
{{end}}

{{define "scripts"}}
<script src="/static/js/portal.js"></script>
<script>
(function() {
    SymfloFi.initSetup();
})();
</script>
{{end}}