// EduCat: AI Study Buddy - Initial JS

// --- PAGE ROUTING LOGIC ---
const pages = {
  main: `
    <header><h1>🐾 Welcome to EduCat: AI Study Buddy</h1><p>Your purr-fect companion for smarter studying!</p></header>
    <main>
      <section id="dashboard-section"></section>
      <section id="reminder-section"></section>
      <section id="chat-section"></section>
    </main>
  `,
  upload: `
    <header><h1>📤 Upload Materials & AI Summary 🐱</h1></header>
    <main>
      <section id="upload-section"></section>
      <section id="summary-section"></section>
    </main>
  `,
  quiz: `
    <header><h1>📝 Practice Quiz 🐾</h1></header>
    <main>
      <section id="quiz-section"></section>
    </main>
  `,
  chatbot: `
    <header><h1>💬 EduCat Chatbot 🐱</h1></header>
    <main>
      <section id="chat-section"></section>
    </main>
  `
};

function renderPage(page) {
  document.body.innerHTML = `
    <nav style="display:flex;gap:1.2rem;padding:1rem 2rem;background:#f0f4fa;align-items:center;">
      <button class="nav-btn" data-page="main">🏠 Home</button>
      <button class="nav-btn" data-page="upload">📤 Upload & Summary</button>
      <button class="nav-btn" data-page="quiz">📝 Practice Quiz</button>
      <button class="nav-btn" data-page="chatbot">💬 Chatbot</button>
    </nav>
    ${pages[page]}
    <footer><p>EduCat &copy; 2025. All rights reserved.</p></footer>
  `;
  document.querySelectorAll('.nav-btn').forEach(btn => {
    btn.onclick = () => renderPage(btn.dataset.page);
  });
  // Re-initialize page content
  if (page === 'main') {
    renderDashboard();
    renderReminders();
    renderChatbot();
  } else if (page === 'upload') {
    renderUpload();
    renderSummary();
  } else if (page === 'quiz') {
    renderQuiz();
  } else if (page === 'chatbot') {
    renderChatbot();
  }
}

// --- COMPONENT RENDERERS ---
function renderDashboard() {
  const progressSection = document.getElementById('dashboard-section');
  if (!progressSection) return;
  progressSection.innerHTML = `
    <h2>📊 Progress Dashboard 🐾</h2>
    <div id="dashboard-cards" style="display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;">
      <div class="dashboard-card">
        <h3>📚 Study Sessions</h3>
        <p><b>5</b> sessions this week</p>
        <div class="dashboard-bar"><div style="width:70%"></div></div>
      </div>
      <div class="dashboard-card">
        <h3>✅ Quizzes Completed</h3>
        <p><b>3</b> / 5 this week</p>
        <div class="dashboard-bar"><div style="width:60%"></div></div>
      </div>
      <div class="dashboard-card">
        <h3>🏆 Streak</h3>
        <p><b>4</b> days in a row</p>
        <div class="dashboard-bar"><div style="width:80%"></div></div>
      </div>
      <div class="dashboard-card">
        <h3>💡 Motivation</h3>
        <p>“Keep going, you’re doing great!”</p>
        <div class="dashboard-bar"><div style="width:90%"></div></div>
      </div>
    </div>
  `;
}

function renderReminders() {
  const reminderSection = document.getElementById('reminder-section');
  if (!reminderSection) return;
  reminderSection.innerHTML = `
    <h2>⏰ Study Reminders 🐱</h2>
    <div class="reminder-card">
      <ul id="reminder-list">
        <li>📅 Next quiz: <b>Friday, 3pm</b></li>
        <li>⏰ Review notes for <b>Math</b> tonight</li>
        <li>📝 Complete 2 practice quizzes by <b>Sunday</b></li>
        <li>💧 Take a short break every 45 minutes!</li>
      </ul>
      <form id="reminder-form" style="margin-top:1em;display:flex;gap:0.5em;flex-wrap:wrap;">
        <input type="text" id="reminder-input" placeholder="Add a schedule, quiz date, etc..." style="flex:1;padding:0.4em;border-radius:6px;border:1px solid #ccc;">
        <button type="submit">Add</button>
      </form>
    </div>
  `;
  const reminderList = document.getElementById('reminder-list');
  const reminderForm = document.getElementById('reminder-form');
  const reminderInput = document.getElementById('reminder-input');
  reminderForm.addEventListener('submit', function(e) {
    e.preventDefault();
    const val = reminderInput.value.trim();
    if (val) {
      const li = document.createElement('li');
      li.textContent = val;
      reminderList.appendChild(li);
      reminderInput.value = '';
    }
  });
}

function renderChatbot() {
  const chatSection = document.getElementById('chat-section');
  if (!chatSection) return;
  chatSection.innerHTML = `
    <h2>EduCat Chatbot</h2>
    <div id="chat-window" style="background:#f0f4fa;min-height:120px;padding:1rem;border-radius:8px;overflow-y:auto;max-height:260px;margin-bottom:1rem;"></div>
    <div style="display:flex;gap:0.5rem;">
      <input type="text" id="chat-input" placeholder="Type your message..." style="flex:1;padding:0.5rem;border-radius:6px;border:1px solid #ccc;">
      <button id="chat-send">Send</button>
    </div>
  `;
  const chatWindow = document.getElementById('chat-window');
  const chatInput = document.getElementById('chat-input');
  const sendBtn = document.getElementById('chat-send');

  function addBubble(text, sender) {
      const bubble = document.createElement('div');
      bubble.className = sender === 'user' ? 'bubble user-bubble' : 'bubble ai-bubble';
      bubble.innerHTML = text;
      chatWindow.appendChild(bubble);
      chatWindow.scrollTop = chatWindow.scrollHeight;
  }

  function showTyping() {
      const typing = document.createElement('div');
      typing.className = 'bubble ai-bubble typing';
      typing.id = 'ai-typing';
      typing.innerHTML = '<span class="dot"></span><span class="dot"></span><span class="dot"></span> EduCat is typing...';
      chatWindow.appendChild(typing);
      chatWindow.scrollTop = chatWindow.scrollHeight;
  }

  function hideTyping() {
      const typing = document.getElementById('ai-typing');
      if (typing) typing.remove();
  }

  sendBtn.addEventListener('click', sendMessage);
  chatInput.addEventListener('keydown', e => { if (e.key === 'Enter') sendMessage(); });

  function sendMessage() {
      const msg = chatInput.value.trim();
      if (!msg) return;
      addBubble(msg, 'user');
      chatInput.value = '';
      showTyping();
      fetch('/api/chat', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ message: msg })
      })
      .then(res => res.json())
      .then(data => {
          hideTyping();
          setTimeout(() => {
              addBubble(data.reply || data.error, 'ai');
          }, 500); // Simulate slight delay for realism
      })
      .catch(() => {
          hideTyping();
          addBubble('Error contacting chatbot.', 'ai');
      });
  }

  // Add styles for bubbles and typing
  const style = document.createElement('style');
  style.innerHTML = `
  #chat-window { font-size: 1rem; }
  .bubble {
    display: inline-block;
    padding: 0.6em 1em;
    margin: 0.3em 0;
    border-radius: 18px;
    max-width: 80%;
    word-break: break-word;
    clear: both;
    position: relative;
    animation: fadeIn 0.2s;
  }
  .user-bubble {
    background: #6a82fb;
    color: #fff;
    align-self: flex-end;
    float: right;
    margin-left: 20%;
  }
  .ai-bubble {
    background: #fff;
    color: #222;
    border: 1px solid #e0e0e0;
    align-self: flex-start;
    float: left;
    margin-right: 20%;
  }
  .typing {
    opacity: 0.7;
    font-style: italic;
  }
  .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 2px;
    background: #6a82fb;
    border-radius: 50%;
    animation: blink 1.4s infinite both;
  }
  .dot:nth-child(2) { animation-delay: 0.2s; }
  .dot:nth-child(3) { animation-delay: 0.4s; }
  @keyframes blink {
    0%, 80%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
  `;
  document.head.appendChild(style);
}

function renderUpload() {
  const uploadSection = document.getElementById('upload-section');
  if (!uploadSection) return;
  uploadSection.innerHTML = `
    <h2>📤 Upload Study Materials 🐾</h2>
    <input type="file" id="file-upload" multiple accept=".pdf,.doc,.docx,.ppt,.pptx,.txt">
    <button id="upload-btn">Upload</button>
    <div id="upload-status"></div>
  `;
  document.getElementById('upload-btn').addEventListener('click', async () => {
      const fileInput = document.getElementById('file-upload');
      const statusDiv = document.getElementById('upload-status');
      if (!fileInput.files.length) {
          statusDiv.textContent = 'Please select at least one file.';
          return;
      }
      const file = fileInput.files[0];
      const formData = new FormData();
      formData.append('file', file);
      statusDiv.textContent = 'Uploading...';
      try {
          const response = await fetch('/api/upload', {
              method: 'POST',
              body: formData
          });
          const result = await response.json();
          if (response.ok) {
              statusDiv.textContent = 'File uploaded! Getting summary...';
              // Call Flowise summarization endpoint
              const summaryRes = await fetch('/api/flowise', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify({ filename: result.filename })
              });
              const summaryData = await summaryRes.json();
              document.getElementById('summary-output').textContent = summaryData.summary || 'No summary available.';
          } else {
              statusDiv.textContent = result.error || 'Upload failed.';
          }
      } catch (err) {
          statusDiv.textContent = 'Error uploading file.';
      }
  });
}

function renderSummary() {
  const summarySection = document.getElementById('summary-section');
  if (!summarySection) return;
  summarySection.innerHTML = `
    <h2>📝 AI Summary 🐱</h2>
    <div id="summary-output">Upload your notes to see a summary here.</div>
  `;
}

function renderQuiz() {
  const quizSection = document.getElementById('quiz-section');
  if (!quizSection) return;
  // Subjects and questions
  const subjects = {
    Math: [
      {
        q: 'What is the value of π (pi) rounded to 2 decimal places?',
        opts: ['A. 3.12', 'B. 3.14', 'C. 3.16', 'D. 3.18'],
        ans: 'B. 3.14'
      },
      {
        q: 'Solve: 5 × 6 = ?',
        opts: ['A. 11', 'B. 30', 'C. 56', 'D. 26'],
        ans: 'B. 30'
      }
    ],
    Science: [
      {
        q: 'What planet is known as the Red Planet?',
        opts: ['A. Venus', 'B. Mars', 'C. Jupiter', 'D. Saturn'],
        ans: 'B. Mars'
      },
      {
        q: 'What is H2O commonly known as?',
        opts: ['A. Oxygen', 'B. Hydrogen', 'C. Water', 'D. Helium'],
        ans: 'C. Water'
      }
    ],
    History: [
      {
        q: 'Who was the first President of the United States?',
        opts: ['A. Abraham Lincoln', 'B. George Washington', 'C. John Adams', 'D. Thomas Jefferson'],
        ans: 'B. George Washington'
      },
      {
        q: 'In which year did World War II end?',
        opts: ['A. 1942', 'B. 1945', 'C. 1948', 'D. 1950'],
        ans: 'B. 1945'
      }
    ]
  };
  let selectedSubject = Object.keys(subjects)[0];
  let currentQ = 0;
  quizSection.innerHTML = `
    <h2>Practice Quiz 🐾</h2>
    <div style="margin-bottom:1em;">
      <label for="subject-select"><b>Subject:</b></label>
      <select id="subject-select">
        ${Object.keys(subjects).map(s => `<option value="${s}">${s}</option>`).join('')}
      </select>
    </div>
    <div class="quiz-card enhanced-quiz-card">
      <div class="quiz-q"></div>
      <div class="quiz-options"></div>
      <div class="quiz-feedback"></div>
      <div class="quiz-progress"></div>
      <div style="margin-top:1em;display:flex;justify-content:space-between;gap:0.5em;">
        <button id="prev-q">Previous</button>
        <button id="next-q">Next</button>
      </div>
    </div>
  `;
  const subjectSelect = document.getElementById('subject-select');
  const quizQ = quizSection.querySelector('.quiz-q');
  const quizOpts = quizSection.querySelector('.quiz-options');
  const quizFeedback = quizSection.querySelector('.quiz-feedback');
  const quizProgress = quizSection.querySelector('.quiz-progress');
  const prevBtn = document.getElementById('prev-q');
  const nextBtn = document.getElementById('next-q');

  function renderQuestion() {
    const qArr = subjects[selectedSubject];
    const qObj = qArr[currentQ];
    quizQ.innerHTML = `<span class='quiz-q-num'>Q${currentQ + 1} of ${qArr.length}</span> ${qObj.q}`;
    quizOpts.innerHTML = qObj.opts.map(opt => `<button class="quiz-opt">${opt}</button>`).join('');
    quizFeedback.textContent = '';
    quizProgress.innerHTML = `<div class='quiz-bar-bg'><div class='quiz-bar-fg' style='width:${((currentQ+1)/qArr.length)*100}%'></div></div>`;
    prevBtn.style.visibility = currentQ === 0 ? 'hidden' : 'visible';
    nextBtn.style.display = currentQ === qArr.length - 1 ? 'none' : 'inline-block';
  }
  renderQuestion();

  quizOpts.addEventListener('click', function(e) {
    if (e.target.classList.contains('quiz-opt')) {
      const qObj = subjects[selectedSubject][currentQ];
      if (e.target.textContent === qObj.ans) {
        quizFeedback.textContent = '✅ Correct!';
        quizFeedback.style.color = '#2ecc40';
      } else {
        quizFeedback.textContent = '❌ Try again!';
        quizFeedback.style.color = '#fc5c7d';
      }
    }
  });
  subjectSelect.addEventListener('change', function() {
    selectedSubject = this.value;
    currentQ = 0;
    renderQuestion();
  });
  prevBtn.addEventListener('click', function() {
    if (currentQ > 0) {
      currentQ--;
      renderQuestion();
    }
  });
  nextBtn.addEventListener('click', function() {
    if (currentQ < subjects[selectedSubject].length - 1) {
      currentQ++;
      renderQuestion();
    }
  });

  // Add/Update styles for enhanced quiz UI
  const quizStyle = document.createElement('style');
  quizStyle.innerHTML = `
  .enhanced-quiz-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(106,130,251,0.10);
    padding: 1.5rem 1.2rem 1.2rem 1.2rem;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .quiz-q {
    font-weight: bold;
    margin-bottom: 1.1rem;
    font-size: 1.15rem;
    color: #6a82fb;
    display: flex;
    align-items: center;
    gap: 0.7em;
  }
  .quiz-q-num {
    background: #f0f4fa;
    color: #6a82fb;
    border-radius: 8px;
    padding: 0.2em 0.7em;
    font-size: 0.95em;
    margin-right: 0.5em;
  }
  .quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.7em;
    margin-bottom: 1.1rem;
  }
  .quiz-opt {
    background: #f7f9fb;
    border: 2px solid #6a82fb;
    color: #6a82fb;
    border-radius: 8px;
    padding: 0.7em 1.2em;
    font-size: 1.05em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border 0.2s;
    text-align: left;
  }
  .quiz-opt:hover {
    background: #6a82fb;
    color: #fff;
    border: 2px solid #fc5c7d;
  }
  .quiz-feedback {
    font-size: 1.1em;
    margin-top: 0.5em;
    min-height: 1.5em;
  }
  .quiz-bar-bg {
    width: 100%;
    height: 10px;
    background: #e0e7fa;
    border-radius: 5px;
    margin: 0.7em 0 0.2em 0;
    overflow: hidden;
  }
  .quiz-bar-fg {
    height: 100%;
    background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%);
    border-radius: 5px;
    transition: width 0.4s;
  }
  #prev-q, #next-q {
    background: #6a82fb;
    color: #fff;
    border: none;
    padding: 0.5em 1.2em;
    border-radius: 6px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.2s;
  }
  #prev-q[style*="hidden"] {
    opacity: 0.5;
    pointer-events: none;
  }
  #next-q {
    background: #fc5c7d;
  }
  #next-q[style*="none"] {
    display: none !important;
  }
  `;
  document.head.appendChild(quizStyle);
}

// --- INITIALIZE APP ---
renderPage('main');

// Placeholder for AI summary, quiz, reminders, and progress dashboard
// TODO: Connect to backend APIs (Perplexity, Gemini Dev, Telegram/Discord bots, etc.)