@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        @include('partials.header')
        @include('partials.sidebar')

        <div id="content" class="content">
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('apk.index') }}">APK Management</a></li>
                <li class="breadcrumb-item active">Upload APK</li>
            </ol>

            <h1 class="page-header">Upload New APK</h1>

            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">APK Upload Form</h4>
                </div>
                <div class="panel-body">
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <h6><i class="fa fa-exclamation-triangle"></i> Upload Failed</h6>
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    <form action="{{ route('apk.store') }}" method="POST" enctype="multipart/form-data" id="apkUploadForm">
                        @csrf

                        <!-- File Upload Section -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="apk_file" class="required">APK File</label>
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="apk_file" name="apk_file"
                                            accept=".apk" required>
                                        <label class="custom-file-label" for="apk_file">Choose APK file...</label>
                                    </div>
                                    <small class="form-text text-muted">
                                        <i class="fa fa-info-circle"></i>
                                        Maximum file size: 100MB. Only .apk files are allowed.
                                    </small>
                                    @error('apk_file')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- File Information Display -->
                        <div id="fileInfo" class="card d-none mb-3">
                            <div class="card-body">
                                <h6 class="card-title"><i class="fa fa-file-archive-o"></i> File Information</h6>
                                <div class="row">
                                    <div class="col-md-6">
                                        <p class="mb-1"><strong>Filename:</strong> <span id="fileName">-</span></p>
                                        <p class="mb-1"><strong>File Size:</strong> <span id="fileSize">-</span></p>
                                    </div>
                                    <div class="col-md-6">
                                        <p class="mb-1"><strong>Last Modified:</strong> <span id="fileModified">-</span>
                                        </p>
                                        <p class="mb-1"><strong>Upload Progress:</strong></p>
                                        <div class="progress" style="height: 20px;">
                                            <div id="uploadProgress"
                                                class="progress-bar progress-bar-striped progress-bar-animated"
                                                role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0"
                                                aria-valuemax="100">0%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Version Information -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="version_name" class="required">Version Name</label>
                                    <input type="text" class="form-control" id="version_name" name="version_name"
                                        placeholder="e.g., 1.2.3" value="{{ old('version_name') }}" required>
                                    <small class="form-text text-muted">
                                        Version name as displayed to users (e.g., 1.0.0, 2.1.3, etc.)
                                    </small>
                                    @error('version_name')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea class="form-control" id="description" name="description" rows="4"
                                placeholder="Describe what's new in this version...">{{ old('description') }}</textarea>
                            <small class="form-text text-muted">
                                Optional description of changes, new features, or bug fixes in this version.
                            </small>
                            @error('description')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Security Notice -->
                        <div class="alert alert-warning" role="alert">
                            <h6><i class="fa fa-shield"></i> Security Notice</h6>
                            <p class="mb-2">Please ensure that:</p>
                            <ul class="mb-0">
                                <li>The APK file is from a trusted source</li>
                                <li>You have tested the APK in a safe environment</li>
                                <li>The APK does not contain malicious code</li>
                                <li>You have the necessary permissions to distribute this APK</li>
                            </ul>
                        </div>

                        <!-- Form Actions -->
                        <div class="form-group mb-0">
                            <button type="submit" class="btn btn-custom" id="submitBtn">
                                <i class="fa fa-upload"></i> Upload APK
                            </button>
                            <button type="button" class="btn btn-custom d-none" id="uploadingBtn" disabled>
                                <i class="fa fa-spinner fa-spin"></i> Uploading...
                            </button>
                            <a href="{{ route('apk.index') }}" class="btn btn-custom">
                                <i class="fa fa-arrow-left"></i> Back
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Upload Guidelines Panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Upload Guidelines</h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6><i class="fa fa-check-circle text-success"></i> Best Practices</h6>
                            <ul>
                                <li>Use semantic versioning (e.g., 1.2.3)</li>
                                <li>Provide clear description of changes</li>
                                <li>Test APK thoroughly before uploading</li>
                                <li>Keep APK file size optimized</li>
                                <li>Ensure APK is properly signed</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6><i class="fa fa-exclamation-triangle text-warning"></i> File Requirements</h6>
                            <ul>
                                <li>File must have .apk extension</li>
                                <li>Maximum file size: 100MB</li>
                                <li>File must be a valid Android APK</li>
                                <li>Avoid special characters in filename</li>
                                <li>Version name is required</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
            data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fileInput = document.getElementById('apk_file');
            const fileInfo = document.getElementById('fileInfo');
            const fileName = document.getElementById('fileName');
            const fileSize = document.getElementById('fileSize');
            const fileModified = document.getElementById('fileModified');
            const uploadProgress = document.getElementById('uploadProgress');
            const submitBtn = document.getElementById('submitBtn');
            const uploadingBtn = document.getElementById('uploadingBtn');
            const form = document.getElementById('apkUploadForm');

            // Handle file selection
            fileInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                const label = document.querySelector('label[for="apk_file"]');

                if (file) {
                    // Update file input label
                    label.textContent = file.name;

                    // Validate file
                    if (!validateFile(file)) {
                        return;
                    }

                    // Show file information
                    fileName.textContent = file.name;
                    fileSize.textContent = formatFileSize(file.size);
                    fileModified.textContent = new Date(file.lastModified).toLocaleString();
                    fileInfo.classList.remove('d-none');

                    // Auto-extract version from filename if possible
                    const versionMatch = file.name.match(/(\d+\.\d+\.\d+)/);
                    if (versionMatch && !document.getElementById('version_name').value) {
                        document.getElementById('version_name').value = versionMatch[1];
                    }
                } else {
                    label.textContent = 'Choose APK file...';
                    fileInfo.classList.add('d-none');
                }
            });

            // Handle form submission with progress
            form.addEventListener('submit', function(e) {
                e.preventDefault();

                const file = fileInput.files[0];
                if (!file) {
                    alert('Please select an APK file to upload.');
                    return;
                }

                if (!validateFile(file)) {
                    return;
                }

                // Show uploading state
                submitBtn.classList.add('d-none');
                uploadingBtn.classList.remove('d-none');

                // Create FormData and submit with progress
                const formData = new FormData(form);

                const xhr = new XMLHttpRequest();

                // Track upload progress
                xhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        const percentComplete = (e.loaded / e.total) * 100;
                        uploadProgress.style.width = percentComplete + '%';
                        uploadProgress.textContent = Math.round(percentComplete) + '%';
                        uploadProgress.setAttribute('aria-valuenow', percentComplete);
                    }
                });

                // Handle completion
                xhr.addEventListener('load', function() {
                    if (xhr.status === 200) {
                        // Parse JSON response to check for redirect
                        try {
                            const response = JSON.parse(xhr.responseText);
                            if (response.redirect) {
                                window.location.href = response.redirect;
                            } else {
                                // If no redirect in JSON, assume success and redirect manually
                                window.location.href = '{{ route('apk.index') }}';
                            }
                        } catch (e) {
                            // If response is not JSON, it might be a redirect response
                            window.location.href = '{{ route('apk.index') }}';
                        }
                    } else {
                        handleUploadError('Upload failed. Please try again.');
                    }
                });

                // Handle errors
                xhr.addEventListener('error', function() {
                    handleUploadError('Upload failed due to network error.');
                });

                xhr.addEventListener('timeout', function() {
                    handleUploadError('Upload timed out. Please try again.');
                });

                // Configure and send request
                xhr.open('POST', form.action);
                xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]')
                    .getAttribute('content'));
                xhr.timeout = 300000; // 5 minutes timeout
                xhr.send(formData);
            });

            function validateFile(file) {
                // Check file extension
                if (!file.name.toLowerCase().endsWith('.apk')) {
                    alert('Please select a valid APK file.');
                    return false;
                }

                // Check file size (100MB limit)
                const maxSize = 100 * 1024 * 1024;
                if (file.size > maxSize) {
                    alert('File size exceeds 100MB limit. Please select a smaller file.');
                    return false;
                }

                return true;
            }

            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';

                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));

                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }

            function handleUploadError(message) {
                // Reset UI
                submitBtn.classList.remove('d-none');
                uploadingBtn.classList.add('d-none');

                // Reset progress
                uploadProgress.style.width = '0%';
                uploadProgress.textContent = '0%';
                uploadProgress.setAttribute('aria-valuenow', 0);

                // Show error
                alert(message);
            }
        });

        // Custom file input styling
        document.querySelector('.custom-file-input').addEventListener('change', function(e) {
            const fileName = e.target.files[0]?.name || 'Choose APK file...';
            const label = e.target.nextElementSibling;
            label.textContent = fileName;
        });
    </script>

    <style>
        .required::after {
            content: " *";
            color: red;
        }

        .custom-file-input:focus~.custom-file-label {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .progress {
            background-color: #e9ecef;
        }

        .card {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
        }

        .alert ul {
            padding-left: 1.5rem;
        }
    </style>
@endsection