/**
 * <folk-notes-app> — notebook and note management.
 *
 * Browse notebooks, create/edit notes with rich text,
 * search, tag management.
 */

interface Notebook {
	id: string;
	title: string;
	description: string;
	cover_color: string;
	note_count: string;
	updated_at: string;
}

interface Note {
	id: string;
	title: string;
	content: string;
	content_plain: string;
	type: string;
	tags: string[] | null;
	is_pinned: boolean;
	created_at: string;
	updated_at: string;
}

class FolkNotesApp extends HTMLElement {
	private shadow: ShadowRoot;
	private space = "";
	private view: "notebooks" | "notebook" | "note" = "notebooks";
	private notebooks: Notebook[] = [];
	private selectedNotebook: (Notebook & { notes: Note[] }) | null = null;
	private selectedNote: Note | null = null;
	private searchQuery = "";
	private searchResults: Note[] = [];
	private loading = false;
	private error = "";

	constructor() {
		super();
		this.shadow = this.attachShadow({ mode: "open" });
	}

	connectedCallback() {
		this.space = this.getAttribute("space") || "demo";
		this.loadNotebooks();
	}

	private getApiBase(): string {
		const path = window.location.pathname;
		const match = path.match(/^\/([^/]+)\/notes/);
		return match ? `/${match[1]}/notes` : "";
	}

	private async loadNotebooks() {
		this.loading = true;
		this.render();
		try {
			const base = this.getApiBase();
			const res = await fetch(`${base}/api/notebooks`);
			const data = await res.json();
			this.notebooks = data.notebooks || [];
		} catch {
			this.error = "Failed to load notebooks";
		}
		this.loading = false;
		this.render();
	}

	private async loadNotebook(id: string) {
		this.loading = true;
		this.render();
		try {
			const base = this.getApiBase();
			const res = await fetch(`${base}/api/notebooks/${id}`);
			this.selectedNotebook = await res.json();
		} catch {
			this.error = "Failed to load notebook";
		}
		this.loading = false;
		this.render();
	}

	private async loadNote(id: string) {
		this.loading = true;
		this.render();
		try {
			const base = this.getApiBase();
			const res = await fetch(`${base}/api/notes/${id}`);
			this.selectedNote = await res.json();
		} catch {
			this.error = "Failed to load note";
		}
		this.loading = false;
		this.render();
	}

	private async searchNotes(query: string) {
		if (!query.trim()) {
			this.searchResults = [];
			this.render();
			return;
		}
		try {
			const base = this.getApiBase();
			const res = await fetch(`${base}/api/notes?q=${encodeURIComponent(query)}`);
			const data = await res.json();
			this.searchResults = data.notes || [];
		} catch {
			this.searchResults = [];
		}
		this.render();
	}

	private async createNotebook() {
		const title = prompt("Notebook name:");
		if (!title?.trim()) return;
		try {
			const base = this.getApiBase();
			await fetch(`${base}/api/notebooks`, {
				method: "POST",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify({ title }),
			});
			await this.loadNotebooks();
		} catch {
			this.error = "Failed to create notebook";
			this.render();
		}
	}

	private getNoteIcon(type: string): string {
		switch (type) {
			case "NOTE": return "\u{1F4DD}";
			case "CODE": return "\u{1F4BB}";
			case "BOOKMARK": return "\u{1F517}";
			case "IMAGE": return "\u{1F5BC}";
			case "AUDIO": return "\u{1F3A4}";
			case "FILE": return "\u{1F4CE}";
			case "CLIP": return "\u2702\uFE0F";
			default: return "\u{1F4C4}";
		}
	}

	private formatDate(dateStr: string): string {
		const d = new Date(dateStr);
		const now = new Date();
		const diffMs = now.getTime() - d.getTime();
		const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
		if (diffDays === 0) return "Today";
		if (diffDays === 1) return "Yesterday";
		if (diffDays < 7) return `${diffDays}d ago`;
		return d.toLocaleDateString();
	}

	private render() {
		this.shadow.innerHTML = `
		<style>
			:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; }
			* { box-sizing: border-box; }

			.header { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; }
			.nav-btn {
				padding: 6px 14px; border-radius: 6px; border: 1px solid #444;
				background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 13px;
			}
			.nav-btn:hover { border-color: #666; }
			.header-title { font-size: 18px; font-weight: 600; margin-left: 8px; flex: 1; }
			.create-btn {
				padding: 8px 16px; border-radius: 8px; border: none;
				background: #6366f1; color: #fff; font-weight: 600; cursor: pointer; font-size: 13px;
			}
			.create-btn:hover { background: #4f46e5; }

			.search-bar {
				width: 100%; padding: 10px 14px; border-radius: 8px;
				border: 1px solid #444; background: #2a2a3e; color: #e0e0e0;
				font-size: 14px; margin-bottom: 16px;
			}
			.search-bar:focus { border-color: #6366f1; outline: none; }

			.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
			.notebook-card {
				border-radius: 10px; padding: 16px; cursor: pointer;
				border: 2px solid transparent; transition: border-color 0.2s;
				min-height: 120px; display: flex; flex-direction: column; justify-content: space-between;
			}
			.notebook-card:hover { border-color: rgba(255,255,255,0.2); }
			.notebook-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
			.notebook-meta { font-size: 12px; opacity: 0.7; }

			.note-item {
				background: #1e1e2e; border: 1px solid #333; border-radius: 8px;
				padding: 12px 16px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.2s;
				display: flex; gap: 12px; align-items: flex-start;
			}
			.note-item:hover { border-color: #555; }
			.note-icon { font-size: 20px; flex-shrink: 0; }
			.note-body { flex: 1; min-width: 0; }
			.note-title { font-size: 14px; font-weight: 600; }
			.note-preview { font-size: 12px; color: #888; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
			.note-meta { font-size: 11px; color: #666; margin-top: 4px; display: flex; gap: 8px; }
			.tag { display: inline-block; padding: 1px 6px; border-radius: 3px; background: #333; color: #aaa; font-size: 10px; }
			.pinned { color: #f59e0b; }

			.note-content {
				background: #1e1e2e; border: 1px solid #333; border-radius: 10px;
				padding: 20px; font-size: 14px; line-height: 1.6;
			}

			.empty { text-align: center; color: #666; padding: 40px; }
			.loading { text-align: center; color: #888; padding: 40px; }
			.error { text-align: center; color: #ef5350; padding: 20px; }
		</style>

		${this.error ? `<div class="error">${this.esc(this.error)}</div>` : ""}
		${this.loading ? '<div class="loading">Loading...</div>' : ""}
		${!this.loading ? this.renderView() : ""}
		`;

		this.attachListeners();
	}

	private renderView(): string {
		if (this.view === "note" && this.selectedNote) return this.renderNote();
		if (this.view === "notebook" && this.selectedNotebook) return this.renderNotebook();
		return this.renderNotebooks();
	}

	private renderNotebooks(): string {
		return `
			<div class="header">
				<span class="header-title">Notebooks</span>
				<button class="create-btn" id="create-notebook">+ New Notebook</button>
			</div>
			<input class="search-bar" type="text" placeholder="Search notes..." id="search-input" value="${this.esc(this.searchQuery)}">

			${this.searchQuery && this.searchResults.length > 0 ? `
				<div style="margin-bottom:16px;font-size:13px;color:#888">${this.searchResults.length} results for "${this.esc(this.searchQuery)}"</div>
				${this.searchResults.map((n) => this.renderNoteItem(n)).join("")}
			` : ""}

			${!this.searchQuery ? `
				<div class="grid">
					${this.notebooks.map((nb) => `
						<div class="notebook-card" data-notebook="${nb.id}"
							style="background:${nb.cover_color}33;border-color:${nb.cover_color}55">
							<div>
								<div class="notebook-title">${this.esc(nb.title)}</div>
								<div class="notebook-meta">${this.esc(nb.description || "")}</div>
							</div>
							<div class="notebook-meta">${nb.note_count} notes &middot; ${this.formatDate(nb.updated_at)}</div>
						</div>
					`).join("")}
				</div>
				${this.notebooks.length === 0 ? '<div class="empty">No notebooks yet. Create one to get started.</div>' : ""}
			` : ""}
		`;
	}

	private renderNotebook(): string {
		const nb = this.selectedNotebook!;
		return `
			<div class="header">
				<button class="nav-btn" data-back="notebooks">Back</button>
				<span class="header-title" style="color:${nb.cover_color}">${this.esc(nb.title)}</span>
			</div>
			${nb.notes && nb.notes.length > 0
				? nb.notes.map((n) => this.renderNoteItem(n)).join("")
				: '<div class="empty">No notes in this notebook.</div>'
			}
		`;
	}

	private renderNoteItem(n: Note): string {
		return `
			<div class="note-item" data-note="${n.id}">
				<span class="note-icon">${this.getNoteIcon(n.type)}</span>
				<div class="note-body">
					<div class="note-title">${n.is_pinned ? '<span class="pinned">&#x1F4CC;</span> ' : ""}${this.esc(n.title)}</div>
					<div class="note-preview">${this.esc(n.content_plain || "")}</div>
					<div class="note-meta">
						<span>${this.formatDate(n.updated_at)}</span>
						<span>${n.type}</span>
						${n.tags ? n.tags.map((t) => `<span class="tag">${this.esc(t)}</span>`).join("") : ""}
					</div>
				</div>
			</div>
		`;
	}

	private renderNote(): string {
		const n = this.selectedNote!;
		return `
			<div class="header">
				<button class="nav-btn" data-back="${this.selectedNotebook ? "notebook" : "notebooks"}">Back</button>
				<span class="header-title">${this.getNoteIcon(n.type)} ${this.esc(n.title)}</span>
			</div>
			<div class="note-content">${n.content || '<em style="color:#666">Empty note</em>'}</div>
			<div style="margin-top:12px;font-size:12px;color:#666;display:flex;gap:12px">
				<span>Type: ${n.type}</span>
				<span>Created: ${this.formatDate(n.created_at)}</span>
				<span>Updated: ${this.formatDate(n.updated_at)}</span>
				${n.tags ? n.tags.map((t) => `<span class="tag">${this.esc(t)}</span>`).join("") : ""}
			</div>
		`;
	}

	private attachListeners() {
		// Create notebook
		this.shadow.getElementById("create-notebook")?.addEventListener("click", () => this.createNotebook());

		// Search
		const searchInput = this.shadow.getElementById("search-input") as HTMLInputElement;
		let searchTimeout: any;
		searchInput?.addEventListener("input", () => {
			clearTimeout(searchTimeout);
			this.searchQuery = searchInput.value;
			searchTimeout = setTimeout(() => this.searchNotes(this.searchQuery), 300);
		});

		// Notebook cards
		this.shadow.querySelectorAll("[data-notebook]").forEach((el) => {
			el.addEventListener("click", () => {
				const id = (el as HTMLElement).dataset.notebook!;
				this.view = "notebook";
				this.loadNotebook(id);
			});
		});

		// Note items
		this.shadow.querySelectorAll("[data-note]").forEach((el) => {
			el.addEventListener("click", () => {
				const id = (el as HTMLElement).dataset.note!;
				this.view = "note";
				this.loadNote(id);
			});
		});

		// Back buttons
		this.shadow.querySelectorAll("[data-back]").forEach((el) => {
			el.addEventListener("click", (e) => {
				e.stopPropagation();
				const target = (el as HTMLElement).dataset.back;
				if (target === "notebooks") { this.view = "notebooks"; this.render(); }
				else if (target === "notebook") { this.view = "notebook"; this.render(); }
			});
		});
	}

	private esc(s: string): string {
		const d = document.createElement("div");
		d.textContent = s || "";
		return d.innerHTML;
	}
}

customElements.define("folk-notes-app", FolkNotesApp);