@extends('layouts.admin')

@section('title', __('Storage Analytics'))

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ __('Storage Analytics') }}</h3>
                    <div class="card-tools">
                        <a href="{{ route('admin.media.analytics.index', ['locale' => app()->getLocale()]) }}" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-arrow-left"></i> {{ __('Back to Analytics') }}
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Storage Summary Cards -->
                    <div class="row mb-4">
                        <div class="col-lg-3 col-md-6">
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3>{{ number_format($totalStorage / 1024 / 1024, 2) }} MB</h3>
                                    <p>{{ __('Total Storage Used') }}</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-hdd"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="small-box bg-success">
                                <div class="inner">
                                    <h3>{{ $storageByType->sum('count') }}</h3>
                                    <p>{{ __('Total Files') }}</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-file"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="small-box bg-warning">
                                <div class="inner">
                                    <h3>{{ $storageByType->count() }}</h3>
                                    <p>{{ __('File Types') }}</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-tags"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="small-box bg-danger">
                                <div class="inner">
                                    @if($storageQuota > 0)
                                        <h3>{{ number_format(($totalStorage / $storageQuota) * 100, 1) }}%</h3>
                                        <p>{{ __('Quota Used') }}</p>
                                    @else
                                        <h3>--</h3>
                                        <p>{{ __('No Quota Set') }}</p>
                                    @endif
                                </div>
                                <div class="icon">
                                    <i class="fas fa-chart-pie"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Storage Quota Progress -->
                    @if($storageQuota > 0)
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">{{ __('Storage Quota Usage') }}</h5>
                                </div>
                                <div class="card-body">
                                    <div class="progress" style="height: 25px;">
                                        @php
                                            $usagePercentage = ($totalStorage / $storageQuota) * 100;
                                            $progressClass = $usagePercentage > 90 ? 'bg-danger' : ($usagePercentage > 75 ? 'bg-warning' : 'bg-success');
                                        @endphp
                                        <div class="progress-bar {{ $progressClass }}" role="progressbar"
                                             style="width: {{ min($usagePercentage, 100) }}%"
                                             aria-valuenow="{{ $usagePercentage }}"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                            {{ number_format($usagePercentage, 1) }}% ({{ number_format($totalStorage / 1024 / 1024, 2) }} MB / {{ number_format($storageQuota / 1024 / 1024, 2) }} MB)
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    <!-- Charts Row -->
                    <div class="row mb-4">
                        <!-- Storage by Type Pie Chart -->
                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">{{ __('Storage Distribution by File Type') }}</h5>
                                </div>
                                <div class="card-body">
                                    <canvas id="storageTypeChart" width="400" height="300"></canvas>
                                </div>
                            </div>
                        </div>

                        <!-- Storage Growth Over Time -->
                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">{{ __('Storage Growth (Last 30 Days)') }}</h5>
                                </div>
                                <div class="card-body">
                                    <canvas id="storageGrowthChart" width="400" height="300"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Storage by Type Table -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">{{ __('Storage Usage by File Type') }}</h5>
                                </div>
                                <div class="card-body table-responsive">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>{{ __('File Type') }}</th>
                                                <th>{{ __('File Count') }}</th>
                                                <th>{{ __('Storage Used') }}</th>
                                                <th>{{ __('Average File Size') }}</th>
                                                <th>{{ __('Percentage') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($storageByType as $type)
                                            <tr>
                                                <td>
                                                    <i class="fas fa-{{ $type['type'] == 'image' ? 'image' : ($type['type'] == 'video' ? 'video' : ($type['type'] == 'audio' ? 'music' : 'file')) }}"></i>
                                                    {{ ucfirst($type['type']) }}
                                                </td>
                                                <td>{{ number_format($type['count']) }}</td>
                                                <td>{{ $type['size_formatted'] }}</td>
                                                <td>{{ $type['count'] > 0 ? number_format($type['size'] / $type['count'] / 1024, 2) . ' KB' : '0 KB' }}</td>
                                                <td>
                                                    @if($totalStorage > 0)
                                                        {{ number_format(($type['size'] / $totalStorage) * 100, 1) }}%
                                                    @else
                                                        0%
                                                    @endif
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Largest Files Table -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">{{ __('Largest Files') }}</h5>
                                </div>
                                <div class="card-body table-responsive">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>{{ __('File Name') }}</th>
                                                <th>{{ __('Type') }}</th>
                                                <th>{{ __('Size') }}</th>
                                                <th>{{ __('Folder') }}</th>
                                                <th>{{ __('Uploaded') }}</th>
                                                <th>{{ __('Actions') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($largestFiles as $file)
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        @if($file->isImage())
                                                            <img src="{{ $file->getThumbnailUrlAttribute() }}" alt="" class="img-thumbnail mr-2" style="width: 40px; height: 40px; object-fit: cover;">
                                                        @else
                                                            <i class="fas fa-file fa-2x text-muted mr-2"></i>
                                                        @endif
                                                        <div>
                                                            <strong>{{ Str::limit($file->file_name, 30) }}</strong>
                                                            @if($file->alt_text_en || $file->alt_text_ar)
                                                                <br><small class="text-muted">{{ Str::limit($file->alt_text ?? '', 40) }}</small>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-{{ $file->file_type == 'image' ? 'primary' : ($file->file_type == 'video' ? 'danger' : ($file->file_type == 'audio' ? 'warning' : 'secondary')) }}">
                                                        {{ ucfirst($file->file_type) }}
                                                    </span>
                                                </td>
                                                <td>{{ $file->getHumanReadableSizeAttribute() }}</td>
                                                <td>
                                                    @if($file->folder)
                                                        <i class="fas fa-folder text-warning"></i> {{ $file->folder->name }}
                                                    @else
                                                        <em>{{ __('Root') }}</em>
                                                    @endif
                                                </td>
                                                <td>{{ $file->created_at->format('M d, Y') }}</td>
                                                <td>
                                                    <a href="{{ route('admin.media.show', $file) }}" class="btn btn-sm btn-info">
                                                        <i class="fas fa-eye"></i> {{ __('View') }}
                                                    </a>
                                                </td>
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="6" class="text-center text-muted">
                                                    {{ __('No files found') }}
                                                </td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.small-box {
    border-radius: 0.25rem;
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
    margin-bottom: 20px;
    position: relative;
    display: block;
    margin-bottom: 20px;
}

.small-box .inner {
    padding: 10px;
}

.small-box .icon {
    color: rgba(0,0,0,0.15);
    z-index: 0;
}

.small-box .icon > i {
    font-size: 70px;
    top: 20px;
    right: 15px;
    position: absolute;
}

.small-box-footer {
    position: relative;
    text-align: center;
    padding: 3px 0;
    color: #fff;
    color: rgba(255,255,255,0.8);
    display: block;
    z-index: 10;
    background: rgba(0,0,0,0.1);
    text-decoration: none;
}

.bg-info {
    background-color: #17a2b8 !important;
}

.bg-success {
    background-color: #28a745 !important;
}

.bg-warning {
    background-color: #ffc107 !important;
}

.bg-danger {
    background-color: #dc3545 !important;
}

.table-responsive {
    max-height: 400px;
    overflow-y: auto;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Storage by Type Pie Chart
    const storageTypeCtx = document.getElementById('storageTypeChart').getContext('2d');
    const storageTypeData = @json($storageByType);

    new Chart(storageTypeCtx, {
        type: 'pie',
        data: {
            labels: storageTypeData.map(item => item.type.charAt(0).toUpperCase() + item.type.slice(1)),
            datasets: [{
                data: storageTypeData.map(item => item.size),
                backgroundColor: [
                    '#FF6384',
                    '#36A2EB',
                    '#FFCE56',
                    '#4BC0C0',
                    '#9966FF',
                    '#FF9F40'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.parsed;
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = ((value / total) * 100).toFixed(1);
                            return label + ': ' + formatBytes(value) + ' (' + percentage + '%)';
                        }
                    }
                }
            }
        }
    });

    // Storage Growth Chart
    const storageGrowthCtx = document.getElementById('storageGrowthChart').getContext('2d');
    const storageGrowthData = @json($storageOverTime);

    new Chart(storageGrowthCtx, {
        type: 'line',
        data: {
            labels: storageGrowthData.map(item => new Date(item.date).toLocaleDateString()),
            datasets: [{
                label: '{{ __("Storage Added (MB)") }}',
                data: storageGrowthData.map(item => item.daily_size / 1024 / 1024),
                borderColor: '#36A2EB',
                backgroundColor: 'rgba(54, 162, 235, 0.1)',
                tension: 0.1,
                fill: true
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return value.toFixed(2) + ' MB';
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.dataset.label + ': ' + context.parsed.y.toFixed(2) + ' MB';
                        }
                    }
                }
            }
        }
    });
});

function formatBytes(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
</script>
@endpush