{% extends "base.html" %}
{% block title %}{{ session_label(session) }} · boker.club{% endblock %}
{% block page_class %}page--session{% endblock %}
{% block content %}

<div class="breadcrumb">
    <a href="{{ url_for('sessions') }}">Sessions</a>
    <span class="breadcrumb__sep">/</span>
    <span>{{ session_label(session) }}</span>
    <span style="flex:1"></span>
    {% if prev_session %}
    <a class="btn btn--ghost btn--sm" href="{{ url_for('session_detail', session_id=prev_session.session_id) }}">← Prev</a>
    {% endif %}
    {% if next_session %}
    <a class="btn btn--ghost btn--sm" href="{{ url_for('session_detail', session_id=next_session.session_id) }}">Next →</a>
    {% endif %}
</div>

<div class="hero" style="padding-top:0;">
    <p class="hero__kicker session-number">
        Session #{{ "%03d"|format(session_number) }}
    </p>
    <h1 class="hero__title">{{ session_label(session) }}</h1>
    <p class="hero__sub">{{ session.entries|length }} player{{ 's' if session.entries|length != 1 else '' }} · <span class="status-badge status-{{ session.status }}">{{ session.status }}</span></p>
</div>

<!-- Recon cards -->
<div class="recon-grid" style="margin-bottom:20px;">
    <div class="panel">
        <div class="recon-card-head">
            <span class="kicker kicker--dot kicker--dot-accent">Cash flow</span>
        </div>
        <div class="recon-metric-grid">
            <div class="recon-cell">
                <span class="kicker" style="font-size:10px;">Cash in</span>
                <div class="recon-val recon-val--num">{{ session.total_cash_in_cents | money }}</div>
            </div>
            <div class="recon-cell">
                <span class="kicker" style="font-size:10px;">Gross payout</span>
                <div class="recon-val recon-val--num">{{ session.total_gross_payout_cents | money }}</div>
            </div>
            <div class="recon-cell">
                <span class="kicker" style="font-size:10px;">Cash paid out</span>
                <div class="recon-val recon-val--pos">{{ session.total_paid_cents | money }}</div>
            </div>
            <div class="recon-cell">
                <span class="kicker" style="font-size:10px;">Rolled out</span>
                <div class="recon-val" style="color:var(--rolled)">{{ session.total_rollover_out_cents | money }}</div>
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="recon-card-head">
            <span class="kicker kicker--dot kicker--dot-warn">Open items</span>
        </div>
        <div class="recon-metric-grid">
            <div class="recon-cell">
                <span class="kicker" style="font-size:10px;">House owes</span>
                <div class="recon-val {{ 'recon-val--neg' if session.total_current_due_to_player_cents > 0 else 'recon-val--pos' }}">
                    {{ session.total_current_due_to_player_cents | money }}
                </div>
            </div>
            <div class="recon-cell">
                <span class="kicker" style="font-size:10px;">Players owe house</span>
                <div class="recon-val {{ 'recon-val--warn' if session.total_current_due_to_house_cents > 0 else '' }}">
                    {{ session.total_current_due_to_house_cents | money }}
                </div>
            </div>
            <div class="recon-cell">
                <span class="kicker" style="font-size:10px;">Debt repaid</span>
                <div class="recon-val" style="color:var(--pos)">{{ session.total_front_collected_cents | money }}</div>
            </div>
            <div class="recon-cell">
                <span class="kicker" style="font-size:10px;">Written off</span>
                <div class="recon-val" style="color:var(--neg)">{{ session.total_front_writeoff_cents | money }}</div>
            </div>
        </div>
    </div>
</div>

<!-- Player totals table -->
<div class="panel" style="margin-bottom:20px;">
    <div class="panel__head">
        <div>
            <span class="kicker" style="margin:0;">Results</span>
            <h2 class="panel__title">Player totals</h2>
        </div>
        <div class="segmented" id="viewToggle">
            <button class="seg is-on" data-view="compact">Compact</button>
            <button class="seg" data-view="full">Full ledger</button>
        </div>
    </div>
    <div class="tbl-scroll">
        <table class="tbl tbl--session" id="sessionTable">
            <thead>
                <tr>
                    <th class="col-player">Player</th>
                    <th>Invested</th>
                    <th>Cash-out</th>
                    <th>Net</th>
                    <th>Cash paid</th>
                    <th>Settlement</th>
                    <th>Status</th>
                    <th class="col-acct">Fronted</th>
                    <th class="col-acct">Rolled in</th>
                    <th class="col-acct">Gross payout</th>
                    <th class="col-acct">Rolled out</th>
                    <th class="col-acct">Notes</th>
                </tr>
            </thead>
            <tbody>
                {% for entry in session.entries %}
                <tr onclick="window.location='{{ url_for('player_detail', player_name=entry.player_name) }}'">
                    <td class="col-player">
                        <a href="{{ url_for('player_detail', player_name=entry.player_name) }}">{{ entry.player_name }}</a>
                    </td>
                    <td>{{ entry.invested_cents | money }}</td>
                    <td>{{ entry.cash_out_cents | money }}</td>
                    <td class="num-net {{ 'num-pos' if entry.net_cents > 0 else 'num-neg' if entry.net_cents < 0 else 'num-muted' }}">
                        {{ '+' if entry.net_cents > 0 else '' }}{{ entry.net_cents | money }}
                    </td>
                    <td style="color:var(--pos)">{{ entry.paid_cents | money }}</td>
                    <td class="{{ 'num-neg' if entry.current_due_to_player_cents > 0 else '' }}">
                        {% if entry.current_due_to_house_cents > 0 %}
                            <span style="color:var(--owes)">owes {{ entry.current_due_to_house_cents | money }}</span>
                        {% else %}
                            {{ entry.current_due_to_player_cents | money }}
                        {% endif %}
                    </td>
                    <td>
                        <span class="badge badge--{{ entry.payout_status }}">{{ entry.payout_status }}</span>
                    </td>
                    <td class="col-acct" style="color:var(--warn)">{{ entry.front_cents | money }}</td>
                    <td class="col-acct" style="color:var(--rolled)">{{ entry.rollover_in_cents | money }}</td>
                    <td class="col-acct">
                        {% if entry.player_owes_gross_cents > 0 %}—{% else %}{{ entry.gross_payout_cents | money }}{% endif %}
                    </td>
                    <td class="col-acct" style="color:var(--rolled)">{{ entry.rollover_out_cents | money }}</td>
                    <td class="col-acct" style="text-align:left;font-family:var(--font-ui);">
                        {% if entry.notes %}
                            <ul class="note-list">{% for n in entry.notes %}<li>{{ n }}</li>{% endfor %}</ul>
                        {% else %}
                            <span style="color:var(--faintest-2)">—</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Bottom row: net bars + snapshot + audit feed -->
<div class="split" style="align-items:stretch;">
    <div class="panel col-main">
        <div class="panel__head">
            <span class="kicker" style="margin:0;">Breakdown</span>
            <h2 class="panel__title">Net by player</h2>
        </div>
        <div class="chart-wrap">
            <div class="session-net-bars" id="sessionBreakdownChart" aria-label="Net by player"></div>
            </div>
    </div>

    <div class="panel col-side" style="display:flex;flex-direction:column;">
        <div class="panel__head">
            <span class="kicker" style="margin:0;">Quick read</span>
            <h2 class="panel__title">Session snapshot</h2>
        </div>
        {% set winners = session.entries | selectattr('net_cents', 'gt', 0) | list %}
        {% set losers  = session.entries | selectattr('net_cents', 'lt', 0) | list %}
        <div class="snapshot-grid" style="flex:1;">
            <div class="snapshot-cell">
                <span class="kicker" style="font-size:10px;">Biggest winner</span>
                <div class="snapshot-val" style="color:var(--pos)">
                    {% if winners %}{{ (winners | sort(attribute='net_cents', reverse=True) | first).net_cents | money }}{% else %}—{% endif %}
                </div>
                {% if winners %}<div style="font-size:12px;color:var(--muted);margin-top:4px;">{{ winners | sort(attribute='net_cents', reverse=True) | first | attr('player_name') }}</div>{% endif %}
            </div>
            <div class="snapshot-cell">
                <span class="kicker" style="font-size:10px;">Biggest loser</span>
                <div class="snapshot-val" style="color:var(--neg)">
                    {% if losers %}{{ (losers | sort(attribute='net_cents') | first).net_cents | money }}{% else %}—{% endif %}
                </div>
                {% if losers %}<div style="font-size:12px;color:var(--muted);margin-top:4px;">{{ losers | sort(attribute='net_cents') | first | attr('player_name') }}</div>{% endif %}
            </div>
            <div class="snapshot-cell">
                <span class="kicker" style="font-size:10px;">Total cash-out</span>
                <div class="snapshot-val">{{ session.total_cash_out_cents | money }}</div>
            </div>
            <div class="snapshot-cell">
                <span class="kicker" style="font-size:10px;">Open items</span>
                <div class="snapshot-val {{ 'recon-val--neg' if (session.total_current_due_to_player_cents + session.total_current_due_to_house_cents) > 0 else '' }}">
                    {{ (session.total_current_due_to_player_cents + session.total_current_due_to_house_cents) | money }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Audit feed -->
<div class="panel" style="margin-top:20px;">
    <div class="panel__head">
        <div>
            <span class="kicker" style="margin:0;">Audit trail</span>
            <h2 class="panel__title">Raw ledger events</h2>
        </div>
        <span class="badge badge--closed" style="font-size:9.5px;letter-spacing:.08em;">append-only</span>
    </div>
    <div class="event-feed feed feed--inline" style="max-height:none;">
        {% for event in raw_events | reverse %}
        <div class="event-card event-card--inline">
            <div class="event-card-top">
                <strong>{{ event.player_name or "Session" }}</strong>
                <span class="pill pill-{{ event.event_type }}">{{ event.event_type | replace('_', ' ') }}</span>
                {% if event.note %}<span class="event-note">{{ event.note }}</span>{% endif %}
            </div>
            <p class="event-amount">{{ event.amount_cents | money }}</p>
            <p class="tiny-text" style="white-space:nowrap;">{{ event.created_at }}</p>
        </div>
        {% else %}
        <p class="muted-text" style="padding:20px;">No events recorded.</p>
        {% endfor %}
    </div>
</div>

<script>
const sessionChartData = {{ chart_data | tojson }};

const breakdownCtx = document.getElementById('sessionBreakdownChart');
if (breakdownCtx) {
    const values = sessionChartData.net_values || [];
    const labels = sessionChartData.labels || [];
    const colors = sessionChartData.net_colors || [];
    const maxAbs = Math.max(...values.map(value => Math.abs(value)), 1);
    const moneyFormatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
    });
    const escapeHtml = value => String(value).replace(/[&<>"']/g, char => ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;',
    }[char]));

    breakdownCtx.innerHTML = labels.map((label, index) => {
        const value = Number(values[index] || 0);
        const width = Math.min(Math.abs(value) / maxAbs * 50, 50);
        const sideClass = value < 0 ? 'session-net-bars__bar--neg' : 'session-net-bars__bar--pos';
        const amount = `${value > 0 ? '+' : ''}${moneyFormatter.format(value)}`;
        const color = colors[index] || (value < 0 ? '#e0758a' : value > 0 ? '#6fc093' : '#84828e');

        return `
            <div class="session-net-bars__row">
                <div class="session-net-bars__name">${escapeHtml(label)}</div>
                <div class="session-net-bars__track">
                    <span class="session-net-bars__bar ${sideClass}" style="width:${width}%;background:${color};"></span>
                </div>
                <div class="session-net-bars__amount">${amount}</div>
            </div>
        `;
    }).join('');
}

// Compact / Full toggle
const sessionTable = document.getElementById('sessionTable');
document.querySelectorAll('#viewToggle .seg').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('#viewToggle .seg').forEach(b => b.classList.remove('is-on'));
        btn.classList.add('is-on');
        if (btn.dataset.view === 'full') {
            sessionTable.classList.add('is-full');
        } else {
            sessionTable.classList.remove('is-full');
        }
    });
});
</script>
{% endblock %}