import { api } from '../api.js';

export class ShareModal extends HTMLElement {
    constructor() {
        super();
        this.fileId = null;
        this.folderId = null;
        this.handleEscape = this.handleEscape.bind(this);
        this.render();
        this.attachListeners();
    }

    render() {
        this.innerHTML = `
            <div class="share-modal" id="share-modal" style="display: none;">
                <div class="share-modal-content">
                    <div class="share-header">
                        <h3>Share</h3>
                        <button class="close-btn" id="close-share">&times;</button>
                    </div>

                    <form id="share-form">
                        <div class="form-group">
                            <label>Permission Level</label>
                            <select name="permission_level" class="input-field">
                                <option value="viewer">Viewer</option>
                                <option value="uploader">Uploader</option>
                                <option value="editor">Editor</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Password Protection (optional)</label>
                            <input type="password" name="password" class="input-field" placeholder="Leave blank for no password">
                        </div>

                        <div class="form-group">
                            <label>Expiration Date (optional)</label>
                            <input type="datetime-local" name="expires_at" class="input-field">
                        </div>

                        <button type="submit" class="button button-primary">Create Share Link</button>
                    </form>

                    <div id="share-result" style="display: none;">
                        <div class="form-group">
                            <label>Share Link</label>
                            <div class="share-link-container">
                                <input type="text" id="share-link" readonly class="input-field">
                                <button class="button" id="copy-link-btn">Copy</button>
                            </div>
                        </div>
                    </div>

                    <div class="error-message" id="share-error"></div>
                </div>
            </div>
        `;
    }

    attachListeners() {
        const closeBtn = this.querySelector('#close-share');
        closeBtn.addEventListener('click', () => this.hide());

        const form = this.querySelector('#share-form');
        form.addEventListener('submit', (e) => this.handleCreateShare(e));

        const copyBtn = this.querySelector('#copy-link-btn');
        copyBtn.addEventListener('click', () => this.copyLink());
    }

    handleEscape(e) {
        if (e.key === 'Escape') {
            const modal = this.querySelector('#share-modal');
            if (modal.style.display === 'flex') {
                this.hide();
            }
        }
    }

    show(fileId = null, folderId = null) {
        this.fileId = fileId;
        this.folderId = folderId;
        this.querySelector('#share-modal').style.display = 'flex';
        this.querySelector('#share-result').style.display = 'none';
        this.querySelector('#share-form').reset();
        document.addEventListener('keydown', this.handleEscape);
    }

    hide() {
        this.querySelector('#share-modal').style.display = 'none';
        this.fileId = null;
        this.folderId = null;
        document.removeEventListener('keydown', this.handleEscape);
    }

    async handleCreateShare(e) {
        e.preventDefault();
        const form = e.target;
        const formData = new FormData(form);
        const errorDiv = this.querySelector('#share-error');

        try {
            const permissionLevel = formData.get('permission_level');
            const password = formData.get('password') || null;
            const expiresAt = formData.get('expires_at') || null;

            const share = await api.createShare(
                this.fileId,
                this.folderId,
                expiresAt,
                password,
                permissionLevel
            );

            const shareLink = `${window.location.origin}/share/${share.token}`;
            this.querySelector('#share-link').value = shareLink;
            this.querySelector('#share-result').style.display = 'block';
            errorDiv.textContent = '';
        } catch (error) {
            errorDiv.textContent = 'Failed to create share link: ' + error.message;
        }
    }

    copyLink() {
        const linkInput = this.querySelector('#share-link');
        linkInput.select();
        document.execCommand('copy');
        alert('Link copied to clipboard');
    }
}

customElements.define('share-modal', ShareModal);