{% extends "base.html" %}
{% block title %}Line Items{% endblock %}

{% block content %}
<div class="page-header">
                <h1 class="page-title">Line Items</h1>
                <p class="page-subtitle">Analyze extracted purchase lines, prices, and ratings</p>
            </div>

        <div class="card">
            <div class="right-pane-tabs">
                <button class="tab-button{% if active_tab == 'summary' %} active{% endif %}" type="button" data-tab="summary">Summary</button>
                <button class="tab-button{% if active_tab == 'advanced-search' %} active{% endif %}" type="button" data-tab="advanced-search">Advanced Search</button>
                <button class="tab-button{% if active_tab == 'queue' %} active{% endif %}" type="button" data-tab="queue">Queue</button>
            </div>

            <div class="tab-panel{% if active_tab == 'summary' %} active{% endif %}" data-panel="summary">
                <h2 class="card-title">Line Item Summary</h2>

                <form method="get" action="/line-items/">
                    <input type="hidden" name="tab" value="summary">
                    <div class="form-grid">
                        <div class="form-field">
                            <label for="summary_q">Item contains</label>
                            <input id="summary_q" type="text" name="q" value="{{ q }}" placeholder="margarita">
                        </div>
                    </div>

                    <div class="button-row" style="margin-top: 1rem;">
                        <button class="primary" type="submit">Search</button>
                        <a class="button-link" href="/line-items/?tab=summary">Clear</a>
                        <a class="button-link" href="/line-items/?tab=advanced-search&q={{ q }}">Detailed view</a>
                    </div>
                </form>

                <div style="margin-top: 1.25rem;">
                    <h2 class="card-title">Summary Results</h2>

                    {% if summary_rows %}
                        <div class="table-wrap">
                            <table>
                                <thead>
                                    <tr>
                                        <th>Item</th>
                                        <th>Count</th>
                                        <th>Avg Price</th>
                                        <th>Min Price</th>
                                        <th>Max Price</th>
                                        <th>Rated Count</th>
                                        <th>Avg Rating</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for row in summary_rows %}
                                    <tr>
                                        <td>{{ row.item }}</td>
                                        <td>{{ row.count }}</td>
                                        <td>{{ row.avg_price }}</td>
                                        <td>{{ row.min_price }}</td>
                                        <td>{{ row.max_price }}</td>
                                        <td>{{ row.rated_count }}</td>
                                        <td>{{ row.avg_rating }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="empty-state">No summary rows found for the current search.</p>
                    {% endif %}
                </div>
            </div>

            <div class="tab-panel{% if active_tab == 'advanced-search' %} active{% endif %}" data-panel="advanced-search">
                <h2 class="card-title">Advanced Search</h2>

                <form method="get" action="/line-items/">
                    <input type="hidden" name="tab" value="advanced-search">
                    <div class="form-grid">
                        <div class="form-field">
                            <label for="q">Item contains</label>
                            <input id="q" type="text" name="q" value="{{ q }}" placeholder="margarita">
                        </div>
                        <div class="form-field">
                            <label for="merchant">Merchant contains</label>
                            <input id="merchant" type="text" name="merchant" value="{{ merchant }}" placeholder="El Canelo">
                        </div>
                        <div class="form-field">
                            <label for="category">Category</label>
                            <input id="category" type="text" name="category" value="{{ category }}" placeholder="cocktail">
                        </div>
                        <div class="form-field">
                            <label for="date_from">Date from</label>
                            <input id="date_from" type="date" name="date_from" value="{{ date_from }}">
                        </div>
                        <div class="form-field">
                            <label for="date_to">Date to</label>
                            <input id="date_to" type="date" name="date_to" value="{{ date_to }}">
                        </div>
                        <div class="form-field">
                            <label for="rating_min">Min rating</label>
                            <input id="rating_min" type="text" name="rating_min" value="{{ rating_min }}" placeholder="7">
                        </div>
                        <div class="form-field">
                            <label for="rating_max">Max rating</label>
                            <input id="rating_max" type="text" name="rating_max" value="{{ rating_max }}" placeholder="10">
                        </div>
                    </div>

                    <div class="button-row" style="margin-top: 1rem;">
                        <button class="primary" type="submit">Search</button>
                        <a class="button-link" href="/line-items/?tab=advanced-search">Clear</a>
                    </div>
                </form>

                <div style="margin-top: 1.25rem;">
                    <h2 class="card-title">Results</h2>

                    {% if not has_advanced_query %}
                        <p class="empty-state">Enter one or more filters and run a search to view detailed line-item results.</p>
                    {% elif rows %}
                        {% for row in rows %}
                        <div class="card" style="margin-bottom: 1rem;">
                            <div class="topbar" style="margin-bottom: 0.75rem;">
                                <div>
                                    <div class="page-subtitle">{{ row.transaction_date }} · {{ row.merchant }}</div>
                                    <h3 class="card-title" style="margin: 0.2rem 0 0 0;">{{ row.description }}</h3>
                                    <div class="page-subtitle">{{ row.raw_description }}</div>
                                </div>
                                <div class="badges">
                                    {% if row.category %}
                                        <span class="badge">{{ row.category }}</span>
                                    {% endif %}
                                    {% if row.quantity %}
                                        <span class="badge">Qty {{ row.quantity }}</span>
                                    {% endif %}
                                    {% if row.line_total %}
                                        <span class="badge">${{ row.line_total }}</span>
                                    {% endif %}
                                    {% if row.confidence %}
                                        <span class="badge">Conf {{ row.confidence }}</span>
                                    {% endif %}
                                    {% if row.quality_rating %}
                                        <span class="badge reviewed">Rating {{ row.quality_rating }}</span>
                                    {% endif %}
                                    {% if row.is_reviewed %}
                                        <span class="badge">Reviewed</span>
                                    {% endif %}
                                    {% if row.is_approved %}
                                        <span class="badge reviewed">Approved</span>
                                    {% endif %}
                                    {% if row.is_excluded %}
                                        <span class="badge">Excluded</span>
                                    {% endif %}
                                    {% if row.is_na %}
                                        <span class="badge">N/A</span>
                                    {% endif %}
                                </div>
                            </div>

                            <form method="post" action="/line-items/{{ row.line_item_id }}/review">
                                <input type="hidden" name="q" value="{{ q }}">
                                <input type="hidden" name="merchant" value="{{ merchant }}">
                                <input type="hidden" name="category" value="{{ category }}">
                                <input type="hidden" name="date_from" value="{{ date_from }}">
                                <input type="hidden" name="date_to" value="{{ date_to }}">
                                <input type="hidden" name="rating_min" value="{{ rating_min }}">
                                <input type="hidden" name="rating_max" value="{{ rating_max }}">
                                <input type="hidden" name="return_to" value="list">

                                <div class="form-grid">
                                                                    <div class="form-field">
                                    <label for="quality_rating_{{ row.line_item_id }}">Quality rating</label>
                                    <input id="quality_rating_{{ row.line_item_id }}" type="text" name="quality_rating" value="{{ row.quality_rating }}" placeholder="e.g. 8.5 or 4/5">
                                </div>
                                <div class="form-field">
                                    <label>Review flags</label>
                                    <div style="display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:0.35rem;">
                                        <label><input type="checkbox" name="is_approved" value="1" {% if row.is_approved %}checked{% endif %}> Approved</label>
                                        <label><input type="checkbox" name="is_excluded" value="1" {% if row.is_excluded %}checked{% endif %}> Excluded</label>
                                        <label><input type="checkbox" name="is_na" value="1" {% if row.is_na %}checked{% endif %} onchange="toggleReviewNA(this)"> N/A</label>
                                    </div>
                                </div>
                                <div class="form-field full">

                                        <label for="quality_note_{{ row.line_item_id }}">Quality note</label>
                                        <textarea id="quality_note_{{ row.line_item_id }}" name="quality_note" rows="3" placeholder="Taste, portion, texture, service notes...">{{ row.quality_note }}</textarea>
                                    </div>
                                </div>

                                <div class="button-row" style="margin-top: 1rem;">
                                    <button class="primary" type="submit">Save rating/note</button>
                                    <a class="button-link" href="/documents/{{ row.document_id }}?tab=extracted-fields">Open document</a>
                                </div>
                            </form>
                        </div>
                        {% endfor %}
                    {% else %}
                        <p class="empty-state">No line items found for the current filters.</p>
                    {% endif %}
                </div>
            </div>

            <div class="tab-panel{% if active_tab == 'queue' %} active{% endif %}" data-panel="queue">
                <h2 class="card-title">Quality Review Queue</h2>

                {% if queue_rows %}
                    {% for row in queue_rows %}
                    <div class="card" style="margin-bottom: 1rem;">
                        <div class="topbar" style="margin-bottom: 0.75rem;">
                            <div>
                                <div class="page-subtitle">{{ row.transaction_date }} · {{ row.merchant }}</div>
                                <h3 class="card-title" style="margin: 0.2rem 0 0 0;">{{ row.description }}</h3>
                                <div class="page-subtitle">{{ row.raw_description }}</div>
                            </div>
                            <div class="badges">
                                {% if row.category %}
                                    <span class="badge">{{ row.category }}</span>
                                {% endif %}
                                {% if row.quantity %}
                                    <span class="badge">Qty {{ row.quantity }}</span>
                                {% endif %}
                                {% if row.line_total %}
                                    <span class="badge">${{ row.line_total }}</span>
                                {% endif %}
                                {% if row.confidence %}
                                    <span class="badge">Conf {{ row.confidence }}</span>
                                {% endif %}
                                {% if row.quality_rating %}
                                    <span class="badge reviewed">Rating {{ row.quality_rating }}</span>
                                {% endif %}
                            </div>
                        </div>

                        <form method="post" action="/line-items/{{ row.line_item_id }}/review">
                            <input type="hidden" name="q" value="">
                            <input type="hidden" name="merchant" value="">
                            <input type="hidden" name="category" value="">
                            <input type="hidden" name="date_from" value="">
                            <input type="hidden" name="date_to" value="">
                            <input type="hidden" name="rating_min" value="">
                            <input type="hidden" name="rating_max" value="">
                            <input type="hidden" name="return_to" value="queue">

                            <div class="form-grid">
                                                                <div class="form-field">
                                    <label for="queue_quality_rating_{{ row.line_item_id }}">Quality rating</label>
                                    <input id="queue_quality_rating_{{ row.line_item_id }}" type="text" name="quality_rating" value="{{ row.quality_rating }}" placeholder="e.g. 8.5 or 4/5">
                                </div>
                                <div class="form-field">
                                    <label>Review flags</label>
                                    <div style="display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:0.35rem;">
                                        <label><input type="checkbox" name="is_approved" value="1" {% if row.is_approved %}checked{% endif %}> Approved</label>
                                        <label><input type="checkbox" name="is_excluded" value="1" {% if row.is_excluded %}checked{% endif %}> Excluded</label>
                                        <label><input type="checkbox" name="is_na" value="1" {% if row.is_na %}checked{% endif %} onchange="toggleReviewNA(this)"> N/A</label>
                                    </div>
                                </div>
                                <div class="form-field full">

                                    <label for="queue_quality_note_{{ row.line_item_id }}">Quality note</label>
                                    <textarea id="queue_quality_note_{{ row.line_item_id }}" name="quality_note" rows="3" placeholder="Taste, portion, texture, service notes...">{{ row.quality_note }}</textarea>
                                </div>
                            </div>

                            <div class="button-row" style="margin-top: 1rem;">
                                <button class="primary" type="submit">Save rating/note</button>
                                <a class="button-link" href="/documents/{{ row.document_id }}?tab=line-items">Open document</a>
                            </div>
                        </form>
                    </div>
                    {% endfor %}
                {% else %}
                    <p class="empty-state">No line items are waiting for quality review.</p>
                {% endif %}
            </div>
        </div>

{% endblock %}