import { View, Exam, Submission } from './types';
import { saveExams, loadExams, saveSubmissions, loadSubmissions, generateId, exportToJSON, importFromJSON } from './store';
import { autoGradeSubmission, formatTime } from './utils';

// App state
let currentView: View = 'dashboard';
let editingExamId: string | null = null;
let takingExamId: string | null = null;
let gradingSubmissionId: string | null = null;
let viewingResultsExamId: string | null = null;

// DOM
const app = document.getElementById('app')!;

function render() {
  app.innerHTML = '';
  switch (currentView) {
    case 'dashboard': renderDashboard(); break;
    case 'editor': renderEditor(); break;
    case 'take': renderTake(); break;
    case 'submissions': renderSubmissions(); break;
    case 'grade': renderGrade(); break;
    case 'results': renderResults(); break;
    case 'export': renderExport(); break;
  }
}

function navigate(view: View, params?: { examId?: string; submissionId?: string }) {
  currentView = view;
  editingExamId = params?.examId ?? null;
  takingExamId = params?.examId ?? null;
  gradingSubmissionId = params?.submissionId ?? null;
  viewingResultsExamId = params?.examId ?? null;
  render();
}

function renderNav(): string {
  return `
    <nav class="nav">
      <div class="nav-brand" onclick="navigate('dashboard')">Intelligrade Lite</div>
      <div class="nav-links">
        <button class="nav-btn ${currentView === 'dashboard' ? 'active' : ''}" onclick="navigate('dashboard')">Dashboard</button>
        <button class="nav-btn ${currentView === 'export' ? 'active' : ''}" onclick="navigate('export')">Import / Export</button>
      </div>
    </nav>
  `;
}

// Make navigate available globally for inline handlers
(window as any).navigate = navigate;

function renderDashboard() {
  const exams = loadExams();
  const submissions = loadSubmissions();
  
  app.innerHTML = `
    ${renderNav()}
    <div class="container">
      <div class="hero">
        <h1>Digital Exams</h1>
        <p>Create, conduct, and grade exams — all in your browser. No server. No data leaves your device.</p>
        <button class="btn btn-primary" onclick="createNewExam()">+ Create New Exam</button>
      </div>
      
      <div class="stats">
        <div class="stat-card">
          <div class="stat-value">${exams.length}</div>
          <div class="stat-label">Exams</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">${submissions.length}</div>
          <div class="stat-label">Submissions</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">${submissions.filter(s => s.graded).length}</div>
          <div class="stat-label">Graded</div>
        </div>
      </div>

      <h2>Your Exams</h2>
      ${exams.length === 0 ? `
        <div class="empty-state">
          <p>No exams yet. Create your first exam to get started.</p>
        </div>
      ` : `
        <div class="exam-grid">
          ${exams.map(exam => `
            <div class="exam-card">
              <div class="exam-card-header">
                <h3>${escapeHtml(exam.title)}</h3>
                <span class="badge">${exam.questions.length} questions</span>
              </div>
              <p class="exam-subject">${escapeHtml(exam.subject)}</p>
              <p class="exam-desc">${escapeHtml(exam.description)}</p>
              <div class="exam-meta">
                <span>⏱ ${exam.timeLimit > 0 ? exam.timeLimit + ' min' : 'No limit'}</span>
                <span>🔀 ${exam.shuffleQuestions ? 'Shuffled' : 'Fixed order'}</span>
              </div>
              <div class="exam-actions">
                <button class="btn btn-sm" onclick="editExam('${exam.id}')">Edit</button>
                <button class="btn btn-sm btn-accent" onclick="takeExam('${exam.id}')">Take Exam</button>
                <button class="btn btn-sm" onclick="viewResults('${exam.id}')">Results</button>
                <button class="btn btn-sm btn-danger" onclick="deleteExam('${exam.id}')">Delete</button>
              </div>
            </div>
          `).join('')}
        </div>
      `}

      <h2>Recent Submissions</h2>
      ${submissions.length === 0 ? `
        <div class="empty-state">
          <p>No submissions yet. Take an exam to see results here.</p>
        </div>
      ` : `
        <div class="submission-list">
          ${submissions.slice(0, 10).map(sub => {
            const exam = exams.find(e => e.id === sub.examId);
            return `
              <div class="submission-row">
                <span class="sub-student">${escapeHtml(sub.studentName)}</span>
                <span class="sub-exam">${escapeHtml(exam?.title ?? 'Unknown exam')}</span>
                <span class="sub-score">${sub.percentage}%</span>
                <span class="sub-status ${sub.graded ? 'graded' : 'pending'}">${sub.graded ? 'Graded' : 'Pending'}</span>
                <button class="btn btn-sm" onclick="gradeSubmission('${sub.id}')">${sub.graded ? 'Review' : 'Grade'}</button>
              </div>
            `;
          }).join('')}
        </div>
      `}
    </div>
  `;
}

function escapeHtml(text: string): string {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

(window as any).createNewExam = () => {
  editingExamId = null;
  navigate('editor');
};

(window as any).editExam = (id: string) => navigate('editor', { examId: id });
(window as any).takeExam = (id: string) => navigate('take', { examId: id });
(window as any).viewResults = (id: string) => navigate('results', { examId: id });
(window as any).gradeSubmission = (id: string) => navigate('grade', { submissionId: id });

(window as any).deleteExam = (id: string) => {
  if (!confirm('Delete this exam and all its submissions?')) return;
  const exams = loadExams().filter(e => e.id !== id);
  const submissions = loadSubmissions().filter(s => s.examId !== id);
  saveExams(exams);
  saveSubmissions(submissions);
  render();
};

function renderEditor() {
  const exams = loadExams();
  const exam = editingExamId ? exams.find(e => e.id === editingExamId) : null;
  
  const questions = exam?.questions ?? [];
  
  app.innerHTML = `
    ${renderNav()}
    <div class="container">
      <div class="editor-header">
        <button class="btn btn-back" onclick="navigate('dashboard')">← Back</button>
        <h1>${exam ? 'Edit Exam' : 'New Exam'}</h1>
      </div>
      
      <div class="editor-form">
        <div class="form-group">
          <label>Title</label>
          <input type="text" id="exam-title" value="${escapeHtml(exam?.title ?? '')}" placeholder="e.g., Biology Midterm">
        </div>
        <div class="form-row">
          <div class="form-group">
            <label>Subject</label>
            <input type="text" id="exam-subject" value="${escapeHtml(exam?.subject ?? '')}" placeholder="e.g., Biology">
          </div>
          <div class="form-group">
            <label>Time Limit (minutes, 0 = none)</label>
            <input type="number" id="exam-time" value="${exam?.timeLimit ?? 60}">
          </div>
        </div>
        <div class="form-group">
          <label>Description</label>
          <textarea id="exam-desc" rows="2" placeholder="Brief description of the exam">${escapeHtml(exam?.description ?? '')}</textarea>
        </div>
        <div class="form-checkboxes">
          <label><input type="checkbox" id="exam-shuffle" ${exam?.shuffleQuestions ? 'checked' : ''}> Shuffle questions</label>
          <label><input type="checkbox" id="exam-retake" ${exam?.allowRetake ? 'checked' : ''}> Allow retake</label>
          <label><input type="checkbox" id="exam-showresults" ${exam?.showResults !== false ? 'checked' : ''}> Show results immediately</label>
        </div>
      </div>

      <h2>Questions (${questions.length})</h2>
      <div id="questions-container">
        ${questions.map((q, i) => renderQuestionEditor(q, i)).join('')}
      </div>
      
      <div class="add-question-bar">
        <button class="btn" onclick="addQuestion('multiple_choice')">+ Multiple Choice</button>
        <button class="btn" onclick="addQuestion('true_false')">+ True/False</button>
        <button class="btn" onclick="addQuestion('short_answer')">+ Short Answer</button>
        <button class="btn" onclick="addQuestion('essay')">+ Essay</button>
        <button class="btn" onclick="addQuestion('fill_blank')">+ Fill in Blank</button>
      </div>

      <div class="editor-actions">
        <button class="btn btn-primary btn-large" onclick="saveExam()">Save Exam</button>
      </div>
    </div>
  `;
}

function renderQuestionEditor(q: any, index: number): string {
  const optionsHtml = q.options?.map((opt: string, i: number) => `
    <div class="option-row">
      <input type="radio" name="correct-${q.id}" value="${i}" ${q.correctAnswer === String(i) ? 'checked' : ''}>
      <input type="text" class="option-text" data-qid="${q.id}" data-idx="${i}" value="${escapeHtml(opt)}" placeholder="Option ${i + 1}">
      <button class="btn btn-icon" onclick="removeOption('${q.id}', ${i})">×</button>
    </div>
  `).join('') ?? '';

  const optionsEditor = q.type === 'multiple_choice' ? `
    <div class="options-list" id="options-${q.id}">
      ${optionsHtml}
      <button class="btn btn-sm" onclick="addOption('${q.id}')">+ Add Option</button>
    </div>
  ` : '';

  const correctAnswerInput = q.type === 'fill_blank' ? `
    <div class="form-group">
      <label>Correct Answer(s) — comma separated</label>
      <input type="text" id="correct-${q.id}" value="${escapeHtml(Array.isArray(q.correctAnswer) ? q.correctAnswer.join(', ') : (q.correctAnswer ?? ''))}" placeholder="e.g., mitochondria, Mitochondria">
      <label><input type="checkbox" id="case-${q.id}" ${q.caseSensitive ? 'checked' : ''}> Case sensitive</label>
    </div>
  ` : q.type === 'true_false' ? `
    <div class="form-group">
      <label>Correct Answer</label>
      <select id="correct-${q.id}">
        <option value="true" ${q.correctAnswer === 'true' ? 'selected' : ''}>True</option>
        <option value="false" ${q.correctAnswer === 'false' ? 'selected' : ''}>False</option>
      </select>
    </div>
  ` : '';

  return `
    <div class="question-editor" data-qid="${q.id}">
      <div class="question-header">
        <span class="question-number">${index + 1}</span>
        <span class="question-type-badge">${q.type.replace('_', ' ')}</span>
        <button class="btn btn-icon btn-danger" onclick="removeQuestion('${q.id}')">×</button>
      </div>
      <div class="form-row">
        <div class="form-group flex-grow">
          <label>Question Text</label>
          <textarea id="text-${q.id}" rows="2" placeholder="Enter your question">${escapeHtml(q.text)}</textarea>
        </div>
        <div class="form-group" style="width: 100px;">
          <label>Points</label>
          <input type="number" id="points-${q.id}" value="${q.points}" min="0">
        </div>
      </div>
      ${optionsEditor}
      ${correctAnswerInput}
    </div>
  `;
}

(window as any).addQuestion = (type: string) => {
  const container = document.getElementById('questions-container')!;
  const qid = generateId();
  const newQ = {
    id: qid,
    type,
    text: '',
    points: type === 'essay' ? 10 : (type === 'short_answer' ? 5 : 1),
    options: type === 'multiple_choice' ? ['', ''] : undefined,
    correctAnswer: type === 'true_false' ? 'true' : undefined,
  };
  const div = document.createElement('div');
  div.innerHTML = renderQuestionEditor(newQ, container.children.length);
  container.appendChild(div.firstElementChild!);
};

(window as any).addOption = (qid: string) => {
  const list = document.getElementById(`options-${qid}`)!;
  const idx = list.querySelectorAll('.option-row').length;
  const row = document.createElement('div');
  row.className = 'option-row';
  row.innerHTML = `
    <input type="radio" name="correct-${qid}" value="${idx}">
    <input type="text" class="option-text" data-qid="${qid}" data-idx="${idx}" placeholder="Option ${idx + 1}">
    <button class="btn btn-icon" onclick="removeOption('${qid}', ${idx})">×</button>
  `;
  list.insertBefore(row, list.lastElementChild);
};

(window as any).removeOption = (qid: string, idx: number) => {
  const list = document.getElementById(`options-${qid}`)!;
  const rows = list.querySelectorAll('.option-row');
  if (rows[idx]) rows[idx].remove();
};

(window as any).removeQuestion = (qid: string) => {
  const el = document.querySelector(`[data-qid="${qid}"]`);
  el?.remove();
  // Renumber
  document.querySelectorAll('.question-editor').forEach((el, i) => {
    el.querySelector('.question-number')!.textContent = String(i + 1);
  });
};

(window as any).saveExam = () => {
  const title = (document.getElementById('exam-title') as HTMLInputElement).value.trim();
  if (!title) { alert('Title is required'); return; }
  
  const exam: Exam = {
    id: editingExamId ?? generateId(),
    title,
    subject: (document.getElementById('exam-subject') as HTMLInputElement).value.trim(),
    description: (document.getElementById('exam-desc') as HTMLTextAreaElement).value.trim(),
    timeLimit: parseInt((document.getElementById('exam-time') as HTMLInputElement).value) || 0,
    shuffleQuestions: (document.getElementById('exam-shuffle') as HTMLInputElement).checked,
    allowRetake: (document.getElementById('exam-retake') as HTMLInputElement).checked,
    showResults: (document.getElementById('exam-showresults') as HTMLInputElement).checked,
    questions: [],
    createdAt: editingExamId ? loadExams().find(e => e.id === editingExamId)!.createdAt : new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  };

  // Collect questions from DOM
  document.querySelectorAll('.question-editor').forEach(el => {
    const qid = el.getAttribute('data-qid')!;
    const type = el.querySelector('.question-type-badge')!.textContent!.replace(' ', '_') as any;
    const text = (el.querySelector(`#text-${qid}`) as HTMLTextAreaElement).value.trim();
    const points = parseInt((el.querySelector(`#points-${qid}`) as HTMLInputElement).value) || 0;
    
    const q: any = { id: qid, type, text, points };
    
    if (type === 'multiple_choice') {
      const options: string[] = [];
      let correctAnswer = '';
      el.querySelectorAll('.option-row').forEach((row, i) => {
        const optText = (row.querySelector('.option-text') as HTMLInputElement)?.value.trim() ?? '';
        if (optText) options.push(optText);
        const radio = row.querySelector('input[type="radio"]') as HTMLInputElement;
        if (radio?.checked) correctAnswer = String(i);
      });
      q.options = options;
      q.correctAnswer = correctAnswer;
    } else if (type === 'true_false') {
      q.correctAnswer = (el.querySelector(`#correct-${qid}`) as HTMLSelectElement)?.value;
    } else if (type === 'fill_blank') {
      const raw = (el.querySelector(`#correct-${qid}`) as HTMLInputElement)?.value.trim() ?? '';
      q.correctAnswer = raw ? raw.split(',').map((s: string) => s.trim()).filter(Boolean) : [];
      q.caseSensitive = (el.querySelector(`#case-${qid}`) as HTMLInputElement)?.checked;
    }
    
    exam.questions.push(q);
  });

  const exams = loadExams().filter(e => e.id !== exam.id);
  exams.push(exam);
  saveExams(exams);
  navigate('dashboard');
};

function renderTake() {
  const exams = loadExams();
  const exam = exams.find(e => e.id === takingExamId);
  
  if (!exam) {
    app.innerHTML = `<div class="container"><p>Exam not found. <button onclick="navigate('dashboard')">Back</button></p></div>`;
    return;
  }

  const questions = exam.shuffleQuestions 
    ? [...exam.questions].sort(() => Math.random() - 0.5)
    : exam.questions;

  app.innerHTML = `
    ${renderNav()}
    <div class="container">
      <div class="take-header">
        <h1>${escapeHtml(exam.title)}</h1>
        <div class="take-meta">
          <span>${exam.questions.length} questions</span>
          <span>${exam.questions.reduce((a, q) => a + q.points, 0)} points</span>
          ${exam.timeLimit > 0 ? `<span id="timer" class="timer">⏱ ${formatTime(exam.timeLimit * 60)}</span>` : ''}
        </div>
      </div>
      
      <div class="student-form">
        <div class="form-group">
          <label>Student Name</label>
          <input type="text" id="student-name" placeholder="Enter your name" required>
        </div>
      </div>

      <div class="questions-list">
        ${questions.map((q, i) => renderQuestionTake(q, i)).join('')}
      </div>

      <div class="take-actions">
        <button class="btn btn-primary btn-large" onclick="submitExam()">Submit Exam</button>
      </div>
    </div>
  `;

  // Start timer
  if (exam.timeLimit > 0) {
    let remaining = exam.timeLimit * 60;
    const timerEl = document.getElementById('timer')!;
    const interval = setInterval(() => {
      remaining--;
      timerEl.textContent = `⏱ ${formatTime(remaining)}`;
      if (remaining <= 0) {
        clearInterval(interval);
        alert('Time is up! Submitting your exam.');
        (window as any).submitExam();
      }
    }, 1000);
    (window as any)._examTimer = interval;
  }
}

function renderQuestionTake(q: any, index: number): string {
  const inputName = `q-${q.id}`;
  
  switch (q.type) {
    case 'multiple_choice':
      return `
        <div class="question-take">
          <div class="question-text">${index + 1}. ${escapeHtml(q.text)} <span class="points">(${q.points} pts)</span></div>
          <div class="options-take">
            ${q.options?.map((opt: string, i: number) => `
              <label class="option-label">
                <input type="radio" name="${inputName}" value="${i}">
                <span>${escapeHtml(opt)}</span>
              </label>
            `).join('') ?? ''}
          </div>
        </div>
      `;
    case 'true_false':
      return `
        <div class="question-take">
          <div class="question-text">${index + 1}. ${escapeHtml(q.text)} <span class="points">(${q.points} pts)</span></div>
          <div class="options-take">
            <label class="option-label">
              <input type="radio" name="${inputName}" value="true">
              <span>True</span>
            </label>
            <label class="option-label">
              <input type="radio" name="${inputName}" value="false">
              <span>False</span>
            </label>
          </div>
        </div>
      `;
    case 'fill_blank':
      return `
        <div class="question-take">
          <div class="question-text">${index + 1}. ${escapeHtml(q.text)} <span class="points">(${q.points} pts)</span></div>
          <input type="text" name="${inputName}" class="answer-input" placeholder="Your answer">
        </div>
      `;
    case 'short_answer':
      return `
        <div class="question-take">
          <div class="question-text">${index + 1}. ${escapeHtml(q.text)} <span class="points">(${q.points} pts)</span></div>
          <textarea name="${inputName}" class="answer-textarea" rows="3" placeholder="Your answer"></textarea>
        </div>
      `;
    case 'essay':
      return `
        <div class="question-take">
          <div class="question-text">${index + 1}. ${escapeHtml(q.text)} <span class="points">(${q.points} pts)</span></div>
          <textarea name="${inputName}" class="answer-textarea" rows="8" placeholder="Write your essay here..."></textarea>
        </div>
      `;
    default:
      return '';
  }
}

(window as any).submitExam = () => {
  const studentName = (document.getElementById('student-name') as HTMLInputElement)?.value.trim();
  if (!studentName) { alert('Please enter your name'); return; }

  const exams = loadExams();
  const exam = exams.find(e => e.id === takingExamId);
  if (!exam) return;

  const answers: any[] = [];
  exam.questions.forEach(q => {
    const inputName = `q-${q.id}`;
    if (q.type === 'multiple_choice' || q.type === 'true_false') {
      const selected = document.querySelector(`input[name="${inputName}"]:checked`) as HTMLInputElement;
      if (selected) answers.push({ questionId: q.id, value: selected.value });
    } else {
      const el = document.querySelector(`[name="${inputName}"]`) as HTMLInputElement | HTMLTextAreaElement;
      if (el) answers.push({ questionId: q.id, value: el.value });
    }
  });

  if ((window as any)._examTimer) clearInterval((window as any)._examTimer);

  const submission: Submission = {
    id: generateId(),
    examId: exam.id,
    studentName,
    startedAt: new Date().toISOString(),
    completedAt: new Date().toISOString(),
    answers,
    scores: {},
    totalScore: 0,
    maxScore: 0,
    percentage: 0,
    graded: false,
  };

  const questionsMap = new Map(exam.questions.map(q => [q.id, q]));
  const graded = autoGradeSubmission(submission, questionsMap);

  const submissions = loadSubmissions();
  submissions.push(graded);
  saveSubmissions(submissions);

  if (exam.showResults) {
    alert(`Submitted! You scored ${graded.percentage}% (${graded.totalScore}/${graded.maxScore})`);
  } else {
    alert('Submitted! Your teacher will review your answers.');
  }
  navigate('dashboard');
};

function renderGrade() {
  const submissions = loadSubmissions();
  const submission = submissions.find(s => s.id === gradingSubmissionId);
  const exams = loadExams();
  const exam = submission ? exams.find(e => e.id === submission.examId) : null;
  
  if (!submission || !exam) {
    app.innerHTML = `<div class="container"><p>Submission not found. <button onclick="navigate('dashboard')">Back</button></p></div>`;
    return;
  }

  app.innerHTML = `
    ${renderNav()}
    <div class="container">
      <div class="editor-header">
        <button class="btn btn-back" onclick="navigate('dashboard')">← Back</button>
        <h1>Grade: ${escapeHtml(submission.studentName)}</h1>
        <p class="grade-exam-title">${escapeHtml(exam.title)}</p>
      </div>

      <div class="grade-summary">
        <div class="grade-score">Current: ${submission.totalScore} / ${submission.maxScore} = ${submission.percentage}%</div>
      </div>

      <div class="questions-grade">
        ${exam.questions.map(q => {
          const answer = submission.answers.find(a => a.questionId === q.id);
          const score = submission.scores[q.id] ?? 0;
          const needsManual = q.type === 'short_answer' || q.type === 'essay';
          const autoGraded = !needsManual && submission.scores[q.id] !== undefined;
          
          return `
            <div class="question-grade">
              <div class="question-text">${escapeHtml(q.text)} <span class="points">(${q.points} pts)</span></div>
              <div class="answer-display">
                <strong>Answer:</strong> ${escapeHtml(String(answer?.value ?? 'No answer'))}
              </div>
              ${q.correctAnswer ? `<div class="correct-answer"><strong>Expected:</strong> ${escapeHtml(Array.isArray(q.correctAnswer) ? q.correctAnswer.join(' or ') : q.correctAnswer)}</div>` : ''}
              <div class="grade-input">
                <label>Score:</label>
                <input type="number" id="score-${q.id}" value="${score}" min="0" max="${q.points}" step="0.5"
                  onchange="updateScore('${q.id}', ${q.points})">
                <span class="auto-badge ${autoGraded ? 'auto' : (needsManual ? 'manual' : '')}">
                  ${autoGraded ? 'Auto-graded' : (needsManual ? 'Manual' : '')}
                </span>
              </div>
            </div>
          `;
        }).join('')}
      </div>

      <div class="editor-actions">
        <button class="btn btn-primary btn-large" onclick="saveGrades()">Save Grades</button>
      </div>
    </div>
  `;
}

(window as any).updateScore = (qid: string, maxPoints: number) => {
  const el = document.getElementById(`score-${qid}`) as HTMLInputElement;
  let val = parseFloat(el.value);
  if (val < 0) val = 0;
  if (val > maxPoints) val = maxPoints;
  el.value = String(val);
};

(window as any).saveGrades = () => {
  const submissions = loadSubmissions();
  const submission = submissions.find(s => s.id === gradingSubmissionId);
  if (!submission) return;

  const exams = loadExams();
  const exam = exams.find(e => e.id === submission.examId);
  if (!exam) return;

  let totalScore = 0;
  const scores: Record<string, number> = {};

  exam.questions.forEach(q => {
    const el = document.getElementById(`score-${q.id}`) as HTMLInputElement;
    const score = parseFloat(el.value) || 0;
    scores[q.id] = score;
    totalScore += score;
  });

  const maxScore = exam.questions.reduce((a, q) => a + q.points, 0);
  const percentage = maxScore > 0 ? Math.round((totalScore / maxScore) * 100) : 0;

  const idx = submissions.findIndex(s => s.id === gradingSubmissionId);
  submissions[idx] = {
    ...submission,
    scores,
    totalScore,
    maxScore,
    percentage,
    graded: true,
    gradedAt: new Date().toISOString(),
  };

  saveSubmissions(submissions);
  alert('Grades saved!');
  navigate('dashboard');
};

function renderResults() {
  const exams = loadExams();
  const exam = exams.find(e => e.id === viewingResultsExamId);
  const submissions = loadSubmissions().filter(s => s.examId === viewingResultsExamId);
  
  if (!exam) {
    app.innerHTML = `<div class="container"><p>Exam not found. <button onclick="navigate('dashboard')">Back</button></p></div>`;
    return;
  }

  const avgScore = submissions.length > 0
    ? Math.round(submissions.reduce((a, s) => a + s.percentage, 0) / submissions.length)
    : 0;
  const gradedCount = submissions.filter(s => s.graded).length;

  app.innerHTML = `
    ${renderNav()}
    <div class="container">
      <div class="editor-header">
        <button class="btn btn-back" onclick="navigate('dashboard')">← Back</button>
        <h1>Results: ${escapeHtml(exam.title)}</h1>
      </div>

      <div class="stats">
        <div class="stat-card">
          <div class="stat-value">${submissions.length}</div>
          <div class="stat-label">Submissions</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">${gradedCount}</div>
          <div class="stat-label">Graded</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">${avgScore}%</div>
          <div class="stat-label">Average</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">${submissions.length > 0 ? Math.max(...submissions.map(s => s.percentage)) : 0}%</div>
          <div class="stat-label">Highest</div>
        </div>
      </div>

      <h2>Submissions</h2>
      ${submissions.length === 0 ? '<p class="empty-state">No submissions yet.</p>' : `
        <div class="submission-list">
          ${submissions.map(sub => `
            <div class="submission-row">
              <span class="sub-student">${escapeHtml(sub.studentName)}</span>
              <span class="sub-score">${sub.percentage}%</span>
              <span class="sub-status ${sub.graded ? 'graded' : 'pending'}">${sub.graded ? 'Graded' : 'Pending'}</span>
              <span class="sub-date">${new Date(sub.completedAt).toLocaleDateString()}</span>
              <button class="btn btn-sm" onclick="gradeSubmission('${sub.id}')">${sub.graded ? 'Review' : 'Grade'}</button>
            </div>
          `).join('')}
        </div>
      `}

      <h2>Question Breakdown</h2>
      <div class="question-breakdown">
        ${exam.questions.map(q => {
          const questionSubmissions = submissions.map(sub => {
            const answer = sub.answers.find(a => a.questionId === q.id);
            return { score: sub.scores[q.id] ?? 0, answer: answer?.value ?? '' };
          });
          const avgQScore = questionSubmissions.length > 0
            ? Math.round((questionSubmissions.reduce((a, s) => a + s.score, 0) / (questionSubmissions.length * q.points)) * 100)
            : 0;
          
          return `
            <div class="breakdown-row">
              <span class="breakdown-text">${escapeHtml(q.text.substring(0, 60))}${q.text.length > 60 ? '...' : ''}</span>
              <div class="breakdown-bar">
                <div class="breakdown-fill" style="width: ${avgQScore}%"></div>
              </div>
              <span class="breakdown-score">${avgQScore}% avg</span>
            </div>
          `;
        }).join('')}
      </div>
    </div>
  `;
}

function renderSubmissions() {
  navigate('dashboard');
}

function renderExport() {
  app.innerHTML = `
    ${renderNav()}
    <div class="container">
      <div class="editor-header">
        <button class="btn btn-back" onclick="navigate('dashboard')">← Back</button>
        <h1>Import / Export</h1>
      </div>

      <div class="export-section">
        <h2>Export Exams</h2>
        <p>Download all your exams as a JSON file.</p>
        <button class="btn btn-primary" onclick="exportExams()">Export Exams</button>
      </div>

      <div class="export-section">
        <h2>Export Submissions</h2>
        <p>Download all submissions as a JSON file.</p>
        <button class="btn btn-primary" onclick="exportSubmissions()">Export Submissions</button>
      </div>

      <div class="export-section">
        <h2>Import Exams</h2>
        <p>Upload a previously exported exam file.</p>
        <input type="file" id="import-file" accept=".json" onchange="importExams()">
      </div>
    </div>
  `;
}

(window as any).exportExams = () => {
  exportToJSON(loadExams(), `intelligrade-exams-${new Date().toISOString().slice(0, 10)}.json`);
};

(window as any).exportSubmissions = () => {
  exportToJSON(loadSubmissions(), `intelligrade-submissions-${new Date().toISOString().slice(0, 10)}.json`);
};

(window as any).importExams = async () => {
  const input = document.getElementById('import-file') as HTMLInputElement;
  const file = input.files?.[0];
  if (!file) return;

  try {
    const data = await importFromJSON(file) as Exam[];
    if (!Array.isArray(data)) { alert('Invalid file format'); return; }
    
    const existing = loadExams();
    const merged = [...existing];
    for (const exam of data) {
      if (!existing.find(e => e.id === exam.id)) {
        exam.id = generateId(); // Reassign IDs to avoid conflicts
        exam.createdAt = new Date().toISOString();
        merged.push(exam);
      }
    }
    saveExams(merged);
    alert(`Imported ${data.length} exams`);
    input.value = '';
    navigate('dashboard');
  } catch (e) {
    alert('Failed to import: ' + (e as Error).message);
  }
};

// Initial render
render();