{{ template "headersMenu.html" . }}


<style>
	@media (min-width: 1024px) {
		body {
			background: #f8f5f1 !important;
		}
		main {
			background: transparent !important;
		}
	}
	#editor, #editorPreview {
	  width: 100%;
	  height: 400px;
	}
	#editorPreview {
		width: 100%;
		height: 400px;
		overflow: auto;
	}
	.modal {
	  display: none;
	  position: fixed;
	  z-index: 1000;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  overflow: auto;
	  background-color: rgba(0,0,0,0.4);
	}
	.modal-content {
	  margin: 10% auto;
	  padding: 20px;
	  width: 80%;
	  max-width: 600px;
	}
  </style>
  
  <div class="container mx-auto mt-20">
	<h1 class="mb-4 text-3xl font-bold">Éditeur de bots</h1>
	
	<div class="flex flex-wrap mb-4">
	  <button id="addBot" class="px-3 py-1 mx-1 mb-2 font-bold rounded-lg border-2 border hover:border-black transparent text-dark dark:text-white">
		Ajouter un BOT
	  </button>
	  <button id="saveJSON" class="px-3 py-1 mx-1 mb-2 font-bold rounded-lg border-2 border hover:border-black transparent text-dark dark:text-white">
		Exporter JSON
	  </button>
	  <button id="loadJSON" class="px-3 py-1 mx-1 mb-2 font-bold rounded-lg border-2 border hover:border-black transparent text-dark dark:text-white">
		Charger JSON
	  </button>
	  <input type="file" id="fileInput" accept=".json" class="hidden">
	  <button id="togglePreview" class="px-4 py-2 mb-2 font-bold text-white bg-purple-600 rounded hover:bg-purple-700 lg:hidden">
		Basculer l'aperçu
	  </button>
	</div>
  
	<div class="flex flex-wrap -mx-2">
	  <div class="px-2 mb-4 w-full lg:w-1/2">
		<div id="editor" class="mb-4 w-full h-96"></div>
	  </div>
	  <div id="previewContainer" class="hidden px-2 mb-4 w-full lg:w-1/2 lg:block">
		<div id="editorPreview" class="overflow-auto p-4 mb-4 w-full h-96 bg-white rounded shadow-md dark:bg-black"></div>
	  </div>
	</div>
  
	<div id="botList" class="space-y-4"></div>
  </div>
  

<div id="modal" class="bg-gray-200 modal dark:bg-black">
	<div class="bg-gray-100 rounded-lg shadow-xl dark:bg-gray-800 modal-content">
	  <h2 id="modalTitle" class="mb-4 text-2xl font-bold"></h2>
	  <div id="modalForm"></div>
	  <div class="flex justify-between mt-4">
		<button id="modalClose" class="px-4 py-2 font-bold rounded-md border-2 border text-dark dark:text-white transparent">
			{{ "Fermer" | }}
		</button>
		<button id="modalSave" class="px-4 py-2 mr-2 font-bold text-white rounded-md border-2 border bg-dark dark:bg-white dark:text-black">
		  {{ "Sauvegarder" | }}
		</button>
	  </div>
	</div>
  </div>

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>

  <script>
	const editor = ace.edit("editor");
	editor.setTheme("ace/theme/monokai");
	editor.session.setMode("ace/mode/json");
	
	let botList = [];
	let updateTimeout = null;
	let currentEditIndex = -1;
	
	function loadFromLocalStorage() {
	  const savedBotList = localStorage.getItem('botList');
	  if (savedBotList) {
		botList = JSON.parse(savedBotList);
		updateEditor();
		updatePreview();
	  }
	}
	
	function saveToLocalStorage() {
	  localStorage.setItem('botList', JSON.stringify(botList));
	}
	
	function updateEditor() {
	  const cursorPosition = editor.getCursorPosition();
	  editor.setValue(JSON.stringify(botList, null, 2), -1);
	  editor.moveCursorToPosition(cursorPosition);
	}
	
	function updatePreview() {
	  const previewElement = document.getElementById('editorPreview');
	  previewElement.innerHTML = '';
	  botList.forEach((bot, index) => {
		const botPreview = document.createElement('div');
		botPreview.className = 'mb-4 p-4 bg-gray-200 dark:bg-gray-800 rounded cursor-pointer hover:bg-white dark:hover:bg-black';
		botPreview.innerHTML = `
		  <h3 class="font-bold">${bot.name}</h3>
		  <p><strong>Tag:</strong> ${bot.tag}</p>
		  <p><strong>Model:</strong> ${bot.model}</p>
		  <p><strong>Live:</strong> ${bot.live ? 'Oui' : 'Non'}</p>
		  <p><strong>Prompt:</strong> ${bot.prompt.substring(0, 50)}${bot.prompt.length > 50 ? '...' : ''}</p>
		`;
		botPreview.addEventListener('click', () => openModal(index));
		previewElement.appendChild(botPreview);
	  });
	}
	
	function createBotForm(bot) {
	  return `
		<div class="mb-4">
		  <label class="block mb-2 text-sm font-bold text-gray-700" for="tag">
			Tag
			<input class="px-3 py-2 w-full text-gray-700 bg-white rounded border-2 border shadow appearance-none dark:bg-black focus:outline-none focus:shadow-outline" id="tag" type="text" value="${bot.tag}">
		  </label>
		</div>
		<div class="mb-4">
		  <label class="block mb-2 text-sm font-bold text-gray-700" for="name">
			Name
			<input class="px-3 py-2 w-full text-gray-700 bg-white rounded border-2 border shadow appearance-none dark:bg-black focus:outline-none focus:shadow-outline" id="name" type="text" value="${bot.name}">
		  </label>
		</div>
		<div class="mb-4">
		  <label class="block mb-2 text-sm font-bold text-gray-700" for="model">
			Model
			<input class="px-3 py-2 w-full text-gray-700 bg-white rounded border-2 border shadow appearance-none dark:bg-black focus:outline-none focus:shadow-outline" id="model" type="text" value="${bot.model}">
		  </label>
		</div>
		<div class="mb-4">
		  <label class="block mb-2 text-sm font-bold text-gray-700" for="prompt">
			Prompt
			<textarea class="px-3 py-2 w-full text-gray-700 bg-white rounded border-2 border shadow appearance-none dark:bg-black focus:outline-none focus:shadow-outline" id="prompt" rows="3">${bot.prompt}</textarea>
		  </label>
		</div>
		<div class="mb-4">
		  <label class="block mb-2 text-sm font-bold text-gray-700" for="live">
			Live
			<input class="mr-2 bg-white border-2 border dark:bg-black" type="checkbox" id="live" ${bot.live ? 'checked' : ''}>
		  </label>
		</div>
	  `;
	}
	
	function openModal(index) {
	  currentEditIndex = index;
	  const modal = document.getElementById('modal');
	  const modalTitle = document.getElementById('modalTitle');
	  const modalForm = document.getElementById('modalForm');
	
	  modalTitle.textContent = `Éditer BOT: ${botList[index].name}`;
	  modalForm.innerHTML = createBotForm(botList[index]);
	
	  modal.style.display = 'block';
	}
	
	function closeModal() {
	  const modal = document.getElementById('modal');
	  modal.style.display = 'none';
	  currentEditIndex = -1;
	}
	
	function saveModalChanges() {
	  if (currentEditIndex === -1) return;
	
	  botList[currentEditIndex] = {
		tag: document.getElementById('tag').value,
		name: document.getElementById('name').value,
		model: document.getElementById('model').value,
		prompt: document.getElementById('prompt').value,
		live: document.getElementById('live').checked
	  };
	
	  updateEditor();
	  updatePreview();
	  saveToLocalStorage();
	  closeModal();
	}
	
	document.getElementById('addBot').addEventListener('click', () => {
	  const newBot = {
		tag: "",
		name: "",
		model: "",
		prompt: "",
		live: false
	  };
	  botList.push(newBot);
	  updateEditor();
	  updatePreview();
	  saveToLocalStorage();
	});
	
	document.getElementById('saveJSON').addEventListener('click', () => {
	  const jsonString = JSON.stringify(botList, null, 2);
	  const blob = new Blob([jsonString], {type: "application/json"});
	  const url = URL.createObjectURL(blob);
	  const a = document.createElement('a');
	  a.href = url;
	  a.download = 'botlist.json';
	  document.body.appendChild(a);
	  a.click();
	  document.body.removeChild(a);
	  URL.revokeObjectURL(url);
	});
	
	document.getElementById('loadJSON').addEventListener('click', () => {
	  document.getElementById('fileInput').click();
	});
	
	document.getElementById('fileInput').addEventListener('change', (event) => {
	  const file = event.target.files[0];
	  if (file) {
		const reader = new FileReader();
		reader.onload = function(e) {
		  try {
			const loadedBotList = JSON.parse(e.target.result);
			if (Array.isArray(loadedBotList)) {
			  botList = loadedBotList;
			  updateEditor();
			  updatePreview();
			  saveToLocalStorage();
			} else {
			  throw new Error('Invalid JSON format');
			}
		  } catch (error) {
			alert('Erreur lors du chargement du fichier JSON : ' + error.message);
		  }
		};
		reader.readAsText(file);
	  }
	});
	
	document.getElementById('togglePreview').addEventListener('click', () => {
	  const previewContainer = document.getElementById('previewContainer');
	  previewContainer.classList.toggle('hidden');
	});
	
	document.getElementById('modalClose').addEventListener('click', closeModal);
	document.getElementById('modalSave').addEventListener('click', saveModalChanges);
	
	editor.getSession().on('change', function() {
	  try {
		const newBotList = JSON.parse(editor.getValue());
		if (Array.isArray(newBotList)) {
		  botList = newBotList;
		  updatePreview();
		  saveToLocalStorage();
		}
	  } catch (e) {
		console.error("Invalid JSON");
	  }
	});
	
	// Charger les données depuis le localStorage au démarrage
	loadFromLocalStorage();
	
	// Si aucune donnée n'est présente dans le localStorage, initialiser avec un tableau vide
	if (botList.length === 0) {
	  updateEditor();
	}
	
	updatePreview();
	</script>

{{ template "footer.html" . }}