// Split from public/app.js v1.7.7. Loaded by public/index.html.
function messagesView() {
  const courses = state.data.courses || [];
  const batches = state.data.batches || [];
  const students = state.data.students || [];
  const notifications = state.data.notifications || [];
  return html`
    <section class="panel">
      <div class="panel-header">
        <div>
          <h1>Messages</h1>
          <p class="muted">Send profile notifications and optional SMS to students.</p>
        </div>
      </div>
      <form class="form-grid" data-action="send-notification">
        <div class="grid-3">
          <label class="field"><span>Audience</span>
            <select name="audienceType">
              <option value="all">All active students</option>
              <option value="course">By course</option>
              <option value="batch">By batch</option>
              <option value="selected">Selected students</option>
            </select>
          </label>
          <label class="field"><span>Courses</span><select name="courseIds" multiple size="5">${courses.map((course) => `<option value="${course.id}">${escapeHtml(course.name)} (${escapeHtml(course.code || '-')})</option>`).join('')}</select></label>
          <label class="field"><span>Batches</span><select name="batchIds" multiple size="5">${batches.map((batch) => `<option value="${batch.id}">${escapeHtml(batch.name)} (${escapeHtml(batch.code || '-')})</option>`).join('')}</select></label>
        </div>
        <label class="field"><span>Selected Students</span><select name="studentIds" multiple size="6">${students.map((student) => `<option value="${student.id}">${escapeHtml(student.name)} - ${escapeHtml(student.rollNumber || student.studentMobile)}</option>`).join('')}</select></label>
        <label class="field"><span>Title *</span><input name="title" placeholder="Class notice" required></label>
        <label class="field"><span>Message *</span><textarea name="body" rows="5" placeholder="Write your notification message" required></textarea></label>
        <label class="field checkbox-line"><input name="sendSms" type="checkbox"> <span>Also send mobile SMS using active SMS gateway</span></label>
        <button class="btn" type="submit">Send Message</button>
      </form>
    </section>
    <section class="panel">
      <div class="panel-header"><h2>Recent Messages</h2></div>
      <div class="table-wrap"><table><thead><tr><th>Title</th><th>Audience</th><th>Recipients</th><th>SMS</th><th>Sent At</th></tr></thead><tbody>
        ${notifications.map((item) => `<tr><td><strong>${escapeHtml(item.title)}</strong><br><span class="muted">${escapeHtml(item.body)}</span></td><td>${escapeHtml(item.audienceType || 'all')}${item.courseIds?.length ? ` (${item.courseIds.length} courses)` : ''}${item.batchIds?.length ? ` (${item.batchIds.length} batches)` : ''}</td><td>${Number(item.recipientIds?.length || 0)}</td><td>${item.sendSms ? `${Number(item.smsSent || 0)} sent` : 'Off'}</td><td>${formatDate(item.createdAt)}</td></tr>`).join('') || '<tr><td colspan="5">No messages sent yet.</td></tr>'}
      </tbody></table></div>
    </section>
  `;
}

function teachersView() {
  const teachers = state.data.teachers || [];
  return html`
    <section class="panel">
      <div class="panel-header"><div><h1>Teachers</h1><p class="muted">Create teacher profiles for class and payment tracking.</p></div></div>
      <form class="form-grid" data-action="add-teacher">
        <div class="grid-3">
          <label class="field"><span>Name *</span><input name="name" placeholder="Teacher name" required></label>
          <label class="field"><span>Mobile *</span><input name="mobile" placeholder="01XXXXXXXXX" required></label>
          <label class="field"><span>Email</span><input name="email" type="email" placeholder="teacher@example.com"></label>
        </div>
        <div class="grid-3">
          <label class="field"><span>Subject</span><input name="subject" placeholder="Subject name"></label>
          <label class="field"><span>Default Rate / Class</span><input name="rate" type="number" min="0" step="0.01" placeholder="0"></label>
          <label class="field"><span>Note</span><input name="note" placeholder="Optional note"></label>
        </div>
        <button class="btn" type="submit">Add Teacher</button>
      </form>
    </section>
    <section class="panel">
      <div class="panel-header"><h2>Teacher List</h2></div>
      <div class="table-wrap"><table><thead><tr><th>Name</th><th>Mobile</th><th>Subject</th><th>Rate</th><th>Status</th><th>Actions</th></tr></thead><tbody>
        ${teachers.map((teacher) => `<tr><td>${escapeHtml(teacher.name)}<br><span class="muted">${escapeHtml(teacher.email || '-')}</span></td><td>${escapeHtml(teacher.mobile)}</td><td>${escapeHtml(teacher.subject || '-')}</td><td>${formatMoney(teacher.rate)}</td><td><span class="badge ${teacher.status === 'active' ? 'success' : 'danger'}">${teacher.status}</span></td><td><div class="actions"><button class="btn secondary small" data-action="edit-teacher" data-id="${teacher.id}">Edit</button><button class="btn secondary small" data-action="toggle-teacher" data-id="${teacher.id}" data-status="${teacher.status === 'active' ? 'inactive' : 'active'}">${teacher.status === 'active' ? 'Deactivate' : 'Activate'}</button></div></td></tr>`).join('') || '<tr><td colspan="6">No teachers yet.</td></tr>'}
      </tbody></table></div>
    </section>
    ${state.editingTeacherId ? teacherEditDialog() : ''}
  `;
}

function teacherEditDialog() {
  const teacher = (state.data.teachers || []).find((item) => item.id === state.editingTeacherId);
  if (!teacher) return '';
  return html`<div class="modal-backdrop"><section class="modal-card modal-wide">
    <div class="panel-header"><div><h2>Edit Teacher</h2><p class="muted">${escapeHtml(teacher.mobile)}</p></div><button class="btn secondary small" data-action="close-teacher-edit">Close</button></div>
    <form class="form-grid" data-action="edit-teacher" data-id="${teacher.id}">
      <div class="grid-3">
        <label class="field"><span>Name *</span><input name="name" value="${escapeHtml(teacher.name)}" required></label>
        <label class="field"><span>Mobile *</span><input name="mobile" value="${escapeHtml(teacher.mobile)}" required></label>
        <label class="field"><span>Email</span><input name="email" type="email" value="${escapeHtml(teacher.email || '')}"></label>
      </div>
      <div class="grid-3">
        <label class="field"><span>Subject</span><input name="subject" value="${escapeHtml(teacher.subject || '')}"></label>
        <label class="field"><span>Default Rate / Class</span><input name="rate" type="number" min="0" step="0.01" value="${Number(teacher.rate || 0)}"></label>
        <label class="field"><span>Note</span><input name="note" value="${escapeHtml(teacher.note || '')}"></label>
      </div>
      <button class="btn" type="submit">Save Teacher</button>
    </form>
  </section></div>`;
}

function employeesView() {
  const employees = state.data.employees || [];
  return html`
    <section class="panel">
      <div class="panel-header"><div><h1>Employees</h1><p class="muted">Create employee profiles for salary and staff payment tracking.</p></div></div>
      <form class="form-grid" data-action="add-employee">
        <div class="grid-3">
          <label class="field"><span>Name *</span><input name="name" placeholder="Employee name" required></label>
          <label class="field"><span>Mobile *</span><input name="mobile" placeholder="01XXXXXXXXX" required></label>
          <label class="field"><span>Email</span><input name="email" type="email" placeholder="employee@example.com"></label>
        </div>
        <div class="grid-3">
          <label class="field"><span>Designation</span><input name="designation" placeholder="Office assistant"></label>
          <label class="field"><span>Monthly Salary</span><input name="salary" type="number" min="0" step="0.01" placeholder="0"></label>
          <label class="field"><span>Note</span><input name="note" placeholder="Optional note"></label>
        </div>
        <button class="btn" type="submit">Add Employee</button>
      </form>
    </section>
    <section class="panel">
      <div class="panel-header"><h2>Employee List</h2></div>
      <div class="table-wrap"><table><thead><tr><th>Name</th><th>Mobile</th><th>Designation</th><th>Salary</th><th>Status</th><th>Actions</th></tr></thead><tbody>
        ${employees.map((employee) => `<tr><td>${escapeHtml(employee.name)}<br><span class="muted">${escapeHtml(employee.email || '-')}</span></td><td>${escapeHtml(employee.mobile)}</td><td>${escapeHtml(employee.designation || '-')}</td><td>${formatMoney(employee.salary)}</td><td><span class="badge ${employee.status === 'active' ? 'success' : 'danger'}">${employee.status}</span></td><td><div class="actions"><button class="btn secondary small" data-action="edit-employee" data-id="${employee.id}">Edit</button><button class="btn secondary small" data-action="toggle-employee" data-id="${employee.id}" data-status="${employee.status === 'active' ? 'inactive' : 'active'}">${employee.status === 'active' ? 'Deactivate' : 'Activate'}</button></div></td></tr>`).join('') || '<tr><td colspan="6">No employees yet.</td></tr>'}
      </tbody></table></div>
    </section>
    ${state.editingEmployeeId ? employeeEditDialog() : ''}
  `;
}

function employeeEditDialog() {
  const employee = (state.data.employees || []).find((item) => item.id === state.editingEmployeeId);
  if (!employee) return '';
  return html`<div class="modal-backdrop"><section class="modal-card">
    <div class="panel-header"><div><h2>Edit Employee</h2><p class="muted">${escapeHtml(employee.mobile)}</p></div><button class="btn secondary small" data-action="close-employee-edit">Close</button></div>
    <form class="form-grid" data-action="edit-employee" data-id="${employee.id}">
      <label class="field"><span>Name *</span><input name="name" value="${escapeHtml(employee.name)}" required></label>
      <label class="field"><span>Mobile *</span><input name="mobile" value="${escapeHtml(employee.mobile)}" required></label>
      <label class="field"><span>Email</span><input name="email" type="email" value="${escapeHtml(employee.email || '')}"></label>
      <label class="field"><span>Designation</span><input name="designation" value="${escapeHtml(employee.designation || '')}"></label>
      <label class="field"><span>Monthly Salary</span><input name="salary" type="number" min="0" step="0.01" value="${Number(employee.salary || 0)}"></label>
      <label class="field"><span>Note</span><input name="note" value="${escapeHtml(employee.note || '')}"></label>
      <button class="btn" type="submit">Save Employee</button>
    </form>
  </section></div>`;
}

