// AGPL-3.0-only
//
// This is free software for the public good of a permacomputer
// hosted at permacomputer.com, an always-on computer by the people, for the
// people. One which is durable, easy to repair, and distributed like tap water
// for machine learning intelligence.
//
// The permacomputer is community-owned infrastructure optimized around
// four values:
//
//   TRUTH    - First principles, math & science, open source code
//   FREEDOM  - Voluntary partnerships, freedom from tyranny & corporate control
//   HARMONY  - Minimal waste, self-renewing systems with diverse connections
//   LOVE     - Be yourself without hurting others, cooperation through natural law
//
// This software contributes to that vision by making machine learning
// accessible to everyone through a free, open, embeddable chat interface.
// Code is seeds to sprout on any abandoned technology.
//
// Learn more: https://www.permacomputer.com
//
// NO WARRANTY. THE SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND.
//
// Copyright 2025-2026 TimeHexOn & foxhop & russell@unturf
// https://www.permacomputer.com

// Widget and feature creation library
import { getUIText } from "./ui-translations.js";
import { speakText } from "./tts.js";
import { detectPageLanguage } from "./language-detection.js";
import { getThemeColors } from "./ui-themes.js";
import { openTTSModal } from "./tts-modal.js";
import { handleFileUpload } from "./file-upload.js";

// Create full chat interface
export function createFullInterface(container) {
	// Load appropriate CSS based on whether we're using PicoCSS or built-in styles
	// Detect if PicoCSS is actually present on the page
	const hasPicoCSS = document.querySelector('link[href*="pico"]') !== null;
	
	// Load appropriate CSS based on actual PicoCSS presence
	const cssFile = hasPicoCSS ? 'uncloseai-modal-pico.css' : 'uncloseai-modal-builtin.css';
	
	if (!document.querySelector(`link[href*="${cssFile}"]`)) {
		const link = document.createElement('link');
		link.rel = 'stylesheet';
		link.href = `https://uncloseai.com/src/${cssFile}`;
		document.head.appendChild(link);
	}

	// Chat area
	const chatContainer = document.createElement("div");
	chatContainer.innerHTML = `
	    <div id="chat-box" class="widget-chat-box"></div>
	    <div class="widget-input-container">
	      <input type="text" id="user-input" placeholder="${getUIText("askPagePlaceholder")}" class="widget-input-field">
	      <button onclick="handleUserInput()" class="widget-send-btn">Send</button>
	    </div>
	  `;

	// Control buttons
	const controlsDiv = document.createElement("div");
	controlsDiv.className = "widget-custom-grid";

	const readBtn = createButton(getUIText("readPage"), (event) =>
		readPageWithHermes(event.target),
	);
	const ttsBtn = createButton(getUIText("ttsAnything"), () => openTTSModal());
	const translateBtn = createButton(getUIText("translate"), () =>
		window.openTranslateModal(),
	);

	controlsDiv.appendChild(readBtn);
	controlsDiv.appendChild(ttsBtn);
	controlsDiv.appendChild(translateBtn);

	// Hidden file input
	const fileInput = document.createElement("input");
	fileInput.type = "file";
	fileInput.setAttribute("data-uncloseai-file-input", "");
	fileInput.style.display = "none"; // Hidden file input
	fileInput.onchange = handleFileUpload;

	container.appendChild(chatContainer);
	container.appendChild(controlsDiv);
	container.appendChild(fileInput);
}

// Create custom interface with specific features
export function createCustomInterface(container, features) {
	const div = document.createElement("div");
	div.className = "widget-custom-grid";

	features.forEach((feature) => {
		switch (feature.trim()) {
			case "chat":
				createChatFeature(div);
				break;
			case "tts":
				createTTSFeature(div);
				break;
			case "translate":
				createTranslateFeature(div);
				break;
			case "smart-translate":
				createSmartTranslateFeature(div);
				break;
			case "upload":
				createUploadFeature(div);
				break;
			case "read":
				createReadFeature(div);
				break;
		}
	});

	container.appendChild(div);
}

// Individual feature creators
export function createChatFeature(container) {
	const chatDiv = document.createElement("div");
	
	chatDiv.innerHTML = `
	    <h4>AI Chat</h4>
	    <div class="widget-feature-container" data-chat-box></div>
	    <input type="text" placeholder="${getUIText("askAnythingPlaceholder")}" class="widget-input-field" data-chat-input>
	    <button onclick="uncloseai.handleCustomChat(this)" class="widget-send-btn">Send</button>
	  `;
	container.appendChild(chatDiv);
}

export function createTTSFeature(container) {
	const ttsDiv = document.createElement("div");
	
	ttsDiv.innerHTML = `
	    <h4>Text to Speech</h4>
	    <textarea placeholder="${getUIText("enterTextToSpeakPlaceholder")}" class="widget-tts-container" data-tts-input></textarea>
	    <button onclick="handleTTSFromElement(this)" class="widget-send-btn">🔊 Convert to Speech</button>
	    <div data-tts-result></div>
	  `;
	container.appendChild(ttsDiv);
}

export function createUploadFeature(container) {
	const uploadDiv = document.createElement("div");
	uploadDiv.innerHTML = `
    <h4>File Upload</h4>
    <input type="file" class="widget-input-field" data-upload-input>
    <button onclick="handleUploadFromElement(this)" class="widget-send-btn">📁 Upload & Analyze</button>
    <div data-upload-result style="display: none;"></div>
  `;
	container.appendChild(uploadDiv);
}

export function createTranslateFeature(container) {
	const translateDiv = document.createElement("div");
	translateDiv.innerHTML = `
    <h4 data-i18n="translationModalHeading">${getUIText("translationModalHeading")}</h4>
    <button onclick="window.openTranslateModal()" class="widget-send-btn" data-i18n="translationModal">${getUIText("translationModal")}</button>
  `;
	container.appendChild(translateDiv);
}

export function createSmartTranslateFeature(container) {
	const smartTranslateDiv = document.createElement("div");
	const button = document.createElement("button");
	button.textContent = getUIText("smartTranslate");
	button.className = "widget-send-btn";
	button.onclick = () => handleSmartTranslate(button);

	const heading = document.createElement("h4");
	heading.textContent = getUIText("smartTranslate");
	heading.setAttribute("data-i18n", "smartTranslate");

	smartTranslateDiv.appendChild(heading);
	smartTranslateDiv.appendChild(button);
	container.appendChild(smartTranslateDiv);
}

export function createReadFeature(container) {
	const readDiv = document.createElement("div");
	
	const heading = document.createElement("h4");
	heading.textContent = getUIText("readPage");
	heading.setAttribute("data-i18n", "readPage");
	
	const description = document.createElement("p");
	description.textContent = "Read this page with AI voice"; // TODO: Add translation key
	
	const button = document.createElement("button");
	button.textContent = getUIText("readPage");
	button.setAttribute("data-i18n", "readPage");
	button.className = "widget-send-btn";
	button.onclick = (event) => readPageWithHermes(event.target);
	
	readDiv.appendChild(heading);
	readDiv.appendChild(description);
	readDiv.appendChild(button);
	container.appendChild(readDiv);
}

// Helper functions for custom features
export function createButton(text, onclick) {
	const btn = document.createElement("button");
	btn.textContent = text;
	btn.onclick = onclick;
	btn.className = "widget-send-btn";
	return btn;
}

export async function handleTTSFromElement(button) {
	const container =
		button.closest("[data-tts-result]")?.parentElement || button.parentElement;
	const textarea = container.querySelector("[data-tts-input]");
	const resultDiv = container.querySelector("[data-tts-result]");
	const text = textarea?.value?.trim();

	if (!text) {
		alert(getUIText("pleaseEnterText"));
		return;
	}

	button.disabled = true;
	button.textContent = "Converting...";
	resultDiv.innerHTML = "<em>Converting to speech...</em>";

	try {
		const result = await speakText(text, "alloy", 0.9);
		const audioControls = document.createElement("div");
		audioControls.className = "tts-audio-controls";

		const playButton = document.createElement("button");
		playButton.textContent = "▶️ Play";
		playButton.onclick = () => result.audio.play();

		const pauseButton = document.createElement("button");
		pauseButton.textContent = "⏸️ Pause";
		pauseButton.onclick = () => result.audio.pause();

		audioControls.appendChild(playButton);
		audioControls.appendChild(pauseButton);

		resultDiv.innerHTML = "";
		resultDiv.appendChild(result.audio);
		resultDiv.appendChild(audioControls);
	} catch (error) {
		resultDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
	} finally {
		button.disabled = false;
		button.textContent = "🔊 Convert to Speech";
	}
}

export async function handleUploadFromElement(button) {
	const container = button.parentElement;
	const fileInput = container.querySelector("[data-upload-input]");
	const resultDiv = container.querySelector("[data-upload-result]");

	if (!fileInput.files[0]) {
		alert(getUIText("pleaseSelectFile"));
		return;
	}

	button.disabled = true;
	button.textContent = getUIText("processingText");
	resultDiv.classList.add("show");
	resultDiv.innerHTML = "<em>Uploading and analyzing file...</em>";

	try {
		showProgressIndicator(getUIText("processingText"));
		const response = await uploadFile(fileInput.files[0]);
		hideProgressIndicator();

		resultDiv.innerHTML = `<strong>Analysis Result:</strong><br>${response}`;
		fileInput.value = "";
	} catch (error) {
		hideProgressIndicator();
		resultDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
	} finally {
		button.disabled = false;
		button.textContent = "📁 Upload & Analyze";
	}
}

export async function handleSmartTranslate(button) {
	console.log("🤖 Smart translate clicked!", button);

	// Check if dropdown already exists
	const existingDropdown = button.parentElement.querySelector(
		".widget-translate-dropdown",
	);
	if (existingDropdown) {
		existingDropdown.remove();
		return;
	}

	// Detect page language
	button.textContent = getUIText("detectingLanguage");
	button.disabled = true;

	try {
		const currentLang = await detectPageLanguage();
		button.textContent = getUIText("smartTranslate");
		button.disabled = false;

		// Import supported languages and native names
		const { SUPPORTED_LANGUAGES, NATIVE_LANGUAGE_NAMES, translateCurrentPage } =
			await import("./translation.js");
		const colors = getThemeColors();

		// Create dropdown
		const dropdown = document.createElement("div");
		dropdown.className = "widget-translate-dropdown";
		// Styling handled by CSS class

		// Add current language indicator
		const currentLangDiv = document.createElement("div");
		currentLangDiv.className = "widget-translate-dropdown-current";
		const currentLangName =
			NATIVE_LANGUAGE_NAMES[currentLang] ||
			SUPPORTED_LANGUAGES[currentLang] ||
			"Unknown";
		currentLangDiv.textContent = getUIText("currentPage", {
			lang: currentLangName,
		});
		dropdown.appendChild(currentLangDiv);

		// Add translation options with code, English, and native names
		Object.entries(NATIVE_LANGUAGE_NAMES).forEach(([code, nativeName]) => {
			// Skip current language
			if (code === currentLang) return;

			const englishName = SUPPORTED_LANGUAGES[code];

			const option = document.createElement("div");
			option.className = "option";
			// Color handled by CSS class

			// Format: "es • Spanish • Español"
			option.innerHTML = `
				<span style="font-family: monospace; color: ${colors.mutedText}; font-size: 12px; min-width: 24px;">${code}</span>
				<span style="color: ${colors.mutedText};">•</span>
				<span style="color: ${colors.secondaryText};">${englishName}</span>
				<span style="color: ${colors.mutedText};">•</span>
				<span style="font-weight: 500;">${nativeName}</span>
			`;

			// Hover effects handled by CSS

			option.onclick = async () => {
				try {
					// Show loading
					option.innerHTML = `
						<span style="font-family: monospace; color: ${colors.mutedText}; font-size: 12px; min-width: 24px;">${code}</span>
						<span style="color: ${colors.mutedText};">•</span>
						<span style="color: ${colors.secondaryText};">${getUIText("translatingTo")}</span>
					`;
					option.className = "option option-disabled";

					// Translate the page
					const translatedHtml = await translateCurrentPage(code);

					// Open in new tab
					const newWindow = window.open("", "_blank");
					newWindow.document.write(translatedHtml);
					newWindow.document.close();
					newWindow.document.title = `${document.title} - translated into ${nativeName}`;

					// Close dropdown
					dropdown.remove();
				} catch (error) {
					alert(error.message);
					// Restore original format
					option.innerHTML = `
						<span style="font-family: monospace; color: ${colors.mutedText}; font-size: 12px; min-width: 24px;">${code}</span>
						<span style="color: ${colors.mutedText};">•</span>
						<span style="color: ${colors.secondaryText};">${englishName}</span>
						<span style="color: ${colors.mutedText};">•</span>
						<span style="font-weight: 500;">${nativeName}</span>
					`;
					option.className = "option";
				}
			};

			dropdown.appendChild(option);
		});

		// Position handled by CSS
		button.parentElement.appendChild(dropdown);

		// Close dropdown when clicking outside
		const closeDropdown = (e) => {
			if (!dropdown.contains(e.target) && e.target !== button) {
				dropdown.remove();
				document.removeEventListener("click", closeDropdown);
			}
		};
		setTimeout(() => document.addEventListener("click", closeDropdown), 100);
	} catch (error) {
		button.textContent = getUIText("smartTranslate");
		button.disabled = false;
		alert(getUIText("languageDetectionFailed", { error: error.message }));
	}
}

// Export functions for global access
window.handleTTSFromElement = handleTTSFromElement;
window.handleUploadFromElement = handleUploadFromElement;
window.handleSmartTranslate = handleSmartTranslate;
// Note: openTranslateModal is exported globally by ui.js