/**
 * Comment System Entry Point
 */
import { CommentApi } from './api.js';
import { CommentUI } from './ui.js';
import { dialog } from '../dialog.js';

export class CommentSystem {
    constructor(element) {
        this.api = new CommentApi();
        this.ui = new CommentUI(element);
        this.init();
    }

    init() {
        if (!this.ui.container) return;

        console.log('Comment System Initialized');
        // Unbind previous events to avoid duplicates if re-initialized
        this.unbindEvents();
        this.bindEvents();
        this.ui.refreshPlugins();
    }

    unbindEvents() {
        if (this.ui.container.commentSystem) {

        }
        this.ui.container.commentSystem = this;
    }

    bindEvents() {
        const container = this.ui.container;
        if (!container) return;
        const formHandler = async (e) => {
            if (e.target.matches('form.comment-form')) {
                e.preventDefault();
                e.stopPropagation();
                await this.handleSubmit(e.target);
            }
        };
        container.addEventListener('submit', formHandler);


        const clickHandler = async (e) => {
            // Reply Button
            const replyBtn = e.target.closest('.comment-item__reply-btn');
            if (replyBtn) {
                const commentItem = replyBtn.closest('.comment-item');
                const replyId = replyBtn.dataset.replyId;
                this.ui.showReplyForm(commentItem, replyId);
                return;
            }

            // Cancel Reply
            if (e.target.matches('.comment-form__cancel-btn')) {
                this.ui.resetReplyForm();
                // Also close drawer if open
                if (this.ui.drawer && this.ui.drawer.classList.contains('comment-reply-drawer--open')) {
                    this.ui.closeDrawer();
                }
                return;
            }

            // Refresh Button
            const refreshBtn = e.target.closest('.comment-section__refresh-btn');
            if (refreshBtn) {
                const url = refreshBtn.dataset.url;
                await this.handleRefresh(url, refreshBtn);
                return;
            }

            // Load More
            const loadMoreBtn = e.target.closest('.comment-load-more__btn');
            if (loadMoreBtn) {
                const url = loadMoreBtn.dataset.pageRequest;
                const pageIndex = parseInt(loadMoreBtn.dataset.pageIndex);
                const pageSize = parseInt(loadMoreBtn.dataset.pageSize);

                const separator = url.includes('?') ? '&' : '?';
                const fullUrl = `${url}${separator}pageIndex=${pageIndex + 1}&pageSize=${pageSize}`;

                await this.handleLoadMore(fullUrl, loadMoreBtn);
                return;
            }

            // Image Insert
            const imgBtn = e.target.closest('[data-action="image"]');
            if (imgBtn) {
                await this.handleImageInsert();
                //return;
            }
        };
        container.addEventListener('click', clickHandler);

        // Keydown
        const keydownHandler = (e) => {
            if (e.target.matches('form.comment-form input') && e.key === 'Enter') {
                e.preventDefault();
            }
        };
        container.addEventListener('keydown', keydownHandler);

        // Character counter
        const inputHandler = (e) => {
            if (e.target.matches('.comment-form__editor')) {
                this.ui.updateCharCount(e.target);
            }
        };
        container.addEventListener('input', inputHandler);

        // Store cleanup function
        this.cleanup = () => {
            container.removeEventListener('submit', formHandler);
            container.removeEventListener('click', clickHandler);
            container.removeEventListener('keydown', keydownHandler);
            container.removeEventListener('input', inputHandler);
        };
    }

    async handleSubmit(form) {
        const submitBtn = form.querySelector('button[type="submit"]');
        this.ui.setButtonState(submitBtn, 'loading');

        const formData = new FormData(form);
        const url = form.action;

        const result = await this.api.postComment(url, formData);

        if (result.success) {
            this.ui.resetReplyForm();

            if (result.html) {
                this.ui.updateList(result.html);
            }
            if (result.commentCount) {
                this.ui.updateCount(result.commentCount);
            }

            this.ui.resetForm(form);

            // Close drawer if open
            if (this.ui.drawer && this.ui.drawer.classList.contains('comment-reply-drawer--open')) {
                this.ui.closeDrawer();
            }

            dialog.toast('评论发布成功');
        } else {
            this.ui.setButtonState(submitBtn, 'error', '重试');
            dialog.toast(result.msg || '发布失败', 'error');

            setTimeout(() => {
                this.ui.setButtonState(submitBtn, 'normal');
            }, 3000);
        }
    }

    async handleRefresh(url, btn) {
        // Prevent multiple clicks
        if (btn.disabled || btn.classList.contains('is-loading')) return;

        btn.classList.add('fa-spin');
        btn.classList.add('is-loading');

        // Capture wrapper BEFORE showListSkeleton detaches the container
        // this.ui.container is the .comment-section element
        const wrapper = this.ui.container.parentElement;

        this.ui.showListSkeleton();

        const separator = url.includes('?') ? '&' : '?';
        const refreshUrl = `${url}${separator}t=${new Date().getTime()}`;

        this.ui.resetReplyForm();
        const result = await this.api.loadComments(refreshUrl);

        if (result.success) {

            if (wrapper) {

                wrapper.innerHTML = result.html;

                // Re-init system for new DOM
                const newContainer = wrapper.querySelector('.comment-section');
                new CommentSystem(newContainer);
            }

            dialog.toast('刷新成功');
        } else {
            dialog.toast('刷新失败', 'error');
            window.location.reload();
        }

    }

    async handleLoadMore(url, btn) {
        const originalText = btn.innerHTML;
        btn.innerHTML = '加载中...';
        btn.disabled = true;

        const result = await this.api.loadComments(url);

        if (result.success) {
            if (result.html) {
                this.ui.appendList(result.html);
            }
            if (result.commentCount) {
                this.ui.updateCount(result.commentCount);
            }
        } else {
            btn.innerHTML = '加载失败，点击重试';
            btn.disabled = false;
        }
    }

    async handleImageInsert() {
        const value = await dialog.prompt('请输入网络图片地址', '请输入网络图片地址', 'https://');

        if (value === null) { return; }

        let url;
        try {
            url = new URL(value);
        } catch {
            dialog.toast('请输入正确的地址');
            return;
        }
        if (url.protocol !== "https:") {
            dialog.toast('请使用HTTPS协议的图片地址');
            return;
        }
        const markdownImg = `![](${url.toString()})`;
        this.ui.insertMarkdown(markdownImg);

    }
}