script.js

/* ===== HireGrid — script.js ===== */

// ─── Mock Data ────────────────────────────────────────────────────────────────
const MOCK = {
  interviewers: [
    { name: "Arjun Mehta",      expertise: "Backend & System Design",  exp: "8 yrs",  rating: 4.9, company: "Ex-Amazon" },
    { name: "Priya Nair",       expertise: "Frontend & React",          exp: "6 yrs",  rating: 4.8, company: "Ex-Google" },
    { name: "Rohan Kapoor",     expertise: "ML & Data Science",         exp: "7 yrs",  rating: 4.9, company: "Ex-Netflix" },
    { name: "Sneha Rao",        expertise: "Full Stack & DevOps",       exp: "9 yrs",  rating: 4.7, company: "Ex-Stripe" },
    { name: "Vikram Singh",     expertise: "Data Engineering",          exp: "5 yrs",  rating: 4.8, company: "Ex-Uber" },
  ],
  questions: {
    "Frontend":      [
      { q: "Explain the virtual DOM and reconciliation in React.",              diff: "Medium" },
      { q: "How does event delegation work? Why is it useful?",                diff: "Easy" },
      { q: "Design a responsive grid system from scratch.",                    diff: "Hard" },
      { q: "What is the difference between CSS Grid and Flexbox?",             diff: "Easy" },
      { q: "How would you optimise the performance of a slow React app?",      diff: "Hard" },
      { q: "Explain accessibility (a11y) best practices for web forms.",       diff: "Medium" },
    ],
    "Backend":       [
      { q: "Explain Django middleware and when you would write a custom one.",  diff: "Medium" },
      { q: "How does REST differ from GraphQL? When would you choose each?",   diff: "Medium" },
      { q: "Design a URL shortening system (LLD + scalability).",              diff: "Hard" },
      { q: "Difference between threading, multiprocessing and async I/O.",     diff: "Medium" },
      { q: "How would you scale a backend service to 10× traffic overnight?",  diff: "Hard" },
      { q: "What are database transactions and isolation levels?",             diff: "Medium" },
    ],
    "ML":            [
      { q: "Explain gradient descent and its variants (SGD, Adam).",           diff: "Medium" },
      { q: "How do you handle class imbalance in a classification task?",      diff: "Medium" },
      { q: "Design an ML pipeline for real-time recommendation.",              diff: "Hard" },
      { q: "Bias vs variance trade-off — explain with an example.",            diff: "Easy" },
      { q: "How would you deploy a PyTorch model to production?",              diff: "Hard" },
      { q: "Explain attention mechanisms and transformers in brief.",          diff: "Hard" },
    ],
    "Data Science":  [
      { q: "Walk through an end-to-end data analysis project you've done.",    diff: "Open" },
      { q: "How do you choose between a t-test and ANOVA?",                   diff: "Medium" },
      { q: "Explain the difference between correlation and causation.",        diff: "Easy" },
      { q: "How would you build a churn prediction model?",                   diff: "Medium" },
      { q: "What is A/B testing and how do you calculate sample size?",       diff: "Medium" },
      { q: "Design a KPI dashboard for an e-commerce business.",              diff: "Hard" },
    ],
  },
  timeSlots: [
    "Tomorrow, 10:00 AM – 11:00 AM",
    "Tomorrow, 2:00 PM – 3:00 PM",
    "Day after, 9:00 AM – 10:00 AM",
    "Day after, 4:00 PM – 5:00 PM",
    "This Friday, 11:00 AM – 12:00 PM",
  ],
};

// ─── API Simulation ───────────────────────────────────────────────────────────
async function api(endpoint, payload) {
  await new Promise(r => setTimeout(r, 1200 + Math.random() * 600));
  const interviewer = MOCK.interviewers[Math.floor(Math.random() * MOCK.interviewers.length)];
  const slot        = MOCK.timeSlots[Math.floor(Math.random() * MOCK.timeSlots.length)];
  switch (endpoint) {
    case "/request-interview":
      return { interviewer, scheduledTime: slot, confirmationId: "HG-" + Math.floor(Math.random() * 90000 + 10000) };
    case "/generate-questions":
      const role = payload.role || "Backend";
      const qs   = MOCK.questions[role] || MOCK.questions["Backend"];
      return { role, questions: qs };
    case "/submit-interview":
      return { submitted: true, reportId: "RPT-" + Math.floor(Math.random() * 90000 + 10000) };
    case "/generate-report":
      return {
        technical:      Math.floor(Math.random() * 30 + 60),
        problemSolving: Math.floor(Math.random() * 30 + 55),
        communication:  Math.floor(Math.random() * 30 + 60),
        strengths:      ["Strong algorithmic thinking", "Clear communication of trade-offs", "Solid foundation in core CS concepts"],
        weaknesses:     ["Needs improvement in system design depth", "Could improve time complexity analysis"],
        recommendation: ["Hire", "Consider", "Hire", "Consider", "Reject"][Math.floor(Math.random() * 5)],
        summary:        "The candidate demonstrated a good understanding of backend fundamentals and was able to articulate their thought process clearly. They handled medium-difficulty problems confidently but struggled with advanced system design questions.",
      };
    case "/mock-interview":
      return { interviewer, scheduledTime: slot, confirmationId: "MOCK-" + Math.floor(Math.random() * 90000 + 10000) };
    default:
      return { ok: true };
  }
}

// ─── Toast ────────────────────────────────────────────────────────────────────
function toast(msg, type = "default") {
  let container = document.querySelector(".toast-container");
  if (!container) {
    container = document.createElement("div");
    container.className = "toast-container";
    document.body.appendChild(container);
  }
  const el = document.createElement("div");
  el.className = `toast ${type}`;
  el.innerHTML = `<span>${type === "success" ? "✓" : type === "error" ? "✕" : "ℹ"}</span> ${msg}`;
  container.appendChild(el);
  setTimeout(() => { el.style.opacity = "0"; el.style.transition = "opacity 0.3s"; setTimeout(() => el.remove(), 300); }, 3500);
}

// ─── Navbar active link ───────────────────────────────────────────────────────
function setActiveNav() {
  const page = location.pathname.split("/").pop() || "index.html";
  document.querySelectorAll(".nav-links a, .mobile-nav a").forEach(a => {
    const href = a.getAttribute("href") || "";
    if (href === page || (page === "" && href === "index.html")) {
      a.classList.add("active");
    }
  });
}

// ─── Hamburger ────────────────────────────────────────────────────────────────
function initHamburger() {
  const btn    = document.getElementById("hamburger");
  const mobileNav = document.getElementById("mobileNav");
  if (!btn || !mobileNav) return;
  btn.addEventListener("click", () => {
    mobileNav.classList.toggle("open");
  });
  document.addEventListener("click", e => {
    if (!btn.contains(e.target) && !mobileNav.contains(e.target)) {
      mobileNav.classList.remove("open");
    }
  });
}

// ─── Shared Init ─────────────────────────────────────────────────────────────
document.addEventListener("DOMContentLoaded", () => {
  setActiveNav();
  initHamburger();
  initPage();
});

// ─── Per-Page Logic ───────────────────────────────────────────────────────────
function initPage() {
  const page = location.pathname.split("/").pop() || "index.html";
  if (page === "index.html" || page === "") initLanding();
  if (page === "company_request.html")      initCompanyRequest();
  if (page === "questions.html")            initQuestions();
  if (page === "interview_notes.html")      initInterviewNotes();
  if (page === "report.html")               initReport();
  if (page === "mock_interview.html")       initMockInterview();
}

// ─── Landing ──────────────────────────────────────────────────────────────────
function initLanding() {
  // Animate hero on load
  document.querySelectorAll(".animate-in").forEach((el, i) => {
    el.style.animationDelay = `${i * 0.1}s`;
  });
}

// ─── Company Request ─────────────────────────────────────────────────────────
function initCompanyRequest() {
  const form   = document.getElementById("companyForm");
  const result = document.getElementById("assignResult");
  if (!form) return;
  form.addEventListener("submit", async e => {
    e.preventDefault();
    const btn = form.querySelector("[type=submit]");
    btn.classList.add("btn-loading");
    btn.disabled = true;
    const payload = {
      company: form.company.value,
      role:    form.role.value,
      stack:   form.stack.value,
      level:   form.level.value,
      time:    form.prefTime.value,
    };
    try {
      const data = await api("/request-interview", payload);
      renderAssignResult(data);
      result.classList.remove("hidden");
      result.scrollIntoView({ behavior: "smooth", block: "nearest" });
      toast("Interviewer assigned successfully!", "success");
    } catch {
      toast("Something went wrong. Please try again.", "error");
    } finally {
      btn.classList.remove("btn-loading");
      btn.disabled = false;
    }
  });
}
function renderAssignResult(data) {
  const el = document.getElementById("assignResult");
  const initials = data.interviewer.name.split(" ").map(n => n[0]).join("");
  el.innerHTML = `
    <div class="success-card">
      <div class="success-icon">
        <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
      </div>
      <div class="badge badge-teal mb-2">Interviewer Assigned</div>
      <h2 style="font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--navy);letter-spacing:-0.5px;margin-bottom:1.5rem;">Your interview is confirmed</h2>
      <div style="background:white;border:1.5px solid var(--gray-100);border-radius:var(--radius-md);padding:1.5rem;display:flex;align-items:center;gap:1.25rem;text-align:left;margin-bottom:1rem;">
        <div class="avatar" style="width:52px;height:52px;font-size:1.1rem;">${initials}</div>
        <div style="flex:1;">
          <div style="font-weight:700;font-size:1.05rem;color:var(--navy);">${data.interviewer.name}</div>
          <div style="font-size:0.85rem;color:var(--gray-600);margin:2px 0;">${data.interviewer.expertise}</div>
          <div style="display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;">
            <span class="badge badge-navy">${data.interviewer.company}</span>
            <span class="badge badge-teal">${data.interviewer.exp} exp</span>
            <span class="badge badge-green">★ ${data.interviewer.rating}</span>
          </div>
        </div>
      </div>
      <div style="background:white;border:1.5px solid var(--gray-100);border-radius:var(--radius-md);padding:1rem 1.5rem;display:flex;align-items:center;gap:10px;text-align:left;">
        <span style="font-size:1.2rem;">🗓</span>
        <div>
          <div style="font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--gray-400);margin-bottom:2px;">Scheduled Time</div>
          <div style="font-weight:600;color:var(--navy);font-size:0.95rem;">${data.scheduledTime}</div>
        </div>
        <div style="margin-left:auto;text-align:right;">
          <div style="font-size:0.72rem;color:var(--gray-400);">Confirmation ID</div>
          <div style="font-family:var(--font-display);font-weight:700;color:var(--teal-dark);font-size:0.9rem;">${data.confirmationId}</div>
        </div>
      </div>
      <div style="margin-top:1.25rem;display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap;">
        <a href="questions.html?role=${encodeURIComponent(document.getElementById("companyForm")?.role?.value || 'Backend')}" class="btn btn-primary">View Interview Questions →</a>
        <button onclick="location.reload()" class="btn btn-secondary">New Request</button>
      </div>
    </div>`;
}

// ─── Questions ────────────────────────────────────────────────────────────────
function initQuestions() {
  const params = new URLSearchParams(location.search);
  const role   = params.get("role") || "Backend";
  const titleEl = document.getElementById("questionsTitle");
  const subtitleEl = document.getElementById("questionsSubtitle");
  const grid   = document.getElementById("questionsGrid");
  const roleTabsEl = document.getElementById("roleTabs");
  if (titleEl) titleEl.textContent = `Interview Questions — ${role} Developer`;
  if (subtitleEl) subtitleEl.textContent = `${(MOCK.questions[role] || MOCK.questions["Backend"]).length} questions · AI Generated`;

  function renderQuestions(r) {
    const qs = MOCK.questions[r] || MOCK.questions["Backend"];
    const diffColor = { "Easy": "badge-green", "Medium": "badge-amber", "Hard": "badge-red", "Open": "badge-navy" };
    grid.innerHTML = qs.map((item, i) => `
      <div class="question-card animate-in" style="animation-delay:${i * 0.06}s">
        <div class="q-num">${i + 1}</div>
        <div class="q-content">
          <h3>${item.q}</h3>
          <p>Think aloud — explain your reasoning step by step</p>
        </div>
        <div class="q-difficulty"><span class="badge ${diffColor[item.diff] || 'badge-navy'}">${item.diff}</span></div>
      </div>`).join("");
  }

  // Role tabs
  if (roleTabsEl) {
    const roles = Object.keys(MOCK.questions);
    roleTabsEl.innerHTML = roles.map(r => `<button class="tab-btn${r === role ? ' active' : ''}" data-role="${r}">${r}</button>`).join("");
    roleTabsEl.addEventListener("click", e => {
      const btn = e.target.closest(".tab-btn");
      if (!btn) return;
      roleTabsEl.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
      btn.classList.add("active");
      if (titleEl) titleEl.textContent = `Interview Questions — ${btn.dataset.role} Developer`;
      renderQuestions(btn.dataset.role);
    });
  }
  renderQuestions(role);

  const startBtn = document.getElementById("startInterviewBtn");
  if (startBtn) {
    startBtn.addEventListener("click", () => {
      toast("Interview session starting… Good luck! 🚀", "success");
      setTimeout(() => { window.location.href = "interview_notes.html"; }, 1500);
    });
  }
}

// ─── Interview Notes ──────────────────────────────────────────────────────────
function initInterviewNotes() {
  const form   = document.getElementById("notesForm");
  const result = document.getElementById("notesResult");
  if (!form) return;
  const charCount = document.getElementById("charCount");
  const notesTA   = form.querySelector("textarea[name=notes]");
  if (notesTA && charCount) {
    notesTA.addEventListener("input", () => {
      charCount.textContent = notesTA.value.length + " chars";
    });
  }
  form.addEventListener("submit", async e => {
    e.preventDefault();
    const btn = form.querySelector("[type=submit]");
    btn.classList.add("btn-loading");
    btn.disabled = true;
    const payload = {
      candidate: form.candidateName.value,
      role:      form.role.value,
      notes:     notesTA.value,
    };
    sessionStorage.setItem("interviewPayload", JSON.stringify(payload));
    try {
      const data = await api("/submit-interview", payload);
      result.innerHTML = `
        <div class="success-card">
          <div class="success-icon"><svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
          <div class="badge badge-teal mb-2">Notes Submitted</div>
          <h2 style="font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--navy);margin-bottom:0.5rem;">Interview notes received</h2>
          <p style="color:var(--gray-600);font-size:0.9rem;margin-bottom:1.25rem;">Report ID: <strong>${data.reportId}</strong> — AI is processing the evaluation.</p>
          <a href="report.html" class="btn btn-primary btn-lg">Generate Evaluation Report →</a>
        </div>`;
      result.classList.remove("hidden");
      result.scrollIntoView({ behavior: "smooth", block: "nearest" });
      toast("Notes submitted! Generating report…", "success");
    } catch {
      toast("Submission failed. Please try again.", "error");
    } finally {
      btn.classList.remove("btn-loading");
      btn.disabled = false;
    }
  });
}

// ─── Report ───────────────────────────────────────────────────────────────────
function initReport() {
  const container = document.getElementById("reportContainer");
  const skeleton  = document.getElementById("reportSkeleton");
  if (!container) return;

  async function loadReport() {
    try {
      const stored  = JSON.parse(sessionStorage.getItem("interviewPayload") || "{}");
      const data    = await api("/generate-report", stored);
      if (skeleton) skeleton.remove();
      renderReport(data, stored);
    } catch {
      toast("Failed to load report.", "error");
    }
  }

  function animateBar(el, value) {
    el.style.width = "0%";
    setTimeout(() => { el.style.width = value + "%"; }, 100);
  }

  function renderReport(data, meta) {
    const recClass = { Hire: "hire", Consider: "consider", Reject: "reject" };
    const recEmoji = { Hire: "🎉", Consider: "🤔", Reject: "⛔" };
    const overallScore = Math.round((data.technical + data.problemSolving + data.communication) / 3);

    container.innerHTML = `
      <div class="score-grid animate-in">
        <div class="score-card">
          <div class="score-num">${data.technical}<span class="out-of">/100</span></div>
          <div class="score-card-label">Technical Skills</div>
          <div class="progress-wrap mt-2"><div class="progress-track"><div class="progress-fill" id="bar1"></div></div></div>
        </div>
        <div class="score-card">
          <div class="score-num">${data.problemSolving}<span class="out-of">/100</span></div>
          <div class="score-card-label">Problem Solving</div>
          <div class="progress-wrap mt-2"><div class="progress-track"><div class="progress-fill amber" id="bar2"></div></div></div>
        </div>
        <div class="score-card">
          <div class="score-num">${data.communication}<span class="out-of">/100</span></div>
          <div class="score-card-label">Communication</div>
          <div class="progress-wrap mt-2"><div class="progress-track"><div class="progress-fill navy" id="bar3"></div></div></div>
        </div>
      </div>

      <div class="card animate-in animate-delay-1 mb-3" style="margin-bottom:1.25rem;">
        <div class="flex-between mb-2">
          <div>
            <div style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--gray-400);">Overall Score</div>
            <div style="font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--navy);letter-spacing:-1px;">${overallScore}<span style="font-size:1rem;color:var(--gray-400);font-weight:500;">/100</span></div>
          </div>
          <div style="text-align:right;">
            <div style="font-size:0.75rem;color:var(--gray-400);margin-bottom:4px;">Candidate</div>
            <div style="font-weight:600;color:var(--navy);">${meta.candidate || "Candidate"}</div>
            <div style="font-size:0.82rem;color:var(--gray-600);">${meta.role || "Software Engineer"}</div>
          </div>
        </div>
        <p style="font-size:0.9rem;color:var(--gray-600);line-height:1.7;">${data.summary}</p>
      </div>

      <div class="grid-2 animate-in animate-delay-2" style="margin-bottom:1.25rem;">
        <div class="card card-flat">
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:1rem;">
            <span style="font-size:1.1rem;">💪</span>
            <span style="font-family:var(--font-display);font-weight:700;color:var(--navy);">Strengths</span>
          </div>
          <ul style="display:flex;flex-direction:column;gap:0.6rem;">
            ${data.strengths.map(s => `<li style="display:flex;gap:8px;font-size:0.875rem;color:var(--gray-800);"><span style="color:var(--teal);font-weight:700;margin-top:1px;">✓</span>${s}</li>`).join("")}
          </ul>
        </div>
        <div class="card card-flat">
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:1rem;">
            <span style="font-size:1.1rem;">📈</span>
            <span style="font-family:var(--font-display);font-weight:700;color:var(--navy);">Areas to Improve</span>
          </div>
          <ul style="display:flex;flex-direction:column;gap:0.6rem;">
            ${data.weaknesses.map(w => `<li style="display:flex;gap:8px;font-size:0.875rem;color:var(--gray-800);"><span style="color:var(--amber);font-weight:700;margin-top:1px;">△</span>${w}</li>`).join("")}
          </ul>
        </div>
      </div>

      <div class="recommendation-banner ${recClass[data.recommendation] || 'consider'} animate-in animate-delay-3">
        <div class="rec-icon">${recEmoji[data.recommendation] || "🤔"}</div>
        <div>
          <div class="rec-label">Final Recommendation</div>
          <div class="rec-title">${data.recommendation}</div>
        </div>
        <div style="margin-left:auto;">
          <button onclick="window.print()" class="btn btn-secondary btn-sm">🖨 Print Report</button>
        </div>
      </div>`;

    setTimeout(() => {
      animateBar(document.getElementById("bar1"), data.technical);
      animateBar(document.getElementById("bar2"), data.problemSolving);
      animateBar(document.getElementById("bar3"), data.communication);
    }, 200);
  }

  loadReport();
}

// ─── Mock Interview ───────────────────────────────────────────────────────────
function initMockInterview() {
  const form   = document.getElementById("mockForm");
  const result = document.getElementById("mockResult");
  if (!form) return;
  form.addEventListener("submit", async e => {
    e.preventDefault();
    const btn = form.querySelector("[type=submit]");
    btn.classList.add("btn-loading");
    btn.disabled = true;
    const payload = {
      name:  form.candidateName.value,
      role:  form.desiredRole.value,
      level: form.expLevel.value,
      slot:  form.timeSlot.value,
    };
    try {
      const data = await api("/mock-interview", payload);
      renderMockResult(data, payload);
      result.classList.remove("hidden");
      result.scrollIntoView({ behavior: "smooth", block: "nearest" });
      toast("Mock interview booked!", "success");
    } catch {
      toast("Booking failed. Please try again.", "error");
    } finally {
      btn.classList.remove("btn-loading");
      btn.disabled = false;
    }
  });
}
function renderMockResult(data, payload) {
  const el       = document.getElementById("mockResult");
  const initials = data.interviewer.name.split(" ").map(n => n[0]).join("");
  el.innerHTML = `
    <div class="success-card">
      <div class="success-icon"><svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
      <div class="badge badge-teal mb-2">Mock Interview Scheduled</div>
      <h2 style="font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--navy);letter-spacing:-0.5px;margin-bottom:0.5rem;">You're all set, ${payload.name.split(" ")[0]}!</h2>
      <p style="color:var(--gray-600);font-size:0.9rem;margin-bottom:1.5rem;">Your mock interview for <strong>${payload.role}</strong> has been confirmed.</p>
      <div style="background:white;border:1.5px solid var(--gray-100);border-radius:var(--radius-md);padding:1.5rem;display:flex;align-items:center;gap:1.25rem;text-align:left;margin-bottom:1rem;">
        <div class="avatar amber" style="width:52px;height:52px;font-size:1.1rem;">${initials}</div>
        <div style="flex:1;">
          <div style="font-weight:700;font-size:1.05rem;color:var(--navy);">${data.interviewer.name}</div>
          <div style="font-size:0.85rem;color:var(--gray-600);margin:2px 0;">${data.interviewer.expertise}</div>
          <div style="display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;">
            <span class="badge badge-navy">${data.interviewer.company}</span>
            <span class="badge badge-teal">${data.interviewer.exp} exp</span>
            <span class="badge badge-green">★ ${data.interviewer.rating}</span>
          </div>
        </div>
      </div>
      <div style="background:white;border:1.5px solid var(--gray-100);border-radius:var(--radius-md);padding:1rem 1.5rem;display:flex;align-items:center;gap:10px;text-align:left;">
        <span style="font-size:1.2rem;">🗓</span>
        <div>
          <div style="font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--gray-400);margin-bottom:2px;">Scheduled Time</div>
          <div style="font-weight:600;color:var(--navy);font-size:0.95rem;">${data.scheduledTime}</div>
        </div>
        <div style="margin-left:auto;text-align:right;">
          <div style="font-size:0.72rem;color:var(--gray-400);">Booking ID</div>
          <div style="font-family:var(--font-display);font-weight:700;color:var(--teal-dark);font-size:0.9rem;">${data.confirmationId}</div>
        </div>
      </div>
      <div style="margin-top:1.25rem;display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap;">
        <a href="questions.html?role=${encodeURIComponent(payload.role)}" class="btn btn-primary">Practice Questions →</a>
        <button onclick="location.reload()" class="btn btn-secondary">Book Another</button>
      </div>
    </div>`;
}