var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import "@mariozechner/mini-lit/dist/ModeToggle.js";
import { icon } from "@mariozechner/mini-lit";
import { Button } from "@mariozechner/mini-lit/dist/Button.js";
import { renderAsync } from "docx-preview";
import { html, LitElement } from "lit";
import { state } from "lit/decorators.js";
import { Download, X } from "lucide";
import * as pdfjsLib from "pdfjs-dist";
import * as XLSX from "xlsx";
import { i18n } from "../utils/i18n.js";
export class AttachmentOverlay extends LitElement {
    constructor() {
        super(...arguments);
        this.showExtractedText = false;
        this.error = null;
        // Track current loading task to cancel if needed
        this.currentLoadingTask = null;
        this.handleBackdropClick = () => {
            this.close();
        };
        this.handleDownload = () => {
            if (!this.attachment)
                return;
            // Create a blob from the base64 content
            const byteCharacters = atob(this.attachment.content);
            const byteNumbers = new Array(byteCharacters.length);
            for (let i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            const byteArray = new Uint8Array(byteNumbers);
            const blob = new Blob([byteArray], { type: this.attachment.mimeType });
            // Create download link
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.download = this.attachment.fileName;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        };
    }
    createRenderRoot() {
        return this;
    }
    static open(attachment, onClose) {
        const overlay = new AttachmentOverlay();
        overlay.attachment = attachment;
        overlay.onCloseCallback = onClose;
        document.body.appendChild(overlay);
        overlay.setupEventListeners();
    }
    setupEventListeners() {
        this.boundHandleKeyDown = (e) => {
            if (e.key === "Escape") {
                this.close();
            }
        };
        window.addEventListener("keydown", this.boundHandleKeyDown);
    }
    close() {
        this.cleanup();
        if (this.boundHandleKeyDown) {
            window.removeEventListener("keydown", this.boundHandleKeyDown);
        }
        this.onCloseCallback?.();
        this.remove();
    }
    getFileType() {
        if (!this.attachment)
            return "text";
        if (this.attachment.type === "image")
            return "image";
        if (this.attachment.mimeType === "application/pdf")
            return "pdf";
        if (this.attachment.mimeType?.includes("wordprocessingml"))
            return "docx";
        if (this.attachment.mimeType?.includes("presentationml") ||
            this.attachment.fileName.toLowerCase().endsWith(".pptx"))
            return "pptx";
        if (this.attachment.mimeType?.includes("spreadsheetml") ||
            this.attachment.mimeType?.includes("ms-excel") ||
            this.attachment.fileName.toLowerCase().endsWith(".xlsx") ||
            this.attachment.fileName.toLowerCase().endsWith(".xls"))
            return "excel";
        return "text";
    }
    getFileTypeLabel() {
        const type = this.getFileType();
        switch (type) {
            case "pdf":
                return i18n("PDF");
            case "docx":
                return i18n("Document");
            case "pptx":
                return i18n("Presentation");
            case "excel":
                return i18n("Spreadsheet");
            default:
                return "";
        }
    }
    cleanup() {
        this.showExtractedText = false;
        this.error = null;
        // Cancel any loading PDF task when closing
        if (this.currentLoadingTask) {
            this.currentLoadingTask.destroy();
            this.currentLoadingTask = null;
        }
    }
    render() {
        if (!this.attachment)
            return html ``;
        return html `
			<!-- Full screen overlay -->
			<div class="fixed inset-0 bg-black/90 z-50 flex flex-col" @click=${this.handleBackdropClick}>
				<!-- Compact header bar -->
				<div class="bg-background/95 backdrop-blur border-b border-border" @click=${(e) => e.stopPropagation()}>
					<div class="px-4 py-2 flex items-center justify-between">
						<div class="flex items-center gap-3 min-w-0">
							<span class="text-sm font-medium text-foreground truncate">${this.attachment.fileName}</span>
						</div>
						<div class="flex items-center gap-2">
							${this.renderToggle()}
							${Button({
            variant: "ghost",
            size: "icon",
            onClick: this.handleDownload,
            children: icon(Download, "sm"),
            className: "h-8 w-8",
        })}
							${Button({
            variant: "ghost",
            size: "icon",
            onClick: () => this.close(),
            children: icon(X, "sm"),
            className: "h-8 w-8",
        })}
						</div>
					</div>
				</div>

				<!-- Content container -->
				<div class="flex-1 flex items-center justify-center overflow-auto" @click=${(e) => e.stopPropagation()}>
					${this.renderContent()}
				</div>
			</div>
		`;
    }
    renderToggle() {
        if (!this.attachment)
            return html ``;
        const fileType = this.getFileType();
        const hasExtractedText = !!this.attachment.extractedText;
        const showToggle = fileType !== "image" && fileType !== "text" && fileType !== "pptx" && hasExtractedText;
        if (!showToggle)
            return html ``;
        const fileTypeLabel = this.getFileTypeLabel();
        return html `
			<mode-toggle
				.modes=${[fileTypeLabel, i18n("Text")]}
				.selectedIndex=${this.showExtractedText ? 1 : 0}
				@mode-change=${(e) => {
            e.stopPropagation();
            this.showExtractedText = e.detail.index === 1;
            this.error = null;
        }}
			></mode-toggle>
		`;
    }
    renderContent() {
        if (!this.attachment)
            return html ``;
        // Error state
        if (this.error) {
            return html `
				<div class="bg-destructive/10 border border-destructive text-destructive p-4 rounded-lg max-w-2xl">
					<div class="font-medium mb-1">${i18n("Error loading file")}</div>
					<div class="text-sm opacity-90">${this.error}</div>
				</div>
			`;
        }
        // Content based on file type
        return this.renderFileContent();
    }
    renderFileContent() {
        if (!this.attachment)
            return html ``;
        const fileType = this.getFileType();
        // Show extracted text if toggled
        if (this.showExtractedText && fileType !== "image") {
            return html `
				<div class="bg-card border border-border text-foreground p-6 w-full h-full max-w-4xl overflow-auto">
					<pre class="whitespace-pre-wrap font-mono text-xs leading-relaxed">${this.attachment.extractedText || i18n("No text content available")}</pre>
				</div>
			`;
        }
        // Render based on file type
        switch (fileType) {
            case "image": {
                const imageUrl = `data:${this.attachment.mimeType};base64,${this.attachment.content}`;
                return html `
					<img src="${imageUrl}" class="max-w-full max-h-full object-contain rounded-lg shadow-lg" alt="${this.attachment.fileName}" />
				`;
            }
            case "pdf":
                return html `
					<div
						id="pdf-container"
						class="bg-card text-foreground overflow-auto shadow-lg border border-border w-full h-full max-w-[1000px]"
					></div>
				`;
            case "docx":
                return html `
					<div
						id="docx-container"
						class="bg-card text-foreground overflow-auto shadow-lg border border-border w-full h-full max-w-[1000px]"
					></div>
				`;
            case "excel":
                return html ` <div id="excel-container" class="bg-card text-foreground overflow-auto w-full h-full"></div> `;
            case "pptx":
                return html `
					<div
						id="pptx-container"
						class="bg-card text-foreground overflow-auto shadow-lg border border-border w-full h-full max-w-[1000px]"
					></div>
				`;
            default:
                return html `
					<div class="bg-card border border-border text-foreground p-6 w-full h-full max-w-4xl overflow-auto">
						<pre class="whitespace-pre-wrap font-mono text-sm">${this.attachment.extractedText || i18n("No content available")}</pre>
					</div>
				`;
        }
    }
    async updated(changedProperties) {
        super.updated(changedProperties);
        // Only process if we need to render the actual file (not extracted text)
        if ((changedProperties.has("attachment") || changedProperties.has("showExtractedText")) &&
            this.attachment &&
            !this.showExtractedText &&
            !this.error) {
            const fileType = this.getFileType();
            switch (fileType) {
                case "pdf":
                    await this.renderPdf();
                    break;
                case "docx":
                    await this.renderDocx();
                    break;
                case "excel":
                    await this.renderExcel();
                    break;
                case "pptx":
                    await this.renderExtractedText();
                    break;
            }
        }
    }
    async renderPdf() {
        const container = this.querySelector("#pdf-container");
        if (!container || !this.attachment)
            return;
        let pdf = null;
        try {
            // Convert base64 to ArrayBuffer
            const arrayBuffer = this.base64ToArrayBuffer(this.attachment.content);
            // Cancel any existing loading task
            if (this.currentLoadingTask) {
                this.currentLoadingTask.destroy();
            }
            // Load the PDF
            this.currentLoadingTask = pdfjsLib.getDocument({ data: arrayBuffer });
            pdf = await this.currentLoadingTask.promise;
            this.currentLoadingTask = null;
            // Clear container and add wrapper
            container.innerHTML = "";
            const wrapper = document.createElement("div");
            wrapper.className = "";
            container.appendChild(wrapper);
            // Render all pages
            for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
                const page = await pdf.getPage(pageNum);
                // Create a container for each page
                const pageContainer = document.createElement("div");
                pageContainer.className = "mb-4 last:mb-0";
                // Create canvas for this page
                const canvas = document.createElement("canvas");
                const context = canvas.getContext("2d");
                // Set scale for reasonable resolution
                const viewport = page.getViewport({ scale: 1.5 });
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                // Style the canvas
                canvas.className = "w-full max-w-full h-auto block mx-auto bg-white rounded shadow-sm border border-border";
                // Fill white background for proper PDF rendering
                if (context) {
                    context.fillStyle = "white";
                    context.fillRect(0, 0, canvas.width, canvas.height);
                }
                // Render page
                await page.render({
                    canvasContext: context,
                    viewport: viewport,
                    canvas: canvas,
                }).promise;
                pageContainer.appendChild(canvas);
                // Add page separator for multi-page documents
                if (pageNum < pdf.numPages) {
                    const separator = document.createElement("div");
                    separator.className = "h-px bg-border my-4";
                    pageContainer.appendChild(separator);
                }
                wrapper.appendChild(pageContainer);
            }
        }
        catch (error) {
            console.error("Error rendering PDF:", error);
            this.error = error?.message || i18n("Failed to load PDF");
        }
        finally {
            if (pdf) {
                pdf.destroy();
            }
        }
    }
    async renderDocx() {
        const container = this.querySelector("#docx-container");
        if (!container || !this.attachment)
            return;
        try {
            // Convert base64 to ArrayBuffer
            const arrayBuffer = this.base64ToArrayBuffer(this.attachment.content);
            // Clear container first
            container.innerHTML = "";
            // Create a wrapper div for the document
            const wrapper = document.createElement("div");
            wrapper.className = "docx-wrapper-custom";
            container.appendChild(wrapper);
            // Render the DOCX file into the wrapper
            await renderAsync(arrayBuffer, wrapper, undefined, {
                className: "docx",
                inWrapper: true,
                ignoreWidth: true, // Let it be responsive
                ignoreHeight: false,
                ignoreFonts: false,
                breakPages: true,
                ignoreLastRenderedPageBreak: true,
                experimental: false,
                trimXmlDeclaration: true,
                useBase64URL: false,
                renderHeaders: true,
                renderFooters: true,
                renderFootnotes: true,
                renderEndnotes: true,
            });
            // Apply custom styles to match theme and fix sizing
            const style = document.createElement("style");
            style.textContent = `
				#docx-container {
					padding: 0;
				}

				#docx-container .docx-wrapper-custom {
					max-width: 100%;
					overflow-x: auto;
				}

				#docx-container .docx-wrapper {
					max-width: 100% !important;
					margin: 0 !important;
					background: transparent !important;
					padding: 0em !important;
				}

				#docx-container .docx-wrapper > section.docx {
					box-shadow: none !important;
					border: none !important;
					border-radius: 0 !important;
					margin: 0 !important;
					padding: 2em !important;
					background: white !important;
					color: black !important;
					max-width: 100% !important;
					width: 100% !important;
					min-width: 0 !important;
					overflow-x: auto !important;
				}

				/* Fix tables and wide content */
				#docx-container table {
					max-width: 100% !important;
					width: auto !important;
					overflow-x: auto !important;
					display: block !important;
				}

				#docx-container img {
					max-width: 100% !important;
					height: auto !important;
				}

				/* Fix paragraphs and text */
				#docx-container p,
				#docx-container span,
				#docx-container div {
					max-width: 100% !important;
					word-wrap: break-word !important;
					overflow-wrap: break-word !important;
				}

				/* Hide page breaks in web view */
				#docx-container .docx-page-break {
					display: none !important;
				}
			`;
            container.appendChild(style);
        }
        catch (error) {
            console.error("Error rendering DOCX:", error);
            this.error = error?.message || i18n("Failed to load document");
        }
    }
    async renderExcel() {
        const container = this.querySelector("#excel-container");
        if (!container || !this.attachment)
            return;
        try {
            // Convert base64 to ArrayBuffer
            const arrayBuffer = this.base64ToArrayBuffer(this.attachment.content);
            // Read the workbook
            const workbook = XLSX.read(arrayBuffer, { type: "array" });
            // Clear container
            container.innerHTML = "";
            const wrapper = document.createElement("div");
            wrapper.className = "overflow-auto h-full flex flex-col";
            container.appendChild(wrapper);
            // Create tabs for multiple sheets
            if (workbook.SheetNames.length > 1) {
                const tabContainer = document.createElement("div");
                tabContainer.className = "flex gap-2 mb-4 border-b border-border sticky top-0 bg-card z-10";
                const sheetContents = [];
                workbook.SheetNames.forEach((sheetName, index) => {
                    // Create tab button
                    const tab = document.createElement("button");
                    tab.textContent = sheetName;
                    tab.className =
                        index === 0
                            ? "px-4 py-2 text-sm font-medium border-b-2 border-primary text-primary"
                            : "px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:border-b-2 hover:border-border transition-colors";
                    // Create sheet content
                    const sheetDiv = document.createElement("div");
                    sheetDiv.style.display = index === 0 ? "flex" : "none";
                    sheetDiv.className = "flex-1 overflow-auto";
                    sheetDiv.appendChild(this.renderExcelSheet(workbook.Sheets[sheetName], sheetName));
                    sheetContents.push(sheetDiv);
                    // Tab click handler
                    tab.onclick = () => {
                        // Update tab styles
                        tabContainer.querySelectorAll("button").forEach((btn, btnIndex) => {
                            if (btnIndex === index) {
                                btn.className = "px-4 py-2 text-sm font-medium border-b-2 border-primary text-primary";
                            }
                            else {
                                btn.className =
                                    "px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:border-b-2 hover:border-border transition-colors";
                            }
                        });
                        // Show/hide sheets
                        sheetContents.forEach((content, contentIndex) => {
                            content.style.display = contentIndex === index ? "flex" : "none";
                        });
                    };
                    tabContainer.appendChild(tab);
                });
                wrapper.appendChild(tabContainer);
                sheetContents.forEach((content) => {
                    wrapper.appendChild(content);
                });
            }
            else {
                // Single sheet
                const sheetName = workbook.SheetNames[0];
                wrapper.appendChild(this.renderExcelSheet(workbook.Sheets[sheetName], sheetName));
            }
        }
        catch (error) {
            console.error("Error rendering Excel:", error);
            this.error = error?.message || i18n("Failed to load spreadsheet");
        }
    }
    renderExcelSheet(worksheet, sheetName) {
        const sheetDiv = document.createElement("div");
        // Generate HTML table
        const htmlTable = XLSX.utils.sheet_to_html(worksheet, { id: `sheet-${sheetName}` });
        const tempDiv = document.createElement("div");
        tempDiv.innerHTML = htmlTable;
        // Find and style the table
        const table = tempDiv.querySelector("table");
        if (table) {
            table.className = "w-full border-collapse text-foreground";
            // Style all cells
            table.querySelectorAll("td, th").forEach((cell) => {
                const cellEl = cell;
                cellEl.className = "border border-border px-3 py-2 text-sm text-left";
            });
            // Style header row
            const headerCells = table.querySelectorAll("thead th, tr:first-child td");
            if (headerCells.length > 0) {
                headerCells.forEach((th) => {
                    const thEl = th;
                    thEl.className =
                        "border border-border px-3 py-2 text-sm font-semibold bg-muted text-foreground sticky top-0";
                });
            }
            // Alternate row colors
            table.querySelectorAll("tbody tr:nth-child(even)").forEach((row) => {
                const rowEl = row;
                rowEl.className = "bg-muted/30";
            });
            sheetDiv.appendChild(table);
        }
        return sheetDiv;
    }
    base64ToArrayBuffer(base64) {
        const binaryString = atob(base64);
        const bytes = new Uint8Array(binaryString.length);
        for (let i = 0; i < binaryString.length; i++) {
            bytes[i] = binaryString.charCodeAt(i);
        }
        return bytes.buffer;
    }
    async renderExtractedText() {
        const container = this.querySelector("#pptx-container");
        if (!container || !this.attachment)
            return;
        try {
            // Display the extracted text content
            container.innerHTML = "";
            const wrapper = document.createElement("div");
            wrapper.className = "p-6 overflow-auto";
            // Create a pre element to preserve formatting
            const pre = document.createElement("pre");
            pre.className = "whitespace-pre-wrap text-sm text-foreground font-mono";
            pre.textContent = this.attachment.extractedText || i18n("No text content available");
            wrapper.appendChild(pre);
            container.appendChild(wrapper);
        }
        catch (error) {
            console.error("Error rendering extracted text:", error);
            this.error = error?.message || i18n("Failed to display text content");
        }
    }
}
__decorate([
    state()
], AttachmentOverlay.prototype, "attachment", void 0);
__decorate([
    state()
], AttachmentOverlay.prototype, "showExtractedText", void 0);
__decorate([
    state()
], AttachmentOverlay.prototype, "error", void 0);
// Register the custom element only once
if (!customElements.get("attachment-overlay")) {
    customElements.define("attachment-overlay", AttachmentOverlay);
}
//# sourceMappingURL=AttachmentOverlay.js.map