<div class="page-header">
  <div>
    <div class="eyebrow">Overview</div>
    <h1>Good to see you, <%= currentUser.name.split(' ')[0] %> 👋</h1>
    <p class="desc"><%= activeSchool ? activeSchool.name : 'All campuses' %> · <%= new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) %></p>
  </div>
  <div style="display:flex; gap:10px;">
    <a href="/students/new" class="btn btn-outline"><i class="fa-solid fa-user-plus"></i> Add Student</a>
    <a href="/notices/new" class="btn btn-primary"><i class="fa-solid fa-bullhorn"></i> Post Notice</a>
  </div>
</div>

<div class="stat-grid">
  <div class="stat-card accent-brand">
    <div class="corner-tab"></div>
    <div class="icon-badge"><i class="fa-solid fa-user-graduate"></i></div>
    <div class="value"><%= stats.totalStudents.toLocaleString() %></div>
    <div class="label">Total Students</div>
    <span class="delta up"><i class="fa-solid fa-arrow-trend-up"></i> <%= stats.activeStudents %> active</span>
  </div>
  <div class="stat-card accent-violet">
    <div class="corner-tab"></div>
    <div class="icon-badge"><i class="fa-solid fa-chalkboard-user"></i></div>
    <div class="value"><%= stats.totalTeachers.toLocaleString() %></div>
    <div class="label">Teaching Staff</div>
    <span class="delta up"><i class="fa-solid fa-check"></i> All departments staffed</span>
  </div>
  <div class="stat-card accent-sky">
    <div class="corner-tab"></div>
    <div class="icon-badge"><i class="fa-solid fa-school"></i></div>
    <div class="value"><%= stats.totalClasses.toLocaleString() %></div>
    <div class="label">Active Classes</div>
    <span class="delta up"><i class="fa-solid fa-layer-group"></i> Grades 1–6</span>
  </div>
  <div class="stat-card accent-green">
    <div class="corner-tab"></div>
    <div class="icon-badge"><i class="fa-solid fa-clipboard-check"></i></div>
    <div class="value"><%= stats.attendanceRate %>%</div>
    <div class="label">Today's Attendance</div>
    <span class="delta <%= stats.attendanceRate >= 90 ? 'up' : 'down' %>"><i class="fa-solid fa-circle"></i> <%= attMap.absent %> absent today</span>
  </div>
</div>

<div class="grid-main-side">
  <div>
    <div class="card" style="margin-bottom:18px;">
      <div class="card-head">
        <div>
          <h3>Attendance Trend</h3>
          <div class="sub">Last 7 school days</div>
        </div>
        <a href="/attendance" class="btn btn-outline btn-sm">View details</a>
      </div>
      <div class="card-body">
        <canvas id="attendanceTrendChart" height="90"></canvas>
        <div class="legend">
          <span class="item"><span class="swatch" style="background:#1FAE6B"></span> Present</span>
          <span class="item"><span class="swatch" style="background:#F0523E"></span> Absent</span>
          <span class="item"><span class="swatch" style="background:#FFB020"></span> Late</span>
          <span class="item"><span class="swatch" style="background:#8B5CF6"></span> Leave</span>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-head">
        <div>
          <h3>Recent Admissions</h3>
          <div class="sub">Newest students onboarded</div>
        </div>
        <a href="/students" class="btn btn-outline btn-sm">View all</a>
      </div>
      <div class="table-wrap">
        <table class="data-table">
          <thead>
            <tr><th>Student</th><th>Admission No.</th><th>Class</th><th>Guardian</th><th>Status</th></tr>
          </thead>
          <tbody>
            <% if (recentAdmissions.length === 0) { %>
              <tr><td colspan="5"><div class="empty-state"><i class="fa-regular fa-folder-open"></i><h4>No students yet</h4></div></td></tr>
            <% } %>
            <% recentAdmissions.forEach(function(s) { %>
              <tr>
                <td>
                  <div class="row-person">
                    <div class="avatar sm" style="background:linear-gradient(135deg, var(--sky), var(--brand));"><%= s.name.split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase() %></div>
                    <div><div class="row-title"><%= s.name %></div></div>
                  </div>
                </td>
                <td><span class="id-code"><%= s.admission_no %></span></td>
                <td><%= s.class_name ? s.class_name + ' ' + s.class_section : '—' %></td>
                <td><%= s.guardian_name %></td>
                <td><span class="badge <%= s.status === 'active' ? 'badge-green' : 'badge-gray' %>"><%= s.status %></span></td>
              </tr>
            <% }); %>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div>
    <div class="card" style="margin-bottom:18px;">
      <div class="card-head">
        <div><h3>Fee Collection</h3><div class="sub">This month</div></div>
      </div>
      <div class="card-body" style="text-align:center;">
        <canvas id="feeChart" height="180"></canvas>
        <div style="display:flex; justify-content:space-between; margin-top:16px; text-align:left;">
          <div>
            <div style="font-size:11px; color:var(--muted); font-weight:600;">COLLECTED</div>
            <div style="font-family:var(--font-display); font-weight:700; color:var(--green); font-size:17px;">$<%= (feeThisMonth.collected || 0).toLocaleString() %></div>
          </div>
          <div>
            <div style="font-size:11px; color:var(--muted); font-weight:600;">PENDING</div>
            <div style="font-family:var(--font-display); font-weight:700; color:var(--red); font-size:17px;">$<%= (feeThisMonth.pending || 0).toLocaleString() %></div>
          </div>
        </div>
        <a href="/fees" class="btn btn-outline btn-block" style="margin-top:16px;">Manage Fees</a>
      </div>
    </div>

    <div class="card" style="margin-bottom:18px;">
      <div class="card-head"><h3>Class Strength</h3></div>
      <div class="card-body">
        <canvas id="classStrengthChart" height="170"></canvas>
      </div>
    </div>

    <div class="card">
      <div class="card-head">
        <div><h3>Notices</h3><div class="sub">Latest announcements</div></div>
        <a href="/notices" class="btn btn-ghost btn-sm">All</a>
      </div>
      <div class="card-body">
        <% if (notices.length === 0) { %>
          <div class="empty-state"><i class="fa-regular fa-bell"></i><h4>No notices posted</h4></div>
        <% } %>
        <% notices.forEach(function(n) { %>
          <div class="notice-item">
            <div class="n-icon"><i class="fa-solid fa-bullhorn"></i></div>
            <div>
              <div class="n-title"><%= n.title %></div>
              <div class="n-meta"><%= new Date(n.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) %> · <%= n.audience %></div>
            </div>
          </div>
        <% }); %>
      </div>
    </div>
  </div>
</div>

<script>
  const trend = <%- JSON.stringify(trend) %>;
  new Chart(document.getElementById('attendanceTrendChart'), {
    type: 'line',
    data: {
      labels: trend.map(t => t.label),
      datasets: [
        { label: 'Present', data: trend.map(t => t.present), borderColor: '#1FAE6B', backgroundColor: 'rgba(31,174,107,0.08)', fill: true, tension: 0.4 },
        { label: 'Absent', data: trend.map(t => t.absent), borderColor: '#F0523E', backgroundColor: 'rgba(240,82,62,0.06)', fill: true, tension: 0.4 },
        { label: 'Late', data: trend.map(t => t.late), borderColor: '#FFB020', backgroundColor: 'rgba(255,176,32,0.06)', fill: true, tension: 0.4 },
      ]
    },
    options: {
      plugins: { legend: { display: false } },
      scales: { y: { beginAtZero: true, grid: { color: '#EEF0F6' } }, x: { grid: { display: false } } }
    }
  });

  const feeData = <%- JSON.stringify(feeThisMonth) %>;
  new Chart(document.getElementById('feeChart'), {
    type: 'doughnut',
    data: {
      labels: ['Collected', 'Pending'],
      datasets: [{ data: [feeData.collected || 0, feeData.pending || 0], backgroundColor: ['#1FAE6B', '#FDE9E7'], borderWidth: 0 }]
    },
    options: { cutout: '72%', plugins: { legend: { display: false } } }
  });

  const classStrength = <%- JSON.stringify(classStrength) %>;
  new Chart(document.getElementById('classStrengthChart'), {
    type: 'bar',
    data: {
      labels: classStrength.map(c => c.label),
      datasets: [{ data: classStrength.map(c => c.count), backgroundColor: '#4C6FFF', borderRadius: 6, maxBarThickness: 22 }]
    },
    options: {
      indexAxis: 'y',
      plugins: { legend: { display: false } },
      scales: { x: { beginAtZero: true, grid: { color: '#EEF0F6' } }, y: { grid: { display: false } } }
    }
  });
</script>
