<x-filament-widgets::widget>
    <x-filament::section>
        <x-slot name="heading">{{ __('Disk Usage') }}</x-slot>
        <x-slot name="description">{{ $this->getData()['home'] }}</x-slot>

        @php
            $data = $this->getData();
            $percent = min(100, max(0, $data['percent']));
            $usedColor = match($data['color']) {
                'danger' => '#ef4444',
                'warning' => '#f59e0b',
                default => '#22c55e',
            };
        @endphp

        <style>
            .disk-bar-container {
                height: 70px;
                width: 100%;
            }
            .disk-stats-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 1rem;
                padding-top: 0.5rem;
            }
            .disk-stats-grid-2 {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
                padding-top: 0.5rem;
            }
            .disk-stat-item {
                text-align: center;
            }
            .disk-stat-value {
                font-size: 1.125rem;
                font-weight: 600;
                color: rgb(17 24 39);
            }
            .dark .disk-stat-value {
                color: white;
            }
            .disk-stat-label {
                font-size: 0.75rem;
                color: rgb(107 114 128);
            }
            .dark .disk-stat-label {
                color: rgb(156 163 175);
            }
        </style>

        @if($data['has_quota'])
            <div
                x-data="{
                    chart: null,
                    value: {{ $percent }},
                    init() {
                        this.initChart();
                    },
                    initChart() {
                        if (typeof window.echarts === 'undefined') {
                            setTimeout(() => this.initChart(), 100);
                            return;
                        }
                        const isDark = document.documentElement.classList.contains('dark');
                        this.chart = echarts.init(this.$refs.chart);

                        this.chart.setOption({
                            grid: {
                                left: 10,
                                right: 10,
                                top: 10,
                                bottom: 25,
                                containLabel: false
                            },
                            xAxis: {
                                type: 'value',
                                min: 0,
                                max: 100,
                                axisLine: { show: false },
                                axisTick: { show: false },
                                axisLabel: {
                                    formatter: '{value}%',
                                    color: isDark ? '#9ca3af' : '#6b7280',
                                    fontSize: 11
                                },
                                splitLine: { show: false }
                            },
                            yAxis: {
                                type: 'category',
                                data: [''],
                                axisLine: { show: false },
                                axisTick: { show: false },
                                axisLabel: { show: false }
                            },
                            series: [
                                {
                                    name: '{{ __('Used') }}',
                                    type: 'bar',
                                    stack: 'total',
                                    barWidth: 28,
                                    barGap: 0,
                                    itemStyle: {
                                        color: '{{ $usedColor }}',
                                        borderRadius: [6, 0, 0, 6]
                                    },
                                    label: {
                                        show: true,
                                        position: 'inside',
                                        formatter: '{{ number_format($percent, 1) }}%',
                                        color: '#fff',
                                        fontWeight: 'bold',
                                        fontSize: 13
                                    },
                                    data: [{{ $percent }}]
                                },
                                {
                                    name: '{{ __('Free') }}',
                                    type: 'bar',
                                    stack: 'total',
                                    barWidth: 28,
                                    itemStyle: {
                                        color: isDark ? '#374151' : '#e5e7eb',
                                        borderRadius: [0, 6, 6, 0]
                                    },
                                    data: [{{ 100 - $percent }}]
                                }
                            ],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: { type: 'shadow' },
                                formatter: function(params) {
                                    return params.map(p => p.seriesName + ': ' + p.value.toFixed(1) + '%').join('<br>');
                                }
                            }
                        });
                        window.addEventListener('resize', () => this.chart?.resize());
                    },
                    destroy() {
                        this.chart?.dispose();
                    }
                }"
                wire:ignore
            >
                <div x-ref="chart" class="disk-bar-container"></div>
            </div>
        @endif

        @if($data['has_quota'] && $data['free'])
        <div class="disk-stats-grid">
            <div class="disk-stat-item">
                <div class="disk-stat-value">{{ $data['used'] }}</div>
                <div class="disk-stat-label">{{ __('Used') }}</div>
            </div>
            <div class="disk-stat-item">
                <div class="disk-stat-value">{{ $data['free'] }}</div>
                <div class="disk-stat-label">{{ __('Free') }}</div>
            </div>
            <div class="disk-stat-item">
                <div class="disk-stat-value">{{ $data['quota'] }}</div>
                <div class="disk-stat-label">{{ __('Quota') }}</div>
            </div>
        </div>
        @else
        <div class="disk-stats-grid-2">
            <div class="disk-stat-item">
                <div class="disk-stat-value">{{ $data['used'] }}</div>
                <div class="disk-stat-label">{{ __('Used') }}</div>
            </div>
            <div class="disk-stat-item">
                <div class="disk-stat-value">{{ $data['quota'] }}</div>
                <div class="disk-stat-label">{{ __('Quota') }}</div>
            </div>
        </div>
        @endif
    </x-filament::section>
</x-filament-widgets::widget>
