<div class="page-header responsive-header">
    <div>
        <a href="<?= APP_URL ?>/reports" class="btn btn-ghost btn-sm mb-3" style="padding-left:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Reports
        </a>
        <h1><?= $data['title'] ?></h1>
        <div class="page-subtitle">Advanced AI-powered business insights and recommendations</div>
    </div>
    <div class="flex gap-2 flex-wrap">
        <a href="<?= APP_URL ?>/reports?report=ai-analytics&format=csv<?= ($qs = http_build_query($data['filters'])) ? '&' . $qs : '' ?>" class="btn btn-outline btn-sm">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="7 10 12 15 17 10"></polyline>
                <line x1="12" y1="15" x2="12" y2="3"></line>
            </svg>
            Export CSV
        </a>
        <a href="<?= APP_URL ?>/reports?report=ai-analytics&format=print<?= ($qs = http_build_query($data['filters'])) ? '&' . $qs : '' ?>" class="btn btn-secondary btn-sm">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="6 9 6 15 18 15"></polyline>
                <path d="M6 4h12v16H6z"></path>
            </svg>
            Print
        </a>
    </div>
</div>

<!-- Analysis Period -->
<div class="card mb-4">
    <div class="card-header">
        <h3 class="card-title">Analysis Overview</h3>
    </div>
    <div class="p-3">
        <div class="responsive-grid gap-3">
            <div class="text-center">
                <div class="text-xs text-muted">Analysis Period</div>
                <div class="text-base font-bold"><?= $data['summary']['analysis_period'] ?></div>
            </div>
            <div class="text-center">
                <div class="text-xs text-muted">Top Category</div>
                <div class="text-base font-bold"><?= e($data['summary']['top_performing_category']) ?></div>
            </div>
            <div class="text-center">
                <div class="text-xs text-muted">Customers Analyzed</div>
                <div class="text-base font-bold"><?= $data['summary']['total_customers_analyzed'] ?></div>
            </div>
            <div class="text-center">
                <div class="text-xs text-muted">Slow Moving Items</div>
                <div class="text-base font-bold text-orange-600"><?= $data['summary']['slow_moving_items'] ?></div>
            </div>
        </div>
    </div>
</div>

<style>
/* Responsive Grid Layout */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* Compact Card */
.compact-card {
    padding: 0.75rem;
}

/* Compact Table */
.ai-table thead th {
    padding: 0.4rem 0.5rem;
    font-size: 0.65rem;
    line-height: 1.1;
    white-space: nowrap;
}

.ai-table tbody td {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
}

/* Responsive Header */
.responsive-header {
    flex-direction: column;
    align-items: flex-start;
}
@media (min-width: 768px) {
    .responsive-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .responsive-grid {
        grid-template-columns: 1fr;
    }
    
    .page-header h1 {
        font-size: 1.1rem;
    }
    
    .page-subtitle {
        font-size: 0.75rem;
    }
    
    .card {
        padding: 1rem;
    }
    
    .compact-card {
        padding: 0.6rem;
    }
    
    .ai-table thead th {
        padding: 0.35rem 0.4rem;
        font-size: 0.6rem;
    }
    
    .ai-table tbody td {
        padding: 0.35rem 0.4rem;
        font-size: 0.7rem;
    }
    
    .btn-sm {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }
}
</style>

<!-- Top Performing Products -->
<div class="card mb-4">
    <div class="card-header">
        <h3 class="card-title">🏆 Top Performing Products</h3>
        <div class="text-sm text-muted">Products generating the most revenue</div>
    </div>
    <div class="overflow-x-auto">
        <table class="data-table ai-table">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>SKU</th>
                    <th>Units Sold</th>
                    <th>Total Revenue</th>
                    <th>Avg Price</th>
                    <th>Performance</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($data['top_products'] as $index => $product): ?>
                <tr>
                    <td><?= e($product['name']) ?></td>
                    <td><?= e($product['sku']) ?></td>
                    <td><?= number_format($product['total_sold']) ?></td>
                    <td class="font-bold text-green-600"><?= number_format($product['total_revenue'], 2) ?></td>
                    <td><?= number_format($product['avg_price'], 2) ?></td>
                    <td>
                        <?php if ($index == 0): ?>
                            <span class="badge bg-yellow-100 text-yellow-800">🥇 Best Seller</span>
                        <?php elseif ($index == 1): ?>
                            <span class="badge bg-gray-100 text-gray-800">🥈 2nd Place</span>
                        <?php elseif ($index == 2): ?>
                            <span class="badge bg-orange-100 text-orange-800">🥉 3rd Place</span>
                        <?php else: ?>
                            <span class="badge bg-blue-100 text-blue-800">Top <?= $index + 1 ?></span>
                        <?php endif; ?>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<div class="responsive-grid gap-3 mb-4" style="grid-template-columns: repeat(2, 1fr);">
    <!-- Slow Moving Products -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">⚠️ Slow Moving Products</h3>
            <div class="text-sm text-muted">Products with stock but no sales</div>
        </div>
        <div class="overflow-x-auto">
            <table class="data-table ai-table">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>SKU</th>
                        <th>Stock</th>
                        <th>Cost</th>
                        <th>Value</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($data['slow_moving'] as $product): ?>
                    <tr class="text-orange-600">
                        <td><?= e($product['name']) ?></td>
                        <td><?= e($product['sku']) ?></td>
                        <td><?= number_format($product['stock_quantity']) ?></td>
                        <td><?= number_format($product['cost_price'], 2) ?></td>
                        <td><?= number_format($product['stock_quantity'] * $product['cost_price'], 2) ?></td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Sales by Category -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">📊 Sales by Category</h3>
            <div class="text-sm text-muted">Revenue distribution across categories</div>
        </div>
        <div class="overflow-x-auto">
            <table class="data-table ai-table">
                <thead>
                    <tr>
                        <th>Category</th>
                        <th>Revenue</th>
                        <th>Transactions</th>
                        <th>Avg Sale</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($data['category_sales'] as $category): ?>
                    <tr>
                        <td><?= e($category['name']) ?></td>
                        <td class="font-bold text-green-600"><?= number_format($category['revenue'], 2) ?></td>
                        <td><?= number_format($category['transaction_count']) ?></td>
                        <td><?= number_format($category['revenue'] / $category['transaction_count'], 2) ?></td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Customer Insights -->
<div class="card mb-4">
    <div class="card-header">
        <h3 class="card-title">👥 Customer Insights</h3>
        <div class="text-sm text-muted">Top customers by spending</div>
    </div>
    <div class="overflow-x-auto">
        <table class="data-table ai-table">
            <thead>
                <tr>
                    <th>Customer</th>
                    <th>Purchases</th>
                    <th>Total Spent</th>
                    <th>Average Purchase</th>
                    <th>Last Purchase</th>
                    <th>Customer Type</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($data['customer_insights'] as $index => $customer): ?>
                <tr>
                    <td><?= e($customer['name']) ?></td>
                    <td><?= number_format($customer['purchase_count']) ?></td>
                    <td class="font-bold text-green-600"><?= number_format($customer['total_spent'], 2) ?></td>
                    <td><?= number_format($customer['avg_purchase'], 2) ?></td>
                    <td><?= date('M j, Y', strtotime($customer['last_purchase'])) ?></td>
                    <td>
                        <?php if ($customer['total_spent'] > 1000): ?>
                            <span class="badge bg-purple-100 text-purple-800">VIP</span>
                        <?php elseif ($customer['purchase_count'] > 5): ?>
                            <span class="badge bg-blue-100 text-blue-800">Regular</span>
                        <?php else: ?>
                            <span class="badge bg-gray-100 text-gray-800">Occasional</span>
                        <?php endif; ?>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- AI Recommendations -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">🤖 AI Recommendations</h3>
        <div class="text-sm text-muted">Smart insights based on your data</div>
    </div>
    <div class="p-3 space-y-3">
        <div class="flex gap-3 p-2 bg-blue-50 rounded-lg">
            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-blue-600">
                    <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                </svg>
            </div>
            <div>
                <div class="font-medium text-blue-900 text-sm">Inventory Optimization</div>
                <div class="text-xs text-blue-700">
                    Consider running promotions for <?= $data['summary']['slow_moving_items'] ?> slow-moving products to improve cash flow.
                </div>
            </div>
        </div>

        <div class="flex gap-3 p-2 bg-green-50 rounded-lg">
            <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-green-600">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                </svg>
            </div>
            <div>
                <div class="font-medium text-green-900 text-sm">Focus on Top Performers</div>
                <div class="text-xs text-green-700">
                    Your top 3 products generate significant revenue. Ensure adequate stock levels and consider bundle deals.
                </div>
            </div>
        </div>

        <div class="flex gap-3 p-2 bg-purple-50 rounded-lg">
            <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-purple-600">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                    <circle cx="9" cy="7" r="4"></circle>
                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                </svg>
            </div>
            <div>
                <div class="font-medium text-purple-900 text-sm">Customer Retention</div>
                <div class="text-xs text-purple-700">
                    Implement loyalty programs for your top customers to increase repeat purchases and customer lifetime value.
                </div>
            </div>
        </div>
    </div>
</div>
