class CustomQuickStats extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .stat-card {
                    @apply bg-white rounded-lg shadow p-6;
                }
                .stat-title {
                    @apply text-sm font-medium text-gray-500 truncate;
                }
                .stat-value {
                    @apply mt-1 text-3xl font-semibold text-gray-900;
                }
                .stat-change {
                    @apply inline-flex items-baseline px-2.5 py-0.5 rounded-full text-sm font-medium;
                }
                .positive {
                    @apply bg-green-100 text-green-800;
                }
                .negative {
                    @apply bg-red-100 text-red-800;
                }
            </style>
            <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                <div class="stat-card">
                    <h3 class="stat-title">Общие затраты на закупки</h3>
                    <p class="stat-value">1 245 000 ₽</p>
                    <p class="mt-2 flex items-baseline">
                        <span class="stat-change negative">
                            <i data-feather="arrow-down" class="w-3 h-3 mr-1"></i> 5.2%
                        </span>
                        <span class="ml-2 text-sm text-gray-500">за прошлый месяц</span>
                    </p>
                </div>
                <div class="stat-card">
                    <h3 class="stat-title">Общий объем продаж</h3>
                    <p class="stat-value">1 856 000 ₽</p>
                    <p class="mt-2 flex items-baseline">
                        <span class="stat-change positive">
                            <i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> 12.8%
                        </span>
                        <span class="ml-2 text-sm text-gray-500">за прошлый месяц</span>
                    </p>
                </div>
                <div class="stat-card">
                    <h3 class="stat-title">Маржинальность</h3>
                    <p class="stat-value">32.8%</p>
                    <p class="mt-2 flex items-baseline">
                        <span class="stat-change positive">
                            <i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> 2.1%
                        </span>
                        <span class="ml-2 text-sm text-gray-500">за прошлый месяц</span>
                    </p>
                </div>
                <div class="stat-card">
                    <h3 class="stat-title">Активные сделки</h3>
                    <p class="stat-value">18</p>
                    <p class="mt-2 flex items-baseline">
                        <span class="stat-change positive">
                            <i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> 3
                        </span>
                        <span class="ml-2 text-sm text-gray-500">за прошлую неделю</span>
                    </p>
                </div>
            </div>
        `;
    }
}

customElements.define('custom-quick-stats', CustomQuickStats);