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

{% block title %}{% if current_path %}{{ current_path.split('/')[-1] }} - Retoor's Cloud Solutions{% else %}My Files - Retoor's Cloud Solutions{% endif %}{% endblock %}

{% block dashboard_head %}
    <link rel="stylesheet" href="/static/css/components/file_browser.css">
{% endblock %}

{% block page_title %}{% if current_path %}{{ current_path.split('/')[-1] }}{% else %}My Files{% endif %}{% endblock %}

{% block dashboard_actions %}
    <button class="btn-primary" id="new-folder-btn">+ New</button>
    <button class="btn-outline" id="upload-btn">Upload</button>
    <button class="btn-outline" id="download-selected-btn" disabled>⬇️</button>
    <button class="btn-outline" id="share-selected-btn" disabled>🔗</button>
    <button class="btn-outline" id="delete-selected-btn" disabled>🗑️</button>
{% endblock %}

{% block dashboard_content %}

        {% if success_message %}
        <div class="alert alert-success">
            {{ success_message }}
        </div>
        {% endif %}

        {% if error_message %}
        <div class="alert alert-error">
            {{ error_message }}
        </div>
        {% endif %}

        <input type="text" class="file-search-bar" placeholder="Search your files..." id="search-bar">

        <div class="file-list-table">
            <table>
                <thead>
                    <tr>
                        <th><input type="checkbox" id="select-all"></th>
                        <th>Name</th>
                        <th>Owner</th>
                        <th>Last Modified</th>
                        <th>Size</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="file-list-body">
                    {% if files %}
                        {% for item in files %}
                        <tr data-path="{{ item.path }}" data-is-dir="{{ item.is_dir }}">
                            <td><input type="checkbox" class="file-checkbox" data-path="{{ item.path }}" data-is-dir="{{ item.is_dir }}"></td>
                            <td>
                                {% if item.is_dir %}
                                    <img src="/static/images/icon-families.svg" alt="Folder Icon" class="file-icon">
                                    <a href="/files?path={{ item.path }}">{{ item.name }}</a>
                                {% else %}
                                    <img src="/static/images/icon-professionals.svg" alt="File Icon" class="file-icon">
                                    {% if item.is_editable %}
                                        <a href="/editor?path={{ item.path }}">{{ item.name }}</a>
                                    {% elif item.is_viewable %}
                                        <a href="/viewer?path={{item.path}}">{{ item.name }}</a>
                                    {% else %}
                                        {{ item.name }}
                                    {% endif %}
                                {% endif %}
                            </td>
                            <td>{{ user.email }}</td>
                            <td>{{ item.last_modified[:10] }}</td>
                            <td>
                                {% if item.is_dir %}
                                    --
                                {% else %}
                                    {{ (item.size / 1024 / 1024)|round(2) }} MB
                                {% endif %}
                            </td>
                            <td>
                                <div class="action-buttons">
                                    {% if not item.is_dir %}
                                        <button class="btn-small download-file-btn" data-path="{{ item.path }}">⬇️</button>
                                    {% endif %}
                                    <button class="btn-small share-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">🔗</button>
                                    <button class="btn-small btn-danger delete-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">🗑️</button>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="6" style="text-align: center; padding: 40px;">
                                <p>No files found in this directory.</p>
                                <button class="btn-primary" id="create-first-folder-btn" style="margin-top: 10px;">Create your first folder</button>
                                <button class="btn-outline" id="upload-first-file-btn" style="margin-top: 10px;">Upload a file</button>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>

<div id="new-folder-modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('new-folder-modal')">&times;</span>
        <h3>Create New Folder</h3>
        <form action="/files/new_folder" method="post">
            <input type="text" name="folder_name" placeholder="Folder name" required class="form-input">
            <div class="modal-actions">
                <button type="submit" class="btn-primary">Create</button>
                <button type="button" class="btn-outline" onclick="closeModal('new-folder-modal')">Cancel</button>
            </div>
        </form>
    </div>
</div>

<div id="upload-modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('upload-modal')">&times;</span>
        <h3>Upload Files</h3>
        <div class="upload-area">
            <input type="file" name="file" multiple class="form-input" id="file-input-multiple" style="display: none;">
            <label for="file-input-multiple" class="btn-outline upload-button">Select Files</label>
            <div id="selected-files-preview" class="selected-files-preview"></div>
            <div id="upload-progress-container" class="upload-progress-container"></div>
        </div>
        <div class="modal-actions">
            <button type="button" class="btn-primary" id="start-upload-btn" disabled>Upload</button>
            <button type="button" class="btn-outline" onclick="closeModal('upload-modal')">Cancel</button>
        </div>
    </div>
</div>

<div id="share-modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('share-modal')">&times;</span>
        <h3>Share Item</h3>
        <p id="share-file-name"></p>

        <div class="share-options">
            <h4>Quick Share (Public Link)</h4>
            <p style="color: #666; font-size: 0.9em; margin-bottom: 1rem;">Generate a simple public link that anyone can access</p>
            <div id="quick-share-container">
                <button class="btn-primary" id="generate-quick-share-btn">Generate Quick Share Link</button>
                <div id="quick-share-result" style="display: none; margin-top: 1rem;">
                    <input type="text" id="quick-share-link-input" readonly class="form-input">
                    <button class="btn-outline" id="copy-quick-share-btn">Copy Link</button>
                </div>
            </div>

            <hr style="margin: 2rem 0;">

            <h4>Advanced Sharing</h4>
            <p style="color: #666; font-size: 0.9em; margin-bottom: 1rem;">Configure permissions, passwords, expiration, and more</p>
            <button class="btn-primary" id="advanced-share-btn">Create Advanced Share</button>
        </div>

        <div class="modal-actions" style="margin-top: 2rem;">
            <button type="button" class="btn-outline" onclick="closeModal('share-modal')">Close</button>
        </div>
    </div>
</div>

<style>
.share-options {
    margin: 1.5rem 0;
}
.share-options h4 {
    margin-bottom: 0.5rem;
    color: #333;
}
#quick-share-result input {
    margin-bottom: 0.5rem;
}
</style>

<div id="delete-modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('delete-modal')">&times;</span>
        <h3>Confirm Delete</h3>
        <p id="delete-message"></p>
        <form id="delete-form" method="post">
            <div class="modal-actions">
                <button type="submit" class="btn-danger">🗑️</button>
                <button type="button" class="btn-outline" onclick="closeModal('delete-modal')">Cancel</button>
            </div>
        </form>
    </div>
</div>

<script type="module" src="/static/js/components/upload.js"></script>
<script type="module" src="/static/js/main.js"></script>
{% endblock %}