@extends('admin.layouts.master')

@section('css')
    <style>
        .file-manager-container {
            min-height: 600px;
        }

        .file-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1rem;
        }

        .file-item {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 1rem;
            transition: all 0.2s ease;
            cursor: pointer;
            position: relative;
            background: #fff;
        }

        .file-item:hover {
            border-color: #6366f1;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
        }

        .file-item.selected {
            border-color: #6366f1;
            background: #eef2ff;
        }

        .file-item-checkbox {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 18px;
            height: 18px;
        }

        .file-icon {
            font-size: 48px;
            text-align: center;
            margin-bottom: 0.5rem;
            color: #6b7280;
        }

        .file-icon.folder {
            color: #f59e0b;
        }

        .file-icon.image {
            color: #10b981;
        }

        .file-name {
            font-size: 0.875rem;
            font-weight: 500;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .file-meta {
            font-size: 0.75rem;
            color: #9ca3af;
            text-align: center;
            margin-top: 0.25rem;
        }

        .file-thumbnail {
            width: 100%;
            height: 100px;
            object-fit: cover;
            border-radius: 4px;
            margin-bottom: 0.5rem;
        }

        .file-actions {
            position: absolute;
            top: 8px;
            left: 8px;
            display: none;
        }

        .file-item:hover .file-actions {
            display: flex;
            gap: 4px;
        }

        .breadcrumb-nav {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            background: #f8fafc;
            border-radius: 8px;
            margin-bottom: 1rem;
        }

        .breadcrumb-nav a {
            color: #6366f1;
            text-decoration: none;
        }

        .breadcrumb-nav a:hover {
            text-decoration: underline;
        }

        .breadcrumb-separator {
            color: #9ca3af;
        }

        .stats-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 12px;
            padding: 1.5rem;
        }

        .stats-card h3 {
            font-size: 2rem;
            font-weight: bold;
        }

        .location-tabs {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .location-tab {
            padding: 0.5rem 1rem;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
            background: #fff;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .location-tab.active {
            background: #6366f1;
            color: white;
            border-color: #6366f1;
        }

        .location-tab:hover:not(.active) {
            border-color: #6366f1;
        }

        .empty-state {
            text-align: center;
            padding: 3rem;
            color: #9ca3af;
        }

        .empty-state svg {
            width: 4rem;
            height: 4rem;
            margin-bottom: 1rem;
        }

        .filter-bar {
            display: flex;
            gap: 1rem;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 1rem;
        }

        .search-box {
            flex: 1;
            min-width: 200px;
        }

        .preview-modal-img {
            max-width: 100%;
            max-height: 70vh;
            object-fit: contain;
        }

        .toolbar {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .view-toggle {
            display: flex;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            overflow: hidden;
        }

        .view-toggle button {
            padding: 0.5rem 0.75rem;
            border: none;
            background: #fff;
            cursor: pointer;
        }

        .view-toggle button.active {
            background: #6366f1;
            color: white;
        }

        .file-list-view {
            display: none;
        }

        .file-list-view.active {
            display: block;
        }

        .file-grid.active {
            display: grid;
        }

        .file-list-table {
            width: 100%;
        }

        .file-list-table th {
            text-align: right;
            padding: 0.75rem;
            background: #f8fafc;
            font-weight: 600;
        }

        .file-list-table td {
            padding: 0.75rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .file-list-table tr:hover {
            background: #f8fafc;
        }
    </style>
@endsection

@section('page-header')
    <div class="breadcrumb-header justify-content-between align-items-center">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">مدير الملفات</h4>
                <span class="text-muted mt-1 tx-13 mr-2 mb-0">/ إدارة الصور والملفات</span>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="file-manager-container">
        <!-- Stats Cards -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="stats-card">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="mb-1 opacity-75">إجمالي الحجم</p>
                            <h3 class="mb-0">{{ $stats['total_size_formatted'] }}</h3>
                        </div>
                        <x-lucide-hard-drive style="opacity: 0.8;" width="40" height="40" />
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="mb-1 opacity-75">عدد الملفات</p>
                            <h3 class="mb-0">{{ number_format($stats['files_count']) }}</h3>
                        </div>
                        <x-lucide-file style="opacity: 0.8;" width="40" height="40" />
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="mb-1 opacity-75">عدد المجلدات</p>
                            <h3 class="mb-0">{{ number_format($stats['folders_count']) }}</h3>
                        </div>
                        <x-lucide-folder style="opacity: 0.8;" width="40" height="40" />
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="mb-1 opacity-75">عدد الصور</p>
                            <h3 class="mb-0">{{ number_format($stats['images_count']) }}</h3>
                        </div>
                        <x-lucide-image style="opacity: 0.8;" width="40" height="40" />
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Card -->
        <div class="card">
            <div class="card-body">
                <!-- Location Tabs -->
                <div class="location-tabs">
                    <a href="{{ route('admin.file-manager.index', ['location' => 'storage']) }}"
                        class="location-tab {{ $location === 'storage' ? 'active' : '' }}">
                        <x-lucide-database style="display: inline;" width="16" height="16" />
                        Storage (Public)
                    </a>
                    <a href="{{ route('admin.file-manager.index', ['location' => 'storage_private']) }}"
                        class="location-tab {{ $location === 'storage_private' ? 'active' : '' }}">
                        <x-lucide-lock style="display: inline;" width="16" height="16" />
                        Storage (Private)
                    </a>
                    <a href="{{ route('admin.file-manager.index', ['location' => 'public']) }}"
                        class="location-tab {{ $location === 'public' ? 'active' : '' }}">
                        <x-lucide-globe style="display: inline;" width="16" height="16" />
                        Public
                    </a>
                </div>

                <!-- Breadcrumbs -->
                <div class="breadcrumb-nav">
                    <a href="{{ route('admin.file-manager.index', ['location' => $location]) }}">
                        <x-lucide-home width="16" height="16" />
                    </a>
                    @foreach ($breadcrumbs as $crumb)
                        <span class="breadcrumb-separator">/</span>
                        <a
                            href="{{ route('admin.file-manager.index', ['location' => $location, 'path' => $crumb['path']]) }}">
                            {{ $crumb['name'] }}
                        </a>
                    @endforeach
                </div>

                <!-- Toolbar -->
                <div class="toolbar">
                    @if (can_admin('settings_edit'))
                        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#uploadModal">
                            <x-lucide-upload width="16" height="16" />
                            رفع ملف
                        </button>
                        <button class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#newFolderModal">
                            <x-lucide-folder-plus width="16" height="16" />
                            مجلد جديد
                        </button>
                        <button class="btn btn-danger btn-sm" id="bulkDeleteBtn" style="display: none;">
                            <x-lucide-trash-2 width="16" height="16" />
                            حذف المحدد (<span id="selectedCount">0</span>)
                        </button>
                    @endif

                    <div class="ms-auto d-flex gap-2">
                        <div class="view-toggle">
                            <button class="active" id="gridViewBtn" title="عرض شبكي">
                                <x-lucide-grid width="16" height="16" />
                            </button>
                            <button id="listViewBtn" title="عرض قائمة">
                                <x-lucide-list width="16" height="16" />
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Filter Bar -->
                <div class="filter-bar">
                    <div class="search-box">
                        <form action="{{ route('admin.file-manager.index') }}" method="GET" id="searchForm">
                            <input type="hidden" name="location" value="{{ $location }}">
                            <input type="hidden" name="path" value="{{ $path }}">
                            <input type="hidden" name="filter" value="{{ $filter }}">
                            <div class="input-group">
                                <input type="text" class="form-control" name="search" value="{{ $search }}"
                                    placeholder="بحث عن ملف...">
                                <button class="btn btn-outline-secondary" type="submit">
                                    <x-lucide-search width="16" height="16" />
                                </button>
                            </div>
                        </form>
                    </div>

                    <div class="btn-group">
                        <a href="{{ route('admin.file-manager.index', ['location' => $location, 'path' => $path, 'filter' => 'all', 'search' => $search]) }}"
                            class="btn btn-sm {{ $filter === 'all' ? 'btn-primary' : 'btn-outline-primary' }}">
                            الكل
                        </a>
                        <a href="{{ route('admin.file-manager.index', ['location' => $location, 'path' => $path, 'filter' => 'images', 'search' => $search]) }}"
                            class="btn btn-sm {{ $filter === 'images' ? 'btn-primary' : 'btn-outline-primary' }}">
                            صور فقط
                        </a>
                        <a href="{{ route('admin.file-manager.index', ['location' => $location, 'path' => $path, 'filter' => 'documents', 'search' => $search]) }}"
                            class="btn btn-sm {{ $filter === 'documents' ? 'btn-primary' : 'btn-outline-primary' }}">
                            مستندات
                        </a>
                    </div>
                </div>

                <!-- Grid View -->
                <div class="file-grid active" id="gridView">
                    @forelse ($files as $file)
                        <div class="file-item" data-path="{{ $file['path'] }}" data-type="{{ $file['type'] }}"
                            data-name="{{ $file['name'] }}">
                            @if (can_admin('settings_edit'))
                                <input type="checkbox" class="file-item-checkbox" onclick="event.stopPropagation();">
                            @endif

                            <div class="file-actions">
                                @if ($file['type'] === 'file' && ($file['is_image'] ?? false))
                                    <button class="btn btn-sm btn-info preview-btn" title="معاينة"
                                        data-url="{{ $file['url'] }}" onclick="event.stopPropagation();">
                                        <x-lucide-eye width="14" height="14" />
                                    </button>
                                @endif
                                @if (can_admin('settings_edit'))
                                    <button class="btn btn-sm btn-danger delete-btn" title="حذف"
                                        data-path="{{ $file['path'] }}" data-type="{{ $file['type'] }}"
                                        onclick="event.stopPropagation();">
                                        <x-lucide-trash-2 width="14" height="14" />
                                    </button>
                                @endif
                            </div>

                            @if ($file['type'] === 'directory')
                                <a href="{{ route('admin.file-manager.index', ['location' => $location, 'path' => $file['path']]) }}"
                                    style="text-decoration: none; color: inherit;">
                                    <div class="file-icon folder">
                                        <x-lucide-folder width="48" height="48" />
                                    </div>
                                    <div class="file-name" title="{{ $file['name'] }}">{{ $file['name'] }}</div>
                                    <div class="file-meta">{{ $file['files_count'] }} ملفات</div>
                                </a>
                            @else
                                @if ($file['is_image'] ?? false)
                                    <img src="{{ $file['url'] }}" alt="{{ $file['name'] }}" class="file-thumbnail"
                                        onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                    <div class="file-icon image" style="display: none;">
                                        <x-lucide-image width="48" height="48" />
                                    </div>
                                @else
                                    <div class="file-icon">
                                        @svg('lucide-' . $file['icon'], ['width' => 48, 'height' => 48])
                                    </div>
                                @endif
                                <div class="file-name" title="{{ $file['name'] }}">{{ $file['name'] }}</div>
                                <div class="file-meta">{{ $file['size_formatted'] }}</div>
                            @endif
                        </div>
                    @empty
                        <div class="empty-state col-12">
                            <x-lucide-folder-open width="64" height="64" />
                            <h5>لا توجد ملفات</h5>
                            <p>هذا المجلد فارغ</p>
                        </div>
                    @endforelse
                </div>

                <!-- List View -->
                <div class="file-list-view" id="listView">
                    <table class="file-list-table">
                        <thead>
                            <tr>
                                @if (can_admin('settings_edit'))
                                    <th style="width: 40px;">
                                        <input type="checkbox" id="selectAllList">
                                    </th>
                                @endif
                                <th>الاسم</th>
                                <th>الحجم</th>
                                <th>تاريخ التعديل</th>
                                <th>إجراءات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($files as $file)
                                <tr data-path="{{ $file['path'] }}" data-type="{{ $file['type'] }}">
                                    @if (can_admin('settings_edit'))
                                        <td>
                                            <input type="checkbox" class="file-list-checkbox">
                                        </td>
                                    @endif
                                    <td>
                                        @if ($file['type'] === 'directory')
                                            <a
                                                href="{{ route('admin.file-manager.index', ['location' => $location, 'path' => $file['path']]) }}">
                                                <x-lucide-folder style="color: #f59e0b;" width="20" height="20" />
                                                {{ $file['name'] }}
                                            </a>
                                        @else
                                            @svg('lucide-' . $file['icon'], ['width' => 20, 'height' => 20])
                                            {{ $file['name'] }}
                                        @endif
                                    </td>
                                    <td>{{ $file['size_formatted'] }}</td>
                                    <td>{{ $file['modified_formatted'] }}</td>
                                    <td>
                                        @if ($file['type'] === 'file' && ($file['is_image'] ?? false))
                                            <button class="btn btn-sm btn-info preview-btn" title="معاينة"
                                                data-url="{{ $file['url'] }}">
                                                <x-lucide-eye width="14" height="14" />
                                            </button>
                                        @endif
                                        @if (can_admin('settings_edit'))
                                            <button class="btn btn-sm btn-danger delete-btn" title="حذف"
                                                data-path="{{ $file['path'] }}" data-type="{{ $file['type'] }}">
                                                <x-lucide-trash-2 width="14" height="14" />
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-4">
                                        لا توجد ملفات
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Upload Modal -->
    <div class="modal fade" id="uploadModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">رفع ملف</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <form id="uploadForm" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="location" value="{{ $location }}">
                        <input type="hidden" name="path" value="{{ $path }}">
                        <div class="form-group">
                            <label>اختر ملف</label>
                            <input type="file" name="file" class="form-control" required>
                            <small class="text-muted">الحد الأقصى: 10MB</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">إلغاء</button>
                        <button type="submit" class="btn btn-primary">رفع</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- New Folder Modal -->
    <div class="modal fade" id="newFolderModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">مجلد جديد</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <form id="newFolderForm">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="location" value="{{ $location }}">
                        <input type="hidden" name="path" value="{{ $path }}">
                        <div class="form-group">
                            <label>اسم المجلد</label>
                            <input type="text" name="name" class="form-control" required
                                placeholder="أدخل اسم المجلد">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">إلغاء</button>
                        <button type="submit" class="btn btn-primary">إنشاء</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Preview Modal -->
    <div class="modal fade" id="previewModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">معاينة</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <img id="previewImage" src="" class="preview-modal-img" alt="Preview">
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(function() {
            const location = '{{ $location }}';

            // View Toggle
            $('#gridViewBtn').on('click', function() {
                $(this).addClass('active');
                $('#listViewBtn').removeClass('active');
                $('#gridView').addClass('active');
                $('#listView').removeClass('active');
            });

            $('#listViewBtn').on('click', function() {
                $(this).addClass('active');
                $('#gridViewBtn').removeClass('active');
                $('#listView').addClass('active');
                $('#gridView').removeClass('active');
            });

            // Selection
            function updateSelectedCount() {
                const count = $('.file-item-checkbox:checked, .file-list-checkbox:checked').length;
                $('#selectedCount').text(count);
                if (count > 0) {
                    $('#bulkDeleteBtn').show();
                } else {
                    $('#bulkDeleteBtn').hide();
                }
            }

            $('.file-item-checkbox, .file-list-checkbox').on('change', function() {
                $(this).closest('.file-item, tr').toggleClass('selected', this.checked);
                updateSelectedCount();
            });

            $('#selectAllList').on('change', function() {
                $('.file-list-checkbox').prop('checked', this.checked).trigger('change');
            });

            // Delete single file
            $('.delete-btn').on('click', function(e) {
                e.preventDefault();
                const path = $(this).data('path');
                const type = $(this).data('type');

                swal({
                    title: 'هل أنت متأكد؟',
                    text: 'سيتم حذف هذا العنصر نهائياً',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'نعم، احذف',
                    cancelButtonText: 'إلغاء',
                }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            url: '{{ route('admin.file-manager.delete') }}',
                            type: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                location: location,
                                path: path,
                                type: type
                            },
                            success: function(response) {
                                if (!response.err) {
                                    swal('تم!', response.msg, 'success').then(() => {
                                        window.location.reload();
                                    });
                                } else {
                                    swal('خطأ!', response.msg, 'error');
                                }
                            },
                            error: function(xhr) {
                                swal('خطأ!', xhr.responseJSON?.msg ||
                                    'حدث خطأ', 'error');
                            }
                        });
                    }
                });
            });

            // Bulk Delete
            $('#bulkDeleteBtn').on('click', function() {
                const items = [];
                $('.file-item-checkbox:checked, .file-list-checkbox:checked').each(function() {
                    const item = $(this).closest('.file-item, tr');
                    items.push({
                        path: item.data('path'),
                        type: item.data('type')
                    });
                });

                if (items.length === 0) return;

                swal({
                    title: 'هل أنت متأكد؟',
                    text: `سيتم حذف ${items.length} عنصر نهائياً`,
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'نعم، احذف',
                    cancelButtonText: 'إلغاء',
                }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            url: '{{ route('admin.file-manager.bulk-delete') }}',
                            type: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                location: location,
                                items: items
                            },
                            success: function(response) {
                                if (!response.err) {
                                    swal('تم!', response.msg, 'success').then(() => {
                                        window.location.reload();
                                    });
                                } else {
                                    swal('خطأ!', response.msg, 'error');
                                }
                            },
                            error: function(xhr) {
                                swal('خطأ!', xhr.responseJSON?.msg ||
                                    'حدث خطأ', 'error');
                            }
                        });
                    }
                });
            });

            // Upload
            $('#uploadForm').on('submit', function(e) {
                e.preventDefault();
                const formData = new FormData(this);

                $.ajax({
                    url: '{{ route('admin.file-manager.upload') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (!response.err) {
                            $('#uploadModal').modal('hide');
                            swal('تم!', response.msg, 'success').then(() => {
                                window.location.reload();
                            });
                        } else {
                            swal('خطأ!', response.msg, 'error');
                        }
                    },
                    error: function(xhr) {
                        swal('خطأ!', xhr.responseJSON?.msg || 'حدث خطأ', 'error');
                    }
                });
            });

            // New Folder
            $('#newFolderForm').on('submit', function(e) {
                e.preventDefault();
                const formData = $(this).serialize();

                $.ajax({
                    url: '{{ route('admin.file-manager.create-folder') }}',
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        if (!response.err) {
                            $('#newFolderModal').modal('hide');
                            swal('تم!', response.msg, 'success').then(() => {
                                window.location.reload();
                            });
                        } else {
                            swal('خطأ!', response.msg, 'error');
                        }
                    },
                    error: function(xhr) {
                        swal('خطأ!', xhr.responseJSON?.msg || 'حدث خطأ', 'error');
                    }
                });
            });

            // Preview
            $('.preview-btn').on('click', function(e) {
                e.preventDefault();
                const url = $(this).data('url');
                $('#previewImage').attr('src', url);
                $('#previewModal').modal('show');
            });
        });
    </script>
@endsection