import { App, Modal, Plugin, MarkdownRenderer, ButtonComponent, setIcon, Component } from "obsidian";

import { UI_STRINGS, DOCUMENTATION_URLS } from "../constants";

export class ReleaseNotesModal extends Modal {
    plugin: Plugin;
    version: string;
    markdownContent: string;
    sponsorUrl?: string;
    private renderComponent!: Component;

    constructor(app: App, plugin: Plugin, version: string, markdownContent: string, sponsorUrl?: string) {
        super(app);
        this.plugin = plugin;
        this.version = version;
        this.markdownContent = markdownContent;
        this.sponsorUrl = sponsorUrl;
    }

    onOpen() {
        const { contentEl } = this;
        contentEl.empty();
        contentEl.addClass("release-notes-modal");
        contentEl.addClass("vi-release-notes-modal");

        // Header
        contentEl.createEl("h2", { text: `${UI_STRINGS.MODAL_RELEASE_NOTES_TITLE} ${UI_STRINGS.PLUGIN_NAME} v${this.version}` });

        // Container for Markdown
        const markdownContainer = contentEl.createDiv({ cls: "release-notes-container" });



        // Initialize a dedicated component for rendering
        this.renderComponent = new Component();
        this.renderComponent.load();

        // Render rich markdown (handles images, formatting, etc.)
        void MarkdownRenderer.render(
            this.app,
            this.markdownContent,
            markdownContainer,
            "/",
            this.renderComponent
        );

        // Footer / Close
        const buttonContainer = contentEl.createDiv({ cls: "modal-button-container" });

        const sponsorUrl = this.sponsorUrl || DOCUMENTATION_URLS.SPONSOR;
        const sponsorBtn = new ButtonComponent(buttonContainer)
            .setButtonText(UI_STRINGS.MODAL_RELEASE_NOTES_SPONSOR)
            .setTooltip("Support development")
            .onClick(() => {
                window.open(sponsorUrl, "_blank");
            });

        sponsorBtn.buttonEl.addClass("sponsor-button");
        setIcon(sponsorBtn.buttonEl, "heart");

        const githubBtn = new ButtonComponent(buttonContainer)
            .setButtonText(UI_STRINGS.MODAL_RELEASE_NOTES_GITHUB)
            .setTooltip("View source code")
            .onClick(() => {
                window.open(DOCUMENTATION_URLS.GITHUB, "_blank");
            });

        githubBtn.buttonEl.addClass("github-button");
        setIcon(githubBtn.buttonEl, "github");

        const docsBtn = new ButtonComponent(buttonContainer)
            .setButtonText(UI_STRINGS.MODAL_RELEASE_NOTES_DOCS)
            .setTooltip("Read the docs")
            .onClick(() => {
                window.open(DOCUMENTATION_URLS.BASE, "_blank");
            });

        docsBtn.buttonEl.addClass("docs-button");
        setIcon(docsBtn.buttonEl, "book-open");

        new ButtonComponent(buttonContainer)
            .setButtonText(UI_STRINGS.MODAL_RELEASE_NOTES_BUTTON)
            .setCta()
            .onClick(() => this.close());
    }

    onClose() {
        if (this.renderComponent) {
            this.renderComponent.unload();
        }
        this.contentEl.empty();
    }
}
