{% extends "base.html" %}

{% block title %}Installer Wizard{% endblock %}

{% block content %}
<div class="row justify-content-center align-items-center" style="min-height: 70vh;">
    <div class="col-md-8 col-lg-6">
        <div class="card glass-card shadow-lg my-5 border-0">
            <!-- Header Progress -->
            <div class="card-header bg-transparent text-center border-0 pt-4">
                <h3 class="fw-bold">
                    <i class="fa-solid fa-wand-magic-sparkles text-primary me-2"></i>
                    Setup Wizard
                </h3>
                <p class="text-secondary mb-3">Install and configure TG Auto Reply Pro</p>
                
                <div class="progress progress-bar-custom bg-secondary-subtle">
                    {% if step == 1 %}
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 25%"></div>
                    {% elif step in [2, '2_otp', '2_2fa'] %}
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 50%"></div>
                    {% elif step == 3 %}
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 75%"></div>
                    {% elif step == 4 %}
                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%"></div>
                    {% endif %}
                </div>
                <div class="d-flex justify-content-between mt-2 px-1 text-secondary" style="font-size: 0.8rem;">
                    <span class="{% if step == 1 %}text-primary fw-bold{% endif %}">1. System Check</span>
                    <span class="{% if step in [2, '2_otp', '2_2fa'] %}text-primary fw-bold{% endif %}">2. Telegram Config</span>
                    <span class="{% if step == 3 %}text-primary fw-bold{% endif %}">3. Admin Setup</span>
                    <span class="{% if step == 4 %}text-success fw-bold{% endif %}">4. Finish</span>
                </div>
            </div>

            <div class="card-body px-4 py-4">
                
                <!-- STEP 1: System Checks -->
                {% if step == 1 %}
                <div>
                    <h5 class="fw-bold mb-3"><i class="fa-solid fa-list-check me-2 text-primary"></i> Step 1: System Check</h5>
                    <p class="text-secondary text-sm">We need to check if your environment matches the execution specifications of TG Auto Reply Pro.</p>
                    
                    <ul class="list-group list-group-flush mb-4">
                        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center border-bottom border-secondary-subtle py-3">
                            <div>
                                <h6 class="mb-0 fw-semibold">Python 3.12+ Environment</h6>
                                <small class="text-secondary">Verifying compatible engine environment.</small>
                            </div>
                            <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill"><i class="fa-solid fa-check me-1"></i> Pass</span>
                        </li>
                        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center border-bottom border-secondary-subtle py-3">
                            <div>
                                <h6 class="mb-0 fw-semibold">Write Access Permission</h6>
                                <small class="text-secondary">Config and Sessions directory write verification.</small>
                            </div>
                            {% if checks.write_config and checks.write_sessions %}
                                <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill"><i class="fa-solid fa-check me-1"></i> Pass</span>
                            {% else %}
                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill"><i class="fa-solid fa-xmark me-1"></i> Fail</span>
                            {% endif %}
                        </li>
                        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center border-bottom border-secondary-subtle py-3">
                            <div>
                                <h6 class="mb-0 fw-semibold">SQLite Engine Support</h6>
                                <small class="text-secondary">Validates database engine existence.</small>
                            </div>
                            {% if checks.sqlite %}
                                <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill"><i class="fa-solid fa-check me-1"></i> Pass</span>
                            {% else %}
                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill"><i class="fa-solid fa-xmark me-1"></i> Fail</span>
                            {% endif %}
                        </li>
                    </ul>

                    <div class="text-end">
                        {% if system_ready %}
                            <a href="{{ url_for('install', step=2) }}" class="btn btn-primary px-4 py-2">
                                Next Step <i class="fa-solid fa-arrow-right ms-1"></i>
                            </a>
                        {% else %}
                            <button class="btn btn-primary px-4 py-2" disabled>Fix Errors to Proceed</button>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                <!-- STEP 2: Telegram Setup -->
                {% if step == 2 %}
                <form action="{{ url_for('install', step=2) }}" method="POST">
                    <h5 class="fw-bold mb-3"><i class="fa-brands fa-telegram me-2 text-primary"></i> Step 2: Telegram Setup</h5>
                    <p class="text-secondary text-sm mb-4">Input your Telegram API credentials. You can obtain these from <a href="https://my.telegram.org" target="_blank" class="text-decoration-none">my.telegram.org</a>.</p>
                    
                    <div class="mb-3">
                        <label for="api_id" class="form-label fw-semibold">API ID</label>
                        <input type="text" class="form-control" id="api_id" name="api_id" placeholder="e.g. 1234567" required>
                    </div>

                    <div class="mb-3">
                        <label for="api_hash" class="form-label fw-semibold">API Hash</label>
                        <input type="text" class="form-control" id="api_hash" name="api_hash" placeholder="e.g. abc123def456..." required>
                    </div>

                    <div class="mb-4">
                        <label for="phone" class="form-label fw-semibold">Phone Number</label>
                        <input type="text" class="form-control" id="phone" name="phone" placeholder="e.g. +8801700000000" required>
                        <small class="text-secondary">Must include country code (e.g. +880 for Bangladesh).</small>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('install', step=1) }}" class="btn btn-outline-secondary px-4 py-2">
                            <i class="fa-solid fa-arrow-left me-1"></i> Back
                        </a>
                        <button type="submit" class="btn btn-primary px-4 py-2">
                            Send OTP <i class="fa-solid fa-paper-plane ms-1"></i>
                        </button>
                    </div>
                </form>
                {% endif %}

                <!-- STEP 2: OTP Verification -->
                {% if step == '2_otp' %}
                <form action="{{ url_for('install', step='2_otp') }}" method="POST">
                    <h5 class="fw-bold mb-3"><i class="fa-solid fa-key me-2 text-primary"></i> Verify OTP Code</h5>
                    <p class="text-secondary text-sm mb-4">A confirmation code has been sent to your Telegram client or phone. Please enter it below.</p>
                    
                    <div class="mb-4">
                        <label for="otp" class="form-label fw-semibold">Verification Code</label>
                        <input type="text" class="form-control text-center fs-4 fw-bold" id="otp" name="otp" placeholder="Enter OTP" required autofocus>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('install', step=2) }}" class="btn btn-outline-secondary px-4 py-2">
                            <i class="fa-solid fa-arrow-left me-1"></i> Back
                        </a>
                        <button type="submit" class="btn btn-primary px-4 py-2">
                            Verify <i class="fa-solid fa-check-double ms-1"></i>
                        </button>
                    </div>
                </form>
                {% endif %}

                <!-- STEP 2: 2FA Password -->
                {% if step == '2_2fa' %}
                <form action="{{ url_for('install', step='2_2fa') }}" method="POST">
                    <h5 class="fw-bold mb-3"><i class="fa-solid fa-shield-halved me-2 text-primary"></i> 2-Step Verification</h5>
                    <p class="text-secondary text-sm mb-4">Your Telegram account has 2-Step Verification enabled. Enter your Cloud Password below.</p>
                    
                    <div class="mb-4">
                        <label for="password_2fa" class="form-label fw-semibold">2FA Password</label>
                        <input type="password" class="form-control" id="password_2fa" name="password_2fa" placeholder="Enter 2FA Password" required autofocus>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('install', step='2_otp') }}" class="btn btn-outline-secondary px-4 py-2">
                            <i class="fa-solid fa-arrow-left me-1"></i> Back
                        </a>
                        <button type="submit" class="btn btn-primary px-4 py-2">
                            Submit Password <i class="fa-solid fa-arrow-right-to-bracket ms-1"></i>
                        </button>
                    </div>
                </form>
                {% endif %}

                <!-- STEP 3: Admin configuration -->
                {% if step == 3 %}
                <form action="{{ url_for('install', step=3) }}" method="POST">
                    <h5 class="fw-bold mb-3"><i class="fa-solid fa-user-gear me-2 text-primary"></i> Step 3: Admin Account Creation</h5>
                    <p class="text-secondary text-sm mb-4">Set up your credentials to login to the Web Admin Panel dashboard.</p>
                    
                    <div class="mb-3">
                        <label for="username" class="form-label fw-semibold">Username</label>
                        <input type="text" class="form-control" id="username" name="username" placeholder="e.g. admin" required>
                    </div>

                    <div class="mb-3">
                        <label for="email" class="form-label fw-semibold">Email Address</label>
                        <input type="email" class="form-control" id="email" name="email" placeholder="e.g. admin@yourdomain.com" required>
                    </div>

                    <div class="mb-3">
                        <label for="password" class="form-label fw-semibold">Password</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="Create complex password" required>
                    </div>

                    <div class="mb-4">
                        <label for="timezone" class="form-label fw-semibold">Default Timezone</label>
                        <select class="form-select" id="timezone" name="timezone">
                            <option value="Asia/Dhaka" selected>Asia/Dhaka (GMT+6)</option>
                            <option value="UTC">UTC (GMT+0)</option>
                            <option value="America/New_York">America/New_York (EST)</option>
                            <option value="Europe/London">Europe/London (GMT)</option>
                            <option value="Asia/Kolkata">Asia/Kolkata (GMT+5:30)</option>
                            <option value="Asia/Singapore">Asia/Singapore (GMT+8)</option>
                        </select>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('install', step=2) }}" class="btn btn-outline-secondary px-4 py-2">
                            <i class="fa-solid fa-arrow-left me-1"></i> Back
                        </a>
                        <button type="submit" class="btn btn-primary px-4 py-2">
                            Create Account <i class="fa-solid fa-user-plus ms-1"></i>
                        </button>
                    </div>
                </form>
                {% endif %}

                <!-- STEP 4: Finish Installation -->
                {% if step == 4 %}
                <div class="text-center py-3">
                    <div class="mb-4">
                        <i class="fa-solid fa-circle-check text-success" style="font-size: 5rem;"></i>
                    </div>
                    <h5 class="fw-bold mb-2 text-success">Setup Successful!</h5>
                    <p class="text-secondary px-3">Your configurations have been saved, database initialized, admin profile configured, and the Telegram listener daemon activated.</p>
                    
                    <div class="alert alert-warning border-0 shadow-sm mt-4 text-start">
                        <i class="fa-solid fa-triangle-exclamation me-2"></i>
                        <strong>Security Tip:</strong> For security reasons, the system installation state has been locked. You will be redirected to the secure login screen.
                    </div>
                    
                    <div class="mt-4">
                        <a href="{{ url_for('login') }}" class="btn btn-success px-5 py-2">
                            Go to Dashboard <i class="fa-solid fa-circle-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
                {% endif %}

            </div>
        </div>
    </div>
</div>
{% endblock %}