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

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

{% block body %}
  {% set currentUser = app.user %}
  {% set userInitials = currentUser ? currentUser.nombre|slice(0, 2)|upper : 'US' %}
  {% set roleName = currentUser ? get_user_role_name(currentUser) : 'Usuario' %}
  {% set userPhoto = currentUser and currentUser.foto ? '/' ~ currentUser.foto|trim('/') : null %}
  {% set themeMap = {
    'slate': {
      'shell': 'from-slate-950 via-slate-900 to-slate-800',
      'badge': 'bg-white/10 text-slate-100',
      'accent': 'text-slate-100',
      'icon': 'bg-white/10 text-white'
    },
    'amber': {
      'shell': 'from-amber-500 via-orange-500 to-amber-600',
      'badge': 'bg-white/20 text-amber-50',
      'accent': 'text-amber-50',
      'icon': 'bg-white/15 text-white'
    },
    'emerald': {
      'shell': 'from-emerald-500 via-teal-500 to-emerald-600',
      'badge': 'bg-white/20 text-emerald-50',
      'accent': 'text-emerald-50',
      'icon': 'bg-white/15 text-white'
    },
    'rose': {
      'shell': 'from-fuchsia-500 via-rose-500 to-pink-600',
      'badge': 'bg-white/20 text-rose-50',
      'accent': 'text-rose-50',
      'icon': 'bg-white/15 text-white'
    }
  } %}

  <div class="space-y-8">
    <section class="relative overflow-hidden rounded-[2rem] border border-secondary-200 bg-white px-6 py-7 shadow-sm sm:px-8">
      <div class="absolute inset-y-0 right-0 hidden w-80 bg-[radial-gradient(circle_at_center,_rgba(59,130,246,0.12),_transparent_68%)] lg:block"></div>
      <div class="relative flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
        <div class="flex items-center gap-4">
          {% if userPhoto %}
            <img src="{{ userPhoto }}" alt="{{ currentUser ? currentUser.nombre : 'Usuario' }}" class="h-16 w-16 rounded-2xl object-cover shadow-lg ring-4 ring-primary-50">
          {% else %}
            <div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary-600 text-xl font-semibold text-white shadow-lg">{{ userInitials }}</div>
          {% endif %}
          <div>
            <p class="text-xs uppercase tracking-[0.24em] text-primary-600">Panel principal</p>
            <h2 class="mt-2 text-3xl font-semibold text-secondary-900 sm:text-4xl">¡Bienvenido de nuevo, {{ currentUser ? currentUser.nombre : 'usuario' }}!</h2>
            <p class="mt-2 max-w-3xl text-sm leading-7 text-secondary-600 sm:text-base">
              Aquí está un resumen actualizado de tu sistema de cuentas por pagar. Usa las tarjetas para ir directo al filtro que necesites.
            </p>
          </div>
        </div>

        <div class="inline-flex items-center rounded-full border border-primary-100 bg-primary-50 px-4 py-2 text-sm font-medium text-primary-700">
          {{ roleName }}
        </div>
      </div>
    </section>

    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
      {% for metric in metrics %}
        {% set palette = themeMap[metric.theme] %}
        <a href="{{ metric.href }}" class="group block overflow-hidden rounded-[1.75rem] bg-gradient-to-br {{ palette.shell }} p-[1px] shadow-lg transition hover:-translate-y-1 hover:shadow-2xl">
          <div class="relative h-full rounded-[1.7rem] bg-gradient-to-br {{ palette.shell }} px-5 py-5 text-white">
            <div class="absolute right-0 top-0 h-24 w-24 translate-x-8 -translate-y-8 rounded-full bg-white/10"></div>
            <div class="relative flex items-start justify-between gap-4">
              <div class="flex h-12 w-12 items-center justify-center rounded-2xl {{ palette.icon }} shadow-lg">
                {% if loop.index == 1 %}
                  <svg class="h-6 w-6" 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>
                {% elseif loop.index == 2 %}
                  <svg class="h-6 w-6" 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>
                {% elseif loop.index == 3 %}
                  <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                {% else %}
                  <svg class="h-6 w-6" 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>
                {% endif %}
              </div>
              <span class="rounded-full px-3 py-1 text-xs font-semibold {{ palette.badge }}">Abrir filtro</span>
            </div>
            <p class="relative mt-6 text-sm font-medium {{ palette.accent }}">{{ metric.label }}</p>
            <div class="relative mt-3 flex items-end justify-between gap-4">
              <p class="text-3xl font-semibold tracking-tight text-white">
                {% if loop.index in [2, 3, 4] %}
                  {{ currencySymbol }} {{ metric.value|number_format(2, '.', ',') }}
                {% else %}
                  {{ metric.value|number_format(0, '.', ',') }}
                {% endif %}
              </p>
              <svg class="h-5 w-5 text-white/80 transition group-hover:translate-x-1" 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>
            </div>
            <p class="relative mt-3 text-xs leading-5 text-white/80">{{ metric.hint }}</p>
          </div>
        </a>
      {% endfor %}
    </section>

    <section class="grid gap-6 xl:grid-cols-[minmax(0,1.65fr)_minmax(320px,0.85fr)]">
      <div class="overflow-hidden rounded-[2rem] border border-secondary-200 bg-white shadow-sm">
        <div class="border-b border-secondary-200 px-6 py-5">
          <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
            <div>
              <p class="text-xs uppercase tracking-[0.24em] text-secondary-500">Radar de vencimientos</p>
              <h3 class="mt-2 text-2xl font-semibold text-secondary-900">Proyección de vencimientos</h3>
              <p class="mt-2 text-sm text-secondary-500">Visualiza la carga diaria del rango seleccionado y entra rápido al detalle de cada fecha.</p>
            </div>
            <div class="inline-flex rounded-2xl bg-secondary-100 p-1">
              {% for option in rangeOptions %}
                <a href="{{ path('home', {range: option}) }}#dashboard-proyeccion" class="rounded-2xl px-4 py-2 text-sm font-medium transition {{ range == option ? 'bg-white text-secondary-900 shadow-sm' : 'text-secondary-500 hover:text-secondary-900' }}">{{ option }}d</a>
              {% endfor %}
            </div>
          </div>
        </div>

        {% if projectionStats.total <= 0 and overdueSummary.count > 0 %}
          <div class="mx-6 mt-6 rounded-[1.5rem] border border-amber-200 bg-amber-50 px-5 py-4">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
              <div>
                <p class="text-sm font-semibold text-amber-900">No hay vencimientos próximos entre {{ projectionWindow.from }} y {{ projectionWindow.to }}.</p>
                <p class="mt-1 text-sm text-amber-800">
                  Sí tienes {{ overdueSummary.count }} documentos vencidos por {{ currencySymbol }} {{ overdueSummary.amount|number_format(2, '.', ',') }},
                  con fechas del {{ overdueSummary.oldestLabel }} al {{ overdueSummary.latestLabel }}.
                </p>
              </div>
              <a href="{{ path('documento_index', {estado: 'pendiente', vencimiento_hasta: overdueSummary.cutoff}) }}" class="inline-flex items-center justify-center rounded-2xl border border-amber-300 bg-white px-4 py-2 text-sm font-medium text-amber-900 transition hover:bg-amber-100">
                Ver vencidos
              </a>
            </div>
          </div>
        {% endif %}

        <div id="dashboard-proyeccion" class="grid gap-6 px-6 py-6 lg:grid-cols-[280px_minmax(0,1fr)]">
          <div class="space-y-4">
            <div class="rounded-2xl border border-secondary-200 bg-secondary-50 p-4">
              <p class="text-xs uppercase tracking-[0.24em] text-secondary-500">Total proyectado</p>
              <p class="mt-3 text-2xl font-semibold text-secondary-900">{{ currencySymbol }} {{ projectionStats.total|number_format(2, '.', ',') }}</p>
              <p class="mt-2 text-sm text-secondary-500">Monto acumulado dentro del rango activo.</p>
            </div>
            <div class="rounded-2xl border border-secondary-200 bg-white p-4">
              <p class="text-xs uppercase tracking-[0.24em] text-secondary-500">Pico diario</p>
              <p class="mt-3 text-xl font-semibold text-secondary-900">{{ currencySymbol }} {{ projectionStats.peak|number_format(2, '.', ',') }}</p>
              <p class="mt-2 text-sm text-secondary-500">Punto más alto esperado en el calendario.</p>
            </div>
            <div class="rounded-2xl border border-secondary-200 bg-white p-4">
              <p class="text-xs uppercase tracking-[0.24em] text-secondary-500">Promedio</p>
              <p class="mt-3 text-xl font-semibold text-secondary-900">{{ currencySymbol }} {{ projectionStats.average|number_format(2, '.', ',') }}</p>
              <p class="mt-2 text-sm text-secondary-500">Media de salida estimada por día.</p>
            </div>
          </div>

          <div>
            <div class="h-80 rounded-[1.75rem] border border-secondary-200 bg-[linear-gradient(180deg,#ffffff_0%,#f8fafc_100%)] p-4 shadow-inner">
              <canvas id="dashboardProjectionChart"></canvas>
            </div>

            <div class="mt-5 overflow-hidden rounded-[1.5rem] border border-secondary-200">
              <div class="grid grid-cols-[120px_1fr_130px_110px] bg-secondary-50 px-4 py-3 text-xs font-semibold uppercase tracking-[0.2em] text-secondary-500">
                <span>Fecha</span>
                <span>Comportamiento</span>
                <span class="text-right">Monto</span>
                <span class="text-right">Acción</span>
              </div>
              <div class="divide-y divide-secondary-100 bg-white">
                {% for row in projectionHighlights %}
                  {% set percent = projectionStats.peak > 0 ? ((row.total / projectionStats.peak) * 100)|round(0, 'floor') : 0 %}
                  <div class="grid grid-cols-[120px_1fr_130px_110px] items-center gap-4 px-4 py-3 text-sm">
                    <div>
                      <p class="font-medium text-secondary-900">{{ row.label }}</p>
                      <p class="text-xs text-secondary-500">{{ row.date }}</p>
                    </div>
                    <div>
                      <div class="h-2 rounded-full bg-secondary-100">
                        <div class="h-2 rounded-full bg-gradient-to-r from-primary-500 to-cyan-400" style="width: {{ percent }}%"></div>
                      </div>
                    </div>
                    <div class="text-right font-medium text-secondary-900">{{ currencySymbol }} {{ row.total|number_format(2, '.', ',') }}</div>
                    <div class="text-right">
                      <a href="{{ path('documento_index', {estado: 'pendiente', vencimiento_desde: row.date, vencimiento_hasta: row.date}) }}" class="inline-flex items-center gap-2 rounded-xl border border-secondary-200 px-3 py-2 text-xs font-medium text-secondary-700 transition hover:bg-secondary-50">
                        Ver día
                      </a>
                    </div>
                  </div>
                {% else %}
                  <div class="px-4 py-8 text-center text-sm text-secondary-500">No hay vencimientos pendientes en el rango seleccionado.</div>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>

      <aside class="overflow-hidden rounded-[2rem] border border-secondary-200 bg-white shadow-sm">
        <div class="border-b border-secondary-200 px-6 py-5">
          <p class="text-xs uppercase tracking-[0.24em] text-secondary-500">Flujo reciente</p>
          <h3 class="mt-2 text-2xl font-semibold text-secondary-900">Actividad reciente</h3>
          <p class="mt-2 text-sm text-secondary-500">Últimos documentos y pagos registrados.</p>
        </div>
        <div class="max-h-[720px] space-y-4 overflow-y-auto px-6 py-5">
          {% for activity in activities %}
            <div class="flex gap-3 rounded-2xl border border-secondary-100 bg-secondary-50/70 p-4">
              <div class="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-2xl {{ activity.type == 'success' ? 'bg-emerald-100 text-emerald-600' : 'bg-blue-100 text-blue-600' }}">
                {% if activity.icon == 'document' %}
                  <svg class="h-5 w-5" 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>
                {% else %}
                  <svg class="h-5 w-5" 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>
                {% endif %}
              </div>
              <div class="min-w-0 flex-1">
                <p class="text-sm font-semibold text-secondary-900">{{ activity.title }}</p>
                <p class="mt-1 text-sm text-secondary-600">{{ activity.subtitle }}</p>
                <p class="mt-2 text-xs uppercase tracking-[0.18em] text-secondary-400">{{ activity.time }}</p>
              </div>
            </div>
          {% else %}
            <div class="rounded-2xl border border-dashed border-secondary-200 px-4 py-10 text-center text-sm text-secondary-500">No hay actividad reciente.</div>
          {% endfor %}
        </div>
      </aside>
    </section>

    <section class="overflow-hidden rounded-[2rem] border border-secondary-200 bg-white shadow-sm">
      <div class="flex flex-col gap-4 border-b border-secondary-200 px-6 py-5 lg:flex-row lg:items-center lg:justify-between">
        <div>
          <p class="text-xs uppercase tracking-[0.24em] text-secondary-500">Seguimiento documental</p>
          <h3 class="mt-2 text-2xl font-semibold text-secondary-900">Documentos recientes</h3>
          <p class="mt-2 text-sm text-secondary-500">Una vista rápida de los últimos documentos ingresados al sistema.</p>
        </div>
        <a href="{{ path('documento_index') }}" class="inline-flex items-center gap-2 rounded-2xl border border-secondary-200 px-4 py-2 text-sm font-medium text-secondary-700 transition hover:bg-secondary-50">
          Ver cartera completa
          <svg class="h-4 w-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="min-w-full divide-y divide-secondary-200">
          <thead class="bg-secondary-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-[0.2em] text-secondary-500">Documento</th>
              <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-[0.2em] text-secondary-500">Proveedor</th>
              <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-[0.2em] text-secondary-500">Tipo</th>
              <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-[0.2em] text-secondary-500">Fecha</th>
              <th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-[0.2em] text-secondary-500">Total</th>
              <th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-[0.2em] text-secondary-500">Saldo</th>
              <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-[0.2em] text-secondary-500">Estado</th>
              <th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-[0.2em] text-secondary-500">Acción</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-secondary-100 bg-white">
            {% for doc in recentDocuments %}
              <tr class="transition hover:bg-secondary-50">
                <td class="px-6 py-4 text-sm font-semibold text-secondary-900">{{ doc.documento }}</td>
                <td class="px-6 py-4 text-sm text-secondary-600">{{ doc.proveedor }}</td>
                <td class="px-6 py-4 text-sm text-secondary-600">{{ doc.tipo }}</td>
                <td class="px-6 py-4 text-sm text-secondary-600">{{ doc.fecha }}</td>
                <td class="px-6 py-4 text-right text-sm font-medium text-secondary-900">{{ doc.total }}</td>
                <td class="px-6 py-4 text-right text-sm font-medium {{ doc.estado in ['Parcial', 'Pendiente', 'Pendiente retención'] ? 'text-amber-700' : 'text-secondary-900' }}">{{ doc.saldo }}</td>
                <td class="px-6 py-4">
                  {% if doc.estado == 'Pagado' %}
                    <span class="inline-flex rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700">{{ doc.estado }}</span>
                  {% elseif doc.estado == 'Parcial' %}
                    <span class="inline-flex rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700">{{ doc.estado }}</span>
                  {% elseif doc.estado == 'Pendiente retención' %}
                    <span class="inline-flex rounded-full bg-violet-100 px-3 py-1 text-xs font-semibold text-violet-700">{{ doc.estado }}</span>
                  {% elseif doc.estado == 'Anulado' %}
                    <span class="inline-flex rounded-full bg-rose-100 px-3 py-1 text-xs font-semibold text-rose-700">{{ doc.estado }}</span>
                  {% else %}
                    <span class="inline-flex rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold text-blue-700">{{ doc.estado }}</span>
                  {% endif %}
                </td>
                <td class="px-6 py-4 text-right text-sm">
                  <a href="{{ path('documento_show', {id: doc.id}) }}" class="inline-flex items-center gap-2 rounded-xl border border-secondary-200 px-3 py-2 font-medium text-secondary-700 transition hover:bg-secondary-50">
                    Ver
                    <svg class="h-4 w-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>
                  </a>
                </td>
              </tr>
            {% else %}
              <tr>
                <td colspan="8" class="px-6 py-10 text-center text-sm text-secondary-500">No hay documentos recientes.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const canvas = document.getElementById('dashboardProjectionChart');
      if (!canvas || typeof Chart === 'undefined') {
        return;
      }

      const chartData = {{ chartData|json_encode|raw }};
      const currencySymbol = chartData.currencySymbol || '{{ currencySymbol }}';

      new Chart(canvas, {
        type: chartData.type || 'bar',
        data: chartData.data || { labels: [], datasets: [] },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          interaction: {
            mode: 'index',
            intersect: false,
          },
          plugins: {
            legend: {
              position: 'bottom',
              labels: {
                usePointStyle: true,
                padding: 18,
              },
            },
            tooltip: {
              callbacks: {
                label: function (context) {
                  const label = context.dataset.label ? context.dataset.label + ': ' : '';
                  return label + currencySymbol + ' ' + Number(context.parsed.y || 0).toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  });
                },
              },
            },
          },
          scales: {
            x: {
              grid: {
                display: false,
              },
              ticks: {
                color: '#64748b',
              },
            },
            y: {
              beginAtZero: true,
              ticks: {
                color: '#64748b',
                callback: function (value) {
                  return currencySymbol + ' ' + Number(value || 0).toLocaleString('en-US');
                },
              },
              grid: {
                color: 'rgba(148, 163, 184, 0.18)',
              },
            },
          },
        },
      });
    });
  </script>
{% endblock %}