@extends('layouts.app')

@section('title', 'Gestión de Archivos')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">
                        <i class="fas fa-file-upload text-success"></i>
                        Gestión de Archivos
                    </h4>
                    <div class="btn-group">
                        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#uploadModal">
                            <i class="fas fa-plus"></i> Subir Archivo
                        </button>
                        <button type="button" class="btn btn-info" onclick="loadStatistics()">
                            <i class="fas fa-chart-pie"></i> Estadísticas
                        </button>
                        <button type="button" class="btn btn-warning" onclick="verifyAllFiles()">
                            <i class="fas fa-shield-alt"></i> Verificar Todo
                        </button>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Filtros -->
                    <div class="row mb-3">
                        <div class="col-md-2">
                            <select class="form-control form-control-sm" id="filter-type">
                                <option value="">Todos los tipos</option>
                                <option value="document">Documentos</option>
                                <option value="image">Imágenes</option>
                                <option value="backup">Respaldos</option>
                                <option value="config">Configuración</option>
                                <option value="report">Reportes</option>
                                <option value="other">Otros</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-control form-control-sm" id="filter-category">
                                <option value="">Todas las categorías</option>
                                <option value="contratos">Contratos</option>
                                <option value="pagos">Pagos</option>
                                <option value="sistema">Sistema</option>
                                <option value="reportes">Reportes</option>
                                <option value="backup">Backup</option>
                                <option value="documentos">Documentos</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <input type="date" class="form-control form-control-sm" id="filter-date-from" placeholder="Desde">
                        </div>
                        <div class="col-md-2">
                            <input type="date" class="form-control form-control-sm" id="filter-date-to" placeholder="Hasta">
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control form-control-sm" id="filter-filename" placeholder="Buscar archivo...">
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-sm btn-primary" onclick="applyFilters()">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Tabla de archivos -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover" id="files-table">
                            <thead class="thead-dark">
                                <tr>
                                    <th width="5%">Tipo</th>
                                    <th width="25%">Archivo</th>
                                    <th width="15%">Categoría</th>
                                    <th width="10%">Tamaño</th>
                                    <th width="10%">Estado</th>
                                    <th width="15%">Subido por</th>
                                    <th width="10%">Fecha</th>
                                    <th width="10%">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="files-tbody">
                                @forelse($files as $file)
                                <tr class="file-row" data-type="{{ $file->file_type }}">
                                    <td>
                                        <i class="fas {{ getFileIcon($file->file_type, $file->mime_type) }} text-{{ getFileColor($file->file_type) }}"></i>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div>
                                                <div class="font-weight-bold text-truncate" style="max-width: 200px;" title="{{ $file->original_name }}">
                                                    {{ $file->original_name }}
                                                </div>
                                                <small class="text-muted">{{ $file->file_name }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge badge-{{ getCategoryColor($file->category) }}">
                                            {{ ucfirst($file->category) }}
                                        </span>
                                    </td>
                                    <td>{{ formatBytes($file->file_size) }}</td>
                                    <td>
                                        <span class="badge badge-{{ $file->is_verified ? 'success' : 'warning' }}">
                                            {{ $file->is_verified ? 'Verificado' : 'Pendiente' }}
                                        </span>
                                    </td>
                                    <td>{{ $file->uploadedBy->name ?? 'Sistema' }}</td>
                                    <td>{{ $file->created_at->format('d/m/Y H:i') }}</td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <button type="button" class="btn btn-info" onclick="showFileDetail({{ $file->id }})" title="Ver detalles">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button type="button" class="btn btn-success" onclick="downloadFile({{ $file->id }})" title="Descargar">
                                                <i class="fas fa-download"></i>
                                            </button>
                                            @if(!$file->is_verified)
                                            <button type="button" class="btn btn-warning" onclick="verifyFile({{ $file->id }})" title="Verificar">
                                                <i class="fas fa-shield-alt"></i>
                                            </button>
                                            @endif
                                            @can('file-upload-delete')
                                            <button type="button" class="btn btn-danger" onclick="deleteFile({{ $file->id }})" title="Eliminar">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="8" class="text-center text-muted">
                                        <i class="fas fa-folder-open"></i> No hay archivos disponibles
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Paginación -->
                    @if($files->hasPages())
                    <div class="d-flex justify-content-center">
                        {{ $files->links() }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para subir archivo -->
<div class="modal fade" id="uploadModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-cloud-upload-alt"></i> Subir Archivo
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="upload-form" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="file">Archivo</label>
                        <input type="file" class="form-control-file" id="file" name="file" required>
                        <small class="form-text text-muted">
                            Tamaño máximo: {{ formatBytes(getMaxUploadSize()) }}
                        </small>
                    </div>
                    <div class="form-group">
                        <label for="category">Categoría</label>
                        <select class="form-control" id="category" name="category" required>
                            <option value="">Seleccionar categoría</option>
                            <option value="contratos">Contratos</option>
                            <option value="pagos">Pagos</option>
                            <option value="sistema">Sistema</option>
                            <option value="reportes">Reportes</option>
                            <option value="backup">Backup</option>
                            <option value="documentos">Documentos</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="description">Descripción (opcional)</label>
                        <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success" id="upload-btn">
                        <i class="fas fa-upload"></i> Subir Archivo
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal para detalles del archivo -->
<div class="modal fade" id="fileDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-info-circle"></i> Detalle del Archivo
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="file-detail-content">
                <!-- Contenido del archivo se carga aquí -->
            </div>
        </div>
    </div>
</div>

<!-- Modal de estadísticas -->
<div class="modal fade" id="statisticsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-chart-pie"></i> Estadísticas de Archivos
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="statistics-content">
                <!-- Estadísticas se cargan aquí -->
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('upload-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const uploadBtn = document.getElementById('upload-btn');
    
    uploadBtn.disabled = true;
    uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Subiendo...';
    
    fetch('{{ route("file-uploads.store") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Archivo subido exitosamente');
            $('#uploadModal').modal('hide');
            location.reload();
        } else {
            alert('Error: ' + (data.message || 'Error al subir el archivo'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al subir el archivo');
    })
    .finally(() => {
        uploadBtn.disabled = false;
        uploadBtn.innerHTML = '<i class="fas fa-upload"></i> Subir Archivo';
    });
});

function applyFilters() {
    const type = document.getElementById('filter-type').value;
    const category = document.getElementById('filter-category').value;
    const dateFrom = document.getElementById('filter-date-from').value;
    const dateTo = document.getElementById('filter-date-to').value;
    const filename = document.getElementById('filter-filename').value;
    
    const params = new URLSearchParams();
    if (type) params.append('type', type);
    if (category) params.append('category', category);
    if (dateFrom) params.append('date_from', dateFrom);
    if (dateTo) params.append('date_to', dateTo);
    if (filename) params.append('filename', filename);
    
    window.location.href = '{{ route("file-uploads.index") }}?' + params.toString();
}

function showFileDetail(fileId) {
    fetch(`/file-uploads/${fileId}`, {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const file = data.data;
            const content = `
                <div class="row">
                    <div class="col-md-6">
                        <strong>Nombre original:</strong> ${file.original_name}
                    </div>
                    <div class="col-md-6">
                        <strong>Categoría:</strong> 
                        <span class="badge badge-info">${file.category}</span>
                    </div>
                    <div class="col-md-6">
                        <strong>Tamaño:</strong> ${formatBytesJs(file.file_size)}
                    </div>
                    <div class="col-md-6">
                        <strong>Tipo MIME:</strong> ${file.mime_type}
                    </div>
                    <div class="col-md-6">
                        <strong>Estado:</strong> 
                        <span class="badge badge-${file.is_verified ? 'success' : 'warning'}">
                            ${file.is_verified ? 'Verificado' : 'Pendiente'}
                        </span>
                    </div>
                    <div class="col-md-6">
                        <strong>Subido por:</strong> ${file.uploaded_by ? file.uploaded_by.name : 'Sistema'}
                    </div>
                    <div class="col-12 mt-3">
                        <strong>Descripción:</strong>
                        <p class="bg-light p-2 rounded">${file.description || 'Sin descripción'}</p>
                    </div>
                    <div class="col-md-6">
                        <strong>Hash MD5:</strong>
                        <code>${file.file_hash}</code>
                    </div>
                    <div class="col-md-6">
                        <strong>Fecha:</strong> ${new Date(file.created_at).toLocaleString()}
                    </div>
                </div>
            `;
            document.getElementById('file-detail-content').innerHTML = content;
            $('#fileDetailModal').modal('show');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al cargar el detalle del archivo');
    });
}

function downloadFile(fileId) {
    window.open(`/file-uploads/${fileId}/download`, '_blank');
}

function verifyFile(fileId) {
    if (confirm('¿Está seguro de verificar este archivo?')) {
        fetch(`/file-uploads/${fileId}/verify`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Archivo verificado exitosamente');
                location.reload();
            } else {
                alert('Error: ' + (data.message || 'Error al verificar el archivo'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al verificar el archivo');
        });
    }
}

function deleteFile(fileId) {
    if (confirm('¿Está seguro de eliminar este archivo? Esta acción no se puede deshacer.')) {
        fetch(`/file-uploads/${fileId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Archivo eliminado exitosamente');
                location.reload();
            } else {
                alert('Error: ' + (data.message || 'Error al eliminar el archivo'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al eliminar el archivo');
        });
    }
}

function loadStatistics() {
    fetch('/file-uploads/statistics', {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const stats = data.data;
            const content = `
                <div class="row">
                    <div class="col-md-4 text-center">
                        <h3 class="text-primary">${stats.total_files}</h3>
                        <p>Total de Archivos</p>
                    </div>
                    <div class="col-md-4 text-center">
                        <h3 class="text-success">${formatBytesJs(stats.total_size)}</h3>
                        <p>Espacio Utilizado</p>
                    </div>
                    <div class="col-md-4 text-center">
                        <h3 class="text-warning">${stats.unverified}</h3>
                        <p>Sin Verificar</p>
                    </div>
                </div>
                <hr>
                <h6>Por Categoría:</h6>
                <div class="row">
                    ${Object.entries(stats.by_category).map(([category, count]) => `
                        <div class="col-md-4 text-center">
                            <h4>${count}</h4>
                            <p>${category}</p>
                        </div>
                    `).join('')}
                </div>
            `;
            document.getElementById('statistics-content').innerHTML = content;
            $('#statisticsModal').modal('show');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al cargar las estadísticas');
    });
}

function verifyAllFiles() {
    if (confirm('¿Verificar todos los archivos sin verificar? Esto puede tomar tiempo.')) {
        fetch('/file-uploads/verify-all', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(`Verificación completada. ${data.data.verified} archivos verificados.`);
                location.reload();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al verificar los archivos');
        });
    }
}

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

@php
function getFileIcon($type, $mimeType) {
    $icons = [
        'document' => 'fa-file-alt',
        'image' => 'fa-file-image',
        'backup' => 'fa-database',
        'config' => 'fa-cog',
        'report' => 'fa-chart-bar'
    ];
    
    if (isset($icons[$type])) {
        return $icons[$type];
    }
    
    if (strpos($mimeType, 'image/') === 0) return 'fa-file-image';
    if (strpos($mimeType, 'text/') === 0) return 'fa-file-alt';
    if (strpos($mimeType, 'application/pdf') === 0) return 'fa-file-pdf';
    
    return 'fa-file';
}

function getFileColor($type) {
    $colors = [
        'document' => 'primary',
        'image' => 'success',
        'backup' => 'warning',
        'config' => 'info',
        'report' => 'danger'
    ];
    return $colors[$type] ?? 'secondary';
}

function getCategoryColor($category) {
    $colors = [
        'contratos' => 'primary',
        'pagos' => 'success',
        'sistema' => 'warning',
        'reportes' => 'info',
        'backup' => 'danger',
        'documentos' => 'secondary'
    ];
    return $colors[$category] ?? 'dark';
}

function formatBytes($bytes, $precision = 2) {
    $units = array('B', 'KB', 'MB', 'GB', 'TB');
    
    for ($i = 0; $bytes > 1024 && $i < count($units) - 1; $i++) {
        $bytes /= 1024;
    }
    
    return round($bytes, $precision) . ' ' . $units[$i];
}

function getMaxUploadSize() {
    return min(
        ini_get('upload_max_filesize'),
        ini_get('post_max_size'),
        ini_get('memory_limit')
    );
}
@endphp