import { feedbackText } from './feedback.mjs';

const $ = (id) => document.getElementById(id);
const worker = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' });
let busy = false;
let loaded = false;
let history = [];
let responseNode;
let pendingExchange;
let lastExchange;
let modelMetadata;

function setBusy(value) {
  busy = value;
  $('prompt').disabled = value || !loaded;
  $('send').disabled = value || !loaded;
  $('clear').disabled = value || !loaded;
  $('load').disabled = value;
  $('copy-feedback').disabled = value || !lastExchange;
  document.querySelectorAll('.suggestion').forEach((button) => { button.disabled = value || !loaded; });
}

function message(role, text) {
  const element = document.createElement('div');
  element.className = `message ${role}`;
  const speaker = document.createElement('span');
  speaker.className = 'speaker';
  speaker.textContent = role === 'user' ? 'You' : 'Hakkillo';
  const content = document.createElement('span');
  content.textContent = text;
  element.append(speaker, content);
  $('messages').append(element);
  element.scrollIntoView({ block: 'nearest' });
  return content;
}

function fail(error) {
  $('status').textContent = error;
  $('progress').hidden = true;
  if (history.at(-1)?.role === 'user') history.pop();
  if (responseNode && !responseNode.textContent) responseNode.textContent = 'The model could not finish this reply.';
  pendingExchange = null;
  setBusy(false);
}

$('load').addEventListener('click', () => {
  setBusy(true);
  $('status').textContent = 'Preparing your model download…';
  $('progress').hidden = false;
  worker.postMessage({ type: 'load' });
});

worker.addEventListener('message', ({ data }) => {
  if (data.type === 'progress') {
    $('status').textContent = data.message;
    if (data.percent != null) $('progress').value = data.percent;
  } else if (data.type === 'ready') {
    loaded = true;
    modelMetadata = data.metadata;
    $('welcome').hidden = true;
    $('progress').hidden = true;
    $('status').textContent = 'Model ready · messages stay in this browser';
    $('prompt').placeholder = 'Ask a short question in English…';
    setBusy(false);
    $('prompt').focus();
  } else if (data.type === 'token') {
    responseNode.textContent += data.text;
    $('messages').scrollTop = $('messages').scrollHeight;
  } else if (data.type === 'answer') {
    responseNode.textContent = data.text || 'I could not produce an answer. Try a shorter question.';
    history.push({ role: 'assistant', content: data.text });
    history = history.slice(-4);
    lastExchange = { ...pendingExchange, response: data.text };
    pendingExchange = null;
    $('feedback-panel').hidden = false;
    $('status').textContent = `Answered in ${data.seconds}s · experimental model`;
    setBusy(false);
    $('prompt').focus();
  } else if (data.type === 'error') {
    fail(`Could not complete this request: ${data.message}. If loading failed, reload the page to retry.`);
  }
});
worker.addEventListener('error', () => fail('The model worker could not start. Check your connection and reload this page.'));

$('chat-form').addEventListener('submit', (event) => {
  event.preventDefault();
  const text = $('prompt').value.trim();
  if (!loaded || busy || !text) return;
  setBusy(true);
  $('feedback-panel').hidden = true;
  $('feedback-status').textContent = '';
  $('feedback-fallback').hidden = true;
  $('status').textContent = 'Thinking on your CPU…';
  message('user', text);
  responseNode = message('assistant', '');
  const starter = [...document.querySelectorAll('.suggestion')].find((button) => button.dataset.prompt === text);
  pendingExchange = { prompt: text, context: history.map((turn) => ({ ...turn })), case_id: starter?.dataset.case || null };
  history.push({ role: 'user', content: text });
  $('prompt').value = '';
  worker.postMessage({ type: 'generate', messages: history });
});
$('prompt').addEventListener('keydown', (event) => {
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault();
    $('chat-form').requestSubmit();
  }
});
function clearConversation() {
  history = [];
  responseNode = null;
  pendingExchange = null;
  lastExchange = null;
  $('messages').replaceChildren();
  $('prompt').value = '';
  $('feedback-panel').hidden = true;
  $('feedback-fallback').hidden = true;
  $('feedback-fallback').value = '';
  $('feedback-status').textContent = '';
  $('status').textContent = 'New conversation · model stays loaded';
}
$('clear').addEventListener('click', clearConversation);
document.querySelectorAll('.suggestion').forEach((button) => button.addEventListener('click', () => {
  if (busy || !loaded) return;
  clearConversation();
  $('prompt').value = button.dataset.prompt;
  $('chat-form').requestSubmit();
}));
$('copy-feedback').addEventListener('click', async () => {
  if (!lastExchange || !modelMetadata || busy) return;
  const text = feedbackText(lastExchange, modelMetadata);
  try {
    await navigator.clipboard.writeText(text);
    $('feedback-status').textContent = 'Copied. Review the text before posting it.';
  } catch {
    $('feedback-fallback').hidden = false;
    $('feedback-fallback').value = text;
    $('feedback-fallback').focus();
    $('feedback-fallback').select();
    $('feedback-status').textContent = 'Copy the selected text manually, then review it before posting.';
  }
});
fetch('./model.json').then((response) => response.json()).then((config) => {
  if (config.download_mb) $('download-size').textContent = `${config.download_mb} MB`;
}).catch(() => {});