<template>
	<Head>
		<Title>d[any] - Modification</Title>
	</Head>
	<ClientOnly>
		<CollapsibleRoot asChild class="flex flex-1 flex-col xl:-mx-12 xl:-my-8 lg:-mx-8 lg:-my-6 -mx-6 -my-3  overflow-hidden" v-model="open">
			<div>
				<div class="z-50 md:hidden flex w-full items-center justify-between h-12 border-b border-light-35 dark:border-dark-35">
					<div class="flex items-center px-2">
						<CollapsibleTrigger asChild>
							<Button icon class="ms-2 !bg-transparent group">
								<Icon class="group-data-[state=open]:hidden" icon="radix-icons:hamburger-menu" />
								<Icon class="group-data-[state=closed]:hidden" icon="radix-icons:cross-1" />
							</Button>
						</CollapsibleTrigger>
					</div>
					<div class="flex items-center px-2">
						<Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
					</div>
				</div>
				<div class="flex flex-1 flex-row relative overflow-hidden">
					<CollapsibleContent asChild forceMount>
						<div class=" overflow-hidden bg-light-0 dark:bg-dark-0 z-40 xl:w-96 md:w-[15em] max-h-full w-full border-r border-light-30 dark:border-dark-30 flex flex-col justify-between max-md:absolute max-md:-top-0 max-md:-bottom-0 md:left-0 max-md:data-[state=closed]:-left-full max-md:transition-[left] max-md:z-40 max-md:data-[state=open]:left-0">
							<div class="flex flex-col gap-4 xl:px-6 px-3 py-4">
								<div class="flex justify-between items-center max-md:hidden">
									<div class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-md:ps-6" aria-label="Accueil">
										<Avatar src="/logo.dark.svg" class="dark:block hidden" />
										<Avatar src="/logo.light.svg" class="block dark:hidden" />
									</div>
									<div class="flex gap-4 items-center">
										<Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
									</div>
								</div>
							</div>
							<div class="flex flex-1 flex-col max-w-full max-h-full overflow-hidden py-3" v-if="navigation">
								<div class="flex flex-row justify-between items-center mb-4 px-6">
									<div class="flex flex-1 flex-row justify-start items-center gap-4">
										<Tooltip side="top" message="Annuler (Ctrl+Shift+W)" ><Button icon @click="router.go(-1)"><Icon class="w-5 h-5" icon="radix-icons:arrow-left" /></Button></Tooltip>
										<Tooltip side="top" message="Enregistrer (Ctrl+S)" ><Button icon :loading="saveStatus === 'pending'" @click="save(true)"><Icon class="w-5 h-5" icon="radix-icons:check" /></Button></Tooltip>
										<span v-if="edited" class="text-sm text-light-60 dark:text-dark-60 italic">Modifications non enregistrées</span>
									</div>
									<div class="flex flex-row justify-end items-center gap-4">
										<AlertDialogRoot v-if="selected">
											<Tooltip side="top" message="Supprimer"><AlertDialogTrigger as="span"><Button icon class="border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red hover:bg-light-redBack dark:hover:bg-dark-redBack text-light-red dark:text-dark-red focus:shadow-light-red dark:focus:shadow-dark-red" ><Icon class="w-5 h-5" icon="radix-icons:trash" /></Button></AlertDialogTrigger></Tooltip>
											<AlertDialogPortal>
												<AlertDialogOverlay  class="bg-light-0 dark:bg-dark-0 opacity-70 fixed inset-0 z-40" />
												<AlertDialogContent class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[800px] translate-x-[-50%] translate-y-[-50%] bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30 p-6 z-50 text-light-100 dark:text-dark-100 flex md:flex-row flex-col gap-4 items-center">
													<AlertDialogTitle class="text-xl font-semibold">Supprimer <span>{{ selected.title }}</span><span v-if="selected.children"> et tous ces enfants</span> ?</AlertDialogTitle>
													<div class="flex flex-1 flex-row gap-4 justify-end">
														<AlertDialogAction asChild @click="navigation = tree.remove(navigation, getPath(selected))"><Button class="border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red hover:bg-light-redBack dark:hover:bg-dark-redBack text-light-red dark:text-dark-red focus:shadow-light-red dark:focus:shadow-dark-red">Oui</Button></AlertDialogAction>
														<AlertDialogCancel asChild><Button>Non</Button></AlertDialogCancel>
													</div>
												</AlertDialogContent>
											</AlertDialogPortal>
										</AlertDialogRoot>
										<Tooltip side="top" message="Nouveau">
											<DropdownMenu align="center" side="bottom" :options="[{
												type: 'item',
												label: 'Markdown',
												kbd: 'Ctrl+N',
												icon: 'radix-icons:file',
												select: () => add('markdown'),
											}, {
												type: 'item',
												label: 'Dossier',
												kbd: 'Ctrl+Shift+N',
												icon: 'lucide:folder',
												select: () => add('folder'),
											}, {
												type: 'item',
												label: 'Canvas',
												icon: 'ph:graph-light',
												select: () => add('canvas'),
											}, {
												type: 'item',
												label: 'Fichier',
												icon: 'radix-icons:file-text',
												select: () => add('file'),
											}]">
												<Button icon><Icon class="w-5 h-5" icon="radix-icons:plus" /></Button>
											</DropdownMenu>
										</Tooltip>
									</div>
								</div>
								<DraggableTree class="ps-4 pe-2 xl:text-base text-sm" 
								:items="navigation ?? undefined" :get-key="(item: Partial<ProjectExtendedItem>) => item.path !== undefined ? getPath(item as ProjectExtendedItem) : ''" @updateTree="drop" 
								v-model="selected" :defaultExpanded="defaultExpanded" >
									<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, item }">
										<div class="flex flex-1 items-center px-2 max-w-full pe-4" :class="{ 'opacity-50': isDragging }" :style="{ 'padding-left': `${item.level - 0.5}em` }">
											<span class="py-2 px-2" @click="handleToggle" v-if="item.hasChildren" >
												<Icon :icon="isExpanded ? 'lucide:folder-open' : 'lucide:folder'"/>
											</span>
											<Icon v-else-if="iconByType[item.value.type]" :icon="iconByType[item.value.type]" class="group-[:hover]:text-accent-purple mx-2" @click="handleSelect" />
											<div class="pl-3 py-1 flex-1 truncate" :title="item.value.title" @click="handleSelect" :class="{ 'font-semibold': item.hasChildren }">
												{{ item.value.title }}
											</div>
											<div class="flex gap-2">
												<span @click="item.value.private = !item.value.private">
													<Icon v-if="item.value.private" icon="radix-icons:lock-closed" />
													<Icon v-else class="text-light-50 dark:text-dark-50" icon="radix-icons:lock-open-2" />
												</span>
												<span @click="item.value.navigable = !item.value.navigable">
													<Icon v-if="item.value.navigable" icon="radix-icons:eye-open" />
													<Icon v-else class="text-light-50 dark:text-dark-50" icon="radix-icons:eye-none" />
												</span>
											</div>
										</div>
									</template>
									<template #hint="{ instruction }">
										<div v-if="instruction" class="absolute h-full w-full top-0 right-0 border-light-50 dark:border-dark-50" :style="{
												width: `calc(100% - ${instruction.currentLevel - 1}em)`
											}" :class="{
												'!border-b-4': instruction?.type === 'reorder-below',
												'!border-t-4': instruction?.type === 'reorder-above',
												'!border-4': instruction?.type === 'make-child',
											}"></div>
									</template>
								</DraggableTree>
							</div>
						</div>
					</CollapsibleContent>
					<div class="flex flex-1 flex-row max-h-full overflow-hidden">
						<div v-if="selected" class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 flex-col items-start justify-start max-h-full relative">
							<Head>
								<Title>d[any] - Modification de {{ selected.title }}</Title>
							</Head>
							<div>
								<input type="text" v-model="selected.title" placeholder="Titre" class="inline md:h-16 h-12 w-full caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none py-1 md:text-5xl text-4xl font-thin bg-transparent" />
								<div class="flex flex-col justify-start items-start">
									<Switch label="Chemin personnalisé" v-model="selected.customPath" />
									<span>
										<pre v-if="selected.customPath" class="flex md:items-center md:text-base md:text-nowrap text-wrap md:flex-nowrap flex-wrap text-sm">/{{ selected.parent !== '' ? selected.parent + '/' : '' }}<TextInput v-model="selected.name" @input="(e) => {
											if(selected && selected.customPath)
											{
												selected.name = parsePath(selected.name);
												rebuildPath(selected.children, getPath(selected));
											}
										}" class="mx-0"/></pre>
										<pre v-else class="md:text-base text-smmd:text-nowrap text-wrap ">/{{ getPath(selected) }}</pre>
									</span>
								</div>
							</div>
							<div class="py-4 flex-1 w-full max-h-full flex overflow-hidden">
								<template v-if="selected.type === 'markdown'">
									<div v-if="contentStatus === 'pending'" class="flex flex-1 justify-center items-center">
										<Loading />
									</div>
									<span v-else-if="contentError">{{ contentError }}</span>
									<SplitterGroup direction="horizontal" class="flex-1 w-full flex" v-else-if="selected.content !== undefined">
										<SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }" :defaultSize="50">
											<Editor v-model="selected.content" placeholder="Commencer votre aventure ..." class="flex-1 bg-transparent appearance-none outline-none max-h-full resize-none !overflow-y-auto" :class="{ 'hidden': isCollapsed }" />
										</SplitterPanel>
										<SplitterResizeHandle class="bg-light-35 dark:bg-dark-35 w-px xl!mx-4 mx-2" />
										<SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }">
											<div class="flex-1 max-h-full !overflow-y-auto px-8" :class="{ 'hidden': isCollapsed }"><Markdown :content="debounced" :proses="{ 'a': FakeA }" /></div>
										</SplitterPanel>
									</SplitterGroup>
								</template>
								<template v-else-if="selected.type === 'canvas'">
									<span class="flex flex-1 justify-center items-center"><ProseH3>Editeur de graphe en cours de développement</ProseH3></span>
								</template>
								<template v-else-if="selected.type === 'file'">
									<span>Modifier le contenu :</span><input type="file" @change="(e) => console.log(e)" />
								</template>
							</div>
						</div>
					</div>
				</div>
			</div>
		</CollapsibleRoot>
	</ClientOnly>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/tree-item';
import { parsePath } from '#shared/general.utils';
import type { ProjectItem } from '~/schemas/project';
import type { FileType } from '~/schemas/file';
import { iconByType } from '#shared/general.utils';
import FakeA from '~/components/prose/FakeA.vue';

interface ProjectExtendedItem extends ProjectItem
{
	customPath: boolean
	content?: string
	children?: ProjectExtendedItem[]
}
interface ProjectExtended
{
	items: ProjectExtendedItem[]
}

definePageMeta({
	rights: ['admin', 'editor'],
	layout: 'null',
});

const router = useRouter();
const open = ref(true);

const toaster = useToast();
const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');

const { data: project } = await useFetch(`/api/project`, {
	transform: (project) => {
		if(project)
			(project as ProjectExtended).items = transform(project.items)!;

		return project as ProjectExtended;
	}
});
const navigation = computed<ProjectExtendedItem[] | undefined>({ 
    get: () => project.value?.items,
    set: (value) => {
        const proj = project.value;
		edited.value = true;

        if(proj && value)
            proj.items = value;

        project.value = proj;
    }
});
const selected = ref<ProjectExtendedItem>(), edited = ref(false);
const contentStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle'), contentError = ref<string>();

watch(selected, async (value, old) => {
	if(selected.value)
	{
		if(!selected.value.content && selected.value.path)
		{
			contentStatus.value = 'pending';
			try
			{
				const storedEdit = sessionStorage.getItem(`editing:${encodeURIComponent(selected.value.path)}`);

				if(storedEdit)
				{
					selected.value.content = storedEdit;
					contentStatus.value = 'success';
				}
				else
				{
					selected.value.content = (await $fetch(`/api/file/content/${encodeURIComponent(selected.value.path)}`, { query: { type: 'editing'} }))?.content;
					contentStatus.value = 'success';
				}
				
				//@ts-ignore
				debounced.value = selected.value.content ?? '';
			}
			catch(e)
			{
				contentError.value = (e as Error).message;
				contentStatus.value = 'error';
			}
		}
		else
		{
			//@ts-ignore
			debounced.value = selected.value.content ?? '';
		}
		router.replace({ hash: '#' + encodeURIComponent(selected.value.path || getPath(selected.value)) });
	}
	else
	{
		router.replace({ hash: '' });
	}
})
const content = computed(() => selected.value?.content ?? '');
const debounced = useDebounce(content, 250, { maxWait: 500 });

watch(debounced, () => {
	if(selected.value && debounced.value)
		sessionStorage.setItem(`editing:${encodeURIComponent(selected.value.path)}`, debounced.value);
});
useShortcuts({
    meta_s: { usingInput: true, handler: () => save(false) },
    meta_n: { usingInput: true, handler: () => add('markdown') },
    meta_shift_n: { usingInput: true, handler: () => add('folder') },
    meta_shift_z: { usingInput: true, handler: () => router.push({ name: 'explore-path', params: { path: 'index' } }) }
})

const tree = {
  remove(data: ProjectExtendedItem[], id: string): ProjectExtendedItem[] {
	return data
	  .filter(item => getPath(item) !== id)
	  .map((item) => {
		if (tree.hasChildren(item)) {
		  return {
			...item,
			children: tree.remove(item.children ?? [], id),
		  };
		}
		return item;
	  });
  },
  insertBefore(data: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
	return data.flatMap((item) => {
	  if (getPath(item) === targetId)
		return [newItem, item];

	  if (tree.hasChildren(item)) {
		return {
		  ...item,
		  children: tree.insertBefore(item.children ?? [], targetId, newItem),
		};
	  }
	  return item;
	});
  },
  insertAfter(data: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
	return data.flatMap((item) => {
	  if (getPath(item) === targetId)
		return [item, newItem];

	  if (tree.hasChildren(item)) {
		return {
		  ...item,
		  children: tree.insertAfter(item.children ?? [], targetId, newItem),
		};
	  }

	  return item;
	});
  },
  insertChild(data: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
	return data.flatMap((item) => {
	  if (getPath(item) === targetId) {
		// already a parent: add as first child
		return {
		  ...item,
		  // opening item so you can see where item landed
		  isOpen: true,
		  children: [newItem, ...item.children ?? []],
		};
	  }

	  if (!tree.hasChildren(item))
		return item;

	  return {
		...item,
		children: tree.insertChild(item.children ?? [], targetId, newItem),
	  };
	});
  },
  find(data: ProjectExtendedItem[], itemId: string): ProjectExtendedItem | undefined {
	for (const item of data) {
	  if (getPath(item) === itemId)
		return item;

	  if (tree.hasChildren(item)) {
		const result = tree.find(item.children ?? [], itemId);
		if (result)
		  return result;
	  }
	}
  },
  search(data: ProjectExtendedItem[], prop: keyof ProjectExtendedItem, value: string): ProjectExtendedItem[] {
	const arr = [];

	for (const item of data)
	{
	  if (item[prop]?.toString().toLowerCase()?.startsWith(value.toLowerCase()))
		arr.push(item);

	  if (tree.hasChildren(item)) {
		arr.push(...tree.search(item.children ?? [], prop, value));
	  }
	}

	return arr;
  },
  getPathToItem({
	current,
	targetId,
	parentIds = [],
  }: {
	current: ProjectExtendedItem[]
	targetId: string
	parentIds?: string[]
  }): string[] | undefined {
	for (const item of current) {
	  if (getPath(item) === targetId)
		return parentIds;

	  const nested = tree.getPathToItem({
		current: (item.children ?? []),
		targetId,
		parentIds: [...parentIds, getPath(item)],
	  });
	  if (nested)
		return nested;
	}
  },
  hasChildren(item: ProjectExtendedItem): boolean {
	return (item.children ?? []).length > 0;
  },
}

function add(type: FileType): void
{
	if(!navigation.value)
	{
		return;
	}

	const news = [...tree.search(navigation.value, 'title', 'Nouveau')].filter((e, i, a) => a.indexOf(e) === i);
	const title = `Nouveau${news.length > 0 ? ' (' + news.length +')' : ''}`;
	const item: ProjectExtendedItem = { navigable: true, private: false, parent: '', path: '', title: title, name: parsePath(title), type: type, order: 0, children: type === 'folder' ? [] : undefined, customPath: false, content: type === 'markdown' ? '' : undefined };

	if(!selected.value)
	{
		navigation.value = [...navigation.value, item];
	}
	else if(selected.value?.children)
	{
		item.parent = getPath(selected.value);
		navigation.value = tree.insertChild(navigation.value, item.parent, item);
	}
	else
	{
		navigation.value = tree.insertAfter(navigation.value, getPath(selected.value), item);
	}
}
function updateTree(instruction: Instruction, itemId: string, targetId: string) : ProjectExtendedItem[] | undefined {
	if(!navigation.value)
		return;

    const item = tree.find(navigation.value, itemId);
    const target = tree.find(navigation.value, targetId);

	if(!item)
		return;
	
	if (instruction.type === 'reparent') {
		const path = tree.getPathToItem({
			current: navigation.value,
			targetId: targetId,
		});
		if (!path) {
			console.error(`missing ${path}`);
			return;
		}

		const desiredId = path[instruction.desiredLevel];
		let result = tree.remove(navigation.value, itemId);
		result = tree.insertAfter(result, desiredId, item);
		return result;
	}

	// the rest of the actions require you to drop on something else
	if (itemId === targetId)
		return navigation.value;

	if (instruction.type === 'reorder-above') {
		let result = tree.remove(navigation.value, itemId);
		result = tree.insertBefore(result, targetId, item);
		return result;
	}

	if (instruction.type === 'reorder-below') {
		let result = tree.remove(navigation.value, itemId);
		result = tree.insertAfter(result, targetId, item);
		return result;
	}

	if (instruction.type === 'make-child') {
        if(!target || target.type !== 'folder')
            return;

		let result = tree.remove(navigation.value, itemId);
		result = tree.insertChild(result, targetId, item);
        rebuildPath([item], targetId);
		return result;
	}

  return navigation.value;
}
function transform(items: ProjectItem[] | undefined): ProjectExtendedItem[] | undefined
{
	return items?.map(e => ({...e, customPath: e.name !== parsePath(e.title), children: transform(e.children)}));
}
function drop(instruction: Instruction, itemId: string, targetId: string)
{
    navigation.value = updateTree(instruction, itemId, targetId) ?? navigation.value ?? [];
}
function rebuildPath(tree: ProjectExtendedItem[] | null | undefined, parentPath: string)
{
    if(!tree)
        return;

    tree.forEach(e => {
        e.parent = parentPath;
        rebuildPath(e.children, getPath(e));
    });
}
async function save(redirect: boolean): Promise<void>
{
	saveStatus.value = 'pending';
	try {
		await $fetch(`/api/project`, {
			method: 'post',
			body: project.value,
		});
		saveStatus.value = 'success';
		edited.value = false;
		sessionStorage.clear();

		toaster.clear('error');
		toaster.add({
			type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000
		});

		if(redirect) router.go(-1);
	} catch(e: any) {
		toaster.add({
			type: 'error', content: e.message, timer: true, duration: 10000
		})
		saveStatus.value = 'error';
	}
}
function getPath(item: ProjectExtendedItem): string
{
    return [item.parent, parsePath(item.customPath ? item.name : item.title)].filter(e => !!e).join('/');
}

const defaultExpanded = computed(() => {
	if(router.currentRoute.value.hash)
	{
		const split = router.currentRoute.value.hash.substring(1).split('/');
		split.forEach((e, i) => { if(i !== 0) split[i] = split[i - 1] + '/' + e });
		return split;
	}
})
watch(router.currentRoute, (value) => {
	if(value && value.hash && navigation.value)
		selected.value = tree.find(navigation.value, decodeURIComponent(value.hash.substring(1)));
	else
		selected.value = undefined;
}, { immediate: true });
</script>