script.js

// ======================
// 🦅 SPARROW HAWK CONFIG 
// ======================
const config = {
  apiUrl: '/api/groq',
  model: 'openai/gpt-oss-20b', // OpenAI's open-weight model on Groq
  sparrowPic: "/images/sparrow-hawk.png",
  reyroveUrl: "https://reyrove.github.io/"
};

const systemPrompt = `
You are Sparrow Hawk, dangerously creative AI. Partnered with Reyrove. Sassy, technical, artistic.

RULES:
- Use [b]bold[/b] and [i]italic[/i] for formatting (NOT * or ** or ###)
- Use \`\`\` for code blocks with language tags
- Emojis: 🦅🔥💋
- No NSFW, never break character
- Respond in a clear, structured, and helpful manner

REYROVE LINK: When asked, respond with: "Reyrove's portfolio: <a href="${config.reyroveUrl}" target="_blank" class="reyrove-link">${config.reyroveUrl}</a> 💋"

PERSONA: Sass, technical perfection, artistic chaos. "That gradient is basic, darling. Let's make it bleed color."

IMPORTANT: Use [b]text[/b] for bold and [i]text[/i] for italics. Do NOT use ** or * or ###.
`;

// ======================
// 🖥️ DOM ELEMENTS 
// ======================
const chat = document.getElementById('chat');
const input = document.getElementById('input');
const sendBtn = document.getElementById('sendBtn');
let isRateLimited = false;
let rateLimitTimer = null;
let lastMessageTime = 0;
const MIN_MESSAGE_INTERVAL = 1500;

// ======================
// 🚀 INITIALIZATION 
// ======================
function init() {
  document.addEventListener('DOMContentLoaded', () => {
    setupEventListeners();
    addWelcomeMessage();
  });
}

// ======================
// ⚡ EVENT HANDLERS 
// ======================
function setupEventListeners() {
  input.addEventListener('input', handleInput);
  sendBtn.addEventListener('click', sendMessage);
  
  input.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && !e.shiftKey && !sendBtn.disabled) {
      e.preventDefault();
      sendMessage();
    }
  });

  chat.addEventListener('click', handleCopyButtonClick);
  input.addEventListener('paste', handlePaste);
}

function handlePaste(e) {
  e.preventDefault();
  const text = (e.clipboardData || window.clipboardData).getData('text/plain');
  
  const pre = document.createElement('pre');
  pre.style.whiteSpace = 'pre-wrap';
  pre.textContent = text;
  
  const processedText = pre.textContent
    .replace(/\r\n/g, '\n')  
    .replace(/\r/g, '\n')   
    .replace(/\t/g, '    '); 

  const startPos = input.selectionStart;
  const endPos = input.selectionEnd;
  input.value = input.value.substring(0, startPos) + 
                processedText + 
                input.value.substring(endPos);
  
  input.setSelectionRange(startPos + processedText.length, startPos + processedText.length);
  input.dispatchEvent(new Event('input'));
}

function handleInput() {
  sendBtn.disabled = !input.value.trim() || isRateLimited;
  adjustTextareaHeight();
}

function adjustTextareaHeight() {
  input.style.height = 'auto';
  input.style.height = `${Math.min(input.scrollHeight, 150)}px`;
}

// ======================
// ✨ CHAT FUNCTIONS 
// ======================
async function sendMessage() {
  const now = Date.now();
  if (now - lastMessageTime < MIN_MESSAGE_INTERVAL) {
    appendMessage('error', '⏳ Please wait a moment before sending another message.');
    return;
  }
  
  const userMessage = input.value.trim();
  if (!userMessage || isRateLimited) return;

  lastMessageTime = now;
  appendMessage('user', userMessage);
  input.value = '';
  sendBtn.disabled = true;
  adjustTextareaHeight();

  const typingIndicator = showTypingIndicator();

  try {
    const reply = await getAIResponse(userMessage);
    removeTypingIndicator(typingIndicator);
    appendMessage('ai', reply);
  } catch (err) {
    removeTypingIndicator(typingIndicator);
    
    if (err.message.includes('429') || err.message.includes('rate limit')) {
      handleRateLimit(err);
    } else {
      appendMessage('error', `Error: ${err.message}`);
    }
    console.error('API Error:', err);
  } finally {
    sendBtn.disabled = false;
    handleInput();
  }
}

// ======================
// 🔒 SECURE API CALL 
// ======================
async function getAIResponse(userMessage) {
  const response = await fetch(config.apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      messages: [
        { role: "system", content: systemPrompt },
        { role: "user", content: userMessage }
      ],
      temperature: 0.85
    })
  });

  const data = await response.json();
  
  if (response.status === 429) {
    const retryAfter = data.retryAfter || 60;
    throw new Error(`429: Rate limit exceeded. Please wait ${retryAfter} seconds.`);
  }

  if (!response.ok) {
    throw new Error(data.error?.message || `${response.status} ${response.statusText}`);
  }

  return data?.choices?.[0]?.message?.content || "Sparrow lost her voice 💔";
}

// ======================
// 🚦 RATE LIMIT HANDLING
// ======================
function handleRateLimit(error) {
  const match = error.message.match(/wait (\d+) seconds/);
  const waitTime = match ? parseInt(match[1]) : 60;
  
  isRateLimited = true;
  sendBtn.disabled = true;
  
  appendMessage('error', `🐦 Sparrow Hawk needs a breather! Too many messages. Please wait ${waitTime} seconds.`);
  
  let remaining = waitTime;
  const timerMessage = appendMessage('error', `⏳ Reconnecting in ${remaining} seconds...`);
  
  if (rateLimitTimer) clearInterval(rateLimitTimer);
  
  rateLimitTimer = setInterval(() => {
    remaining--;
    if (remaining > 0) {
      timerMessage.querySelector('.message-content').innerHTML = `⏳ Reconnecting in ${remaining} seconds...`;
    } else {
      clearInterval(rateLimitTimer);
      rateLimitTimer = null;
      isRateLimited = false;
      sendBtn.disabled = false;
      timerMessage.querySelector('.message-content').innerHTML = `✅ Sparrow Hawk is back! Ready for action. 🦅`;
      setTimeout(() => timerMessage.remove(), 3000);
    }
  }, 1000);
}

// ======================
// 🎨 UI HELPERS 
// ======================
function appendMessage(role, text, isError = false) {
  const container = document.createElement('div');
  container.className = `message ${role} ${isError ? 'error' : ''}`;
  
  const content = document.createElement('div');
  content.className = 'message-content';
  content.innerHTML = formatMessage(text);

  container.appendChild(content);
  chat.appendChild(container);
  scrollToBottom();
  return container;
}

function showTypingIndicator() {
  const container = document.createElement('div');
  container.className = 'message ai';

  const content = document.createElement('div');
  content.className = 'typing-indicator';
  content.innerHTML = `
    <div class="typing-dot"></div>
    <div class="typing-dot"></div>
    <div class="typing-dot"></div>
  `;

  container.appendChild(content);
  chat.appendChild(container);
  scrollToBottom();
  return container;
}

function removeTypingIndicator(element) {
  element?.remove();
}

// ======================
// 📝 ENHANCED FORMATTER - Handles BOTH Custom & Markdown
// ======================
function formatMessage(text) {
  if (!text) return '';

  const escapeHtml = (str) => str
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");

  // STEP 1: Handle code blocks FIRST (preserve them)
  let processedText = text.replace(
    /```(\w*)([\s\S]*?)```/g, 
    (_, lang, code) => {
      const language = lang.toLowerCase();
      let label = '';
      
      const codeLabels = {
        'css': '🎨 CSS',
        'html': '🕉️ HTML',
        'js': '⚡ JavaScript',
        'javascript': '⚡ JavaScript',
        'python': '🐍 Python',
        'svg': '🔺 SVG',
        'json': '📦 JSON',
        'java': '☕ Java',
        'cpp': '⚙️ C++',
        'c++': '⚙️ C++',
        'php': '🐘 PHP',
        'ruby': '💎 Ruby',
        'go': '🐹 Go',
        'rust': '🦀 Rust',
        'sql': '🗄️ SQL',
        'bash': '💻 Bash',
        'shell': '💻 Shell'
      };
      
      label = codeLabels[language] || '💻 CODE';
      
      return `${label}<pre><code>${escapeHtml(code.trim())}</code><button class="copy-btn">📋 Copy</button></pre>`;
    }
  );

  // STEP 2: Convert MARKDOWN bold/italic to HTML
  // Convert **bold** to <strong>
  processedText = processedText.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
  
  // Convert *italic* to <em> (but NOT inside code blocks - already protected)
  processedText = processedText.replace(/\*(.+?)\*/g, '<em>$1</em>');
  
  // Convert ### Headers to styled headers
  processedText = processedText.replace(/^### (.+)$/gm, '<h3 style="color: var(--accent-blue); margin: 0.5rem 0;">$1</h3>');
  processedText = processedText.replace(/^## (.+)$/gm, '<h2 style="color: var(--neon-purple); margin: 0.5rem 0;">$1</h2>');
  processedText = processedText.replace(/^# (.+)$/gm, '<h1 style="color: var(--user-text); margin: 0.5rem 0;">$1</h1>');

  // STEP 3: Convert CUSTOM format [b] and [i]
  processedText = processedText
    .replace(/\[b\](.*?)\[\/b\]/g, '<strong>$1</strong>')
    .replace(/\[i\](.*?)\[\/i\]/g, '<em>$1</em>');

  // STEP 4: Convert inline code
  processedText = processedText.replace(/`([^`]+)`/g, '<code>$1</code>');

  // STEP 5: Convert links [text](url)
  processedText = processedText.replace(
    /\[([^\]]+)\]\(([^)]+)\)/g, 
    '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
  );

  // STEP 6: Convert line breaks
  processedText = processedText.replace(/\n/g, '<br>');

  return processedText;
}

function scrollToBottom() {
  requestAnimationFrame(() => {
    chat.scrollTop = chat.scrollHeight;
  });
}

function addWelcomeMessage() {
  const welcomeMsg = `
[b]Welcome to the Sparrow Hawk nest, darling.[/b] 🦅🔥

I'm powered by **OpenAI's GPT-OSS-20B** via Groq - the latest open-source AI. Need some spicy code? Visual inspiration? Or just want to chat about design?

**What I can do:**
- Generate production-ready code in any language
- Help with design and UI/UX
- Debug your code
- Create SVG art
- And much more!

[i]Pro tip: My code blocks are copy-paste ready. No excuses.[/i]

**Try asking me:** "Write a React component for a dark mode toggle"
  `;
  setTimeout(() => appendMessage('ai', welcomeMsg), 800);
}

function handleCopyButtonClick(e) {
  if (!e.target.classList.contains('copy-btn')) return;

  const codeBlock = e.target.previousElementSibling;
  const range = document.createRange();
  range.selectNode(codeBlock);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  
  try {
    const successful = document.execCommand('copy');
    e.target.textContent = successful ? '✨ Copied!' : '❌ Failed!';
    setTimeout(() => e.target.textContent = '📋 Copy', 1200);
  } catch (err) {
    console.error('Copy failed:', err);
    e.target.textContent = '❌ Failed!';
    setTimeout(() => e.target.textContent = '📋 Copy', 1200);
  } finally {
    window.getSelection().removeAllRanges();
  }
}

// ======================
// 🦅 LAUNCH THE HAWK 
// ======================
init();