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

{% block title %}Create Share - Retoor's Cloud Solutions{% endblock %}

{% block dashboard_head %}
    <link rel="stylesheet" href="/static/css/components/form.css">
    <style>
        .share-form-container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 2rem;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .form-section {
            margin-bottom: 2rem;
        }
        .form-section h3 {
            margin-bottom: 1rem;
            color: #333;
        }
        .form-group {
            margin-bottom: 1.5rem;
        }
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .checkbox-group input {
            width: auto;
        }
        .recipient-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .recipient-item {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }
        .btn-add-recipient {
            margin-top: 0.5rem;
        }
        .share-url-display {
            display: none;
            margin-top: 2rem;
            padding: 1rem;
            background: #f0f7ff;
            border-radius: 4px;
        }
        .share-url-display input {
            font-family: monospace;
            background: white;
        }
    </style>
{% endblock %}

{% block page_title %}Create Share{% endblock %}

{% block dashboard_content %}
    <div class="share-form-container">
        <form id="create-share-form">
            <div class="form-section">
                <h3>Basic Information</h3>
                <div class="form-group">
                    <label for="item_path">Item to Share</label>
                    <input type="text" id="item_path" name="item_path" value="{{ item_path }}" required readonly>
                </div>

                <div class="form-group">
                    <label for="permission">Permission Level</label>
                    <select id="permission" name="permission">
                        <option value="view">View Only - Can view and download</option>
                        <option value="edit">Edit - Can modify, add, and delete</option>
                        <option value="comment">Comment - Can provide feedback only</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="scope">Sharing Scope</label>
                    <select id="scope" name="scope">
                        <option value="public">Public - Anyone with the link</option>
                        <option value="private">Private - Specific recipients only</option>
                        <option value="account_based">Account Based - Requires user account</option>
                    </select>
                </div>
            </div>

            <div class="form-section" id="recipients-section" style="display: none;">
                <h3>Recipients</h3>
                <div class="form-group">
                    <label>Recipient Emails</label>
                    <div class="recipient-list" id="recipient-list">
                        <div class="recipient-item">
                            <input type="email" class="recipient-email" placeholder="email@example.com">
                            <button type="button" class="btn-small btn-remove-recipient">Remove</button>
                        </div>
                    </div>
                    <button type="button" class="btn-outline btn-add-recipient" id="add-recipient-btn">Add Recipient</button>
                </div>
            </div>

            <div class="form-section">
                <h3>Security Options</h3>

                <div class="form-group">
                    <label for="password">Password Protection</label>
                    <input type="password" id="password" name="password" placeholder="Optional password">
                </div>

                <div class="form-group">
                    <label for="expiration_days">Expiration</label>
                    <select id="expiration_days" name="expiration_days">
                        <option value="">Never expires</option>
                        <option value="1">1 day</option>
                        <option value="7" selected>7 days</option>
                        <option value="30">30 days</option>
                        <option value="90">90 days</option>
                    </select>
                </div>

                <div class="form-group checkbox-group">
                    <input type="checkbox" id="disable_download" name="disable_download">
                    <label for="disable_download">Disable downloads (view only)</label>
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn-primary">Create Share Link</button>
                <button type="button" class="btn-outline" onclick="history.back()">Cancel</button>
            </div>
        </form>

        <div class="share-url-display" id="share-url-display">
            <h3>Share Link Created</h3>
            <div class="form-group">
                <label>Share URL</label>
                <input type="text" id="share-url" readonly>
                <button type="button" class="btn-primary" id="copy-url-btn">Copy Link</button>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script type="module">
    const form = document.getElementById('create-share-form');
    const scopeSelect = document.getElementById('scope');
    const recipientsSection = document.getElementById('recipients-section');
    const addRecipientBtn = document.getElementById('add-recipient-btn');
    const recipientList = document.getElementById('recipient-list');
    const shareUrlDisplay = document.getElementById('share-url-display');
    const shareUrlInput = document.getElementById('share-url');
    const copyUrlBtn = document.getElementById('copy-url-btn');

    scopeSelect.addEventListener('change', () => {
        if (scopeSelect.value === 'private' || scopeSelect.value === 'account_based') {
            recipientsSection.style.display = 'block';
        } else {
            recipientsSection.style.display = 'none';
        }
    });

    addRecipientBtn.addEventListener('click', () => {
        const recipientItem = document.createElement('div');
        recipientItem.className = 'recipient-item';
        recipientItem.innerHTML = `
            <input type="email" class="recipient-email" placeholder="email@example.com">
            <button type="button" class="btn-small btn-remove-recipient">Remove</button>
        `;
        recipientList.appendChild(recipientItem);
    });

    recipientList.addEventListener('click', (e) => {
        if (e.target.classList.contains('btn-remove-recipient')) {
            e.target.parentElement.remove();
        }
    });

    form.addEventListener('submit', async (e) => {
        e.preventDefault();

        const formData = {
            item_path: document.getElementById('item_path').value,
            permission: document.getElementById('permission').value,
            scope: document.getElementById('scope').value,
            password: document.getElementById('password').value || null,
            expiration_days: parseInt(document.getElementById('expiration_days').value) || null,
            disable_download: document.getElementById('disable_download').checked,
            recipient_emails: []
        };

        if (formData.scope === 'private' || formData.scope === 'account_based') {
            const emailInputs = document.querySelectorAll('.recipient-email');
            formData.recipient_emails = Array.from(emailInputs)
                .map(input => input.value.trim())
                .filter(email => email);
        }

        try {
            const response = await fetch('/api/sharing/create', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            });

            const result = await response.json();

            if (result.success) {
                shareUrlInput.value = result.share_url;
                shareUrlDisplay.style.display = 'block';
                form.style.display = 'none';
            } else {
                alert('Error: ' + result.error);
            }
        } catch (error) {
            alert('Error creating share: ' + error.message);
        }
    });

    copyUrlBtn.addEventListener('click', () => {
        shareUrlInput.select();
        document.execCommand('copy');
        copyUrlBtn.textContent = 'Copied!';
        setTimeout(() => {
            copyUrlBtn.textContent = 'Copy Link';
        }, 2000);
    });
</script>
{% endblock %}