{% extends "base.html" %}
{% block title %}Memory Overview{% endblock %}

{% block content %}
{% set lang = get_lang(request) %}
<div class="page-header">
    <h1>{{ t('memory.title', lang) }}</h1>
    <p>{{ t('memory.subtitle', lang) }}</p>
</div>

<!-- Stats Grid -->
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-label">{{ t('memory.total_memories', lang) }}</div>
        <div class="stat-value">{{ data.total_memories }}</div>
        {% if data.date_range.min %}
        <div class="stat-sub">{{ t('memory.since', lang) }} {{ data.date_range.min }}</div>
        {% endif %}
        <div class="stat-sub">{{ data.total_days }} {{ t('memory.days', lang) }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">{{ t('memory.date_range', lang) }}</div>
        <div class="stat-value" style="font-size: 1.125rem;">
            {% if data.date_range.min %}
                {{ data.date_range.min }} — {{ data.date_range.max }}
            {% else %}
                {{ t('memory.no_data', lang) }}
            {% endif %}
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-label">{{ t('memory.avg_arousal', lang) }}</div>
        <div class="stat-value">{{ data.avg_arousal }}</div>
        <div class="stat-sub">{{ t('memory.scale', lang) }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">{{ t('memory.categories', lang) }}</div>
        <div class="stat-value">{{ data.category_counts | length }}</div>
        <div class="stat-sub" style="display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem;">
            {% for cat, count in data.category_counts.items() %}
                <span class="badge badge-{{ cat | lower }}">{{ cat }} {{ count }}</span>
            {% endfor %}
        </div>
    </div>
</div>

<!-- Charts Grid -->
<div class="charts-grid">
    <div class="chart-card">
        <h3>{{ t('memory.daily_accumulation', lang) }}</h3>
        <p class="chart-desc">{{ t('memory.daily_desc', lang) }}</p>
        <canvas id="dailyChart"></canvas>
    </div>
    <div class="chart-card">
        <h3>{{ t('memory.category_breakdown', lang) }}</h3>
        <p class="chart-desc">{{ t('memory.category_desc', lang) }}</p>
        <canvas id="categoryChart"></canvas>
    </div>
</div>

<!-- Arousal Distribution -->
<div class="chart-card" style="margin-bottom: 2rem;">
    <h3>{{ t('memory.arousal_distribution', lang) }}</h3>
    <p class="chart-desc">{{ t('memory.arousal_desc', lang) }}</p>
    <canvas id="arousalChart"></canvas>
</div>

{# --- Most Recalled Memories --- #}
<section class="card">
    <h2>{{ t('memory.most_recalled', lang) }}</h2>
    {% if data.most_recalled %}
    <table class="data-table">
        <thead>
            <tr>
                <th>{{ t('memory.recall_count', lang) }}</th>
                <th>Title</th>
                <th>{{ t('common.arousal', lang) }}</th>
                <th>{{ t('memory.last_recalled', lang) }}</th>
            </tr>
        </thead>
        <tbody>
            {% for m in data.most_recalled %}
            <tr>
                <td>{{ m.recall_count }}</td>
                <td>{{ m.title | replace('### ', '') | replace('**', '') }}</td>
                <td>{{ "%.2f"|format(m.arousal) }}</td>
                <td>{{ m.last_recalled[:10] if m.last_recalled else '-' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p class="empty-state">{{ t('memory.no_recalls', lang) }}</p>
    {% endif %}
</section>

<!-- Signals Panel -->
<div class="signal-panel">
    <h3>{{ t('memory.crystallization', lang) }}</h3>
    <p class="chart-desc">{{ t('memory.crystal_desc', lang) }}</p>
    <div class="signal-item">
        <span class="signal-dot {{ 'active' if signals.pattern_count >= signals.pattern_threshold else 'inactive' }}"></span>
        <span>{{ t('memory.pattern_entries', lang) }}: {{ signals.pattern_count }} / {{ signals.pattern_threshold }}</span>
    </div>
    <div class="signal-item">
        <span class="signal-dot {{ 'active' if signals.error_count >= signals.error_threshold else 'inactive' }}"></span>
        <span>{{ t('memory.error_entries', lang) }}: {{ signals.error_count }} / {{ signals.error_threshold }}</span>
    </div>
    <div class="signal-item">
        <span class="signal-dot {{ 'active' if signals.log_days >= signals.log_days_threshold else 'inactive' }}"></span>
        <span>{{ t('memory.log_days', lang) }}: {{ signals.log_days }} / {{ signals.log_days_threshold }}</span>
    </div>
    <div class="signal-item">
        <span class="signal-dot {{ 'active' if signals.days_since_checkpoint >= signals.checkpoint_interval_days else 'inactive' }}"></span>
        <span>{{ t('memory.days_since_cp', lang) }}: {{ signals.days_since_checkpoint }} / {{ signals.checkpoint_interval_days }}</span>
    </div>
    {% if signals.should_crystallize %}
    <div style="margin-top: 0.75rem; padding: 0.5rem 0.75rem; background: rgba(107, 138, 107, 0.1); border-radius: 6px; font-size: 0.8125rem;">
        {{ t('memory.crystal_recommended', lang) }} — {{ signals.triggered_conditions | length }} {{ t('memory.conditions_met', lang) }}
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
Chart.defaults.color = '#8a8078';
Chart.defaults.borderColor = 'rgba(0, 0, 0, 0.06)';

const categoryColors = {
    'INSIGHT': '#5a9a5a',
    'DECISION': '#7a6aaa',
    'ERROR': '#c05050',
    'PATTERN': '#c08a30',
    'QUESTION': '#5070b0',
    'MILESTONE': '#3a8a9a',
    'SKILL': '#4a7a4a',
};

// Daily Accumulation Chart
const dailyCounts = {{ data.daily_counts | tojson }};
new Chart(document.getElementById('dailyChart'), {
    type: 'bar',
    data: {
        labels: dailyCounts.map(d => d.date),
        datasets: [{
            label: 'Memories',
            data: dailyCounts.map(d => d.count),
            backgroundColor: '#6b8a6b',
            borderRadius: 4,
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: false },
        },
        scales: {
            x: {
                grid: { display: false },
                ticks: { maxTicksLimit: 15, maxRotation: 45 },
            },
            y: {
                beginAtZero: true,
                ticks: { stepSize: 1 },
            }
        }
    }
});

// Category Breakdown Chart
const categoryCounts = {{ data.category_counts | tojson }};
const catLabels = Object.keys(categoryCounts);
const catValues = Object.values(categoryCounts);
const catColors = catLabels.map(c => categoryColors[c] || '#8a8078');

new Chart(document.getElementById('categoryChart'), {
    type: 'doughnut',
    data: {
        labels: catLabels,
        datasets: [{
            data: catValues,
            backgroundColor: catColors,
            borderWidth: 0,
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom',
                labels: { padding: 16, usePointStyle: true },
            }
        },
        cutout: '60%',
    }
});

// Arousal Distribution Chart
const arousalHist = {{ data.arousal_histogram | tojson }};
new Chart(document.getElementById('arousalChart'), {
    type: 'bar',
    data: {
        labels: arousalHist.map(d => d.bucket),
        datasets: [{
            label: 'Count',
            data: arousalHist.map(d => d.count),
            backgroundColor: arousalHist.map((d, i) => {
                const intensity = 0.3 + (i / 10) * 0.7;
                return `rgba(107, 138, 107, ${intensity})`;
            }),
            borderRadius: 4,
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: false },
        },
        scales: {
            x: {
                grid: { display: false },
            },
            y: {
                beginAtZero: true,
                ticks: { stepSize: 1 },
            }
        }
    }
});
</script>
{% endblock %}