{% extends "base.html" %}

{% block title %}Daily Mirror History - Quality Recticel{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">📋 Daily Mirror History</h1>
                    <p class="text-muted">Analyze historical daily production reports and trends</p>
                </div>
                <div>
                    <a href="{{ url_for('daily_mirror.daily_mirror_route') }}" class="btn btn-outline-success">
                        <i class="fas fa-chart-line"></i> Create New Report
                    </a>
                    <a href="{{ url_for('main.dashboard') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back to Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Date Range Selection -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-calendar-week"></i> Select Date Range
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="startDate" class="form-label">Start Date:</label>
                            <input type="date" class="form-control" id="startDate" value="{{ start_date }}">
                        </div>
                        <div class="col-md-3">
                            <label for="endDate" class="form-label">End Date:</label>
                            <input type="date" class="form-control" id="endDate" value="{{ end_date }}">
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <button type="button" class="btn btn-primary" onclick="loadHistoryData()">
                                <i class="fas fa-search"></i> Load History
                            </button>
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-outline-secondary" onclick="setDateRange(7)">Last 7 days</button>
                                <button type="button" class="btn btn-outline-secondary" onclick="setDateRange(30)">Last 30 days</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading Indicator -->
    <div id="loadingIndicator" class="row mb-4" style="display: none;">
        <div class="col-12">
            <div class="card">
                <div class="card-body text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2 mb-0">Loading historical data...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Summary Statistics -->
    <div id="summaryStats" style="display: none;">
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-chart-bar"></i> Period Summary
                            <span id="periodRange" class="badge bg-secondary ms-2"></span>
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="summary-metric">
                                    <h4 id="totalOrdersQuantity">-</h4>
                                    <p>Total Orders Quantity</p>
                                    <small id="avgOrdersQuantity" class="text-muted">Avg: -</small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="summary-metric">
                                    <h4 id="totalProductionLaunched">-</h4>
                                    <p>Total Production Launched</p>
                                    <small id="avgProductionLaunched" class="text-muted">Avg: -</small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="summary-metric">
                                    <h4 id="totalProductionFinished">-</h4>
                                    <p>Total Production Finished</p>
                                    <small id="avgProductionFinished" class="text-muted">Avg: -</small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="summary-metric">
                                    <h4 id="totalOrdersDelivered">-</h4>
                                    <p>Total Orders Delivered</p>
                                    <small id="avgOrdersDelivered" class="text-muted">Avg: -</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Historical Data Table -->
    <div id="historyTable" style="display: none;">
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-table"></i> Historical Daily Reports
                        </h5>
                        <div class="btn-group btn-group-sm" role="group">
                            <button type="button" class="btn btn-outline-primary" onclick="exportHistoryCSV()">
                                <i class="fas fa-file-csv"></i> CSV
                            </button>
                            <button type="button" class="btn btn-outline-success" onclick="exportHistoryExcel()">
                                <i class="fas fa-file-excel"></i> Excel
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover" id="historyDataTable">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Date</th>
                                        <th>Orders Quantity</th>
                                        <th>Production Launched</th>
                                        <th>Production Finished</th>
                                        <th>Orders Delivered</th>
                                        <th>Quality Approval Rate</th>
                                        <th>FG Quality Approval Rate</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="historyTableBody">
                                    <!-- Data will be populated here -->
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Pagination -->
                        <nav aria-label="History pagination" id="historyPagination" style="display: none;">
                            <ul class="pagination pagination-sm justify-content-center">
                                <!-- Pagination will be populated here -->
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Chart Visualization -->
    <div id="chartVisualization" style="display: none;">
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-chart-line"></i> Trend Analysis
                        </h5>
                    </div>
                    <div class="card-body">
                        <canvas id="trendChart" height="100"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Error Message -->
    <div id="errorMessage" class="row mb-4" style="display: none;">
        <div class="col-12">
            <div class="alert alert-danger" role="alert">
                <i class="fas fa-exclamation-triangle"></i>
                <strong>Error:</strong> <span id="errorText"></span>
            </div>
        </div>
    </div>
</div>

<style>
.summary-metric {
    text-align: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.summary-metric h4 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #2c3e50;
    margin: 0;
}

.summary-metric p {
    margin: 0.5rem 0;
    color: #6c757d;
    font-weight: 500;
}

.table th {
    white-space: nowrap;
}

.approval-rate {
    font-weight: bold;
}

.approval-rate.high {
    color: #28a745;
}

.approval-rate.medium {
    color: #ffc107;
}

.approval-rate.low {
    color: #dc3545;
}

@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.9rem;
    }
}
</style>

<script>
let historyData = [];
let currentPage = 1;
const itemsPerPage = 20;

function setDateRange(days) {
    const endDate = new Date();
    const startDate = new Date();
    startDate.setDate(endDate.getDate() - days);
    
    document.getElementById('endDate').value = endDate.toISOString().split('T')[0];
    document.getElementById('startDate').value = startDate.toISOString().split('T')[0];
    
    loadHistoryData();
}

function loadHistoryData() {
    const startDate = document.getElementById('startDate').value;
    const endDate = document.getElementById('endDate').value;
    
    if (!startDate || !endDate) {
        showError('Please select both start and end dates');
        return;
    }
    
    if (new Date(startDate) > new Date(endDate)) {
        showError('Start date cannot be after end date');
        return;
    }
    
    // Show loading indicator
    document.getElementById('loadingIndicator').style.display = 'block';
    document.getElementById('summaryStats').style.display = 'none';
    document.getElementById('historyTable').style.display = 'none';
    document.getElementById('chartVisualization').style.display = 'none';
    document.getElementById('errorMessage').style.display = 'none';
    
    // Make API call to get historical data
    fetch(`/daily_mirror/api/history_data?start_date=${startDate}&end_date=${endDate}`)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                showError(data.error);
                return;
            }
            
            historyData = data.history;
            
            // Update displays
            updateSummaryStats(data);
            updateHistoryTable();
            updateTrendChart();
            
            // Hide loading and show results
            document.getElementById('loadingIndicator').style.display = 'none';
            document.getElementById('summaryStats').style.display = 'block';
            document.getElementById('historyTable').style.display = 'block';
            document.getElementById('chartVisualization').style.display = 'block';
        })
        .catch(error => {
            console.error('Error loading history data:', error);
            showError('Failed to load historical data. Please try again.');
        });
}

function updateSummaryStats(data) {
    const history = data.history;
    
    if (history.length === 0) {
        document.getElementById('periodRange').textContent = 'No Data';
        return;
    }
    
    document.getElementById('periodRange').textContent = `${data.start_date} to ${data.end_date}`;
    
    // Calculate totals and averages
    const totals = history.reduce((acc, day) => {
        acc.ordersQuantity += day.orders_quantity;
        acc.productionLaunched += day.production_launched;
        acc.productionFinished += day.production_finished;
        acc.ordersDelivered += day.orders_delivered;
        return acc;
    }, { ordersQuantity: 0, productionLaunched: 0, productionFinished: 0, ordersDelivered: 0 });
    
    const avgDivisor = history.length;
    
    document.getElementById('totalOrdersQuantity').textContent = totals.ordersQuantity.toLocaleString();
    document.getElementById('avgOrdersQuantity').textContent = `Avg: ${Math.round(totals.ordersQuantity / avgDivisor).toLocaleString()}`;
    
    document.getElementById('totalProductionLaunched').textContent = totals.productionLaunched.toLocaleString();
    document.getElementById('avgProductionLaunched').textContent = `Avg: ${Math.round(totals.productionLaunched / avgDivisor).toLocaleString()}`;
    
    document.getElementById('totalProductionFinished').textContent = totals.productionFinished.toLocaleString();
    document.getElementById('avgProductionFinished').textContent = `Avg: ${Math.round(totals.productionFinished / avgDivisor).toLocaleString()}`;
    
    document.getElementById('totalOrdersDelivered').textContent = totals.ordersDelivered.toLocaleString();
    document.getElementById('avgOrdersDelivered').textContent = `Avg: ${Math.round(totals.ordersDelivered / avgDivisor).toLocaleString()}`;
}

function updateHistoryTable() {
    const tbody = document.getElementById('historyTableBody');
    tbody.innerHTML = '';
    
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    const pageData = historyData.slice(startIndex, endIndex);
    
    pageData.forEach(day => {
        const row = document.createElement('tr');
        
        const qualityRate = day.quality_scans.approval_rate;
        const fgQualityRate = day.fg_quality_scans.approval_rate;
        
        row.innerHTML = `
            <td><strong>${day.date}</strong></td>
            <td>${day.orders_quantity.toLocaleString()}</td>
            <td>${day.production_launched.toLocaleString()}</td>
            <td>${day.production_finished.toLocaleString()}</td>
            <td>${day.orders_delivered.toLocaleString()}</td>
            <td><span class="approval-rate ${getApprovalRateClass(qualityRate)}">${qualityRate}%</span></td>
            <td><span class="approval-rate ${getApprovalRateClass(fgQualityRate)}">${fgQualityRate}%</span></td>
            <td>
                <button class="btn btn-sm btn-outline-primary" onclick="viewDayDetails('${day.date}')">
                    <i class="fas fa-eye"></i> View
                </button>
            </td>
        `;
        
        tbody.appendChild(row);
    });
    
    updatePagination();
}

function getApprovalRateClass(rate) {
    if (rate >= 95) return 'high';
    if (rate >= 85) return 'medium';
    return 'low';
}

function updatePagination() {
    const totalPages = Math.ceil(historyData.length / itemsPerPage);
    
    if (totalPages <= 1) {
        document.getElementById('historyPagination').style.display = 'none';
        return;
    }
    
    document.getElementById('historyPagination').style.display = 'block';
    // Pagination implementation can be added here
}

function updateTrendChart() {
    // Chart implementation using Chart.js can be added here
    // For now, we'll show a placeholder
    const canvas = document.getElementById('trendChart');
    const ctx = canvas.getContext('2d');
    
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Draw placeholder text
    ctx.font = '16px Arial';
    ctx.fillStyle = '#6c757d';
    ctx.textAlign = 'center';
    ctx.fillText('Trend chart visualization will be implemented here', canvas.width / 2, canvas.height / 2);
}

function viewDayDetails(date) {
    // Navigate to daily mirror with specific date
    window.open(`{{ url_for('daily_mirror.daily_mirror_route') }}?date=${date}`, '_blank');
}

function exportHistoryCSV() {
    alert('CSV export functionality will be implemented soon.');
}

function exportHistoryExcel() {
    alert('Excel export functionality will be implemented soon.');
}

function showError(message) {
    document.getElementById('errorText').textContent = message;
    document.getElementById('errorMessage').style.display = 'block';
    document.getElementById('loadingIndicator').style.display = 'none';
    document.getElementById('summaryStats').style.display = 'none';
    document.getElementById('historyTable').style.display = 'none';
    document.getElementById('chartVisualization').style.display = 'none';
}

// Auto-load data on page load
document.addEventListener('DOMContentLoaded', function() {
    loadHistoryData();
});
</script>
{% endblock %}