{% extends 'base.html.twig' %}

{% block title %}Dashboard - CxP GT{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block body %}
  {# Welcome Section #}
  <div class="mb-8">
    <h2 class="text-3xl font-bold text-secondary-900">¡Bienvenido de nuevo, {{ app.user ? app.user.nombre : 'Usuario' }}! 👋</h2>
    <p class="mt-2 text-secondary-600">Aquí está un resumen de tu sistema de Cuentas por Pagar</p>
  </div>

  {# Stats Cards - Modern & Compact - Clickeable #}
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
    {# Card 1 - Documentos Pendientes #}
    <a href="{{ path('documento_index', {estado: 'pendiente'}) }}" class="block group">
      <div class="relative overflow-hidden bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform group-hover:-translate-y-1 group-hover:scale-[1.02]">
        <div class="absolute top-0 right-0 -mt-4 -mr-4 h-24 w-24 rounded-full bg-white opacity-10"></div>
        <div class="relative p-6">
          <div class="flex items-center justify-between mb-4">
            <div class="p-3 bg-white bg-opacity-20 rounded-xl">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
              </svg>
            </div>
            <span class="text-xs font-semibold text-white bg-white bg-opacity-20 px-2 py-1 rounded-full">+12%</span>
          </div>
          <h3 class="text-white text-opacity-90 text-sm font-medium mb-1">Documentos Pendientes</h3>
          <p class="text-white text-3xl font-bold">{{ metrics.pending_documents }}</p>
        </div>
      </div>
    </a>

    {# Card 2 - Vence Esta Semana #}
    <a href="{{ path('rep_antiguedad') }}" class="block group">
      <div class="relative overflow-hidden bg-gradient-to-br from-yellow-500 to-orange-500 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform group-hover:-translate-y-1 group-hover:scale-[1.02]">
        <div class="absolute top-0 right-0 -mt-4 -mr-4 h-24 w-24 rounded-full bg-white opacity-10"></div>
        <div class="relative p-6">
          <div class="flex items-center justify-between mb-4">
            <div class="p-3 bg-white bg-opacity-20 rounded-xl">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            </div>
            <span class="text-xs font-semibold text-white bg-white bg-opacity-20 px-2 py-1 rounded-full">6%</span>
          </div>
          <h3 class="text-white text-opacity-90 text-sm font-medium mb-1">Vence Esta Semana</h3>
          <p class="text-white text-3xl font-bold">Q {{ metrics.due_this_week }}</p>
        </div>
      </div>
    </a>

    {# Card 3 - Proveedores Activos #}
    <a href="{{ path('proveedor_index', {estado: 'activos'}) }}" class="block group">
      <div class="relative overflow-hidden bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform group-hover:-translate-y-1 group-hover:scale-[1.02]">
        <div class="absolute top-0 right-0 -mt-4 -mr-4 h-24 w-24 rounded-full bg-white opacity-10"></div>
        <div class="relative p-6">
          <div class="flex items-center justify-between mb-4">
            <div class="p-3 bg-white bg-opacity-20 rounded-xl">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
              </svg>
            </div>
            <span class="text-xs font-semibold text-white bg-white bg-opacity-20 px-2 py-1 rounded-full">72%</span>
          </div>
          <h3 class="text-white text-opacity-90 text-sm font-medium mb-1">Proveedores Activos</h3>
          <p class="text-white text-3xl font-bold">{{ metrics.active_providers }}</p>
        </div>
      </div>
    </a>

    {# Card 4 - Total por Pagar #}
    <a href="{{ path('documento_index', {estado: 'pendiente'}) }}" class="block group">
      <div class="relative overflow-hidden bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform group-hover:-translate-y-1 group-hover:scale-[1.02]">
        <div class="absolute top-0 right-0 -mt-4 -mr-4 h-24 w-24 rounded-full bg-white opacity-10"></div>
        <div class="relative p-6">
          <div class="flex items-center justify-between mb-4">
            <div class="p-3 bg-white bg-opacity-20 rounded-xl">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
              </svg>
            </div>
            <span class="text-xs font-semibold text-white bg-white bg-opacity-20 px-2 py-1 rounded-full">150%</span>
          </div>
          <h3 class="text-white text-opacity-90 text-sm font-medium mb-1">Total por Pagar</h3>
          <p class="text-white text-3xl font-bold">Q {{ metrics.total_payable }}</p>
        </div>
      </div>
    </a>
  </div>

  {# Main Content Grid #}
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
    {# Chart - 2/3 width #}
    <div class="lg:col-span-2">
      <div class="bg-white rounded-2xl shadow-sm border border-secondary-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-secondary-200 flex items-center justify-between">
          <div>
            <h3 class="text-lg font-semibold text-secondary-900">Proyección de Vencimientos</h3>
            <p class="text-sm text-secondary-500 mt-0.5">Últimos 7 días</p>
          </div>
          <div class="flex gap-2">
            <button class="px-3 py-1.5 text-xs font-medium text-primary-700 bg-primary-50 rounded-lg hover:bg-primary-100">7d</button>
            <button class="px-3 py-1.5 text-xs font-medium text-secondary-600 hover:bg-secondary-100 rounded-lg">30d</button>
            <button class="px-3 py-1.5 text-xs font-medium text-secondary-600 hover:bg-secondary-100 rounded-lg">90d</button>
          </div>
        </div>
        <div class="p-6">
          <canvas id="dueChart" class="w-full h-72"></canvas>
        </div>
      </div>
    </div>

    {# Activity Sidebar - 1/3 width #}
    <div class="lg:col-span-1">
      <div class="bg-white rounded-2xl shadow-sm border border-secondary-200 overflow-hidden h-full">
        <div class="px-6 py-4 border-b border-secondary-200">
          <h3 class="text-lg font-semibold text-secondary-900">Actividad Reciente</h3>
          <p class="text-sm text-secondary-500 mt-0.5">Últimas actualizaciones</p>
        </div>
        <div class="p-6 space-y-4 max-h-96 overflow-y-auto">
          {% for activity in activities %}
          <div class="flex gap-3">
            <div class="flex-shrink-0">
              <div class="w-10 h-10 rounded-xl flex items-center justify-center
                {{ activity.type == 'success' ? 'bg-green-100' : (activity.type == 'info' ? 'bg-blue-100' : (activity.type == 'warning' ? 'bg-yellow-100' : 'bg-red-100')) }}">
                <svg class="w-5 h-5 {{ activity.type == 'success' ? 'text-green-600' : (activity.type == 'info' ? 'text-blue-600' : (activity.type == 'warning' ? 'text-yellow-600' : 'text-red-600')) }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  {% if activity.icon == 'document' %}
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                  {% elseif activity.icon == 'payment' %}
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                  {% else %}
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                  {% endif %}
                </svg>
              </div>
            </div>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-medium text-secondary-900 truncate">{{ activity.title }}</p>
              <p class="text-xs text-secondary-500 truncate">{{ activity.subtitle }}</p>
              <p class="text-xs text-secondary-400 mt-1">{{ activity.time }}</p>
            </div>
          </div>
          {% else %}
            <div class="text-center py-8 text-secondary-500 text-sm">
              No hay actividad reciente.
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  {# Recent Documents Table #}
  <div class="bg-white rounded-2xl shadow-sm border border-secondary-200 overflow-hidden">
    <div class="px-6 py-4 border-b border-secondary-200 flex items-center justify-between">
      <div>
        <h3 class="text-lg font-semibold text-secondary-900">Documentos Recientes</h3>
        <p class="text-sm text-secondary-500 mt-0.5">Últimos documentos del sistema</p>
      </div>
      <a href="{{ path('documento_index') }}" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary-700 bg-primary-50 rounded-lg hover:bg-primary-100 transition-colors">
        Ver todos
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </a>
    </div>
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead class="bg-secondary-50">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-semibold text-secondary-700 uppercase tracking-wider">Serie</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-secondary-700 uppercase tracking-wider">Proveedor</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-secondary-700 uppercase tracking-wider">Tipo</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-secondary-700 uppercase tracking-wider">Fecha</th>
            <th class="px-6 py-3 text-right text-xs font-semibold text-secondary-700 uppercase tracking-wider">Total</th>
            <th class="px-6 py-3 text-right text-xs font-semibold text-secondary-700 uppercase tracking-wider">Saldo</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-secondary-700 uppercase tracking-wider">Estado</th>
            <th class="px-6 py-3 text-center text-xs font-semibold text-secondary-700 uppercase tracking-wider">Acciones</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-secondary-100">
          {% for doc in recentDocuments %}
          <tr class="hover:bg-secondary-50 transition-colors">
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="text-sm font-semibold text-secondary-900">{{ doc.serie }}</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-600">{{ doc.proveedor }}</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium bg-indigo-100 text-indigo-800 border border-indigo-200">
                {{ doc.tipo }}
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-600">{{ doc.fecha }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-secondary-900 text-right">{{ doc.total }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-secondary-900 text-right">{{ doc.saldo }}</td>
            <td class="px-6 py-4 whitespace-nowrap">
              {% if doc.estado == 'Pagado' %}
                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium bg-green-100 text-green-800 border border-green-200">
                  <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                  </svg>
                  {{ doc.estado }}
                </span>
              {% elseif doc.estado == 'Parcial' %}
                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium bg-yellow-100 text-yellow-800 border border-yellow-200">
                  <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                  </svg>
                  {{ doc.estado }}
                </span>
              {% elseif doc.estado == 'Registrado' %}
                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200">
                  <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"/>
                  </svg>
                  {{ doc.estado }}
                </span>
              {% else %}
                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium bg-secondary-100 text-secondary-700 border border-secondary-200">
                  {{ doc.estado }}
                </span>
              {% endif %}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-center">
              <a href="{{ path('documento_show', {id: doc.id}) }}" class="inline-flex items-center gap-1 text-sm font-medium text-primary-600 hover:text-primary-800 transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                </svg>
                Ver
              </a>
            </td>
          </tr>
          {% else %}
            <tr>
              <td colspan="8" class="px-6 py-8 text-center text-secondary-500 text-sm">
                No hay documentos recientes.
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {# Chart Script #}
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const ctx = document.getElementById('dueChart');
      if (ctx) {
        // Use data from controller if available, otherwise fallback to empty structure
        const chartData = {{ chartData|default('{}')|json_encode|raw }};

        new Chart(ctx, {
          type: chartData.type || 'line',
          data: chartData.data || { labels: [], datasets: [] },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                display: true,
                position: 'bottom'
              },
              tooltip: {
                mode: 'index',
                intersect: false,
                callbacks: {
                  label: function(context) {
                    let label = context.dataset.label || '';
                    if (label) {
                      label += ': ';
                    }
                    if (context.parsed.y !== null) {
                      label += 'Q ' + context.parsed.y.toLocaleString();
                    }
                    return label;
                  }
                }
              }
            },
            scales: {
              y: {
                beginAtZero: true,
                ticks: {
                  callback: function(value) {
                    return 'Q ' + value.toLocaleString();
                  }
                }
              }
            },
            interaction: {
              mode: 'nearest',
              axis: 'x',
              intersect: false
            }
          }
        });
      }
    });
  </script>
{% endblock %}