@extends('layouts.simple.master')

@section('title', trans(app()->getLocale() . '.file_manager'))

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/prism.css') }}">
    <style>
        .file-type-link.active {
            background-color: #f8f9fa;
            border-left: 3px solid #007bff;
        }
        .file-item {
            cursor: pointer;
            transition: transform 0.2s;
        }
        .file-item:hover {
            transform: translateY(-2px);
        }
    </style>
@endsection

@section('main_content')
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-sm-6">
                    <h3>{{ trans(app()->getLocale() . '.file_manager') }}</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">
                            <svg class="stroke-icon">
                                <use href="{{ asset('assets/svg/icon-sprite.svg#stroke-home') }}"></use>
                            </svg>
                        </a></li>
                        <li class="breadcrumb-item">{{ trans(app()->getLocale() . '.apps') }}</li>
                        <li class="breadcrumb-item active">{{ trans(app()->getLocale() . '.file_manager') }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row main-file-sidebar">
            <div class="col-xl-3 box-col-6 pe-0 xl-4">
                <div class="md-sidebar">
                    <a class="btn btn-primary md-sidebar-toggle" href="#!">{{ trans(app()->getLocale() . '.file_filter') }}</a>
                    <div class="md-sidebar-aside job-left-aside custom-scrollbar">
                        <div class="file-sidebar">
                            <div class="card">
                                <div class="card-body">
                                    <div class="common-sort-card">
                                        <h5 class="mb-3">{{ trans(app()->getLocale() . '.sort_by_file_type') }}</h5>
                                        <ul class="files-left-icons file-type-icons">
                                            <li>
                                                <a href="{{ route('admin.file-manager.index', ['type' => 'all', 'folder' => $folder]) }}"
                                                   class="file-type-link {{ $type == 'all' ? 'active' : '' }}">
                                                    <div>
                                                        <svg>
                                                            <use href="{{ asset('assets/svg/icon-sprite.svg#folder-structure') }}"></use>
                                                        </svg>
                                                        <span>{{ trans(app()->getLocale() . '.all_files') }}<span>({{ $allCount }})</span></span>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('admin.file-manager.index', ['type' => 'pdf', 'folder' => $folder]) }}"
                                                   class="file-type-link {{ $type == 'pdf' ? 'active' : '' }}">
                                                    <div>
                                                        <svg>
                                                            <use href="{{ asset('assets/svg/icon-sprite.svg#pdf-file') }}"></use>
                                                        </svg>
                                                        <span>{{ trans(app()->getLocale() . '.pdf') }}<span>({{ $pdfCount }})</span></span>
                                                    </div>
                                                    <span>{{ number_format($pdfSize, 2) }} MB</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('admin.file-manager.index', ['type' => 'image', 'folder' => $folder]) }}"
                                                   class="file-type-link {{ $type == 'image' ? 'active' : '' }}">
                                                    <div>
                                                        <svg>
                                                            <use href="{{ asset('assets/svg/icon-sprite.svg#image-file') }}"></use>
                                                        </svg>
                                                        <span>{{ trans(app()->getLocale() . '.images') }}<span>({{ $imageCount }})</span></span>
                                                    </div>
                                                    <span>{{ number_format($imageSize, 2) }} MB</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('admin.file-manager.index', ['type' => 'video', 'folder' => $folder]) }}"
                                                   class="file-type-link {{ $type == 'video' ? 'active' : '' }}">
                                                    <div>
                                                        <svg>
                                                            <use href="{{ asset('assets/svg/icon-sprite.svg#sql-file') }}"></use>
                                                        </svg>
                                                        <span>{{ trans(app()->getLocale() . '.video') }}<span>({{ $videoCount }})</span></span>
                                                    </div>
                                                    <span>{{ number_format($videoSize, 2) }} MB</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-9 col-md-12 box-col-12 xl-66">
                <div class="card">
                    <div class="card-header">
                        <h5>
                            @if($type == 'all')
                                {{ trans(app()->getLocale() . '.all_files') }}
                            @elseif($type == 'pdf')
                                {{ trans(app()->getLocale() . '.pdf_files') }}
                            @elseif($type == 'image')
                                {{ trans(app()->getLocale() . '.image_files') }}
                            @elseif($type == 'video')
                                {{ trans(app()->getLocale() . '.video_files') }}
                            @endif
                        </h5>
                        <p class="mb-0 f-light">{{ trans(app()->getLocale() . '.total') }}: {{ $files->count() }} {{ $files->count() == 1 ? trans(app()->getLocale() . '.file') : trans(app()->getLocale() . '.files') }}, {{ count($folders) }} {{ count($folders) == 1 ? trans(app()->getLocale() . '.folder') : trans(app()->getLocale() . '.folders') }}</p>
                    </div>
                    <div class="card-body">
                        <div class="common-file-manager">
                            <div class="filemanger">
                                {{-- Navigation Controls --}}
                                <div class="top-folder-path mb-3">
                                    <div class="path-action-btns">
                                        <button id="backwardBtn" onclick="navigateBack()" disabled>
                                            <i class="fa-solid fa-arrow-left"></i>
                                        </button>
                                        <button id="forwardBtn" onclick="navigateForward()" disabled>
                                            <i class="fa-solid fa-arrow-right"></i>
                                        </button>
                                        <button onclick="goToRoot()">
                                            <i class="fa-solid fa-house"></i>
                                        </button>
                                    </div>
                                    <div class="folder-path-write">
                                        <nav aria-label="breadcrumb" id="breadcrumbNav">
                                            <ol class="breadcrumb mb-0">
                                                @foreach($breadcrumbs as $index => $crumb)
                                                    <li class="breadcrumb-item {{ $index === count($breadcrumbs) - 1 ? 'active' : '' }}">
                                                        @if($index === count($breadcrumbs) - 1)
                                                            {{ $crumb['name'] }}
                                                        @else
                                                            <a href="javascript:void(0)" onclick="loadFolder('{{ $crumb['path'] }}')">
                                                                {{ $crumb['name'] }}
                                                            </a>
                                                        @endif
                                                    </li>
                                                @endforeach
                                            </ol>
                                        </nav>
                                    </div>
                                </div>

                                <div class="file-manager-grid block-wrapper" id="fileGrid" style="{{ count($folders) > 0 || ($folder && $files->count() > 0) ? '' : 'display: none;' }}">
                                    {{-- Show Folders First --}}
                                    @foreach($folders as $folderItem)
                                        <div class="folder file-item"
                                             data-folder-path="{{ $folderItem['path'] }}"
                                             ondblclick="loadFolder('{{ $folderItem['path'] }}')"
                                             onclick="selectFolder(this)">
                                            <div class="folder-icon-container">
                                                <div class="folder-icon"></div>
                                            </div>
                                            <div class="common-space">
                                                <p class="folder-name">{{ $folderItem['name'] }}</p>
                                                <span>{{ $folderItem['size'] }} MB</span>
                                                <small class="text-muted d-block">{{ $folderItem['file_count'] }} {{ $folderItem['file_count'] == 1 ? trans(app()->getLocale() . '.file') : trans(app()->getLocale() . '.files') }}</small>
                                            </div>
                                        </div>
                                    @endforeach

                                    {{-- Show Files (only if not at root) --}}
                                    @if($folder)
                                        @foreach($files as $file)
                                        @php
                                            $sizeInMB = is_numeric($file->size) ? round((float)$file->size / (1024 * 1024), 2) : 0;
                                            $isImage = in_array($file->mime_type, ['image/jpeg', 'image/png', 'image/gif', 'image/webp']);
                                            $isPdf = $file->mime_type == 'application/pdf';
                                            $isVideo = in_array($file->mime_type, ['video/mp4', 'video/quicktime', 'video/x-msvideo', 'video/x-ms-wmv']);
                                        @endphp

                                        <div class="file file-item" onclick="window.open('{{ $file->getFileUrl() }}', '_blank')">
                                            @if($isImage)
                                                <div class="image-preview">
                                                    <img class="img-fluid" src="{{ $file->getFileUrl() }}" alt="{{ $file->name }}" style="max-height: 150px; object-fit: cover;">
                                                </div>
                                            @elseif($isPdf)
                                                <div class="doc-icon-container">
                                                    <div class="doc-icon">
                                                        <p>PDF</p>
                                                    </div>
                                                </div>
                                            @elseif($isVideo)
                                                <div class="doc-icon-container">
                                                    <div class="doc-icon" style="background-color: #dc3545;">
                                                        <p>VID</p>
                                                    </div>
                                                </div>
                                            @else
                                                <div class="doc-icon-container">
                                                    <div class="doc-icon">
                                                        <p>{{ strtoupper($file->ext ?? 'FILE') }}</p>
                                                    </div>
                                                </div>
                                            @endif
                                            <div class="common-space">
                                                <p class="file-name" title="{{ $file->name }}">{{ Str::limit($file->name, 20) }}</p>
                                                <span>{{ $sizeInMB }} MB</span>
                                                <small class="text-muted d-block">{{ $file->created_at }}</small>
                                            </div>
                                        </div>
                                        @endforeach
                                    @endif
                                </div>

                                <div class="folderEmpty" id="emptyFolder" style="{{ count($folders) > 0 || ($folder && $files->count() > 0) ? 'display: none;' : '' }}">
                                    <svg>
                                        <use href="{{ asset('assets/svg/icon-sprite.svg#folder-empty') }}"></use>
                                    </svg>
                                    <h5>{{ trans(app()->getLocale() . '.this_folder_is_empty') }}</h5>
                                    <p class="text-muted">
                                        @if(!$folder)
                                            {{ trans(app()->getLocale() . '.there_are_no_folders_here') }}
                                        @else
                                            {{ trans(app()->getLocale() . '.there_are_no_files_or_folders_here') }}
                                        @endif
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let currentType = '{{ $type }}';
        let currentFolder = '{{ $folder }}';
        let historyStack = [];
        let historyIndex = -1;

        // Initialize history
        historyStack.push({ type: currentType, folder: currentFolder });
        historyIndex = 0;
        updateNavigationButtons();

        // Load folder via AJAX
        function loadFolder(folderPath) {
            const newFolder = folderPath || '';

            // Only add to history if folder changed
            if (newFolder !== currentFolder) {
                currentFolder = newFolder;
                // Add to history
                historyStack = historyStack.slice(0, historyIndex + 1);
                historyStack.push({ type: currentType, folder: currentFolder });
                historyIndex = historyStack.length - 1;
                updateNavigationButtons();
            } else {
                currentFolder = newFolder;
            }

            // Update URL without reload
            const url = new URL(window.location);
            url.searchParams.set('type', currentType);
            if (currentFolder) {
                url.searchParams.set('folder', currentFolder);
            } else {
                url.searchParams.delete('folder');
            }
            window.history.pushState({ type: currentType, folder: currentFolder }, '', url);

            // Load contents via AJAX
            fetch(`{{ route('admin.file-manager.contents') }}?type=${currentType}&folder=${encodeURIComponent(currentFolder)}`)
                .then(response => response.json())
                .then(data => {
                    updateFileGrid(data);
                    updateBreadcrumbs(data.breadcrumbs);
                    updateFileCount(data.file_count, data.folder_count);
                })
                .catch(error => {
                    console.error('Error loading folder:', error);
                });
        }

        // Update file grid
        function updateFileGrid(data) {
            const grid = document.getElementById('fileGrid');
            const emptyFolder = document.getElementById('emptyFolder');

            // At root level, only show folders
            const isRoot = !currentFolder;

            if (data.folders.length === 0 && (isRoot || data.files.length === 0)) {
                if (grid) grid.style.display = 'none';
                if (emptyFolder) {
                    emptyFolder.style.display = 'block';
                    const typeText = currentType === 'all' ? '' : currentType;
                    emptyFolder.querySelector('p').textContent = isRoot
                        ? '{{ trans(app()->getLocale() . ".there_are_no_folders_here") }}'
                        : '{{ trans(app()->getLocale() . ".there_are_no_files_or_folders_here") }}';
                }
                return;
            }

            if (emptyFolder) emptyFolder.style.display = 'none';
            if (grid) grid.style.display = 'grid';

            let html = '';

            // Add folders
            data.folders.forEach(folder => {
                html += `
                    <div class="folder file-item"
                         data-folder-path="${folder.path}"
                         ondblclick="loadFolder('${folder.path}')"
                         onclick="selectFolder(this)">
                        <div class="folder-icon-container">
                            <div class="folder-icon"></div>
                        </div>
                        <div class="common-space">
                            <p class="folder-name">${folder.name}</p>
                            <span>${folder.size} MB</span>
                            <small class="text-muted d-block">${folder.file_count} ${folder.file_count == 1 ? '{{ trans(app()->getLocale() . ".file") }}' : '{{ trans(app()->getLocale() . ".files") }}'}</small>
                        </div>
                    </div>
                `;
            });

            // Add files (only if not at root level)
            if (!isRoot) {
                data.files.forEach(file => {
                let fileIcon = '';
                if (file.is_image) {
                    fileIcon = `<div class="image-preview"><img class="img-fluid" src="${file.url}" alt="${file.name}" style="max-height: 150px; object-fit: cover;"></div>`;
                } else if (file.is_pdf) {
                    fileIcon = `<div class="doc-icon-container"><div class="doc-icon"><p>PDF</p></div></div>`;
                } else if (file.is_video) {
                    fileIcon = `<div class="doc-icon-container"><div class="doc-icon" style="background-color: #dc3545;"><p>VID</p></div></div>`;
                } else {
                    fileIcon = `<div class="doc-icon-container"><div class="doc-icon"><p>${(file.ext || 'FILE').toUpperCase()}</p></div></div>`;
                }

                html += `
                    <div class="file file-item" onclick="window.open('${file.url}', '_blank')">
                        ${fileIcon}
                        <div class="common-space">
                            <p class="file-name" title="${file.name}">${file.name.length > 20 ? file.name.substring(0, 20) + '...' : file.name}</p>
                            <span>${file.size} MB</span>
                            <small class="text-muted d-block">${file.created_at}</small>
                        </div>
                    </div>
                `;
                });
            }

            if (grid) grid.innerHTML = html;
        }

        // Update breadcrumbs
        function updateBreadcrumbs(breadcrumbs) {
            const nav = document.getElementById('breadcrumbNav');
            if (!nav) return;

            let html = '<ol class="breadcrumb mb-0">';
            breadcrumbs.forEach((crumb, index) => {
                const isActive = index === breadcrumbs.length - 1;
                html += `<li class="breadcrumb-item ${isActive ? 'active' : ''}">`;
                if (isActive) {
                    html += crumb.name;
                } else {
                    html += `<a href="javascript:void(0)" onclick="loadFolder('${crumb.path}')">${crumb.name}</a>`;
                }
                html += '</li>';
            });
            html += '</ol>';
            nav.innerHTML = html;
        }

        // Update file count
        function updateFileCount(fileCount, folderCount) {
            const header = document.querySelector('.card-header p');
            if (header) {
                const fileText = fileCount == 1 ? '{{ trans(app()->getLocale() . ".file") }}' : '{{ trans(app()->getLocale() . ".files") }}';
                const folderText = folderCount == 1 ? '{{ trans(app()->getLocale() . ".folder") }}' : '{{ trans(app()->getLocale() . ".folders") }}';
                header.textContent = `{{ trans(app()->getLocale() . ".total") }}: ${fileCount} ${fileText}, ${folderCount} ${folderText}`;
            }
        }

        // Navigation functions
        function navigateBack() {
            if (historyIndex > 0) {
                historyIndex--;
                const state = historyStack[historyIndex];
                currentType = state.type;
                currentFolder = state.folder;
                loadFolder(currentFolder);
            }
        }

        function navigateForward() {
            if (historyIndex < historyStack.length - 1) {
                historyIndex++;
                const state = historyStack[historyIndex];
                currentType = state.type;
                currentFolder = state.folder;
                loadFolder(currentFolder);
            }
        }

        function goToRoot() {
            loadFolder('');
        }

        function selectFolder(element) {
            // Visual feedback for single click
            document.querySelectorAll('.folder').forEach(f => f.classList.remove('selected'));
            element.classList.add('selected');
        }

        function updateNavigationButtons() {
            document.getElementById('backwardBtn').disabled = historyIndex <= 0;
            document.getElementById('forwardBtn').disabled = historyIndex >= historyStack.length - 1;
        }

        // Handle browser back/forward
        window.addEventListener('popstate', function(event) {
            if (event.state) {
                currentType = event.state.type;
                currentFolder = event.state.folder;
                loadFolder(currentFolder);
            }
        });

        // File type filter links
        document.querySelectorAll('.file-type-link').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const href = this.getAttribute('href');
                const url = new URL(href, window.location.origin);
                currentType = url.searchParams.get('type') || 'all';

                // Update active state
                document.querySelectorAll('.file-type-link').forEach(l => l.classList.remove('active'));
                this.classList.add('active');

                // Reset history for new filter
                historyStack = [{ type: currentType, folder: currentFolder }];
                historyIndex = 0;
                updateNavigationButtons();

                // Reload folder with new type
                loadFolder(currentFolder);
            });
        });

        // Add CSS for selected folder
        const style = document.createElement('style');
        style.textContent = `
            .folder.selected {
                background-color: #e7f3ff;
                border: 2px solid #007bff;
            }
            .path-action-btns button {
                margin-right: 5px;
                padding: 8px 12px;
                border: 1px solid #ddd;
                background: white;
                cursor: pointer;
                border-radius: 4px;
            }
            .path-action-btns button:hover:not(:disabled) {
                background-color: #f8f9fa;
            }
            .path-action-btns button:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }
        `;
        document.head.appendChild(style);
    </script>
@endsection