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

export class SharedItems extends HTMLElement {
    constructor() {
        super();
        this.myShares = [];
    }

    async connectedCallback() {
        await this.loadMyShares();
    }

    async loadMyShares() {
        try {
            this.myShares = await api.listMyShares();
            this.render();
        } catch (error) {
            console.error('Failed to load shared items:', error);
            document.dispatchEvent(new CustomEvent('show-toast', {
                detail: { message: 'Failed to load shared items: ' + error.message, type: 'error' }
            }));
        }
    }

    render() {
        if (this.myShares.length === 0) {
            this.innerHTML = `
                <div class="shared-items-container">
                    <h2>Shared Items</h2>
                    <p class="empty-state">No shared items found.</p>
                </div>
            `;
            return;
        }

        this.innerHTML = `
            <div class="shared-items-container">
                <h2>Shared Items</h2>
                <div class="share-list">
                    ${this.myShares.map(share => this.renderShare(share)).join('')}
                </div>
            </div>
        `;
        this.attachListeners();
    }

    renderShare(share) {
        const shareLink = `${window.location.origin}/share/${share.token}`;
        const expiresAt = share.expires_at ? new Date(share.expires_at).toLocaleString() : 'Never';
        const targetName = share.file ? share.file.name : (share.folder ? share.folder.name : 'N/A');
        const targetType = share.file ? 'File' : (share.folder ? 'Folder' : 'N/A');

        return `
            <div class="share-item" data-share-id="${share.id}">
                <div class="share-info">
                    <p><strong>${targetType}:</strong> ${targetName}</p>
                    <p><strong>Permission:</strong> ${share.permission_level}</p>
                    <p><strong>Expires:</strong> ${expiresAt}</p>
                    <p><strong>Password Protected:</strong> ${share.password_protected ? 'Yes' : 'No'}</p>
                    <p><strong>Access Count:</strong> ${share.access_count}</p>
                    <input type="text" value="${shareLink}" readonly class="input-field share-link-input">
                </div>
                <div class="share-actions">
                    <button class="button button-small" data-action="copy-link" data-link="${shareLink}">Copy Link</button>
                    <button class="button button-small" data-action="edit-share" data-id="${share.id}">Edit</button>
                    <button class="button button-small button-danger" data-action="delete-share" data-id="${share.id}">Delete</button>
                </div>
            </div>
        `;
    }

    attachListeners() {
        this.querySelectorAll('.share-actions .button').forEach(btn => {
            btn.addEventListener('click', async (e) => {
                e.stopPropagation();
                const action = btn.dataset.action;
                const id = parseInt(btn.dataset.id);
                const link = btn.dataset.link;

                if (action === 'copy-link') {
                    this.copyLink(link);
                } else if (action === 'edit-share') {
                    this.handleEditShare(id);
                } else if (action === 'delete-share') {
                    await this.handleDeleteShare(id);
                }
            });
        });
    }

    copyLink(link) {
        navigator.clipboard.writeText(link).then(() => {
            document.dispatchEvent(new CustomEvent('show-toast', {
                detail: { message: 'Share link copied to clipboard!', type: 'success' }
            }));
        }).catch(err => {
            console.error('Failed to copy link: ', err);
            document.dispatchEvent(new CustomEvent('show-toast', {
                detail: { message: 'Failed to copy link.', type: 'error' }
            }));
        });
    }

    handleEditShare(shareId) {
        // For now, we'll just show a toast. A full implementation would open a modal for editing.
        document.dispatchEvent(new CustomEvent('show-toast', {
            detail: { message: `Edit share ${shareId} - functionality to be implemented.`, type: 'info' }
        }));
    }

    async handleDeleteShare(shareId) {
        if (confirm('Are you sure you want to delete this share link?')) {
            try {
                await api.deleteShare(shareId);
                document.dispatchEvent(new CustomEvent('show-toast', {
                    detail: { message: 'Share link deleted successfully!', type: 'success' }
                }));
                await this.loadMyShares(); // Reload the list
            } catch (error) {
                document.dispatchEvent(new CustomEvent('show-toast', {
                    detail: { message: 'Failed to delete share link: ' + error.message, type: 'error' }
                }));
            }
        }
    }
}

customElements.define('shared-items', SharedItems);