@extends('layouts.app', ['path' => 'integrations-settings'])
@section('content')
    @can('ai_assistant.configure')
        <div class="content" data-color="primary">
            <!-- Breadcrumb -->
            <div class="d-md-flex d-block align-items-center justify-content-between page-breadcrumb mb-3">
                <div class="my-auto mb-2">
                    <h2 class="mb-1">Settings</h2>
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}"><i class="ti ti-smart-home"></i></a>
                            </li>
                            <li class="breadcrumb-item">Administration</li>
                            <li class="breadcrumb-item active" aria-current="page">Integrations & Widgets</li>
                        </ol>
                    </nav>
                </div>
                @include('partials.new_alerts')
            </div>

            <div class="row">
                @include('user.settings-sidebar', ['path' => 'integrations-settings'])

                <div class="col-xl-9">
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header d-flex align-items-center justify-content-between flex-wrap row-gap-3">
                            <div>
                                <h5 class="mb-0">Google Drive Integration</h5>
                                <small class="text-muted">Connect and browse your Google Drive files easily.</small>
                            </div>
                            <div class="d-flex align-items-center gap-2">
                                <span id="gStatus" class="badge bg-secondary">Checking...</span>
                                <a id="btnConnectWrapper" href="{{ route('settings.googleDrive.connect') }}">
                                    <button id="btnConnect" class="btn btn-primary d-flex align-items-center gap-2">
                                        Connect Google Drive
                                    </button>
                                </a>
                                <button id="btnFetchRoots"
                                    class="btn btn-outline-primary d-flex align-items-center gap-2 d-none">
                                    Fetch Drive Roots
                                </button>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="row g-3 align-items-start">
                                <!-- Root Items -->
                                <div class="col-lg-5">
                                    <label class="form-label fw-semibold">Drive Root Items</label>
                                    <div id="rootsContainer" class="border rounded p-2 bg-light overflow-auto"
                                        style="min-height: 260px; max-height: 320px;">
                                        <div class="text-muted small">Click “Fetch Drive Roots” to load folders/files.</div>
                                    </div>

                                </div>

                                <!-- Tree Preview -->
                                <div class="col-lg-7">
                                    <label class="form-label fw-semibold">Preview</label>
                                    <div id="treeContainer" class="border rounded p-3 bg-light overflow-auto"
                                        style="min-height: 260px; max-height: 260px;">
                                        <div class="text-muted small">Select a folder or file to see its contents.</div>
                                    </div>
                                    <a id="setVectorStoreRoute">
                                        <button id="selLabel" class="btn btn-primary btn-sm small fw-semibold mt-1"
                                            style="display: none;">
                                        </button>
                                    </a>
                                </div>
                            </div>


                        </div>
                    </div>

                    <!-- Vector Store Status -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header d-flex align-items-center justify-content-between flex-wrap row-gap-3">
                            <div>
                                <h5 class="mb-0">Vector Store</h5>
                                <small class="text-muted">Monitor processing progress and manage embedded files.</small>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <div>
                                    <h6 class="mb-0">Stored files</h6>
                                    <small class="text-muted">Delete, re-upload or add new files to re-build embeddings.</small>
                                </div>
                                <form method="POST" action="{{ route('settings.vector.store') }}" enctype="multipart/form-data"
                                    style="display:inline;" id="vectorUploadForm">
                                    @csrf
                                    <input type="file" name="file" class="d-none" id="vectorUploadInput"
                                        accept=".pdf,.doc,.docx" />
                                    <button id="vectorUploadNewBtn" class="btn btn-sm btn-primary" type="button">
                                        <i class="ti ti-upload me-1"></i> Upload file
                                    </button>
                                </form>

                            </div>

                            @if (!empty($files))
                                <div id="vectorFilesTable" class="table-responsive ">
                                    <table class="table table-sm align-middle mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th>File</th>
                                                <th>Status</th>
                                                <th>Last updated</th>
                                                <th style="width: 180px;">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody id="vectorFilesTbody">
                                            @forelse($files as $file)
                                                <tr>
                                                    <td class="w-50">
                                                        <div class="fw-semibold text-truncate">{{ $file['filename'] }}</div>

                                                        @if (!empty($file['file_size']))
                                                            <div class="small text-muted text-truncate">
                                                                {{ formatBytes($file['file_size']) }}
                                                        @endif

                                                    </td>
                                                    <td>
                                                        <span
                                                            class="badge 
                                                        @if ($file['status'] === 'success') bg-success
                                                        @elseif(in_array($file['status'], ['processing', 'pending'])) bg-warning 
                                                        @elseif(in_array($file['status'], ['failed', 'error'])) bg-danger
                                                        @else bg-secondary @endif">
                                                            {{ ucfirst(str_replace('_', ' ', $file['status'])) }}
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <div class="small text-muted">{{ $file['updated_at'] ?? '—' }}</div>
                                                    </td>
                                                    <td class="text-end">
                                                        <div class="btn-group btn-group-sm">
                                                            <form method="POST"
                                                                action="{{ route('vector.reupload', $file['id']) }}"
                                                                enctype="multipart/form-data" style="display:inline;"
                                                                class="reupload-form">
                                                                @csrf
                                                                <input type="file" name="file"
                                                                    class="d-none reupload-input" accept=".pdf,.doc,.docx" />
                                                                <button type="button"
                                                                    class="btn btn-outline-secondary reupload-btn">
                                                                    <i class="ti ti-refresh me-1"></i> Update
                                                                </button>
                                                            </form>

                                                            {{-- @if ($file['status'] === 'success') --}}
                                                            <a href="{{ route('vector.delete', $file['id']) }}"
                                                                class="btn btn-outline-danger delete-confirm"
                                                                data-form-id="delete-form-{{ $file['id'] }}"
                                                                style="margin-left: 5px;">
                                                                <i class="ti ti-trash me-1"></i> Delete
                                                            </a>

                                                            {{-- @endif --}}
                                                        </div>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="4" class="text-center text-muted">No files found.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>

                                    </table>
                                </div>
                            @else
                                <div id="vectorFilesEmpty" class="text-muted small border rounded p-3 bg-light">
                                    No files have been embedded yet. Select a folder above or upload a file to get started.
                                </div>
                            @endif

                        </div>
                    </div>
                    <div id="fileErrorMessage" class="alert alert-danger d-none mt-2"></div>
                    <input type="file" id="vectorUploadInput" class="d-none"
                        accept=".pdf,.doc,.docx,.txt,.md,.rtf,.csv,.xlsx,.ppt,.pptx">

                    <!-- Chatbot Widget -->
                    <div class="card border-0 shadow-sm">

                    </div>
                </div>
            </div>
        </div>
    @endcan

@endsection

@push('scripts')
    <script>
        const settingsGoogleDriveRoots = "{{ route('settings.googleDrive.roots') }}";
        const settingsGoogleDriveCheck = "{{ route('settings.googleDrive.check') }}";
    </script>
    <script>
        function validateFile(file) {
            const maxSize = 5 * 1024 * 1024; // 5MB
            const allowedTypes = ['.pdf', '.doc', '.docx'];
            const errorDiv = document.getElementById('fileErrorMessage');

            const fileExtension = '.' + file.name.split('.').pop().toLowerCase();

            if (!allowedTypes.includes(fileExtension)) {
                errorDiv.textContent = 'Only PDF, DOC, and DOCX files are allowed';
                errorDiv.classList.remove('d-none');
                setTimeout(() => errorDiv.classList.add('d-none'), 5000);
                return false;
            }

            if (file.size > maxSize) {
                errorDiv.textContent = 'File size must be less than 5MB';
                errorDiv.classList.remove('d-none');
                setTimeout(() => errorDiv.classList.add('d-none'), 5000);
                return false;
            }

            errorDiv.classList.add('d-none');
            return true;
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Upload validation
            document.getElementById('vectorUploadInput').addEventListener('change', function() {
                if (this.files.length > 0 && !validateFile(this.files[0])) {
                    this.value = '';
                }
            });

            // Reupload validation
            document.querySelectorAll('.reupload-btn').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    const form = btn.closest('.reupload-form');
                    const fileInput = form.querySelector('.reupload-input');
                    fileInput.click();

                    fileInput.addEventListener('change', function() {
                        if (fileInput.files.length > 0) {
                            if (validateFile(fileInput.files[0])) {
                                form.submit();
                            } else {
                                fileInput.value = '';
                            }
                        }
                    }, {
                        once: true
                    });
                });
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const uploadBtn = document.getElementById('vectorUploadNewBtn');
            const fileInput = document.getElementById('vectorUploadInput');
            const form = document.getElementById('vectorUploadForm');

            uploadBtn.addEventListener('click', function() {
                fileInput.click();
            });

            fileInput.addEventListener('change', function() {
                if (fileInput.files.length > 0 && validateFile(fileInput.files[0])) {
                    form.submit();
                } else if (fileInput.files.length > 0) {
                    fileInput.value = '';
                }
            });
        });
    </script>


    <script src="{{ asset('assets/js/googleDrive.js') }}"></script>
@endpush