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

{% block title %}{{ 'dashboard.title'|trans }} - CxP GT{% endblock %}
{% block page_title %}{{ 'dashboard.title'|trans }}{% 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) : 'user.fallback_name'|trans %}
  {% 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-6">
    <section class="rounded-panel border border-ui-border bg-white px-5 py-6 shadow-soft sm:px-6 lg:px-8">
      <div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
        <div class="min-w-0">
          <div class="flex items-center gap-3">
            {% if userPhoto %}
              <img src="{{ userPhoto }}" alt="" class="h-12 w-12 rounded-control object-cover shadow-soft ring-4 ring-primary-50 sm:h-14 sm:w-14">
            {% else %}
              <div class="flex h-12 w-12 flex-none items-center justify-center rounded-control bg-primary-600 text-base font-semibold text-white shadow-card sm:h-14 sm:w-14 sm:text-lg" aria-hidden="true">{{ userInitials }}</div>
            {% endif %}
            <p class="text-xs font-semibold uppercase text-primary-700">{{ 'dashboard.main_panel'|trans }}</p>
          </div>
          <h2 class="mt-4 max-w-4xl text-2xl font-semibold leading-tight text-neutral-950 sm:text-3xl">
            {{ 'dashboard.welcome'|trans({'%name%': currentUser ? currentUser.nombre : 'user.fallback_name'|trans}) }}
          </h2>
          <p class="mt-3 max-w-3xl text-sm leading-6 text-neutral-600 sm:text-base">
            {{ 'dashboard.welcome_copy'|trans }}
          </p>
        </div>
        <span class="badge badge-primary self-start px-4 py-2 text-sm xl:self-center">{{ roleName }}</span>
      </div>
    </section>

    <section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4" aria-label="{{ 'dashboard.metrics'|trans }}">
      {% for metric in metrics %}
        {% set palette = themeMap[metric.theme] %}
        <a
          href="{{ metric.href }}"
          class="dashboard-metric-card group block min-h-52 overflow-hidden rounded-card bg-gradient-to-br {{ palette.shell }} shadow-card transition duration-150 hover:-translate-y-0.5 hover:shadow-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
          aria-label="{{ metric.label }}: {{ metric.value }}"
        >
          <div class="flex h-full flex-col bg-gradient-to-br {{ palette.shell }} px-5 py-5 text-white">
            <div class="flex items-start justify-between gap-4">
              <div class="flex h-12 w-12 items-center justify-center rounded-control {{ palette.icon }} shadow-soft">
                {% if loop.index == 1 %}
                  <svg class="h-6 w-6" aria-hidden="true" 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 0 1-2-2V5a2 2 0 0 1 2-2h5.6L19 9.4V19a2 2 0 0 1-2 2Z"/></svg>
                {% elseif loop.index == 2 %}
                  <svg class="h-6 w-6" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7v5l3 2"/></svg>
                {% elseif loop.index == 3 %}
                  <svg class="h-6 w-6" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/></svg>
                {% else %}
                  <svg class="h-6 w-6" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="13" rx="2"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10h10M7 15h4"/></svg>
                {% endif %}
              </div>
              <span class="rounded-badge px-3 py-1 text-xs font-semibold {{ palette.badge }}">{{ 'dashboard.open_filter'|trans }}</span>
            </div>
            <p class="mt-6 text-sm font-medium {{ palette.accent }}">{{ metric.label }}</p>
            <div class="mt-3 flex items-end justify-between gap-4">
              <p class="text-3xl font-semibold 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 flex-none text-white/80 transition-transform duration-150 group-hover:translate-x-1" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>
            </div>
            <p class="mt-auto pt-3 text-xs leading-5 text-white/85">{{ metric.hint }}</p>
          </div>
        </a>
      {% endfor %}
    </section>

    <section class="grid gap-6 xl:grid-cols-[minmax(0,1.65fr)_minmax(20rem,0.85fr)]">
      <div id="dashboard-proyeccion" class="overflow-hidden rounded-card border border-ui-border bg-white shadow-card">
        <header class="flex flex-col gap-4 border-b border-ui-border px-5 py-5 lg:flex-row lg:items-start lg:justify-between">
          <div class="min-w-0">
            <p class="text-xs font-semibold uppercase text-neutral-500">{{ 'dashboard.due_radar'|trans }}</p>
            <h3 class="mt-2 text-xl font-semibold text-neutral-950 sm:text-2xl">{{ 'dashboard.due_projection'|trans }}</h3>
            <p class="mt-2 max-w-2xl text-sm leading-6 text-neutral-500">{{ 'dashboard.due_projection_copy'|trans }}</p>
          </div>
          <nav class="inline-flex self-start rounded-control bg-neutral-100 p-1" aria-label="{{ 'dashboard.projection_range'|trans }}">
            {% for option in rangeOptions %}
              <a href="{{ path('home', {range: option}) }}#dashboard-proyeccion" class="min-w-12 rounded-control px-3 py-2 text-center text-sm font-medium transition-colors duration-150 {{ range == option ? 'bg-white text-neutral-950 shadow-soft' : 'text-neutral-500 hover:text-neutral-900' }}" {% if range == option %}aria-current="true"{% endif %}>{{ option }}d</a>
            {% endfor %}
          </nav>
        </header>

        {% if projectionStats.total <= 0 and overdueSummary.count > 0 %}
          <div class="mx-5 mt-5 flex flex-col gap-3 rounded-card border border-warning-200 bg-warning-50 px-4 py-4 text-warning-900 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <p class="text-sm font-semibold">{{ 'dashboard.no_upcoming_due'|trans({'%from%': projectionWindow.from, '%to%': projectionWindow.to}) }}</p>
              <p class="mt-1 text-sm">{{ 'dashboard.overdue_summary'|trans({'%count%': overdueSummary.count, '%symbol%': currencySymbol, '%amount%': overdueSummary.amount|number_format(2, '.', ',')}) }}</p>
            </div>
            <a href="{{ path('documento_index', {estado: 'pendiente', vencimiento_hasta: overdueSummary.cutoff}) }}" class="btn btn-outline self-start text-warning-900 hover:bg-warning-100">{{ 'dashboard.view_overdue'|trans }}</a>
          </div>
        {% endif %}

        <div class="px-5 py-5">
          <dl class="grid divide-y divide-neutral-100 border-b border-neutral-100 sm:grid-cols-3 sm:divide-x sm:divide-y-0">
            <div class="pb-4 sm:px-4 sm:pb-5 sm:first:pl-0">
              <dt class="text-xs font-semibold uppercase text-neutral-500">{{ 'dashboard.projected_total'|trans }}</dt>
              <dd class="mt-2 text-2xl font-semibold tabular-nums text-neutral-950">{{ currencySymbol }} {{ projectionStats.total|number_format(2, '.', ',') }}</dd>
            </div>
            <div class="py-4 sm:px-4 sm:py-0">
              <dt class="text-xs font-semibold uppercase text-neutral-500">{{ 'dashboard.daily_peak'|trans }}</dt>
              <dd class="mt-2 text-xl font-semibold tabular-nums text-neutral-950">{{ currencySymbol }} {{ projectionStats.peak|number_format(2, '.', ',') }}</dd>
            </div>
            <div class="py-4 sm:px-4 sm:py-0 sm:last:pr-0">
              <dt class="text-xs font-semibold uppercase text-neutral-500">{{ 'dashboard.average'|trans }}</dt>
              <dd class="mt-2 text-xl font-semibold tabular-nums text-neutral-950">{{ currencySymbol }} {{ projectionStats.average|number_format(2, '.', ',') }}</dd>
            </div>
          </dl>

          {% if projectionStats.total > 0 %}
            <div class="mt-5 h-72 rounded-card border border-ui-border bg-neutral-50/60 p-3 sm:h-80 sm:p-4">
              <canvas id="dashboardProjectionChart" aria-label="{{ 'dashboard.due_projection'|trans }}" role="img"></canvas>
            </div>

            <div class="mt-5 hidden overflow-x-auto rounded-card border border-ui-border md:block">
              <table class="table">
                <caption class="sr-only">{{ 'dashboard.projection_detail'|trans }}</caption>
                <thead><tr><th scope="col">{{ 'label.date'|trans }}</th><th scope="col">{{ 'dashboard.behavior'|trans }}</th><th scope="col" class="text-right">{{ 'label.amount'|trans }}</th><th scope="col" class="text-right">{{ 'table.actions'|trans }}</th></tr></thead>
                <tbody>
                  {% for row in projectionHighlights %}
                    {% set percent = projectionStats.peak > 0 ? ((row.total / projectionStats.peak) * 100)|round(0, 'floor') : 0 %}
                    <tr>
                      <td><p class="font-medium">{{ row.label }}</p><p class="text-xs text-neutral-500">{{ row.date }}</p></td>
                      <td><div class="h-2 rounded-badge bg-neutral-100"><div class="h-2 rounded-badge bg-primary-500" style="width: {{ percent }}%"></div></div></td>
                      <td class="text-right font-semibold tabular-nums">{{ currencySymbol }} {{ row.total|number_format(2, '.', ',') }}</td>
                      <td class="text-right"><a href="{{ path('documento_index', {estado: 'pendiente', vencimiento_desde: row.date, vencimiento_hasta: row.date}) }}" class="btn btn-sm btn-outline">{{ 'dashboard.view_day'|trans }}</a></td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>

            <div class="mt-5 space-y-3 md:hidden">
              {% for row in projectionHighlights %}
                <article class="rounded-card border border-ui-border bg-white p-4 shadow-soft">
                  <div class="flex items-start justify-between gap-3"><div><p class="font-semibold text-neutral-900">{{ row.label }}</p><p class="mt-1 text-xs text-neutral-500">{{ row.date }}</p></div><p class="font-semibold tabular-nums text-neutral-950">{{ currencySymbol }} {{ row.total|number_format(2, '.', ',') }}</p></div>
                  <a href="{{ path('documento_index', {estado: 'pendiente', vencimiento_desde: row.date, vencimiento_hasta: row.date}) }}" class="btn btn-outline mt-3 w-full">{{ 'dashboard.view_day'|trans }}</a>
                </article>
              {% endfor %}
            </div>
          {% else %}
            <div class="mt-5">
              {% include 'components/_empty_state.html.twig' with {title: 'dashboard.no_due_title'|trans, message: 'dashboard.no_due_copy'|trans} only %}
            </div>
          {% endif %}
        </div>
      </div>

      <aside class="overflow-hidden rounded-card border border-ui-border bg-white shadow-card">
        <header class="border-b border-ui-border px-5 py-5">
          <p class="text-xs font-semibold uppercase text-neutral-500">{{ 'dashboard.recent_flow'|trans }}</p>
          <h3 class="mt-2 text-xl font-semibold text-neutral-950 sm:text-2xl">{{ 'dashboard.recent_activity'|trans }}</h3>
          <p class="mt-2 text-sm text-neutral-500">{{ 'dashboard.recent_activity_copy'|trans }}</p>
        </header>
        <div class="max-h-[44rem] overflow-y-auto px-5 py-5">
          {% if activities %}<div class="relative space-y-5 before:absolute before:bottom-3 before:left-5 before:top-3 before:w-px before:bg-neutral-200">{% endif %}
          {% for activity in activities %}
            <article class="relative flex min-w-0 gap-3">
              <div class="z-10 flex h-10 w-10 flex-none items-center justify-center rounded-badge ring-4 ring-white {{ activity.type == 'success' ? 'bg-success-100 text-success-700' : 'bg-info-100 text-info-700' }}">
                {% if activity.icon == 'document' %}
                  <svg class="h-5 w-5" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 3h7l5 5v13H7zM14 3v5h5M10 13h6M10 17h6"/></svg>
                {% else %}
                  <svg class="h-5 w-5" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="13" rx="2"/><path stroke-linecap="round" d="M7 10h10"/></svg>
                {% endif %}
              </div>
              <div class="min-w-0 flex-1 pb-1">
                <p class="truncate text-sm font-semibold text-neutral-900" title="{{ activity.title }}">{{ activity.title }}</p>
                <p class="mt-1 line-clamp-2 text-sm leading-5 text-neutral-600" title="{{ activity.subtitle }}">{{ activity.subtitle }}</p>
                <p class="mt-2 text-xs font-medium text-neutral-400">{{ activity.time }}</p>
              </div>
            </article>
          {% else %}
            {% include 'components/_empty_state.html.twig' with {title: 'dashboard.no_activity_title'|trans, message: 'dashboard.no_activity_copy'|trans} only %}
          {% endfor %}
          {% if activities %}</div>{% endif %}
        </div>
      </aside>
    </section>

    <section class="overflow-hidden rounded-card border border-ui-border bg-white shadow-card">
      <header class="flex flex-col gap-4 border-b border-ui-border px-5 py-5 sm:flex-row sm:items-center sm:justify-between">
        <div class="min-w-0">
          <p class="text-xs font-semibold uppercase text-neutral-500">{{ 'dashboard.document_tracking'|trans }}</p>
          <h3 class="mt-2 text-xl font-semibold text-neutral-950 sm:text-2xl">{{ 'dashboard.recent_documents'|trans }}</h3>
          <p class="mt-2 text-sm text-neutral-500">{{ 'dashboard.recent_documents_copy'|trans }}</p>
        </div>
        <a href="{{ path('documento_index') }}" class="btn btn-outline self-start sm:self-center">{{ 'dashboard.view_portfolio'|trans }}</a>
      </header>

      {% if recentDocuments %}
        <div class="hidden overflow-x-auto lg:block">
          <table class="table min-w-[880px]">
            <thead><tr><th scope="col">{{ 'dashboard.document'|trans }}</th><th scope="col">{{ 'documento.proveedor'|trans }}</th><th scope="col">{{ 'dashboard.type'|trans }}</th><th scope="col">{{ 'label.date'|trans }}</th><th scope="col" class="text-right">{{ 'dashboard.total'|trans }}</th><th scope="col" class="text-right">{{ 'dashboard.balance'|trans }}</th><th scope="col">{{ 'label.status'|trans }}</th><th scope="col" class="text-right">{{ 'table.actions'|trans }}</th></tr></thead>
            <tbody>
              {% for doc in recentDocuments %}
                <tr>
                  <td class="font-semibold">{{ doc.documento }}</td><td>{{ doc.proveedor }}</td><td>{{ doc.tipo }}</td><td>{{ doc.fecha }}</td>
                  <td class="text-right font-medium tabular-nums">{{ doc.total }}</td><td class="text-right font-medium tabular-nums">{{ doc.saldo }}</td>
                  <td><span class="badge badge-{{ doc.estadoVariant|default('info') }}">{{ doc.estado }}</span></td>
                  <td class="text-right"><a href="{{ path('documento_show', {id: doc.id}) }}" class="btn btn-sm btn-outline">{{ 'button.view'|trans }}</a></td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        <div class="grid gap-3 p-3 sm:grid-cols-2 lg:hidden">
          {% for doc in recentDocuments %}
            <article class="rounded-card border border-ui-border bg-white p-4 shadow-soft">
              <div class="flex items-start justify-between gap-3"><div class="min-w-0"><p class="truncate font-semibold text-neutral-950" title="{{ doc.documento }}">{{ doc.documento }}</p><p class="mt-1 truncate text-sm text-neutral-600" title="{{ doc.proveedor }}">{{ doc.proveedor }}</p></div><span class="badge badge-{{ doc.estadoVariant|default('info') }}">{{ doc.estado }}</span></div>
              <dl class="mt-4 grid grid-cols-2 gap-3 text-sm"><div><dt class="text-xs text-neutral-500">{{ 'label.date'|trans }}</dt><dd class="mt-1 font-medium">{{ doc.fecha }}</dd></div><div><dt class="text-xs text-neutral-500">{{ 'dashboard.balance'|trans }}</dt><dd class="mt-1 font-semibold tabular-nums">{{ doc.saldo }}</dd></div></dl>
              <a href="{{ path('documento_show', {id: doc.id}) }}" class="btn btn-outline mt-4 w-full">{{ 'button.view'|trans }}</a>
            </article>
          {% endfor %}
        </div>
      {% else %}
        <div class="p-5">{% include 'components/_empty_state.html.twig' with {title: 'dashboard.no_documents_title'|trans, message: 'dashboard.no_documents_copy'|trans} only %}</div>
      {% endif %}
    </section>
  </div>

  {% if projectionStats.total > 0 %}
    <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|e('js') }}';
        const locale = document.documentElement.lang === 'en' ? 'en-US' : 'es-GT';
        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: (context) => `${context.dataset.label ? context.dataset.label + ': ' : ''}${currencySymbol} ${Number(context.parsed.y || 0).toLocaleString(locale, {minimumFractionDigits: 2, maximumFractionDigits: 2})}`}}},
            scales: {x: {grid: {display: false}, ticks: {color: '#64748b'}}, y: {beginAtZero: true, ticks: {color: '#64748b', callback: (value) => `${currencySymbol} ${Number(value || 0).toLocaleString(locale)}`}, grid: {color: 'rgba(148, 163, 184, 0.18)'}}}
          }
        });
      });
    </script>
  {% endif %}
{% endblock %}