{% extends "base.html" %}
{% from "components/ui.html" import page_header %}

{% block title %}{{ _('LDAP Setup Wizard') }} - {{ app_name }}{% endblock %}

{% block content %}
{% set breadcrumbs = [
    {'text': _('Admin'), 'url': url_for('admin.admin_dashboard')},
    {'text': _('Settings'), 'url': url_for('admin.settings')},
    {'text': _('LDAP Setup Wizard')}
] %}

{{ page_header(
    icon_class='fas fa-magic',
    title_text=_('LDAP Setup Wizard'),
    subtitle_text=_('Guided configuration for LDAP authentication (environment variables)'),
    breadcrumbs=breadcrumbs
) }}

<div id="ldap-wizard-endpoints"
     data-test-url="{{ url_for('admin.ldap_wizard_test_connection') }}"
     data-validate-url="{{ url_for('admin.ldap_wizard_validate_config') }}"
     data-generate-url="{{ url_for('admin.ldap_wizard_generate_config') }}"
     class="hidden"></div>

<div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm mb-6">
    <div class="mb-8">
        <div class="flex items-center justify-between mb-4 overflow-x-auto pb-2 min-w-0">
            <div class="flex items-center space-x-2 shrink-0">
                <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center text-sm font-semibold step-indicator" data-step="1">1</div>
                <span class="text-sm font-medium step-label hidden sm:inline" data-step="1">{{ _('Server') }}</span>
            </div>
            <div class="flex-1 h-1 mx-2 sm:mx-4 bg-gray-200 dark:bg-gray-700 step-connector shrink-0 min-w-[1rem]" data-step="1"></div>
            <div class="flex items-center space-x-2 shrink-0">
                <div class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 flex items-center justify-center text-sm font-semibold step-indicator" data-step="2">2</div>
                <span class="text-sm font-medium step-label hidden sm:inline" data-step="2">{{ _('Bind') }}</span>
            </div>
            <div class="flex-1 h-1 mx-2 sm:mx-4 bg-gray-200 dark:bg-gray-700 step-connector shrink-0 min-w-[1rem]" data-step="2"></div>
            <div class="flex items-center space-x-2 shrink-0">
                <div class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 flex items-center justify-center text-sm font-semibold step-indicator" data-step="3">3</div>
                <span class="text-sm font-medium step-label hidden sm:inline" data-step="3">{{ _('Users') }}</span>
            </div>
            <div class="flex-1 h-1 mx-2 sm:mx-4 bg-gray-200 dark:bg-gray-700 step-connector shrink-0 min-w-[1rem]" data-step="3"></div>
            <div class="flex items-center space-x-2 shrink-0">
                <div class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 flex items-center justify-center text-sm font-semibold step-indicator" data-step="4">4</div>
                <span class="text-sm font-medium step-label hidden sm:inline" data-step="4">{{ _('Groups') }}</span>
            </div>
            <div class="flex-1 h-1 mx-2 sm:mx-4 bg-gray-200 dark:bg-gray-700 step-connector shrink-0 min-w-[1rem]" data-step="4"></div>
            <div class="flex items-center space-x-2 shrink-0">
                <div class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 flex items-center justify-center text-sm font-semibold step-indicator" data-step="5">5</div>
                <span class="text-sm font-medium step-label hidden sm:inline" data-step="5">{{ _('Finalize') }}</span>
            </div>
        </div>
    </div>

    <div class="wizard-step" data-step="1">
        <h2 class="text-xl font-semibold mb-4">{{ _('Step 1: Server and TLS') }}</h2>
        <div class="space-y-4">
            <div>
                <label for="LDAP_HOST" class="block text-sm font-medium mb-2">{{ _('LDAP host') }} <span class="text-red-500">*</span></label>
                <input type="text" id="LDAP_HOST" name="LDAP_HOST" value="{{ current_config.LDAP_HOST }}"
                       class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark"
                       placeholder="ldap.example.com" required>
            </div>
            <div>
                <label for="LDAP_PORT" class="block text-sm font-medium mb-2">{{ _('Port') }}</label>
                <input type="number" id="LDAP_PORT" name="LDAP_PORT" value="{{ current_config.LDAP_PORT }}" min="1" max="65535"
                       class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark">
            </div>
            <div class="flex flex-wrap gap-6">
                <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" id="LDAP_USE_SSL" name="LDAP_USE_SSL" class="rounded" {% if current_config.LDAP_USE_SSL %}checked{% endif %}>
                    <span class="text-sm font-medium">{{ _('Use SSL (LDAPS)') }}</span>
                </label>
                <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" id="LDAP_USE_TLS" name="LDAP_USE_TLS" class="rounded" {% if current_config.LDAP_USE_TLS %}checked{% endif %}>
                    <span class="text-sm font-medium">{{ _('StartTLS') }}</span>
                </label>
            </div>
            <div>
                <label for="LDAP_TIMEOUT" class="block text-sm font-medium mb-2">{{ _('Connection timeout (seconds)') }}</label>
                <input type="number" id="LDAP_TIMEOUT" name="LDAP_TIMEOUT" value="{{ current_config.LDAP_TIMEOUT }}" min="1" max="120"
                       class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark">
            </div>
            <div>
                <label for="LDAP_TLS_CA_CERT_FILE" class="block text-sm font-medium mb-2">{{ _('TLS CA certificate file') }} <span class="text-text-muted-light dark:text-text-muted-dark">({{ _('optional') }})</span></label>
                <input type="text" id="LDAP_TLS_CA_CERT_FILE" name="LDAP_TLS_CA_CERT_FILE" value="{{ current_config.LDAP_TLS_CA_CERT_FILE }}"
                       class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark"
                       placeholder="/path/to/ca.pem">
            </div>
        </div>
    </div>

    <div class="wizard-step hidden" data-step="2">
        <h2 class="text-xl font-semibold mb-4">{{ _('Step 2: Service bind account') }}</h2>
        <div class="space-y-4">
            <div>
                <label for="LDAP_BIND_DN" class="block text-sm font-medium mb-2">{{ _('Bind DN') }} <span class="text-red-500">*</span></label>
                <input type="text" id="LDAP_BIND_DN" name="LDAP_BIND_DN" value="{{ current_config.LDAP_BIND_DN }}"
                       class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark font-mono text-sm"
                       placeholder="cn=readonly,dc=example,dc=com" required>
            </div>
            <div>
                <label for="LDAP_BIND_PASSWORD" class="block text-sm font-medium mb-2">{{ _('Bind password') }} <span class="text-red-500">*</span></label>
                <input type="password" id="LDAP_BIND_PASSWORD" name="LDAP_BIND_PASSWORD" autocomplete="new-password"
                       class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark"
                       placeholder="{{ _('Enter bind password') }}" required>
                {% if current_config.bind_password_set %}
                <p class="mt-1 text-xs text-text-muted-light dark:text-text-muted-dark">
                    {{ _('A bind password is already set in the environment. Enter it again here to test or generate configuration.') }}
                </p>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="wizard-step hidden" data-step="3">
        <h2 class="text-xl font-semibold mb-4">{{ _('Step 3: User directory and attributes') }}</h2>
        <div class="space-y-4">
            <div>
                <label for="LDAP_BASE_DN" class="block text-sm font-medium mb-2">{{ _('Base DN') }} <span class="text-red-500">*</span></label>
                <input type="text" id="LDAP_BASE_DN" name="LDAP_BASE_DN" value="{{ current_config.LDAP_BASE_DN }}"
                       class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark font-mono text-sm"
                       placeholder="dc=example,dc=com" required>
            </div>
            <div>
                <label for="LDAP_USER_DN" class="block text-sm font-medium mb-2">{{ _('User subtree (relative to base)') }} <span class="text-text-muted-light dark:text-text-muted-dark">({{ _('optional') }})</span></label>
                <input type="text" id="LDAP_USER_DN" name="LDAP_USER_DN" value="{{ current_config.LDAP_USER_DN }}"
                       class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark font-mono text-sm"
                       placeholder="ou=users">
            </div>
            <div>
                <label for="LDAP_USER_OBJECT_CLASS" class="block text-sm font-medium mb-2">{{ _('User object class') }}</label>
                <input type="text" id="LDAP_USER_OBJECT_CLASS" name="LDAP_USER_OBJECT_CLASS" value="{{ current_config.LDAP_USER_OBJECT_CLASS }}"
                       class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark"
                       placeholder="inetOrgPerson">
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label for="LDAP_USER_LOGIN_ATTR" class="block text-sm font-medium mb-2">{{ _('Login attribute') }} <span class="text-red-500">*</span></label>
                    <input type="text" id="LDAP_USER_LOGIN_ATTR" name="LDAP_USER_LOGIN_ATTR" value="{{ current_config.LDAP_USER_LOGIN_ATTR }}"
                           class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark" placeholder="uid">
                </div>
                <div>
                    <label for="LDAP_USER_EMAIL_ATTR" class="block text-sm font-medium mb-2">{{ _('Email attribute') }}</label>
                    <input type="text" id="LDAP_USER_EMAIL_ATTR" name="LDAP_USER_EMAIL_ATTR" value="{{ current_config.LDAP_USER_EMAIL_ATTR }}"
                           class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark" placeholder="mail">
                </div>
                <div>
                    <label for="LDAP_USER_FNAME_ATTR" class="block text-sm font-medium mb-2">{{ _('First name attribute') }}</label>
                    <input type="text" id="LDAP_USER_FNAME_ATTR" name="LDAP_USER_FNAME_ATTR" value="{{ current_config.LDAP_USER_FNAME_ATTR }}"
                           class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark" placeholder="givenName">
                </div>
                <div>
                    <label for="LDAP_USER_LNAME_ATTR" class="block text-sm font-medium mb-2">{{ _('Last name attribute') }}</label>
                    <input type="text" id="LDAP_USER_LNAME_ATTR" name="LDAP_USER_LNAME_ATTR" value="{{ current_config.LDAP_USER_LNAME_ATTR }}"
                           class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark" placeholder="sn">
                </div>
            </div>
        </div>
    </div>

    <div class="wizard-step hidden" data-step="4">
        <h2 class="text-xl font-semibold mb-4">{{ _('Step 4: Groups and authentication mode') }}</h2>
        <div class="space-y-4">
            <div>
                <label for="LDAP_GROUP_DN" class="block text-sm font-medium mb-2">{{ _('Group subtree (relative to base)') }} <span class="text-text-muted-light dark:text-text-muted-dark">({{ _('optional') }})</span></label>
                <input type="text" id="LDAP_GROUP_DN" name="LDAP_GROUP_DN" value="{{ current_config.LDAP_GROUP_DN }}"
                       class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark font-mono text-sm"
                       placeholder="ou=groups">
            </div>
            <div>
                <label for="LDAP_GROUP_OBJECT_CLASS" class="block text-sm font-medium mb-2">{{ _('Group object class') }}</label>
                <input type="text" id="LDAP_GROUP_OBJECT_CLASS" name="LDAP_GROUP_OBJECT_CLASS" value="{{ current_config.LDAP_GROUP_OBJECT_CLASS }}"
                       class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark"
                       placeholder="groupOfNames">
            </div>
            <div>
                <label for="LDAP_ADMIN_GROUP" class="block text-sm font-medium mb-2">{{ _('Admin group (CN)') }} <span class="text-text-muted-light dark:text-text-muted-dark">({{ _('optional') }})</span></label>
                <input type="text" id="LDAP_ADMIN_GROUP" name="LDAP_ADMIN_GROUP" value="{{ current_config.LDAP_ADMIN_GROUP }}"
                       class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark"
                       placeholder="timetracker-admins">
            </div>
            <div>
                <label for="LDAP_REQUIRED_GROUP" class="block text-sm font-medium mb-2">{{ _('Required group (CN)') }} <span class="text-text-muted-light dark:text-text-muted-dark">({{ _('optional') }})</span></label>
                <input type="text" id="LDAP_REQUIRED_GROUP" name="LDAP_REQUIRED_GROUP" value="{{ current_config.LDAP_REQUIRED_GROUP }}"
                       class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark">
            </div>
            <div>
                <label for="auth_method" class="block text-sm font-medium mb-2">{{ _('AUTH_METHOD') }} <span class="text-red-500">*</span></label>
                <select id="auth_method" name="auth_method"
                        class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-card-light dark:bg-card-dark" required>
                    <option value="ldap" {% if current_config.auth_method == 'ldap' %}selected{% endif %}>{{ _('LDAP only') }}</option>
                    <option value="all" {% if current_config.auth_method == 'all' %}selected{% endif %}>{{ _('All (local + OIDC + LDAP)') }}</option>
                </select>
                <p class="mt-1 text-xs text-text-muted-light dark:text-text-muted-dark">
                    {{ _('Use "All" only if you also configure local and OIDC sign-in; AUTH_METHOD=all enables every method.') }}
                </p>
            </div>
        </div>
    </div>

    <div class="wizard-step hidden" data-step="5">
        <h2 class="text-xl font-semibold mb-4">{{ _('Step 5: Test and generate configuration') }}</h2>
        <div id="ldap-connection-test-results" class="mb-4">
            <div class="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                <p class="text-sm text-blue-800 dark:text-blue-200">
                    <i class="fas fa-info-circle mr-2"></i>
                    {{ _('Test the service bind and user search, then generate .env snippets to copy into your deployment.') }}
                </p>
            </div>
        </div>
        <button type="button" id="ldap-test-connection-btn" class="bg-primary text-white px-6 py-2 rounded-lg hover:bg-primary/90 transition-colors mb-6">
            <i class="fas fa-vial mr-2"></i>{{ _('Test connection') }}
        </button>

        <div id="ldap-config-generation-results" class="mb-4">
            <div class="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg mb-4">
                <p class="text-sm text-blue-800 dark:text-blue-200">
                    <i class="fas fa-info-circle mr-2"></i>
                    {{ _('Generate environment variable lines for your .env file or Docker Compose.') }}
                </p>
            </div>
            <button type="button" id="ldap-generate-config-btn" class="bg-primary text-white px-6 py-2 rounded-lg hover:bg-primary/90 transition-colors mb-4">
                <i class="fas fa-code mr-2"></i>{{ _('Generate configuration') }}
            </button>
        </div>
        <div id="ldap-config-preview" class="hidden">
            <div class="mb-4">
                <h3 class="font-semibold mb-2">{{ _('Environment variables (.env)') }}</h3>
                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg relative">
                    <button type="button" class="absolute top-2 right-2 bg-primary text-white px-3 py-1 rounded text-sm copy-btn" data-target="ldap-env-content">
                        <i class="fas fa-copy mr-1"></i>{{ _('Copy') }}
                    </button>
                    <pre id="ldap-env-content" class="text-sm overflow-x-auto whitespace-pre-wrap"></pre>
                </div>
            </div>
            <div>
                <h3 class="font-semibold mb-2">{{ _('Docker Compose') }}</h3>
                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg relative">
                    <button type="button" class="absolute top-2 right-2 bg-primary text-white px-3 py-1 rounded text-sm copy-btn" data-target="ldap-docker-content">
                        <i class="fas fa-copy mr-1"></i>{{ _('Copy') }}
                    </button>
                    <pre id="ldap-docker-content" class="text-sm overflow-x-auto whitespace-pre-wrap"></pre>
                </div>
            </div>
            <div class="mt-4 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
                <p class="text-sm text-green-800 dark:text-green-200">
                    <i class="fas fa-check-circle mr-2"></i>
                    {{ _('Add these variables to your environment or Compose file, restart the application, then confirm under Settings → LDAP.') }}
                </p>
            </div>
        </div>
    </div>

    <div class="flex flex-col sm:flex-row justify-between mt-8 pt-6 border-t border-border-light dark:border-border-dark gap-3">
        <button type="button" id="ldap-prev-btn" class="bg-gray-200 dark:bg-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors hidden">
            <i class="fas fa-arrow-left mr-2"></i>{{ _('Previous') }}
        </button>
        <div class="flex flex-col sm:flex-row sm:ml-auto gap-3">
            <button type="button" id="ldap-next-btn" class="bg-primary text-white px-6 py-2 rounded-lg hover:bg-primary/90 transition-colors">
                {{ _('Next') }}<i class="fas fa-arrow-right ml-2"></i>
            </button>
            <a href="{{ url_for('admin.settings') }}#section-ldap" class="bg-gray-200 dark:bg-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-center">
                {{ _('Cancel') }}
            </a>
        </div>
    </div>
</div>

<script src="{{ url_for('static', filename='js/ldap_wizard.js') }}"></script>
{% endblock %}