{% extends "base.html" %}
{% block title %}Recipe Assistant — Menu Planner{% endblock %}

{% block content %}
<div class="ai-page d-flex flex-column" style="height: calc(100vh - 130px)">

  <!-- Header -->
  <div class="d-flex align-items-center justify-content-between mb-3 flex-shrink-0">
    <div>
      <h1 class="h3 fw-bold mb-0">Recipe Assistant</h1>
      <p class="text-muted small mb-0">Paste any recipe — I'll parse it, adapt it for low-carb, and add it to the library.</p>
    </div>
    <button id="newChatBtn" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-arrow-counterclockwise me-1"></i>New Chat
    </button>
  </div>

  {% if not has_api_key %}
  <div class="alert alert-warning">
    <i class="bi bi-exclamation-triangle me-2"></i>
    <strong>API key not configured.</strong> Set <code>ANTHROPIC_API_KEY</code> in the Docker environment to enable the recipe assistant.
  </div>
  {% else %}

  <!-- Chat messages -->
  <div id="chatMessages" class="chat-window flex-grow-1 overflow-auto mb-3 p-3">
    <div class="message message-assistant">
      <div class="message-bubble">
        <p class="mb-1">👋 Hi! I can add recipes to the planner for you. Just paste a recipe — from a website, cookbook, or your own notes — and I'll handle the rest.</p>
        <p class="mb-0 text-muted small">I'll parse ingredients, estimate nutrition, categorize it, and adapt for low-carb if needed.</p>
      </div>
    </div>
  </div>

  <!-- Input -->
  <div class="chat-input-area flex-shrink-0">
    <div id="attachBadge" class="d-none mb-1">
      <span class="badge bg-secondary"><i class="bi bi-paperclip me-1"></i><span id="attachName"></span>
        <button type="button" class="btn-close btn-close-white ms-1" id="clearAttach" style="font-size:0.6rem"></button>
      </span>
    </div>
    <div class="input-group">
      <label class="btn btn-outline-secondary" title="Attach file" style="cursor:pointer">
        <i class="bi bi-paperclip"></i>
        <input type="file" id="fileInput" class="d-none"
               accept=".txt,.html,.htm,.md,.json,.csv,.xml,image/*">
      </label>
      <textarea id="chatInput" class="form-control" rows="3"
        placeholder="Paste a recipe here, or ask me something…"></textarea>
      <button id="sendBtn" class="btn btn-primary px-4">
        <span id="sendLabel"><i class="bi bi-send"></i></span>
        <span id="sendSpinner" class="spinner-border spinner-border-sm d-none" role="status"></span>
      </button>
    </div>
    <div class="d-flex justify-content-between mt-1">
      <small class="text-muted">Shift+Enter for new line · Enter to send</small>
      <small class="text-muted" id="charCount"></small>
    </div>
  </div>

  {% endif %}
</div>
{% endblock %}

{% block scripts %}
{% if has_api_key %}
<script>
let history = [];
let busy = false;
let attachment = null; // {name, type, text} or {name, type, b64, mime}

const chatMessages = document.getElementById('chatMessages');
const chatInput   = document.getElementById('chatInput');
const sendBtn     = document.getElementById('sendBtn');
const sendLabel   = document.getElementById('sendLabel');
const sendSpinner = document.getElementById('sendSpinner');
const charCount   = document.getElementById('charCount');

// Auto-resize textarea
chatInput.addEventListener('input', () => {
  chatInput.style.height = 'auto';
  chatInput.style.height = Math.min(chatInput.scrollHeight, 200) + 'px';
  charCount.textContent = chatInput.value.length > 0 ? chatInput.value.length + ' chars' : '';
});

// Enter to send (Shift+Enter = newline)
chatInput.addEventListener('keydown', e => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    send();
  }
});

sendBtn.addEventListener('click', send);
document.getElementById('newChatBtn').addEventListener('click', () => {
  history = [];
  chatMessages.innerHTML = `
    <div class="message message-assistant">
      <div class="message-bubble">
        <p class="mb-0">New chat started. Paste a recipe or ask me anything.</p>
      </div>
    </div>`;
  chatInput.value = '';
  chatInput.style.height = 'auto';
});

// File attachment
const fileInput = document.getElementById('fileInput');
const attachBadge = document.getElementById('attachBadge');
const attachName = document.getElementById('attachName');
fileInput.addEventListener('change', function() {
  const file = this.files[0];
  if (!file) return;
  const isImage = file.type.startsWith('image/');
  const reader = new FileReader();
  reader.onload = e => {
    if (isImage) {
      const b64 = e.target.result.split(',')[1];
      attachment = {name: file.name, type: 'image', b64, mime: file.type};
    } else {
      attachment = {name: file.name, type: 'text', text: e.target.result};
    }
    attachName.textContent = file.name;
    attachBadge.classList.remove('d-none');
  };
  if (isImage) reader.readAsDataURL(file);
  else reader.readAsText(file);
  this.value = '';
});
document.getElementById('clearAttach').addEventListener('click', () => {
  attachment = null;
  attachBadge.classList.add('d-none');
});

function setLoading(on) {
  busy = on;
  sendBtn.disabled = on;
  chatInput.disabled = on;
  sendLabel.classList.toggle('d-none', on);
  sendSpinner.classList.toggle('d-none', !on);
}

function appendMessage(role, html) {
  const div = document.createElement('div');
  div.className = `message message-${role}`;
  div.innerHTML = `<div class="message-bubble">${html}</div>`;
  chatMessages.appendChild(div);
  chatMessages.scrollTop = chatMessages.scrollHeight;
}

function appendRecipeCard(recipe) {
  const div = document.createElement('div');
  div.className = 'message message-assistant';
  div.innerHTML = `
    <div class="message-bubble recipe-added-card">
      <div class="d-flex align-items-center gap-2">
        <i class="bi bi-check-circle-fill text-success fs-5"></i>
        <div>
          <div class="fw-semibold">${escapeHtml(recipe.name)} added!</div>
          <a href="/recipes/${recipe.id}" class="small">View recipe →</a>
        </div>
      </div>
    </div>`;
  chatMessages.appendChild(div);
  chatMessages.scrollTop = chatMessages.scrollHeight;
}

function escapeHtml(s) {
  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

function mdToHtml(text) {
  // Very simple markdown: **bold**, line breaks
  return escapeHtml(text)
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/\n/g, '<br>');
}

async function send() {
  if (busy) return;
  const msg = chatInput.value.trim();
  if (!msg && !attachment) return;

  const displayMsg = attachment ? `📎 ${attachment.name}${msg ? '\n' + msg : ''}` : msg;
  appendMessage('user', mdToHtml(displayMsg));
  chatInput.value = '';
  chatInput.style.height = 'auto';
  charCount.textContent = '';
  const sentAttachment = attachment;
  attachment = null;
  attachBadge.classList.add('d-none');
  setLoading(true);

  // Thinking indicator
  const thinking = document.createElement('div');
  thinking.className = 'message message-assistant thinking-msg';
  thinking.innerHTML = `<div class="message-bubble text-muted fst-italic">
    <span class="spinner-border spinner-border-sm me-2" style="width:.75rem;height:.75rem"></span>Thinking…
  </div>`;
  chatMessages.appendChild(thinking);
  chatMessages.scrollTop = chatMessages.scrollHeight;

  try {
    const payload = { message: msg, history };
    if (sentAttachment) {
      if (sentAttachment.type === 'image') {
        payload.image_b64 = sentAttachment.b64;
        payload.image_mime = sentAttachment.mime;
        payload.image_name = sentAttachment.name;
      } else {
        payload.file_text = sentAttachment.text;
        payload.file_name = sentAttachment.name;
      }
    }
    const res = await api('/ai/chat', {
      method: 'POST',
      body: JSON.stringify(payload),
    });
    if (!res) return; // 401 redirect handled by api()

    const data = await res.json();
    thinking.remove();

    if (data.error) {
      appendMessage('assistant', `<span class="text-danger">${escapeHtml(data.error)}</span>`);
    } else {
      history = data.history;
      if (data.response) appendMessage('assistant', mdToHtml(data.response));
      (data.recipes_added || []).forEach(appendRecipeCard);
    }
  } catch(e) {
    thinking.remove();
    appendMessage('assistant', `<span class="text-danger">Network error — please try again.</span>`);
  } finally {
    setLoading(false);
    chatInput.focus();
  }
}
</script>
{% endif %}
{% endblock %}