{% extends "base.html" %}

{% block title %}Batch History & Reports - Karung.AI{% endblock %}

{% block extra_head %}
<style>
    .history-layout {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 28px;
        align-items: start;
    }

    @media (max-width: 900px) {
        .history-layout {
            grid-template-columns: 1fr;
        }
    }

    /* Sidebar Dates List */
    .sidebar-dates {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .dates-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .dates-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 550px;
        overflow-y: auto;
        padding-right: 4px;
    }

    .date-row {
        background-color: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: 12px 16px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: var(--transition);
        text-decoration: none;
        color: inherit;
    }

    .date-row:hover {
        border-color: var(--accent-blue);
        background-color: rgba(0, 113, 227, 0.02);
    }

    .date-row.active {
        border-color: var(--accent-blue);
        background-color: rgba(0, 113, 227, 0.08);
        color: var(--accent-blue);
        font-weight: 600;
    }

    .date-val {
        font-size: 14px;
    }

    .date-badge {
        font-size: 12px;
        background-color: var(--bg-base);
        color: var(--text-secondary);
        padding: 2px 8px;
        border-radius: 99px;
        font-weight: 600;
        border: 1px solid var(--border-color);
    }

    .date-row.active .date-badge {
        background-color: var(--accent-blue);
        color: #FFFFFF;
        border-color: var(--accent-blue);
    }

    /* Right Main Panel: Date Details */
    .details-panel {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .details-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 16px;
    }

    .details-title {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -0.5px;
    }

    .stats-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
    }

    .stat-mini-card {
        background-color: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: 16px;
        box-shadow: var(--shadow-sm);
    }

    .stat-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .stat-number {
        font-size: 24px;
        font-weight: 700;
        margin-top: 4px;
        color: var(--text-primary);
    }

    /* Table styles */
    .table-container {
        width: 100%;
        overflow-x: auto;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background-color: var(--bg-card);
        box-shadow: var(--shadow-sm);
    }

    table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
        font-size: 14px;
    }

    th {
        background-color: var(--bg-base);
        color: var(--text-secondary);
        font-weight: 600;
        padding: 12px 18px;
        border-bottom: 1px solid var(--border-color);
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    td {
        padding: 14px 18px;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-primary);
    }

    tr:last-child td {
        border-bottom: none;
    }

    tr:hover td {
        background-color: rgba(0, 0, 0, 0.01);
    }

    [data-theme="dark"] tr:hover td {
        background-color: rgba(255, 255, 255, 0.01);
    }

    .no-data {
        text-align: center;
        padding: 40px;
        color: var(--text-secondary);
    }

    .no-data i {
        font-size: 32px;
        margin-bottom: 12px;
        display: block;
        color: var(--text-secondary);
    }
</style>
{% endblock %}

{% block content %}
<div class="history-layout">
    <!-- Left Column: Dates List -->
    <div class="sidebar-dates">
        <div class="dates-header">
            <span>Recorded Dates</span>
            <i class="fa-solid fa-calendar-days"></i>
        </div>
        
        <div class="dates-list" id="datesList">
            <div class="no-data" style="padding: 20px;">
                <i class="fa-solid fa-circle-notch fa-spin"></i>
                <p style="font-size: 12px;">Loading dates...</p>
            </div>
        </div>

        <a href="/api/export-daily-csv?days=30" class="btn btn-secondary" style="width: 100%; justify-content: center;">
            <i class="fa-solid fa-file-excel"></i> Export All (30 Days)
        </a>
    </div>

    <!-- Right Column: Date Details Table -->
    <div class="details-panel">
        <div class="details-header">
            <h2 class="details-title" id="selectedDateTitle">Select a Date</h2>
            <a href="#" id="exportDayBtn" class="btn btn-primary" style="display: none;">
                <i class="fa-solid fa-file-excel"></i> Export Day Excel
            </a>
        </div>

        <!-- Metric summaries for selected date -->
        <div class="stats-row" id="dateStatsRow" style="display: none;">
            <div class="stat-mini-card">
                <div class="stat-label">Total Sacks</div>
                <div class="stat-number" id="statTotalCount">0</div>
            </div>
            <div class="stat-mini-card">
                <div class="stat-label">Total Boxes</div>
                <div class="stat-number" id="statTotalBoxes">0</div>
            </div>
            <div class="stat-mini-card">
                <div class="stat-label">Total Batches</div>
                <div class="stat-number" id="statTotalBatches">0</div>
            </div>
            <div class="stat-mini-card">
                <div class="stat-label">Avg Sacks / Batch</div>
                <div class="stat-number" id="statAvgSacks">0</div>
            </div>
            <div class="stat-mini-card">
                <div class="stat-label">Avg Duration</div>
                <div class="stat-number" id="statAvgDuration">0 min</div>
            </div>
        </div>

        <!-- Batches table -->
        <div class="table-container">
            <table id="batchesTable">
                <thead>
                    <tr>
                        <th>Batch #</th>
                        <th>Sacks Counted</th>
                        <th>Boxes Counted</th>
                        <th>Start Time</th>
                        <th>End Time</th>
                        <th>Duration (Min)</th>
                    </tr>
                </thead>
                <tbody id="batchesTableBody">
                    <tr>
                        <td colspan="6" class="no-data">
                            <i class="fa-solid fa-arrow-left"></i>
                            Silakan pilih tanggal dari daftar sebelah kiri untuk memuat detail batch.
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    let availableDates = [];
    let selectedDate = null;

    async function loadDates() {
        try {
            const res = await fetch('/api/available-dates');
            const data = await res.json();
            
            const listEl = document.getElementById('datesList');
            listEl.innerHTML = '';
            
            if (data.length === 0) {
                listEl.innerHTML = `
                    <div class="no-data" style="padding: 20px;">
                        <i class="fa-solid fa-folder-open"></i>
                        <p style="font-size: 12px;">No records found yet.</p>
                    </div>
                `;
                return;
            }

            availableDates = data;
            
            data.forEach((item, idx) => {
                const row = document.createElement('a');
                row.href = '#';
                row.className = 'date-row';
                row.onclick = (e) => {
                    e.preventDefault();
                    selectDate(item.date, row);
                };
                
                row.innerHTML = `
                    <span class="date-val">${item.date}</span>
                    <span class="date-badge">${item.total_count} bags</span>
                `;
                
                listEl.appendChild(row);
                
                // Pilih tanggal pertama secara default
                if (idx === 0) {
                    selectDate(item.date, row);
                }
            });
        } catch (err) {
            console.error('Failed to load dates list:', err);
        }
    }

    async function selectDate(date, element) {
        selectedDate = date;
        
        // Update active class in sidebar list
        document.querySelectorAll('.date-row').forEach(row => {
            row.classList.remove('active');
        });
        if (element) {
            element.classList.add('active');
        }

        // Show details
        document.getElementById('selectedDateTitle').textContent = `Summary details for ${date}`;
        
        const exportBtn = document.getElementById('exportDayBtn');
        exportBtn.href = `/api/export-day-csv/${date}`;
        exportBtn.style.display = 'inline-flex';

        const tableBody = document.getElementById('batchesTableBody');
        tableBody.innerHTML = `
            <tr>
                <td colspan="6" class="no-data">
                    <i class="fa-solid fa-circle-notch fa-spin"></i>
                    Memuat data batch untuk tanggal ${date}...
                </td>
            </tr>
        `;

        try {
            const res = await fetch(`/api/day-detail/${date}`);
            const data = await res.json();
            
            tableBody.innerHTML = '';
            
            // Show stats row
            document.getElementById('dateStatsRow').style.display = 'grid';
            document.getElementById('statTotalCount').textContent = (data.total_count || 0).toLocaleString();
            document.getElementById('statTotalBoxes').textContent = (data.total_boxes || 0).toLocaleString();
            document.getElementById('statTotalBatches').textContent = data.total_batches || 0;
            
            const avgSacks = data.total_batches > 0 ? (data.total_count / data.total_batches).toFixed(1) : '0';
            document.getElementById('statAvgSacks').textContent = avgSacks;
            document.getElementById('statAvgDuration').textContent = `${data.avg_duration_minutes || 0} min`;

            if (!data.batches || data.batches.length === 0) {
                tableBody.innerHTML = `
                    <tr>
                        <td colspan="6" class="no-data">
                            <i class="fa-solid fa-inbox"></i>
                            Tidak ada batch tercatat pada tanggal ${date}.
                        </td>
                    </tr>
                `;
                return;
            }

            data.batches.forEach(b => {
                const tr = document.createElement('tr');
                
                const startStr = b.start_time ? new Date(b.start_time).toLocaleTimeString('en-US', { hour12: false }) : '--:--:--';
                const endStr = b.end_time ? new Date(b.end_time).toLocaleTimeString('en-US', { hour12: false }) : '--:--:--';
                
                tr.innerHTML = `
                    <td style="font-weight: 600; color: var(--accent-blue);">Batch #${b.batch_number}</td>
                    <td style="font-weight: 500;">${b.count.toLocaleString()}</td>
                    <td style="font-weight: 500;">${(b.box_loading || 0).toLocaleString()}</td>
                    <td>${startStr}</td>
                    <td>${endStr}</td>
                    <td>${b.duration_minutes || 0} min</td>
                `;
                tableBody.appendChild(tr);
            });

        } catch (err) {
            console.error('Failed to load date details:', err);
            tableBody.innerHTML = `
                <tr>
                    <td colspan="6" class="no-data" style="color: var(--accent-red);">
                        <i class="fa-solid fa-circle-exclamation"></i>
                        Gagal memuat detail data: ${err.message}
                    </td>
                </tr>
            `;
        }
    }

    document.addEventListener('DOMContentLoaded', loadDates);
</script>
{% endblock %}