{% extends "base.html" %}

{% block title %}{{ _('Riepilogo') }} - {{ recipe.name }}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <!-- Breadcrumb -->
    <nav class="mb-6" aria-label="Breadcrumb">
        <ol class="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
            <li>
                <a href="{{ url_for('measure.select_recipe') }}"
                   class="hover:text-primary transition-colors inline-flex items-center gap-1">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
                    </svg>
                    {{ _('Misure') }}
                </a>
            </li>
            <li>
                <svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
                </svg>
            </li>
            <li>
                <a href="{{ url_for('measure.task_list', recipe_id=recipe.id) }}"
                   class="hover:text-primary transition-colors">
                    {{ recipe.name }}
                </a>
            </li>
            <li>
                <svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
                </svg>
            </li>
            <li class="font-medium text-[var(--text-primary)]">
                {{ _('Riepilogo') }}
            </li>
        </ol>
    </nav>

    <!-- Recipe Info Card -->
    <div class="tmf-card mb-6">
        <div class="tmf-card-header">
            <h1 class="text-2xl font-bold" style="color: var(--text-primary);">{{ _('Misurazioni Complete') }}</h1>
        </div>
        <div class="tmf-card-body">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div>
                    <p class="text-sm font-medium mb-1" style="color: var(--text-muted);">{{ _('Codice') }}</p>
                    <p class="font-mono font-medium" style="color: var(--text-primary);">{{ recipe.code }}</p>
                </div>
                <div>
                    <p class="text-sm font-medium mb-1" style="color: var(--text-muted);">{{ _('Nome') }}</p>
                    <p class="font-medium" style="color: var(--text-primary);">{{ recipe.name }}</p>
                </div>
                <div>
                    <p class="text-sm font-medium mb-1" style="color: var(--text-muted);">{{ _('Versione') }}</p>
                    <p class="font-mono font-medium" style="color: var(--text-primary);">{{ recipe.current_version.version_number if recipe.current_version else recipe.version }}</p>
                </div>
                <div>
                    <p class="text-sm font-medium mb-1" style="color: var(--text-muted);">{{ _('Lotto') }}</p>
                    <p class="font-mono font-medium" style="color: var(--text-primary);">{{ lot_number or '-' }}</p>
                </div>
            </div>
            {% if serial_number %}
            <div class="mt-3 pt-3" style="border-top: 1px solid var(--border-color);">
                <p class="text-sm font-medium mb-1" style="color: var(--text-muted);">{{ _('Seriale') }}</p>
                <p class="font-mono font-medium" style="color: var(--text-primary);">{{ serial_number }}</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Statistics Cards -->
    {% set total_count = measurements|length %}
    {% set pass_count = measurements|selectattr('pass_fail', 'equalto', 'pass')|list|length %}
    {% set warning_count = measurements|selectattr('pass_fail', 'equalto', 'warning')|list|length %}
    {% set fail_count = measurements|selectattr('pass_fail', 'equalto', 'fail')|list|length %}

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <!-- Total -->
        <div class="tmf-card">
            <div class="tmf-card-body">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium mb-1" style="color: var(--text-muted);">{{ _('Totale') }}</p>
                        <p class="text-3xl font-bold" style="color: var(--text-primary);">{{ total_count }}</p>
                    </div>
                    <div class="p-3 rounded-lg" style="background-color: var(--bg-secondary);">
                        <svg class="h-8 w-8" style="color: var(--text-primary);" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pass -->
        <div class="tmf-card">
            <div class="tmf-card-body">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium mb-1" style="color: var(--text-muted);">{{ _('Conformi') }}</p>
                        <p class="text-3xl font-bold text-measure-pass dark:text-green-400">{{ pass_count }}</p>
                    </div>
                    <div class="p-3 rounded-lg bg-green-100 dark:bg-green-900/30">
                        <svg class="h-8 w-8 text-measure-pass dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <!-- Warning -->
        <div class="tmf-card">
            <div class="tmf-card-body">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium mb-1" style="color: var(--text-muted);">{{ _('Attenzione') }}</p>
                        <p class="text-3xl font-bold text-measure-warning dark:text-amber-400">{{ warning_count }}</p>
                    </div>
                    <div class="p-3 rounded-lg bg-amber-100 dark:bg-amber-900/30">
                        <svg class="h-8 w-8 text-measure-warning dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <!-- Fail -->
        <div class="tmf-card">
            <div class="tmf-card-body">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium mb-1" style="color: var(--text-muted);">{{ _('Non Conformi') }}</p>
                        <p class="text-3xl font-bold text-measure-fail dark:text-red-400">{{ fail_count }}</p>
                    </div>
                    <div class="p-3 rounded-lg bg-red-100 dark:bg-red-900/30">
                        <svg class="h-8 w-8 text-measure-fail dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Measurements Table -->
    <div class="tmf-card mb-6">
        <div class="tmf-card-header flex items-center justify-between">
            <h2 class="text-xl font-bold" style="color: var(--text-primary);">{{ _('Dettaglio Misurazioni') }}</h2>
            <button
                onclick="(function(){ var e = csvExport(); e.exportMeasurements(window.measurementData.measurements, 'misure_' + window.measurementData.recipeCode + '.csv'); })()"
                class="btn btn-secondary flex items-center gap-2">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                <span>{{ _('Esporta CSV') }}</span>
            </button>
        </div>
        <div class="tmf-card-body overflow-x-auto">
            <table class="tmf-table">
                <thead>
                    <tr>
                        <th class="text-center">{{ _('Data/Ora') }}</th>
                        <th>{{ _('Task') }}</th>
                        <th>{{ _('Descrizione') }}</th>
                        <th class="text-right">{{ _('Nominale') }}</th>
                        <th class="text-right">{{ _('Valore') }}</th>
                        <th class="text-right">{{ _('Deviazione') }}</th>
                        <th class="text-center">{{ _('Esito') }}</th>
                        <th class="text-center">{{ _('Metodo') }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for m in measurements|sort(attribute='task_info.order_index,subtask.marker_number') %}
                    <tr>
                        <td class="text-center font-mono text-xs" style="color: var(--text-secondary);">
                            {{ m.measured_at[:16]|replace('T', ' ') if m.measured_at else '-' }}
                        </td>
                        <td style="color: var(--text-secondary);" class="text-sm">
                            {{ m.task_info.title if m.task_info else '-' }}
                        </td>
                        <td style="color: var(--text-primary);">
                            {{ m.subtask.description }}
                        </td>
                        <td class="text-right measure-value">
                            {{ "%.3f"|format(m.subtask.nominal) }} {{ m.subtask.unit }}
                        </td>
                        <td class="text-right measure-value font-semibold" style="color: var(--text-primary);">
                            {{ "%.3f"|format(m.value) }} {{ m.subtask.unit }}
                        </td>
                        <td class="text-right measure-value {% if m.deviation > 0 %}text-measure-fail dark:text-red-400{% elif m.deviation < 0 %}text-measure-pass dark:text-green-400{% else %}{% endif %}">
                            {{ "%+.3f"|format(m.deviation) }}
                        </td>
                        <td class="text-center">
                            {% if m.pass_fail == 'pass' %}
                            <span class="badge badge-pass">{{ _('Pass') }}</span>
                            {% elif m.pass_fail == 'warning' %}
                            <span class="badge badge-warning">{{ _('Warning') }}</span>
                            {% elif m.pass_fail == 'fail' %}
                            <span class="badge badge-fail">{{ _('Fail') }}</span>
                            {% else %}
                            <span class="badge badge-neutral">-</span>
                            {% endif %}
                        </td>
                        <td class="text-center">
                            {% if m.input_method == 'manual' %}
                            <div class="inline-flex items-center gap-1" style="color: var(--text-secondary);">
                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
                                </svg>
                                <span class="text-sm">{{ _('Manuale') }}</span>
                            </div>
                            {% elif m.input_method == 'usb_caliper' %}
                            <div class="inline-flex items-center gap-1" style="color: var(--text-secondary);">
                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
                                </svg>
                                <span class="text-sm">{{ _('Calibro') }}</span>
                            </div>
                            {% else %}
                            <span class="text-sm" style="color: var(--text-muted);">-</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Navigation Footer -->
    <div class="flex flex-col sm:flex-row gap-3 justify-between items-center">
        <div class="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
            <a href="{{ url_for('measure.select_recipe') }}"
               class="btn btn-secondary w-full sm:w-auto flex items-center justify-center gap-2">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12"/>
                </svg>
                <span>{{ _('Seleziona altra ricetta') }}</span>
            </a>
            <a href="{{ url_for('measure.task_list', recipe_id=recipe.id) }}"
               class="btn btn-secondary w-full sm:w-auto flex items-center justify-center gap-2">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                <span>{{ _('Ripeti misurazioni') }}</span>
            </a>
        </div>
        {% if current_user.get('roles') and 'Metrologist' in current_user.get('roles', []) %}
        <a href="{{ url_for('statistics.dashboard') }}"
           class="btn btn-primary w-full sm:w-auto flex items-center justify-center gap-2">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
            </svg>
            <span>{{ _('Statistiche') }}</span>
        </a>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/csv-export.js') }}"></script>
<script>
window.CSV_I18N = {
    subtask_id: "{{ _('Subtask ID') }}",
    subtask_name: "{{ _('Nome Sottotask') }}",
    measured_value: "{{ _('Valore Misurato') }}",
    unit: "{{ _('Unita') }}",
    nominal_value: "{{ _('Valore Nominale') }}",
    tolerance_plus: "{{ _('Tolleranza +') }}",
    tolerance_minus: "{{ _('Tolleranza -') }}",
    deviation: "{{ _('Scarto') }}",
    result: "{{ _('Esito') }}",
    lot_number: "{{ _('Numero Lotto') }}",
    serial_number: "{{ _('Numero Seriale') }}",
    input_method: "{{ _('Metodo Input') }}",
    measurement_date: "{{ _('Data Misurazione') }}",
    operator: "{{ _('Operatore') }}",
    task_summary_title: "{{ _('RIEPILOGO ESECUZIONE TASK') }}",
    task_id: "{{ _('Task ID') }}",
    task_name: "{{ _('Nome Task') }}",
    recipe: "{{ _('Ricetta') }}",
    start_date: "{{ _('Data Inizio') }}",
    end_date: "{{ _('Data Fine') }}",
    status: "{{ _('Stato') }}",
    lot: "{{ _('Lotto') }}",
    serial: "{{ _('Seriale') }}",
    statistics: "{{ _('STATISTICHE') }}",
    total_measurements: "{{ _('Totale Misure') }}",
    passed: "{{ _('Passate') }}",
    failed: "{{ _('Fallite') }}",
    pass_rate: "{{ _('Percentuale Successo') }}",
    measurement_details: "{{ _('DETTAGLIO MISURE') }}"
};
</script>
<script>
// Pass data to csv-export.js
window.measurementData = {
    recipeName: {{ recipe.name|tojson }},
    recipeCode: {{ recipe.code|tojson }},
    version: {{ (recipe.current_version.version_number if recipe.current_version else recipe.version)|tojson }},
    lotNumber: {{ (lot_number or '')|tojson }},
    serialNumber: {{ (serial_number or '')|tojson }},
    measurements: {{ measurements|tojson }}
};
</script>
{% endblock %}