{% extends "base/layouts.html" %}

{% block content %}
<div class="flex flex-col h-screen bg-white dark:bg-neutral-900">
    <!-- Fixed Connection Header -->
    <div class="p-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
                <i class="fa-solid fa-share-nodes text-neutral-500 dark:text-neutral-400"></i>
                <h2 class="text-sm font-semibold text-neutral-900 dark:text-white">SMB Browser</h2>
            </div>
            <div class="flex items-center gap-2">
                <!-- Add this button before the connect form -->
                <button id="toggle-downloads" type="button" 
                    class="whitespace-nowrap px-3 py-1.5 text-sm font-medium text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white border border-neutral-200 dark:border-neutral-700 rounded-md hover:bg-neutral-50 dark:hover:bg-neutral-700">
                    <i class="fas fa-download fa-sm mr-1"></i>
                    Downloads
                </button>
                <!-- Connect As Form (initially hidden) -->
                <div id="connect-as-form" class="hidden flex items-center gap-2">
                    <input type="text" id="smb-username" 
                        placeholder="domain\username" 
                        class="rounded-md border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-sm text-neutral-900 dark:text-white dark:border-neutral-700 dark:bg-neutral-800">
                    <input type="password" id="smb-password" 
                        placeholder="Password" 
                        class="rounded-md border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-sm text-neutral-900 dark:text-white dark:border-neutral-700 dark:bg-neutral-800">
                </div>

                <input type="text" id="smb-computer" 
                    placeholder="Enter computer name or IP" 
                    class="w-64 rounded-md border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-sm text-neutral-900 dark:text-white dark:border-neutral-700 dark:bg-neutral-800">
                
                <button id="smb-connect-as-button" type="button" 
                    class="whitespace-nowrap px-3 py-1.5 text-sm font-medium text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white border border-neutral-200 dark:border-neutral-700 rounded-md hover:bg-neutral-50 dark:hover:bg-neutral-700">
                    <i class="fas fa-user-shield fa-sm mr-1"></i>
                    Connect As
                </button>

                <button id="smb-connect-button" type="button" 
                    class="whitespace-nowrap px-3 py-1.5 text-sm font-medium text-white dark:text-black bg-neutral-900 dark:bg-yellow-500 rounded-md hover:bg-neutral-800 dark:hover:bg-yellow-600">
                    <i class="fas fa-plug fa-sm mr-1"></i>
                    Connect
                </button>

                <!-- Add refresh button -->
                <button id="smb-refresh-button" type="button" 
                    class="whitespace-nowrap px-3 py-1.5 text-sm font-medium text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white border border-neutral-200 dark:border-neutral-700 rounded-md hover:bg-neutral-50 dark:hover:bg-neutral-700">
                    <i class="fas fa-sync-alt fa-sm"></i>
                </button>
            </div>
        </div>
        <div id="smb-connection-status" class="mt-2 text-sm"></div>
    </div>

    <!-- Fixed Tabs and Headers -->
    <div class="bg-white dark:bg-neutral-900">
        <!-- PC Tabs -->
        <div class="border-b border-neutral-200 dark:border-neutral-700">
            <div id="pc-tabs" class="flex overflow-x-auto scrollbar-thin">
                <!-- Tabs will be dynamically added here -->
            </div>
        </div>

        <!-- Table Headers -->
        <div class="px-4 py-1 border-b border-neutral-200 dark:border-neutral-700 grid grid-cols-12">
            <div class="col-span-6 text-sm font-medium text-neutral-500 dark:text-neutral-400">Name</div>
            <div class="col-span-1 text-sm font-medium text-neutral-500 dark:text-neutral-400">Size</div>
            <div class="col-span-2 text-sm font-medium text-neutral-500 dark:text-neutral-400">Created</div>
            <div class="col-span-2 text-sm font-medium text-neutral-500 dark:text-neutral-400">Modified</div>
            <div class="col-span-1 text-sm font-medium text-neutral-500 dark:text-neutral-400 text-right">Actions</div>
        </div>
    </div>

    <!-- Scrollable Content Area -->
    <div class="flex-1 min-h-0"> <!-- min-h-0 is important for nested flex scroll -->
        <div id="pc-views" class="h-full overflow-y-auto scrollbar p-2">
            <!-- Each PC view will be dynamically added here -->
        </div>
    </div>

    <!-- File Viewer Panel -->
    <div id="file-viewer-panel" class="fixed top-0 right-0 bottom-0 w-1/2 bg-white dark:bg-neutral-900 border-l border-neutral-300 dark:border-neutral-700 shadow-2xl shadow-neutral-950/10 dark:shadow-black/50 transform transition-transform duration-300 ease-in-out translate-x-full z-50 hidden">
        <div class="flex flex-col h-full">
            <!-- Header -->
            <div class="flex items-center justify-between gap-2 p-4 border-b sticky top-0 bg-white dark:bg-neutral-900 z-10 border-neutral-200 dark:border-neutral-700">
                <div class="flex items-center gap-2 min-w-0">
                    <i id="file-viewer-icon" class="fas fa-file-alt text-blue-500 dark:text-yellow-500"></i>
                    <h2 id="file-viewer-title" class="text-lg font-semibold text-neutral-900 dark:text-white truncate">File Content</h2>
                </div>
                <div class="flex items-center gap-2">
                    <button id="file-viewer-download" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200" title="Download">
                        <i class="fas fa-download"></i>
                    </button>
                    <button id="close-file-viewer" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>

            <!-- Content -->
            <div class="flex-1 overflow-auto relative">
                <!-- Loading Spinner -->
                <div id="file-viewer-spinner" class="hidden absolute inset-0 bg-neutral-900/50 flex items-center justify-center">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
                </div>

                <!-- Image View -->
                <div id="image-viewer" class="hidden h-full flex items-center justify-center p-4 bg-neutral-100 dark:bg-neutral-800">
                    <img id="image-content" class="max-w-full max-h-full object-contain" alt="File preview">
                </div>

                <!-- PDF View -->
                <div id="pdf-viewer" class="hidden h-full flex flex-col">
                    <div class="flex items-center justify-between p-2 border-b border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900">
                        <div class="flex items-center gap-2">
                            <button id="pdf-prev" class="px-2 py-1 text-sm rounded text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <span id="pdf-page-num" class="text-sm text-neutral-600 dark:text-neutral-300">Page 1 of 1</span>
                            <button id="pdf-next" class="px-2 py-1 text-sm rounded text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                        <div class="flex items-center gap-2">
                            <button id="pdf-zoom-out" class="px-2 py-1 text-sm rounded text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700">
                                <i class="fas fa-search-minus"></i>
                            </button>
                            <span id="pdf-zoom-level" class="text-sm text-neutral-600 dark:text-neutral-300">100%</span>
                            <button id="pdf-zoom-in" class="px-2 py-1 text-sm rounded text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700">
                                <i class="fas fa-search-plus"></i>
                            </button>
                        </div>
                    </div>
                    <div id="pdf-container" class="flex-1 overflow-auto bg-white dark:bg-neutral-800 p-4">
                        <canvas id="pdf-canvas" class="mx-auto shadow-lg"></canvas>
                    </div>
                </div>

                <!-- Text View -->
                <div id="text-viewer" class="hidden">
                    <pre id="text-content" class="p-4 font-mono text-sm text-neutral-900 dark:text-white whitespace-pre-wrap"></pre>
                </div>
            </div>

            <!-- Footer -->
            <div id="file-viewer-footer" class="p-4 border-t border-neutral-200 dark:border-neutral-700">
                <div class="flex items-center justify-between text-sm text-neutral-500 dark:text-neutral-400">
                    <span id="file-size">--</span>
                    <span id="file-type">--</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Downloads Panel -->
    <div id="downloads-panel" class="fixed top-0 right-0 bottom-0 w-96 bg-white dark:bg-neutral-900 border-l border-neutral-300 dark:border-neutral-700 shadow-2xl shadow-neutral-950/10 dark:shadow-black/50 transform transition-transform duration-300 ease-in-out translate-x-full z-50 hidden">
        <div class="flex flex-col h-full">
            <!-- Header -->
            <div class="flex items-center justify-between gap-2 p-4 border-b sticky top-0 bg-white dark:bg-neutral-900 z-10 border-neutral-200 dark:border-neutral-700">
                <div class="flex items-center gap-2">
                    <i class="fas fa-download text-blue-500 dark:text-yellow-500"></i>
                    <h2 class="text-lg font-semibold text-neutral-900 dark:text-white">Downloads</h2>
                </div>
                <button id="close-downloads-panel" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- Downloads List -->
            <div class="flex-1 overflow-auto p-4 scrollbar">
                <div id="downloads-list" class="space-y-4">
                    <!-- Downloads will be dynamically added here -->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/smb.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
{% endblock %}
