@extends('layouts.admin')

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

@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 Management') }}</h1>
            <p class="mb-0 text-muted">{{ __('Overview of your media files and statistics') }}</p>
        </div>
        <div class="d-flex">
            <!-- Language Switcher -->
            <div class="dropdown mr-2">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="languageDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="flag-icon flag-icon-{{ app()->getLocale() == 'ar' ? 'sa' : 'us' }}"></span> {{ app()->getLocale() == 'ar' ? 'العربية' : 'English' }}
                </button>
                <div class="dropdown-menu" aria-labelledby="languageDropdown">
                    <a class="dropdown-item" href="{{ route('admin.media.dashboard', ['locale' => 'en']) }}">
                        <span class="flag-icon flag-icon-us"></span> English
                    </a>
                    <a class="dropdown-item" href="{{ route('admin.media.dashboard', ['locale' => 'ar']) }}">
                        <span class="flag-icon flag-icon-sa"></span> العربية
                    </a>
                </div>
            </div>
            <a href="{{ route('admin.media.library', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">
                <i class="fas fa-images"></i> {{ __('View Library') }}
            </a>
        </div>
    </div>

    <!-- Stats 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">{{ $stats['total_files'] ?? 0 }}</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 Size') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_size'] ?? '0 MB' }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-hdd 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">
                                {{ __('Images') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['images'] ?? 0 }}</div>
                            <div class="text-xs text-muted">{{ __('Videos:') }} {{ $stats['videos'] ?? 0 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-images 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">
                                {{ __('This Week') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['this_week'] ?? 0 }}</div>
                            <div class="text-xs text-muted">{{ __('New uploads') }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar-week fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Language Stats -->
    <div class="row mb-4">
        <div class="col-xl-6 col-lg-6">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Language Distribution') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-4 text-center">
                            <span class="badge badge-success p-2 mb-2">🇺🇸</span>
                            <div class="h6 mb-0">{{ $stats['english_files'] ?? 0 }}</div>
                            <small class="text-muted">{{ __('English') }}</small>
                        </div>
                        <div class="col-4 text-center">
                            <span class="badge badge-info p-2 mb-2">🇸🇦</span>
                            <div class="h6 mb-0">{{ $stats['arabic_files'] ?? 0 }}</div>
                            <small class="text-muted">{{ __('Arabic') }}</small>
                        </div>
                        <div class="col-4 text-center">
                            <span class="badge badge-warning p-2 mb-2">🌐</span>
                            <div class="h6 mb-0">{{ $stats['bilingual_files'] ?? 0 }}</div>
                            <small class="text-muted">{{ __('Both') }}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-6 col-lg-6">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Storage Usage') }}</h6>
                </div>
                <div class="card-body">
                    <div class="progress mb-3">
                        <div class="progress-bar bg-success" role="progressbar" style="width: {{ $stats['storage_percentage'] ?? 0 }}%" aria-valuenow="{{ $stats['storage_percentage'] ?? 0 }}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <div class="d-flex justify-content-between text-sm">
                        <span>{{ __('Used:') }} {{ $stats['used_storage'] ?? '0 MB' }}</span>
                        <span>{{ __('Available:') }} {{ $stats['available_storage'] ?? '100 MB' }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Uploads -->
    <div class="row">
        <div class="col-xl-8 col-lg-7">
            <div class="card shadow mb-4">
                <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">{{ __('Recent Uploads') }}</h6>
                    <div class="dropdown no-arrow">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                            <a class="dropdown-item" href="{{ route('admin.media.library', ['locale' => app()->getLocale()]) }}">{{ __('View All') }}</a>
                            <a class="dropdown-item" href="{{ route('admin.media.upload', ['locale' => app()->getLocale()]) }}">{{ __('Upload New') }}</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if(isset($recentUploads) && $recentUploads->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th>{{ __('Preview') }}</th>
                                        <th>{{ __('Name') }}</th>
                                        <th>{{ __('Type') }}</th>
                                        <th>{{ __('Language') }}</th>
                                        <th>{{ __('Size') }}</th>
                                        <th>{{ __('Uploaded') }}</th>
                                        <th>{{ __('Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($recentUploads as $file)
                                    <tr>
                                        <td>
                                            @if($file->is_image)
                                                <img src="{{ $file->thumbnail_url ?? $file->url }}" alt="{{ $file->alt_text }}" class="img-thumbnail" style="width: 50px; height: 50px;">
                                            @else
                                                <i class="fas fa-file fa-2x text-muted"></i>
                                            @endif
                                        </td>
                                        <td>
                                            <a href="{{ route('admin.media.edit', ['locale' => app()->getLocale(), 'media' => $file]) }}" class="font-weight-bold">
                                                {{ $file->name }}
                                            </a>
                                            @if($file->is_featured)
                                                <span class="text-warning">⭐</span>
                                            @endif
                                        </td>
                                        <td>{{ ucfirst($file->type) }}</td>
                                        <td>
                                            @if($file->language == 'both')
                                                <span class="badge badge-warning">🌐 {{ __('Both') }}</span>
                                            @elseif($file->language == 'ar')
                                                <span class="badge badge-info">🇸🇦 {{ __('Arabic') }}</span>
                                            @else
                                                <span class="badge badge-success">🇺🇸 {{ __('English') }}</span>
                                            @endif
                                        </td>
                                        <td>{{ $file->formatted_size }}</td>
                                        <td>{{ $file->created_at->diffForHumans() }}</td>
                                        <td>
                                            <a href="{{ route('admin.media.edit', ['locale' => app()->getLocale(), 'media' => $file]) }}" class="btn btn-sm btn-primary">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <a href="{{ route('admin.media.show', ['locale' => app()->getLocale(), 'media' => $file]) }}" class="btn btn-sm btn-info">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <form action="{{ route('admin.media.destroy', ['locale' => app()->getLocale(), 'media' => $file]) }}" method="POST" class="d-inline" onsubmit="return confirm('{{ __('Are you sure?') }}')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-images fa-3x text-muted mb-3"></i>
                            <p class="text-muted">{{ __('No media files found. Upload your first file!') }}</p>
                            <a href="{{ route('admin.media.upload', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">{{ __('Upload Media') }}</a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-5">
            <!-- Quick Actions -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Quick Actions') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <a href="{{ route('admin.media.upload', ['locale' => app()->getLocale()]) }}" class="btn btn-success btn-block">
                                <i class="fas fa-upload"></i> {{ __('Upload') }}
                            </a>
                        </div>
                        <div class="col-md-6 mb-3">
                            <a href="{{ route('admin.media.collections.create', ['locale' => app()->getLocale()]) }}" class="btn btn-info btn-block">
                                <i class="fas fa-folder-plus"></i> {{ __('New Collection') }}
                            </a>
                        </div>
                        <div class="col-md-6 mb-3">
                            <a href="{{ route('admin.media.library', ['locale' => app()->getLocale()]) }}" class="btn btn-primary btn-block">
                                <i class="fas fa-images"></i> {{ __('Library') }}
                            </a>
                        </div>
                        <div class="col-md-6 mb-3">
                            <a href="{{ route('admin.media.collections.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary btn-block">
                                <i class="fas fa-folder"></i> {{ __('Collections') }}
                            </a>
                        </div>
                        <div class="col-md-12 mb-3">
                            <a href="{{ route('admin.media.analytics.index', ['locale' => app()->getLocale()]) }}" class="btn btn-warning btn-block">
                                <i class="fas fa-chart-line"></i> {{ __('Analytics') }}
                            </a>
                        </div>
                        <div class="col-md-12 mb-3">
                            <a href="{{ route('admin.media.analytics.storage', ['locale' => app()->getLocale()]) }}" class="btn btn-outline-primary btn-block">
                                <i class="fas fa-hdd"></i> {{ __('Storage') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Collections Overview -->
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Collections') }}</h6>
                </div>
                <div class="card-body">
                    @php
                        $collections = \App\Models\MediaCollection::withCount('items')->limit(5)->get();
                    @endphp
                    @if($collections->count() > 0)
                        <ul class="list-group list-group-flush">
                            @foreach($collections as $collection)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                {{ $collection->name }}
                                <span class="badge badge-primary badge-pill">{{ $collection->items_count }}</span>
                            </li>
                            @endforeach
                        </ul>
                        @if(\App\Models\MediaCollection::count() > 5)
                            <a href="{{ route('admin.media.collections.index', ['locale' => app()->getLocale()]) }}" class="btn btn-link btn-sm btn-block">{{ __('View All Collections') }}</a>
                        @endif
                    @else
                        <div class="text-center py-3">
                            <i class="fas fa-folder-open fa-2x text-muted mb-2"></i>
                            <p class="text-muted mb-0">{{ __('No collections found. Create your first collection!') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css" rel="stylesheet">
<style>
    @media (max-width: 768px) {
        .d-flex {
            flex-direction: column;
        }
        .mr-2 {
            margin-right: 0 !important;
            margin-bottom: 0.5rem;
        }
    }
    .rtl {
        direction: rtl;
    }
    .rtl .dropdown-menu {
        left: auto;
        right: 0;
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add RTL support if Arabic
        if ('{{ app()->getLocale() }}' === 'ar') {
            document.body.classList.add('rtl');
        }
        console.log('Media Dashboard loaded');
    });
</script>
@endpush