{% extends "base.html" %}

{% block title %}{{ process.process_name }} - Consumption Sheets - ScanLook{% endblock %}

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

    <div class="dashboard-header">
        <div class="header-left">
            <h1 class="page-title">{{ process.process_name }}</h1>
            <p class="page-subtitle">Key: <code style="font-family: var(--font-mono); color: var(--color-primary);">{{ process.process_key }}</code></p>
        </div>
    </div>

    <!-- Configuration Options -->
    <div class="config-grid">
        <!-- Database Configuration Card -->
        <div class="config-card">
            <div class="config-card-header">
                <div class="config-icon">🗄️</div>
                <h2 class="config-title">Database</h2>
            </div>
            <p class="config-desc">Define fields for header and detail tables</p>
            
            <div class="config-stats">
                <div class="config-stat">
                    <span class="stat-number">{{ header_fields|length }}</span>
                    <span class="stat-label">Header Fields</span>
                </div>
                <div class="config-stat">
                    <span class="stat-number">{{ detail_fields|length }}</span>
                    <span class="stat-label">Detail Fields</span>
                </div>
            </div>
            
            <a href="{{ url_for('cons_sheets.process_fields', process_id=process.id) }}" class="btn btn-primary btn-block">
                Configure Fields
            </a>
        </div>

        <!-- Excel Template Card -->
        <div class="config-card">
            <div class="config-card-header">
                <div class="config-icon">📊</div>
                <h2 class="config-title">Excel Template</h2>
            </div>
            <p class="config-desc">Upload template and map fields to cells</p>
            
            <div class="config-stats">
                <div class="config-stat">
                    {% if process.template_file %}
                        <span class="stat-number" style="color: var(--color-success);">✓</span>
                        <span class="stat-label">{{ process.template_filename or 'Uploaded' }}</span>
                    {% else %}
                        <span class="stat-number" style="color: var(--color-warning);">—</span>
                        <span class="stat-label">No template</span>
                    {% endif %}
                </div>
                <div class="config-stat">
                    <span class="stat-number">{{ process.rows_per_page or 30 }}</span>
                    <span class="stat-label">Rows/Page</span>
                </div>
            </div>
            
            <a href="{{ url_for('cons_sheets.process_template', process_id=process.id) }}" class="btn btn-primary btn-block">
                Configure Template
            </a>
        </div>
    </div>

    <!-- Quick Field Preview -->
    {% if header_fields or detail_fields %}
    <div class="fields-preview">
        <h3 class="section-title">Field Preview</h3>
        
        {% if header_fields %}
        <div class="field-section">
            <h4 class="field-section-title">Header Fields</h4>
            <div class="field-list">
                {% for field in header_fields %}
                <div class="field-chip">
                    <span class="field-name">{{ field.field_label }}</span>
                    <span class="field-type">{{ field.field_type }}</span>
                    {% if field.excel_cell %}
                    <span class="field-cell">→ {{ field.excel_cell }}</span>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        
        {% if detail_fields %}
        <div class="field-section">
            <h4 class="field-section-title">Detail Fields</h4>
            <div class="field-list">
                {% for field in detail_fields %}
                <div class="field-chip">
                    <span class="field-name">{{ field.field_label }}</span>
                    <span class="field-type">{{ field.field_type }}</span>
                    {% if field.excel_cell %}
                    <span class="field-cell">→ Col {{ field.excel_cell }}</span>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
    {% endif %}
</div>

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

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

.config-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow);
}

.config-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.config-icon {
    font-size: 2rem;
}

.config-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

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

.config-stats {
    display: flex;
    gap: var(--space-xl);
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--color-surface-elevated);
    border-radius: var(--radius-md);
}

.config-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.config-stat .stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    font-family: var(--font-mono);
}

.config-stat .stat-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fields-preview {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--color-border);
}

.field-section {
    margin-bottom: var(--space-lg);
}

.field-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.field-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.field-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.field-name {
    color: var(--color-text);
    font-weight: 600;
}

.field-type {
    color: var(--color-text-dim);
    font-size: 0.75rem;
    font-family: var(--font-mono);
}

.field-cell {
    color: var(--color-primary);
    font-size: 0.75rem;
    font-family: var(--font-mono);
}
</style>
{% endblock %}