{% extends 'base/layout.html' %}

{% block content %}
<div class="card-grid" style="grid-template-columns: 1fr 3fr; gap: 2rem; align-items: start;">
    
    {% if not seller.tax_id or not seller.payout_details %}
    <div style="grid-column: 1 / -1; background-color: #fee2e2; border: 1px solid #ef4444; color: #b91c1c; padding: 1rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: space-between;">
        <div style="display: flex; align-items: center; gap: 0.75rem;">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="8" x2="12" y2="12"></line>
                <line x1="12" y1="16" x2="12.01" y2="16"></line>
            </svg>
            <span><strong>Profile Not Complete:</strong> You must provide your Tax ID and Payout Details to start selling.</span>
        </div>
        <a href="{% url 'store:edit_seller_profile' %}" class="btn" style="background-color: #ef4444; color: white; border: none; padding: 0.5rem 1rem;">Complete Profile</a>
    </div>
    {% endif %}
    <!-- Sidebar: Store Info -->
    <div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color); position: sticky; top: calc(var(--nav-height) + 2rem);">
        <h2 style="margin-top: 0;">{{ seller.store_name }}</h2>
        <p style="color: #94a3b8; font-size: 0.875rem;">Seller Dashboard</p>
        
        <div style="margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem;">
             <a href="{% url 'store:seller_profile' seller.slug %}" class="btn" style="text-align: center;">View Storefront</a>
             <a href="{% url 'store:edit_seller_profile' %}" class="btn-outline" style="text-align: center; padding: 0.5rem 1rem; border-radius: 0.375rem; text-decoration: none; font-weight: 600;">Edit Profile</a>
             <a href="{% url 'store:manage_listings' %}" class="btn-outline" style="text-align: center; padding: 0.5rem 1rem; border-radius: 0.375rem; text-decoration: none; font-weight: 600;">Manage Inventory</a>
             <a href="{% url 'store:bounty_list' %}" class="btn-outline" style="text-align: center; padding: 0.5rem 1rem; border-radius: 0.375rem; text-decoration: none; font-weight: 600;">Bounty Board</a>
             <hr style="border: 0; border-top: 1px solid var(--border-color); width: 100%;">
             <div style="font-size: 0.875rem;">
                 <p style="margin: 0.5rem 0;"><strong>Active Listings:</strong> {{ active_listings_count }}</p>
                 <p style="margin: 0.5rem 0;"><strong>Items Sold:</strong> {{ items_sold }}</p>
                 <p style="margin: 0.5rem 0;"><strong>Revenue:</strong> ${{ total_revenue|floatformat:2 }}</p>
                 {% if avg_rating %}
                 <p style="margin: 0.5rem 0; display: flex; align-items: center; gap: 0.5rem;">
                     <strong>Avg Rating:</strong>
                     <span style="display: flex; align-items: center; gap: 0.25rem;">
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#fbbf24" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                             <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                         </svg>
                         {{ avg_rating }}/5
                     </span>
                 </p>
                 {% endif %}
             </div>
             
             <hr style="border: 0; border-top: 1px solid var(--border-color); width: 100%;">
             
             <!-- Theme Selection -->
             <div>
                <h3 style="margin: 0 0 0.5rem; font-size: 0.875rem; color: #94a3b8; text-transform: uppercase;">Theme</h3>
                <form method="post" style="display: flex; gap: 0.5rem; flex-direction: column;">
                    {% csrf_token %}
                    {{ theme_form.theme_preference }}
                    <button type="submit" class="btn-outline" style="width: 100%; text-align: center; padding: 0.25rem; font-size: 0.875rem;">Apply Theme</button>
                </form>
             </div>
        </div>
    </div>

    <!-- Main Content -->
    <div style="display: flex; flex-direction: column; gap: 2rem;">
        
        <!-- Analytics Row -->
        <div class="card-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
             <div style="background: var(--card-bg); padding: 1.5rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
                <h3 style="margin: 0 0 0.5rem; font-size: 0.875rem; color: #94a3b8; text-transform: uppercase;">Store Views</h3>
                <p style="font-size: 1.5rem; font-weight: 700; color: #a78bfa; margin: 0;">{{ store_views }}</p>
            </div>
            <div style="background: var(--card-bg); padding: 1.5rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
                <h3 style="margin: 0 0 0.5rem; font-size: 0.875rem; color: #94a3b8; text-transform: uppercase;">Listing Clicks</h3>
                <p style="font-size: 1.5rem; font-weight: 700; color: #f472b6; margin: 0;">{{ listing_clicks }}</p>
            </div>
            <div style="background: var(--card-bg); padding: 1.5rem; border-radius: 0.5rem; border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 0.5rem;">
                 <h3 style="margin: 0; font-size: 0.875rem; color: #94a3b8; text-transform: uppercase;">Store Link</h3>
                 <div style="display: flex; gap: 1rem; align-items: center;">
                     <img src="{{ qr_code_url }}" alt="Store QR Code" style="width: 60px; height: 60px; border-radius: 0.25rem;">
                     <div style="overflow: hidden;">
                         <a href="{{ store_full_url }}" target="_blank" style="color: var(--primary-color); text-decoration: none; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;">/store/{{ seller.slug }}</a>
                         <p style="margin: 0; font-size: 0.75rem; color: #94a3b8;">Share this QR code</p>
                     </div>
                 </div>
            </div>
        </div>

        <!-- Stats Row -->
        <div class="card-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
             <div style="background: var(--card-bg); padding: 1.5rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
                <h3 style="margin: 0 0 0.5rem; font-size: 0.875rem; color: #94a3b8; text-transform: uppercase;">Revenue (All Time)</h3>
                <p style="font-size: 1.5rem; font-weight: 700; color: #34d399; margin: 0;">${{ total_revenue|floatformat:2 }}</p>
            </div>
            <div style="background: var(--card-bg); padding: 1.5rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
                <h3 style="margin: 0 0 0.5rem; font-size: 0.875rem; color: #94a3b8; text-transform: uppercase;">Units Sold</h3>
                <p style="font-size: 1.5rem; font-weight: 700; color: #60a5fa; margin: 0;">{{ items_sold }}</p>
            </div>
            <div style="background: var(--card-bg); padding: 1.5rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
                 <h3 style="margin: 0 0 0.5rem; font-size: 0.875rem; color: #94a3b8; text-transform: uppercase;">Avg. Order Value</h3>
                 <!-- Simple calc if items sold > 0 -->
                 <p style="font-size: 1.5rem; font-weight: 700; color: #f59e0b; margin: 0;">
                    {% if items_sold > 0 %}
                        ${{ total_revenue|divisibleby:items_sold|default:"0.00" }} 
                        {# Django template math is limited, leaving simpler for now or use filters if available #}
                        {# Just leaving placeholder logic or better computed in view #}
                        --
                    {% else %}
                        $0.00
                    {% endif %}
                 </p>
            </div>
        </div>

        <!-- Charts Section -->
        <div style="display: grid; grid-template-columns: 1fr; gap: 2rem;">
            
            <!-- Global Filter -->
            <div style="background: var(--card-bg); padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between;">
                <h3 style="margin: 0; font-size: 1rem;">Analytics</h3>
                <form method="get" style="display: flex; gap: 0.5rem; align-items: center;">
                    <select name="game" class="form-control" style="padding: 0.25rem 0.5rem; border-radius: 0.25rem; background: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color);">
                        <option value="">All Games</option>
                        {% for game in all_games %}
                        <option value="{{ game.name }}" {% if selected_game == game.name %}selected{% endif %}>{{ game.name }}</option>
                        {% endfor %}
                    </select>
                    <button type="submit" class="btn" style="padding: 0.25rem 0.75rem;">Filter</button>
                    {% if selected_game %}<a href="{% url 'store:seller_dashboard' %}" style="font-size: 0.875rem; color: #ef4444; margin-left: 0.5rem;">Clear</a>{% endif %}
                </form>
            </div>

            <!-- Sales & Revenue Chart -->
            <div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
                    <h3 style="margin: 0;">Sales & Revenue</h3>
                    <div class="inline-flex rounded-md shadow-sm" role="group">
                        <button type="button" onclick="updateChart('day')" id="btn-day" class="btn active" style="padding: 0.25rem 0.75rem; border-radius: 0.25rem 0 0 0.25rem;">Day</button>
                        <button type="button" onclick="updateChart('week')" id="btn-week" class="btn-outline" style="padding: 0.25rem 0.75rem; border-radius: 0;">Week</button>
                        <button type="button" onclick="updateChart('month')" id="btn-month" class="btn-outline" style="padding: 0.25rem 0.75rem; border-radius: 0 0.25rem 0.25rem 0;">Month</button>
                    </div>
                </div>
                <canvas id="salesChart" height="250"></canvas>
            </div>

            <!-- Breakdown Charts (Tabs) -->
            <div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
                <div style="border-bottom: 1px solid var(--border-color); margin-bottom: 1.5rem;">
                    <div style="display: flex; gap: 1rem;">
                        <button onclick="openTab('game')" id="tab-game" class="tab-btn active" style="background: none; border: none; padding: 0.5rem 1rem; color: var(--primary-color); border-bottom: 2px solid var(--primary-color); font-weight: 600; cursor: pointer;">By Game</button>
                        <button onclick="openTab('condition')" id="tab-condition" class="tab-btn" style="background: none; border: none; padding: 0.5rem 1rem; color: #94a3b8; border-bottom: 2px solid transparent; font-weight: 600; cursor: pointer;">By Condition</button>
                        <button onclick="openTab('set')" id="tab-set" class="tab-btn" style="background: none; border: none; padding: 0.5rem 1rem; color: #94a3b8; border-bottom: 2px solid transparent; font-weight: 600; cursor: pointer;">By Set</button>
                    </div>
                </div>

                <div id="content-game" class="tab-content" style="height: 300px; display: flex; justify-content: center;">
                    <canvas id="gameChart"></canvas>
                </div>
                <div id="content-condition" class="tab-content" style="height: 300px; display: none; justify-content: center;">
                    <canvas id="conditionChart"></canvas>
                </div>
                <div id="content-set" class="tab-content" style="height: 300px; display: none; justify-content: center;">
                    <canvas id="setChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Chart.js Integration -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Global variables to hold data
        let chartData = {};
        let salesChart = null;

        document.addEventListener('DOMContentLoaded', function() {
            // Data from Django
            chartData = {
                day: JSON.parse('{{ chart_data_day|safe }}'),
                week: JSON.parse('{{ chart_data_week|safe }}'),
                month: JSON.parse('{{ chart_data_month|safe }}')
            };

            const gameLabels = JSON.parse('{{ game_labels|safe }}');
            const gameData = JSON.parse('{{ game_data|safe }}');
            const conditionLabels = JSON.parse('{{ condition_labels|safe }}');
            const conditionData = JSON.parse('{{ condition_data|safe }}');
            const setLabels = JSON.parse('{{ set_labels|safe }}');
            const setData = JSON.parse('{{ set_data|safe }}');

            // 1. Sales/Revenue Chart (Mixed Line/Bar)
            const ctxSales = document.getElementById('salesChart').getContext('2d');
            
            salesChart = new Chart(ctxSales, {
                type: 'bar',
                data: {
                    labels: chartData.day.labels,
                    datasets: [
                        {
                            label: 'Revenue ($)',
                            data: chartData.day.revenue,
                            borderColor: '#34d399', 
                            backgroundColor: 'rgba(52, 211, 153, 0.2)',
                            type: 'line',
                            yAxisID: 'y',
                            tension: 0.4
                        },
                        {
                            label: 'Items Sold',
                            data: chartData.day.sales,
                            backgroundColor: '#60a5fa',
                            yAxisID: 'y1'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    scales: {
                        x: {
                            grid: { color: 'rgba(75, 85, 99, 0.4)' },
                            ticks: { color: '#9ca3af' }
                        },
                        y: {
                            type: 'linear',
                            display: true,
                            position: 'left',
                            grid: { color: 'rgba(75, 85, 99, 0.4)' },
                            ticks: { color: '#9ca3af' },
                            title: { display: true, text: 'Revenue ($)', color: '#34d399' }
                        },
                        y1: {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            grid: { drawOnChartArea: false },
                            ticks: { color: '#60a5fa' },
                            title: { display: true, text: 'Units', color: '#60a5fa' }
                        }
                    },
                    plugins: {
                        legend: { labels: { color: '#e5e7eb' } }
                    }
                }
            });

            // 2. Sales by Game (Pie)
            initPieChart('gameChart', gameLabels, gameData, 'No sales data by game yet.');
            
            // 3. Sales by Condition (Pie/Doughnut)
            initPieChart('conditionChart', conditionLabels, conditionData, 'No sales data by condition yet.');
            
            // 4. Sales by Set (Pie/Doughnut)
            initPieChart('setChart', setLabels, setData, 'No sales data by set yet.');
            
            function initPieChart(canvasId, labels, dataPoints, emptyMsg) {
                const canvas = document.getElementById(canvasId);
                if (!canvas) return;
                
                if (labels.length > 0) {
                     new Chart(canvas.getContext('2d'), {
                        type: 'doughnut',
                        data: {
                            labels: labels,
                            datasets: [{
                                data: dataPoints,
                                backgroundColor: [
                                    '#f87171', '#fbbf24', '#34d399', '#60a5fa', '#a78bfa', '#f472b6',
                                    '#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ec4899'
                                ],
                                borderWidth: 0
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: { position: 'right', labels: { color: '#e5e7eb', padding: 20 } }
                            }
                        }
                    });
                } else {
                    canvas.parentElement.innerHTML = `<p style="color: #94a3b8; align-self: center;">${emptyMsg}</p>`;
                }
            }
        });

        // Tab Switching
        function openTab(tabName) {
            // Hide all contents
            document.querySelectorAll('.tab-content').forEach(el => {
                el.style.display = 'none';
                el.classList.remove('active');
            });
            // Remove active class from buttons
            document.querySelectorAll('.tab-btn').forEach(el => {
                el.style.borderBottomColor = 'transparent';
                el.style.color = '#94a3b8';
            });
            
            // Show selected
            const content = document.getElementById('content-' + tabName);
            if(content) {
                content.style.display = 'flex';
            }
            // Update button style
            const btn = document.getElementById('tab-' + tabName);
            if(btn) {
                btn.style.borderBottomColor = 'var(--primary-color)';
                btn.style.color = 'var(--primary-color)';
            }
        }


        // Function to update chart period
        function updateChart(period) {
            if (!salesChart) return;
            
            const data = chartData[period];
            salesChart.data.labels = data.labels;
            salesChart.data.datasets[0].data = data.revenue;
            salesChart.data.datasets[1].data = data.sales;
            salesChart.update();
            
            // Update Buttons
            document.querySelectorAll('#btn-day, #btn-week, #btn-month').forEach(btn => {
                btn.classList.remove('active', 'btn');
                btn.classList.add('btn-outline');
                // Reset styling hack (since we mix inline styles and classes, handling active state efficiently)
                btn.style.backgroundColor = 'transparent';
                btn.style.color = 'var(--primary-color)';
            });
            
            const activeBtn = document.getElementById('btn-' + period);
            activeBtn.classList.remove('btn-outline');
            activeBtn.classList.add('btn', 'active');
            activeBtn.style.backgroundColor = 'var(--primary-color)';
            activeBtn.style.color = 'white';
        }
    </script>


</div>
{% endblock %}