<div class="row mt-4">
  <!-- Cards iniciales -->
  <div class="col-md-6 col-xl-3 mb-4">
    <div class="card shadow-sm border-0">
      <div class="card-body d-flex align-items-center">
        <div class="bg-primary text-white rounded-circle p-3 mr-3">
          <i class="fe fe-folder-plus fe-24"></i>
        </div>
        <div>
          <p class="mb-0 text-muted">Mis Trámites</p>
          <h4 class="mb-0"><?= $cardCounts['Trámites totales']; ?></h4>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-xl-3 mb-4">
    <div class="card shadow-sm border-0">
      <div class="card-body d-flex align-items-center">
        <div class="bg-warning text-white rounded-circle p-3 mr-3">
          <i class="fe fe-refresh-cw fe-24"></i>
        </div>
        <div>
          <p class="mb-0 text-muted">En Proceso</p>
          <h4 class="mb-0"><?= $cardCounts['En proceso']; ?></h4>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-xl-3 mb-4">
    <div class="card shadow-sm border-0">
      <div class="card-body d-flex align-items-center">
        <div class="bg-danger text-white rounded-circle p-3 mr-3">
          <i class="fe fe-alert-triangle fe-24"></i>
        </div>
        <div>
          <p class="mb-0 text-muted">Observados</p>
          <h4 class="mb-0"><?= $cardCounts['Observado']; ?></h4>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-xl-3 mb-4">
    <div class="card shadow-sm border-0">
      <div class="card-body d-flex align-items-center">
        <div class="bg-success text-white rounded-circle p-3 mr-3">
          <i class="fe fe-check-circle fe-24"></i>
        </div>
        <div>
          <p class="mb-0 text-muted">Resueltos</p>
          <h4 class="mb-0"><?= $cardCounts['Resuelto']; ?></h4>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Accesos Rápidos -->
<div class="row mb-4">
  <div class="col-12">
    <div class="card shadow-sm border-0">
      <div class="card-header">
        <strong class="card-title">Accesos Rápidos</strong>
      </div>
      <div class="card-body">
        <div class="d-grid gap-2">
          <a href="<?= BASE_HREF ?>processes/create" class="btn btn-outline-primary">
            <i class="fe fe-plus mr-2"></i> Iniciar Nuevo Trámite
          </a>
          <a href="<?= BASE_HREF ?>inbox" class="btn btn-outline-secondary">
            <i class="fe fe-mail mr-2"></i> Ver Casilla Electrónica
          </a>
          <a href="<?= BASE_HREF ?>profile" class="btn btn-outline-success">
            <i class="fe fe-user mr-2"></i> Mi Perfil
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Gráficos -->
<div class="row mb-4">
  <!-- Gráfico de Resumen de Trámites -->
  <div class="col-lg-6 mb-4">
    <div class="card shadow-sm border-0">
      <div class="card-header">
        <strong class="card-title">Resumen de Trámites</strong>
      </div>
      <div class="card-body">
        <canvas id="barChart" width="300" height="300"></canvas>
      </div>
    </div>
  </div>

  <!-- Gráfico de Resoluciones y Proveídos (tipo donut) -->
  <div class="col-lg-6 mb-4">
    <div class="card shadow-sm border-0">
      <div class="card-header">
        <strong class="card-title">Resoluciones y Proveídos</strong>
      </div>
      <div class="card-body">
        <canvas id="donutChart" width="300" height="300"></canvas>
      </div>
    </div>
  </div>
</div>

<!-- Casilla Electrónica y Últimos Trámites -->
<div class="row mb-4">
  <div class="col-md-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h6 class="card-title mb-3">Últimas Notificaciones</h6>
        <ul class="list-group list-group-flush">
          <?php foreach ($lastNotifications as $notification): ?>
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <?= htmlspecialchars($notification->message); ?>
              <span class="badge badge-<?= $notification->is_read ? 'secondary' : 'primary'; ?> badge-pill">
                <?= $notification->is_read ? 'Leído' : 'No leído'; ?>
              </span>
            </li>
          <?php endforeach; ?>
        </ul>
        <a href="<?= BASE_HREF ?>inbox" class="btn btn-sm btn-outline-primary mt-3">Ver casilla electrónica</a>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h6 class="card-title mb-3">Últimos Trámites Iniciados</h6>
        <div class="table-responsive">
          <table class="table table-bordered mb-0">
            <thead>
              <tr>
                <th>Expediente</th>
                <th>Estado</th>
                <th>Fecha</th>
                <th>Acción</th>
              </tr>
            </thead>
            <tbody>
              <?php foreach ($lastProcesses as $process): ?>
                <tr>
                  <td><?= htmlspecialchars($process->num_exped); ?></td>
                  <td><span class="badge badge-<?= strtolower($process->general_state) === 'en proceso' ? 'warning' : (strtolower($process->general_state) === 'resuelto' ? 'success' : 'secondary'); ?>"><?= htmlspecialchars($process->general_state); ?></span></td>
                  <td><?= htmlspecialchars($process->entry_date); ?></td>
                  <td><a href="<?= BASE_HREF ?>processes/<?= htmlspecialchars($process->id); ?>/show-process" class="btn btn-sm btn-primary">Ver</a></td>
                </tr>
              <?php endforeach; ?>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctxBar = document.getElementById('barChart').getContext('2d');
  const barChart = new Chart(ctxBar, {
    type: 'bar',
    data: {
      labels: <?= json_encode(array_keys($processSummary)); ?>,
      datasets: [{
        label: 'Cantidad',
        data: <?= json_encode(array_values($processSummary)); ?>,
        backgroundColor: ['#efa302', '#dd3445', '#3ad29f'],
        borderRadius: 6,
      }]
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true,
          ticks: {
            stepSize: 1
          }
        }
      },
      plugins: {
        legend: {
          display: false
        }
      }
    }
  });

  const ctxDonut = document.getElementById('donutChart').getContext('2d');
  const donutChart = new Chart(ctxDonut, {
    type: 'doughnut',
    data: {
      labels: <?= json_encode(array_keys($responseSummary)); ?>, 
      datasets: [{
        data: <?= json_encode(array_values($responseSummary)); ?>,
        backgroundColor: ['#3ad29f', '#007bff'],
        borderColor: ['#fff', '#fff', '#fff'],
        borderWidth: 2
      }]
    },
    options: {
      responsive: true,
      cutout: '60%',
      plugins: {
        legend: {
          position: 'top'
        },
        tooltip: {
          enabled: true
        }
      }
    }
  });
</script>