{% extends "base.html" %}

{% block title %}Build Player Files - DigiServer v2{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <a href="{{ url_for('admin.admin_panel') }}" class="back-link">← Back to Admin Panel</a>
        <h1>🧰 Build Player Files for Deployment</h1>
        <p style="color: #6c757d; margin-top: 6px;">
            Pull the latest player source from a repository onto this server and bake the
            configuration it needs to talk to this server. SSH deployments ship exactly
            this staged copy, so the version you build here is what players run.
        </p>
    </div>

    <!-- Current staged code status -->
    <div class="card status-card">
        <h2>Current Staged Player Code</h2>
        {% if code_status.available %}
            <p><span class="badge badge-success">✅ Ready</span></p>
            <ul style="line-height: 1.8;">
                <li><strong>Version (git):</strong> <code>{{ code_status.version }}</code></li>
                <li><strong>Size:</strong> {{ code_status.size }}</li>
                {% if code_status.updated_str %}
                <li><strong>Last updated:</strong> {{ code_status.updated_str }}</li>
                {% endif %}
                <li><strong>Path:</strong> <code>{{ code_status.path }}</code></li>
            </ul>
        {% else %}
            <p>
                <span class="badge badge-warning">⚠️ Not staged</span>
                {{ code_status.reason }}
            </p>
            <p style="color: #6c757d;">Path: <code>{{ code_status.path }}</code></p>
        {% endif %}
        {% if settings.built_at %}
            <p style="color: #6c757d; margin-top: 8px;">
                Last build saved: {{ settings.built_at }}
                {% if settings.built_by %}by {{ settings.built_by }}{% endif %}
            </p>
        {% endif %}
    </div>

    <form method="POST" action="{{ url_for('admin.build_player_action') }}">
        <!-- Repository -->
        <div class="card">
            <h2>1. Player Files Repository</h2>
            <div class="form-group">
                <label for="repo_url">Git Repository URL</label>
                <input type="text" id="repo_url" name="repo_url" class="form-control"
                       value="{{ settings.repo_url }}"
                       placeholder="https://gitea.example.com/org/Kiwy-Signage.git">
                <small style="color: #6c757d;">Cloned/refreshed into the staged directory on this server.</small>
            </div>
            <div class="form-group">
                <label for="branch">Branch</label>
                <input type="text" id="branch" name="branch" class="form-control"
                       value="{{ settings.branch }}" placeholder="main">
            </div>
        </div>

        <!-- Server configuration -->
        <div class="card">
            <h2>2. Player → Server Configuration</h2>
            <p style="color: #6c757d;">
                The player contacts the DigiServer API directly at
                <code>{scheme}://{server}:{port}/api/...</code> (no <code>/digiserver</code> path).
                Enter the address players can reach this server on.
            </p>
            <div class="form-group">
                <label for="server_ip">Server IP / Domain</label>
                <input type="text" id="server_ip" name="server_ip" class="form-control"
                       value="{{ settings.server_ip }}" placeholder="signage.example.com or 192.168.0.50">
            </div>
            <div class="form-group">
                <label for="port">Port</label>
                <input type="number" id="port" name="port" class="form-control"
                       value="{{ settings.port }}" min="1" max="65535">
                <small style="color: #6c757d;">Use 443 for HTTPS, 80 for plain HTTP, or your custom port (e.g. 8080).</small>
            </div>
            <div class="form-group">
                <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                    <input type="checkbox" name="use_https" {% if settings.use_https %}checked{% endif %}>
                    Use HTTPS
                </label>
            </div>
            <div class="form-group">
                <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                    <input type="checkbox" name="verify_ssl" {% if settings.verify_ssl %}checked{% endif %}>
                    Verify SSL certificate
                </label>
                <small style="color: #6c757d;">Leave off for self-signed certificates.</small>
            </div>
            <div class="form-group">
                <label for="orientation">Orientation</label>
                <select id="orientation" name="orientation" class="form-control">
                    <option value="Landscape" {% if settings.orientation == 'Landscape' %}selected{% endif %}>Landscape</option>
                    <option value="Portrait" {% if settings.orientation == 'Portrait' %}selected{% endif %}>Portrait</option>
                </select>
            </div>
            <div class="form-group">
                <label for="max_resolution">Max Resolution</label>
                <input type="text" id="max_resolution" name="max_resolution" class="form-control"
                       value="{{ settings.max_resolution }}" placeholder="1920x1080">
            </div>
            <p style="color: #6c757d; font-size: 13px;">
                ℹ️ The per-player <strong>screen name</strong> and <strong>quick-connect code</strong>
                are filled in automatically for each device during SSH deployment.
            </p>
        </div>

        <!-- Actions -->
        <div class="card">
            <h2>3. Build</h2>
            <div class="card-actions" style="display: flex; gap: 10px; flex-wrap: wrap;">
                <button type="submit" name="action" value="build_and_config" class="btn btn-primary">
                    ⬇️ Build files &amp; write config
                </button>
                <button type="submit" name="action" value="build_files" class="btn btn-secondary">
                    Build files only
                </button>
                <button type="submit" name="action" value="save_config" class="btn btn-secondary">
                    Write config only
                </button>
            </div>
        </div>
    </form>
</div>
{% endblock %}