{% extends "base.html" %}

{% block title %}Excel Template - {{ process.process_name }} - ScanLook{% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="mode-selector">
        <a href="{{ url_for('cons_sheets.process_detail', process_id=process.id) }}" class="btn btn-secondary btn-sm">
            <i class="fa-solid fa-arrow-left"></i> Back to {{ process.process_name }}
        </a>
    </div>

    <div class="dashboard-header">
        <div class="header-left">
            <h1 class="page-title">Excel Template</h1>
            <p class="page-subtitle">{{ process.process_name }}</p>
        </div>
    </div>

    <div class="template-grid">
        <!-- Upload Section -->
        <div class="config-section">
            <h2 class="section-title">Template File</h2>
            
            <div class="current-template">
                {% if process.template_filename %}
                <div class="template-info">
                    <span class="template-icon">📄</span>
                    <span class="template-name">{{ process.template_filename }}</span>
                    <a href="{{ url_for('cons_sheets.download_template', process_id=process.id) }}" class="btn btn-secondary btn-sm">Download</a>
                </div>
                {% else %}
                <p class="no-template">No template uploaded yet</p>
                {% endif %}
            </div>
            
            <form method="POST" action="{{ url_for('cons_sheets.upload_template', process_id=process.id) }}" enctype="multipart/form-data" class="upload-form">
                <div class="form-group">
                    <label for="template_file" class="form-label">Upload New Template</label>
                    <input type="file" id="template_file" name="template_file" accept=".xlsx" class="form-input" required>
                    <p class="form-hint">Excel files (.xlsx) only</p>
                </div>
                <button type="submit" class="btn btn-primary">Upload</button>
            </form>
        </div>

        <!-- Settings Section -->
        <div class="config-section">
            <h2 class="section-title">Page Settings</h2>
            
            <form method="POST" action="{{ url_for('cons_sheets.update_template_settings', process_id=process.id) }}">
                <div class="form-group">
                    <label for="rows_per_page" class="form-label">Rows Per Page</label>
                    <input type="number" id="rows_per_page" name="rows_per_page" 
                           value="{{ process.rows_per_page or 30 }}" min="1" max="500" class="form-input">
                    <p class="form-hint">Max detail rows before starting a new page</p>
                </div>
                
                <div class="form-group">
                    <label for="detail_start_row" class="form-label">Detail Start Row</label>
                    <input type="number" id="detail_start_row" name="detail_start_row" 
                           value="{{ process.detail_start_row or 10 }}" min="1" max="500" class="form-input">
                    <p class="form-hint">Excel row number where detail data begins</p>
                </div>
                
                <button type="submit" class="btn btn-primary">Save Settings</button>
            </form>
        </div>
    </div>

    <!-- Field Mapping Summary -->
    <div class="mapping-section">
        <h2 class="section-title">Field Mappings</h2>
        <p class="section-desc">Excel cell mappings are configured per-field in the Database section. Here's a summary:</p>
        
        {% if header_fields or detail_fields %}
        <div class="mapping-grid">
            {% if header_fields %}
            <div class="mapping-group">
                <h3 class="mapping-group-title">Header Fields</h3>
                <table class="mapping-table">
                    <thead>
                        <tr>
                            <th>Field</th>
                            <th>Excel Cell</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for field in header_fields %}
                        <tr>
                            <td>{{ field.field_label }}</td>
                            <td>
                                {% if field.excel_cell %}
                                <code>{{ field.excel_cell }}</code>
                                {% else %}
                                <span class="not-mapped">Not mapped</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endif %}
            
            {% if detail_fields %}
            <div class="mapping-group">
                <h3 class="mapping-group-title">Detail Fields</h3>
                <p class="mapping-note">Columns only — rows start at {{ process.detail_start_row or 10 }}</p>
                <table class="mapping-table">
                    <thead>
                        <tr>
                            <th>Field</th>
                            <th>Excel Column</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for field in detail_fields %}
                        <tr>
                            <td>{{ field.field_label }}</td>
                            <td>
                                {% if field.excel_cell %}
                                <code>{{ field.excel_cell }}</code>
                                {% else %}
                                <span class="not-mapped">Not mapped</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endif %}
        </div>
        
        <a href="{{ url_for('cons_sheets.process_fields', process_id=process.id) }}" class="btn btn-secondary" style="margin-top: var(--space-lg);">
            Edit Field Mappings
        </a>
        {% else %}
        <div class="empty-state-small">
            <p>No fields defined yet. <a href="{{ url_for('cons_sheets.process_fields', process_id=process.id) }}">Add fields first</a>.</p>
        </div>
        {% endif %}
    </div>
</div>

<style>
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

.config-section {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

.current-template {
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--color-surface-elevated);
    border-radius: var(--radius-md);
}

.template-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.template-icon {
    font-size: 1.5rem;
}

.template-name {
    flex: 1;
    font-family: var(--font-mono);
    color: var(--color-primary);
}

.no-template {
    color: var(--color-text-muted);
    font-style: italic;
}

.upload-form {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.mapping-section {
    margin-top: var(--space-xl);
    padding: var(--space-xl);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.section-desc {
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

.mapping-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-xl);
}

.mapping-group-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.mapping-note {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.mapping-table {
    width: 100%;
    border-collapse: collapse;
}

.mapping-table th,
.mapping-table td {
    padding: var(--space-sm);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.mapping-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.mapping-table code {
    background: var(--color-primary-glow);
    color: var(--color-primary);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.not-mapped {
    color: var(--color-warning);
    font-size: 0.8rem;
}

.empty-state-small {
    text-align: center;
    padding: var(--space-xl);
    color: var(--color-text-muted);
}

.empty-state-small a {
    color: var(--color-primary);
}
</style>
{% endblock %}