@extends('layouts.admin')

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

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('Media Analytics') }}</h1>
            <p class="mb-0 text-muted">{{ __('Performance metrics and insights for media files') }}</p>
        </div>
        <div>
            <select id="periodSelect" class="form-control" style="width: auto;">
                <option value="7" {{ request('period') == '7' ? 'selected' : '' }}>{{ __('Last 7 days') }}</option>
                <option value="30" {{ request('period') == '30' || !request('period') ? 'selected' : '' }}>{{ __('Last 30 days') }}</option>
                <option value="90" {{ request('period') == '90' ? 'selected' : '' }}>{{ __('Last 90 days') }}</option>
                <option value="365" {{ request('period') == '365' ? 'selected' : '' }}>{{ __('Last year') }}</option>
            </select>
        </div>
    </div>

    <!-- Overall Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                {{ __('Total Files') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['total_files']) }}</div>
                            <div class="text-xs text-muted">{{ __('Uploaded:') }} {{ number_format($stats['uploaded_files']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-file fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                {{ __('Total Views') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['total_views']) }}</div>
                            <div class="text-xs text-muted">{{ __('Period:') }} {{ number_format($periodStats['views_gained']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-eye fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                {{ __('Total Downloads') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['total_downloads']) }}</div>
                            <div class="text-xs text-muted">{{ __('Period:') }} {{ number_format($periodStats['downloads_gained']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-download fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                {{ __('Storage Used') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['storage_used_formatted'] }}</div>
                            <div class="text-xs text-muted">{{ __('Quota:') }} {{ $stats['storage_quota_formatted'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-hdd fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Period Statistics -->
    <div class="row mb-4">
        <div class="col-lg-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Period Overview') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 text-center">
                            <h4 class="text-primary">{{ number_format($periodStats['files_uploaded']) }}</h4>
                            <p class="text-muted mb-0">{{ __('Files Uploaded') }}</p>
                        </div>
                        <div class="col-md-3 text-center">
                            <h4 class="text-success">{{ number_format($periodStats['views_gained']) }}</h4>
                            <p class="text-muted mb-0">{{ __('Views Gained') }}</p>
                        </div>
                        <div class="col-md-3 text-center">
                            <h4 class="text-info">{{ number_format($periodStats['downloads_gained']) }}</h4>
                            <p class="text-muted mb-0">{{ __('Downloads Gained') }}</p>
                        </div>
                        <div class="col-md-3 text-center">
                            <h4 class="text-warning">{{ $periodStats['storage_added_formatted'] }}</h4>
                            <p class="text-muted mb-0">{{ __('Storage Added') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row mb-4">
        <div class="col-lg-6">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Uploads Over Time') }}</h6>
                </div>
                <div class="card-body">
                    <canvas id="uploadsChart" width="100%" height="300"></canvas>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Views Over Time') }}</h6>
                </div>
                <div class="card-body">
                    <canvas id="viewsChart" width="100%" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Top Performing Files -->
    <div class="row mb-4">
        <div class="col-lg-6">
            <div class="card shadow">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Top Viewed Files') }}</h6>
                    <a href="{{ route('admin.media.index', ['locale' => app()->getLocale()]) }}" class="btn btn-sm btn-primary">{{ __('View All') }}</a>
                </div>
                <div class="card-body">
                    @if($topFiles->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                <tbody>
                                    @foreach($topFiles as $index => $file)
                                    <tr>
                                        <td width="40">
                                            <span class="badge badge-primary">{{ $index + 1 }}</span>
                                        </td>
                                        <td>
                                            <div>
                                                <a href="{{ route('admin.media.show', ['locale' => app()->getLocale(), 'media' => $file]) }}" class="font-weight-bold">
                                                    {{ $file->original_name ?? $file->name }}
                                                </a>
                                                <br>
                                                <small class="text-muted">
                                                    {{ $file->file_type }} • {{ $file->size_formatted }} •
                                                    {{ $file->folder ? $file->folder->name : __('Root') }}
                                                </small>
                                            </div>
                                        </td>
                                        <td class="text-right">
                                            <span class="badge badge-info">{{ number_format($file->views_count) }} {{ __('views') }}</span>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-file fa-3x text-muted mb-3"></i>
                            <p class="text-muted">{{ __('No files available yet') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card shadow">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Most Downloaded Files') }}</h6>
                    <a href="{{ route('admin.media.index', ['locale' => app()->getLocale()]) }}" class="btn btn-sm btn-primary">{{ __('View All') }}</a>
                </div>
                <div class="card-body">
                    @if($mostDownloadedFiles->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                <tbody>
                                    @foreach($mostDownloadedFiles as $index => $file)
                                    <tr>
                                        <td width="40">
                                            <span class="badge badge-success">{{ $index + 1 }}</span>
                                        </td>
                                        <td>
                                            <div>
                                                <a href="{{ route('admin.media.show', ['locale' => app()->getLocale(), 'media' => $file]) }}" class="font-weight-bold">
                                                    {{ $file->original_name ?? $file->name }}
                                                </a>
                                                <br>
                                                <small class="text-muted">
                                                    {{ $file->file_type }} • {{ $file->size_formatted }}
                                                </small>
                                            </div>
                                        </td>
                                        <td class="text-right">
                                            <span class="badge badge-warning">{{ number_format($file->downloads_count) }} {{ __('downloads') }}</span>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-download fa-3x text-muted mb-3"></i>
                            <p class="text-muted">{{ __('No downloads yet') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- File Type Distribution -->
    <div class="row mb-4">
        <div class="col-lg-12">
            <div class="card shadow">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('File Type Distribution') }}</h6>
                    <a href="{{ route('admin.media.index', ['locale' => app()->getLocale()]) }}" class="btn btn-sm btn-primary">{{ __('Manage Media') }}</a>
                </div>
                <div class="card-body">
                    @if($fileTypeStats->count() > 0)
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>{{ __('File Type') }}</th>
                                        <th>{{ __('Files') }}</th>
                                        <th>{{ __('Total Size') }}</th>
                                        <th>{{ __('Views') }}</th>
                                        <th>{{ __('Downloads') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($fileTypeStats as $type)
                                    <tr>
                                        <td>
                                            <i class="fas fa-file-{{ $type['icon'] ?? 'alt' }} mr-2"></i>
                                            {{ $type['type'] }}
                                        </td>
                                        <td>{{ number_format($type['count']) }}</td>
                                        <td>{{ $type['size_formatted'] }}</td>
                                        <td>{{ number_format($type['views']) }}</td>
                                        <td>{{ number_format($type['downloads']) }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-file fa-3x text-muted mb-3"></i>
                            <p class="text-muted">{{ __('No file types found') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Storage Usage Chart -->
    <div class="row mb-4">
        <div class="col-lg-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Storage Usage Over Time') }}</h6>
                </div>
                <div class="card-body">
                    <canvas id="storageChart" width="100%" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="row mb-4">
        <div class="col-lg-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Recent Activity') }}</h6>
                </div>
                <div class="card-body">
                    @if($recentActivity->count() > 0)
                        <div class="timeline">
                            @foreach($recentActivity as $activity)
                            <div class="timeline-item">
                                <div class="timeline-marker bg-{{ $activity['color'] }}">
                                    <i class="{{ $activity['icon'] }}"></i>
                                </div>
                                <div class="timeline-content">
                                    <h6 class="timeline-title">{{ $activity['title'] }}</h6>
                                    <p class="timeline-text">
                                        {{ __('By') }} {{ $activity['user'] }} •
                                        {{ $activity['date']->diffForHumans() }}
                                    </p>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-history fa-3x text-muted mb-3"></i>
                            <p class="text-muted">{{ __('No recent activity') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Export Options -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Export Data') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <h6>{{ __('Files Analytics') }}</h6>
                            <a href="{{ route('admin.media.analytics.export', ['locale' => app()->getLocale(), 'type' => 'files', 'format' => 'csv', 'period' => $period]) }}" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-download"></i> {{ __('Export CSV') }}
                            </a>
                        </div>
                        <div class="col-md-3">
                            <h6>{{ __('Views Analytics') }}</h6>
                            <a href="{{ route('admin.media.analytics.export', ['locale' => app()->getLocale(), 'type' => 'views', 'format' => 'csv', 'period' => $period]) }}" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-download"></i> {{ __('Export CSV') }}
                            </a>
                        </div>
                        <div class="col-md-3">
                            <h6>{{ __('Downloads Analytics') }}</h6>
                            <a href="{{ route('admin.media.analytics.export', ['locale' => app()->getLocale(), 'type' => 'downloads', 'format' => 'csv', 'period' => $period]) }}" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-download"></i> {{ __('Export CSV') }}
                            </a>
                        </div>
                        <div class="col-md-3">
                            <h6>{{ __('Storage Analytics') }}</h6>
                            <a href="{{ route('admin.media.analytics.export', ['locale' => app()->getLocale(), 'type' => 'storage', 'format' => 'csv', 'period' => $period]) }}" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-download"></i> {{ __('Export CSV') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e9ecef;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    left: -22px;
    top: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
}

.timeline-content {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
}

.timeline-title {
    margin: 0 0 5px 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.timeline-text {
    margin: 0;
    font-size: 0.8rem;
    color: #6c757d;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // Period selector
    $('#periodSelect').on('change', function() {
        const period = $(this).val();
        const url = new URL(window.location);
        url.searchParams.set('period', period);
        window.location.href = url.toString();
    });

    // Uploads Chart
    const uploadsCtx = document.getElementById('uploadsChart').getContext('2d');
    new Chart(uploadsCtx, {
        type: 'line',
        data: {
            labels: @json($uploadsChartData['labels']),
            datasets: [{
                label: '{{ __("Files Uploaded") }}',
                data: @json($uploadsChartData['data']),
                borderColor: 'rgb(78, 115, 223)',
                backgroundColor: 'rgba(78, 115, 223, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });

    // Views Chart
    const viewsCtx = document.getElementById('viewsChart').getContext('2d');
    new Chart(viewsCtx, {
        type: 'line',
        data: {
            labels: @json($viewsChartData['labels']),
            datasets: [{
                label: '{{ __("Views") }}',
                data: @json($viewsChartData['data']),
                borderColor: 'rgb(28, 200, 138)',
                backgroundColor: 'rgba(28, 200, 138, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });

    // Storage Chart
    const storageCtx = document.getElementById('storageChart').getContext('2d');
    new Chart(storageCtx, {
        type: 'line',
        data: {
            labels: @json($storageChartData['labels']),
            datasets: [{
                label: '{{ __("Storage Used") }}',
                data: @json($storageChartData['data']),
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgba(255, 99, 132, 0.1)',
                tension: 0.4,
                fill: true,
                yAxisID: 'y'
            }, {
                label: '{{ __("Quota") }}',
                data: @json($storageChartData['quota']),
                borderColor: 'rgb(54, 162, 235)',
                backgroundColor: 'rgba(54, 162, 235, 0.1)',
                borderDash: [5, 5],
                tension: 0.4,
                yAxisID: 'y'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    type: 'linear',
                    display: true,
                    position: 'left',
                    title: {
                        display: true,
                        text: '{{ __("Storage (MB)") }}'
                    }
                }
            },
            plugins: {
                legend: {
                    display: true
                }
            }
        }
    });
});
</script>
@endpush