/**
 * FileTree lists the workspace files VS Code style: Material icons, chevrons
 * on directories, indent guides, and the previewed file highlighted.
 * Directories load lazily. Clicking a file opens it in the preview tab;
 * double-clicking opens it in the editor.
 *
 * Icons are the Material Icon Theme SVGs, served from /material-icons
 * (copied into public/ by ui/scripts/copy-icons.mjs).
 *
 * @example
 * <FileTree />
 */

import { useCallback, useEffect, useState } from "react";
import {
	getIconForDirectoryPath,
	getIconForFilePath,
	getIconUrlByName,
	isMaterialIconName,
} from "vscode-material-icons";
import { type FileEntry, listFiles } from "../api";
import { openEditor, openPreview, useWorkspace } from "../workspace";

const ICONS_URL = "/material-icons";

export function FileTree() {
	const [entries, setEntries] = useState<FileEntry[] | null>(null);
	const [error, setError] = useState<string | null>(null);

	const refresh = useCallback(() => {
		listFiles()
			.then((result) => {
				setEntries(result.entries);
				setError(null);
			})
			.catch((cause: Error) => setError(cause.message));
	}, []);

	useEffect(() => {
		refresh();
	}, [refresh]);

	return (
		<nav className="filetree" aria-label="workspace files">
			<div className="filetree-header">
				<span>Files</span>
				<button
					type="button"
					className="filetree-refresh"
					onClick={refresh}
					title="Refresh"
				>
					⟳
				</button>
			</div>
			{error && <p className="filetree-error">{error}</p>}
			{entries === null && !error && (
				<p className="filetree-loading">loading…</p>
			)}
			{entries && <EntryList entries={entries} depth={0} />}
		</nav>
	);
}

function EntryList({
	entries,
	depth,
}: { entries: FileEntry[]; depth: number }) {
	return (
		<ul className={`filetree-list${depth > 0 ? " filetree-list-nested" : ""}`}>
			{entries.map((entry) => (
				<li key={entry.path}>
					{entry.isDir ? (
						<DirectoryNode entry={entry} depth={depth} />
					) : (
						<FileNode entry={entry} depth={depth} />
					)}
				</li>
			))}
		</ul>
	);
}

/** materialIconUrl resolves the Material icon for an entry (open-folder aware). */
function materialIconUrl(entry: FileEntry, expanded: boolean): string {
	let name = entry.isDir
		? getIconForDirectoryPath(entry.name)
		: getIconForFilePath(entry.name);
	if (entry.isDir && expanded) {
		const openName = `${name}-open`;
		if (isMaterialIconName(openName)) {
			name = openName;
		}
	}
	return getIconUrlByName(name, ICONS_URL);
}

function DirectoryNode({ entry, depth }: { entry: FileEntry; depth: number }) {
	const [children, setChildren] = useState<FileEntry[] | null>(null);
	const [expanded, setExpanded] = useState(false);

	const toggle = () => {
		const next = !expanded;
		setExpanded(next);
		if (next && children === null) {
			listFiles(entry.path)
				.then((result) => setChildren(result.entries))
				.catch(() => setChildren([]));
		}
	};

	return (
		<>
			<button
				type="button"
				className="filetree-entry filetree-dir"
				style={{ paddingLeft: `${depth * 0.75}rem` }}
				onClick={toggle}
			>
				<span className="filetree-chevron" aria-hidden>
					{expanded ? "⌄" : "›"}
				</span>
				<img
					className="filetree-icon"
					src={materialIconUrl(entry, expanded)}
					alt=""
				/>
				<span className="filetree-name">{entry.name}</span>
			</button>
			{expanded && children && (
				<EntryList entries={children} depth={depth + 1} />
			)}
		</>
	);
}

function FileNode({ entry, depth }: { entry: FileEntry; depth: number }) {
	const active = useWorkspace(
		(workspace) =>
			workspace.previewPath === entry.path ||
			workspace.editorPath === entry.path,
	);
	return (
		<button
			type="button"
			className={`filetree-entry filetree-file${active ? " filetree-active" : ""}`}
			style={{ paddingLeft: `${depth * 0.75}rem` }}
			title="Click: preview — double-click: edit"
			onClick={() => openPreview(entry.path)}
			onDoubleClick={() => openEditor(entry.path)}
		>
			<span className="filetree-chevron" aria-hidden />
			<img
				className="filetree-icon"
				src={materialIconUrl(entry, false)}
				alt=""
			/>
			<span className="filetree-name">{entry.name}</span>
		</button>
	);
}