@extends('layouts.enterprise')

@section('title', 'Reportes')

@section('content')
  @php
    $profitFilters = $filters['profit'] ?? ['from' => $defaults['from'], 'to' => $defaults['to']];
    $expenseFilters = $filters['expense'] ?? ['from' => $defaults['from'], 'to' => $defaults['to'], 'advances' => 'all'];
    $crossFilters = $filters['cross'] ?? ['from' => $defaults['from'], 'to' => $defaults['to']];
    $incomeFilters = $filters['income'] ?? ['from' => $defaults['from'], 'to' => $defaults['to']];
    $requestFilters = $filters['request'] ?? ['from' => $defaults['from'], 'to' => $defaults['to']];
    $vatMode = $filters['vat_mode'] ?? 'without';
    $activeTabName = $activeTab ?? 'profit';
    $reportsRouteName = request()->routeIs('accountant.reports.*') ? 'accountant.reports.index' : 'admin.reports.index';
    $withoutVatUrl = route($reportsRouteName, array_merge(request()->except(['vat_mode']), ['vat_mode' => 'without', 'tab' => $activeTabName]));
    $withVatUrl = route($reportsRouteName, array_merge(request()->except(['vat_mode']), ['vat_mode' => 'with', 'tab' => $activeTabName]));
    $reportChartsPayload = [
      'profit' => $profitData['charts'] ?? [],
      'expense' => $expenseData['charts'] ?? [],
      'cross' => $crossData['charts'] ?? [],
      'income' => $incomeData['charts'] ?? [],
      'request' => $requestData['charts'] ?? [],
    ];
  @endphp

  <div class="card reports-hero">
    <h1 class="page-title">Reportes</h1>
    <p class="subtle">Consulta ganancias, egresos, ingresos, solicitudes y cruce con rango de fechas por cada bloque.</p>
    <div class="reports-vat-toggle">
      <a
        href="{{ $withoutVatUrl }}"
        class="btn reports-vat-btn {{ $vatMode === 'without' ? 'reports-vat-btn--active' : 'btn-secondary' }}"
        aria-pressed="{{ $vatMode === 'without' ? 'true' : 'false' }}"
      >
        <span>Sin IVA</span>
        @if($vatMode === 'without')
          <span class="reports-vat-tag">Activo</span>
        @endif
      </a>
      <a
        href="{{ $withVatUrl }}"
        class="btn reports-vat-btn {{ $vatMode === 'with' ? 'reports-vat-btn--active' : 'btn-secondary' }}"
        aria-pressed="{{ $vatMode === 'with' ? 'true' : 'false' }}"
      >
        <span>Con IVA</span>
        @if($vatMode === 'with')
          <span class="reports-vat-tag">Activo</span>
        @endif
      </a>
    </div>
  </div>

  <div id="reports-ajax-root" class="card report-tabs-card">
    <script type="application/json" id="report-charts-payload">@json($reportChartsPayload)</script>
    <sl-tab-group id="admin-report-tabs" data-active-tab="{{ $activeTabName }}">
      <sl-tab slot="nav" panel="profit" @if($activeTabName === 'profit') active @endif>Ganancias</sl-tab>
      <sl-tab slot="nav" panel="expense" @if($activeTabName === 'expense') active @endif>Egresos</sl-tab>
      <sl-tab slot="nav" panel="income" @if($activeTabName === 'income') active @endif>Ingresos</sl-tab>
      <sl-tab slot="nav" panel="request" @if($activeTabName === 'request') active @endif>Solicitudes</sl-tab>
      <sl-tab slot="nav" panel="general" @if($activeTabName === 'general') active @endif>General</sl-tab>

      <sl-tab-panel name="profit" @if($activeTabName === 'profit') active @endif>
        <section class="report-section">
    <div class="report-section__header">
      <h2 class="section-title">Ganancias</h2>
      <div class="report-kpis">
        <span class="badge">Venta: ${{ number_format((float) ($profitData['totals']['sale'] ?? 0), 2) }}</span>
        <span class="badge">Costo: ${{ number_format((float) ($profitData['totals']['cost'] ?? 0), 2) }}</span>
        <span class="badge badge--ok">Ganancia: ${{ number_format((float) ($profitData['totals']['profit'] ?? 0), 2) }}</span>
      </div>
    </div>

    <sl-details class="report-filters-collapse">
      <div slot="summary" class="report-filters-summary">
        <span>Filtros de ganancias</span>
      </div>
      <form method="GET" action="{{ route($reportsRouteName) }}" class="report-filters-form">
        <input type="hidden" name="tab" value="profit">
        <input type="hidden" name="vat_mode" value="{{ $vatMode }}">
        <input type="hidden" name="expense_from" value="{{ $expenseFilters['from'] }}">
        <input type="hidden" name="expense_to" value="{{ $expenseFilters['to'] }}">
        <input type="hidden" name="expense_advances" value="{{ $expenseFilters['advances'] }}">
        <input type="hidden" name="cross_from" value="{{ $crossFilters['from'] }}">
        <input type="hidden" name="cross_to" value="{{ $crossFilters['to'] }}">
        <input type="hidden" name="income_from" value="{{ $incomeFilters['from'] }}">
        <input type="hidden" name="income_to" value="{{ $incomeFilters['to'] }}">
        <input type="hidden" name="request_from" value="{{ $requestFilters['from'] }}">
        <input type="hidden" name="request_to" value="{{ $requestFilters['to'] }}">

        <div class="report-filters-grid">
          <div class="field">
            <label>Desde</label>
            <input type="date" name="profit_from" value="{{ $profitFilters['from'] }}">
          </div>
          <div class="field">
            <label>Hasta</label>
            <input type="date" name="profit_to" value="{{ $profitFilters['to'] }}">
          </div>
        </div>
        <div class="report-filters-actions">
          <button type="submit" class="btn">Filtrar</button>
          <a class="btn btn-secondary" href="{{ route($reportsRouteName, array_merge(request()->except(['profit_from', 'profit_to']), ['profit_from' => $defaults['from'], 'profit_to' => $defaults['to'], 'tab' => 'profit'])) }}">Limpiar</a>
        </div>
      </form>
    </sl-details>

    @if(!($profitData['available'] ?? false))
      <div class="error">{{ $profitData['message'] ?? 'No fue posible construir el reporte de ganancias.' }}</div>
    @endif

    <div class="reports-grid reports-grid--2">
      <article class="report-chart-card">
        <h3>Ganancia en el rango</h3>
        <div class="report-chart-wrap"><canvas id="profitRangePieChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Ganancia por cliente</h3>
        <div class="report-chart-wrap"><canvas id="profitByClientPieChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Ganancia mes a mes</h3>
        <div class="report-chart-wrap"><canvas id="profitMonthlyBarChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Ganancia por años</h3>
        <div class="report-chart-wrap"><canvas id="profitYearlyBarChart"></canvas></div>
      </article>
    </div>
        </section>
      </sl-tab-panel>

      <sl-tab-panel name="expense" @if($activeTabName === 'expense') active @endif>
        <section class="report-section">
    <div class="report-section__header">
      <h2 class="section-title">Gastos</h2>
      <div class="report-kpis">
        <span class="badge">Total: ${{ number_format((float) ($expenseData['totals']['expenses'] ?? 0), 2) }}</span>
        <span class="badge">Normales: ${{ number_format((float) ($expenseData['totals']['regular'] ?? 0), 2) }}</span>
        <span class="badge">Anticipos: ${{ number_format((float) ($expenseData['totals']['advances'] ?? 0), 2) }}</span>
      </div>
    </div>

    <sl-details class="report-filters-collapse">
      <div slot="summary" class="report-filters-summary">
        <span>Filtros de egresos</span>
      </div>
      <form method="GET" action="{{ route($reportsRouteName) }}" class="report-filters-form">
        <input type="hidden" name="tab" value="expense">
        <input type="hidden" name="vat_mode" value="{{ $vatMode }}">
        <input type="hidden" name="profit_from" value="{{ $profitFilters['from'] }}">
        <input type="hidden" name="profit_to" value="{{ $profitFilters['to'] }}">
        <input type="hidden" name="cross_from" value="{{ $crossFilters['from'] }}">
        <input type="hidden" name="cross_to" value="{{ $crossFilters['to'] }}">
        <input type="hidden" name="income_from" value="{{ $incomeFilters['from'] }}">
        <input type="hidden" name="income_to" value="{{ $incomeFilters['to'] }}">
        <input type="hidden" name="request_from" value="{{ $requestFilters['from'] }}">
        <input type="hidden" name="request_to" value="{{ $requestFilters['to'] }}">

        <div class="report-filters-grid report-filters-grid--three">
          <div class="field">
            <label>Desde</label>
            <input type="date" name="expense_from" value="{{ $expenseFilters['from'] }}">
          </div>
          <div class="field">
            <label>Hasta</label>
            <input type="date" name="expense_to" value="{{ $expenseFilters['to'] }}">
          </div>
          <div class="field">
            <label>Anticipos</label>
            <select name="expense_advances">
              <option value="all" @selected(($expenseFilters['advances'] ?? 'all') === 'all')>Con y sin anticipos</option>
              <option value="with" @selected(($expenseFilters['advances'] ?? 'all') === 'with')>Solo anticipos</option>
              <option value="without" @selected(($expenseFilters['advances'] ?? 'all') === 'without')>Sin anticipos</option>
            </select>
          </div>
        </div>
        <div class="report-filters-actions">
          <button type="submit" class="btn">Filtrar</button>
          <a class="btn btn-secondary" href="{{ route($reportsRouteName, array_merge(request()->except(['expense_from', 'expense_to', 'expense_advances']), ['expense_from' => $defaults['from'], 'expense_to' => $defaults['to'], 'expense_advances' => 'all', 'tab' => 'expense'])) }}">Limpiar</a>
        </div>
      </form>
    </sl-details>

    @if(!($expenseData['available'] ?? false))
      <div class="error">{{ $expenseData['message'] ?? 'No fue posible construir el reporte de gastos.' }}</div>
    @elseif(!($expenseData['has_advance_column'] ?? false))
      <div class="notice">La columna de anticipos aún no existe en `invoice_payments`. Ejecuta migraciones para habilitar ese filtro.</div>
    @endif

    <div class="reports-grid reports-grid--2">
      <article class="report-chart-card">
        <h3>Gastos en el rango</h3>
        <div class="report-chart-wrap"><canvas id="expenseRangePieChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Gastos por proveedor</h3>
        <div class="report-chart-wrap"><canvas id="expenseByProviderPieChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Gastos por impuestos</h3>
        <div class="report-chart-wrap"><canvas id="expenseByTaxPieChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Gastos mes a mes</h3>
        <div class="report-chart-wrap"><canvas id="expenseMonthlyBarChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Gastos por años</h3>
        <div class="report-chart-wrap"><canvas id="expenseYearlyBarChart"></canvas></div>
      </article>
    </div>
        </section>
      </sl-tab-panel>

      <sl-tab-panel name="general" @if($activeTabName === 'general') active @endif>
        <section class="report-section">
    <div class="report-section__header">
      <h2 class="section-title">Cruce de gastos y ganancias</h2>
      <div class="report-kpis">
        <span class="badge">Ganancia: ${{ number_format((float) ($crossData['totals']['profit'] ?? 0), 2) }}</span>
        <span class="badge">Gasto: ${{ number_format((float) ($crossData['totals']['expenses'] ?? 0), 2) }}</span>
        <span class="badge {{ (float) ($crossData['totals']['net'] ?? 0) >= 0 ? 'badge--ok' : 'badge--rejected' }}">Neto: ${{ number_format((float) ($crossData['totals']['net'] ?? 0), 2) }}</span>
      </div>
    </div>

    <sl-details class="report-filters-collapse">
      <div slot="summary" class="report-filters-summary">
        <span>Filtros del cruce</span>
      </div>
      <form method="GET" action="{{ route($reportsRouteName) }}" class="report-filters-form">
        <input type="hidden" name="tab" value="general">
        <input type="hidden" name="vat_mode" value="{{ $vatMode }}">
        <input type="hidden" name="profit_from" value="{{ $profitFilters['from'] }}">
        <input type="hidden" name="profit_to" value="{{ $profitFilters['to'] }}">
        <input type="hidden" name="expense_from" value="{{ $expenseFilters['from'] }}">
        <input type="hidden" name="expense_to" value="{{ $expenseFilters['to'] }}">
        <input type="hidden" name="expense_advances" value="{{ $expenseFilters['advances'] }}">
        <input type="hidden" name="income_from" value="{{ $incomeFilters['from'] }}">
        <input type="hidden" name="income_to" value="{{ $incomeFilters['to'] }}">
        <input type="hidden" name="request_from" value="{{ $requestFilters['from'] }}">
        <input type="hidden" name="request_to" value="{{ $requestFilters['to'] }}">

        <div class="report-filters-grid">
          <div class="field">
            <label>Desde</label>
            <input type="date" name="cross_from" value="{{ $crossFilters['from'] }}">
          </div>
          <div class="field">
            <label>Hasta</label>
            <input type="date" name="cross_to" value="{{ $crossFilters['to'] }}">
          </div>
        </div>
        <div class="report-filters-actions">
          <button type="submit" class="btn">Filtrar</button>
          <a class="btn btn-secondary" href="{{ route($reportsRouteName, array_merge(request()->except(['cross_from', 'cross_to']), ['cross_from' => $defaults['from'], 'cross_to' => $defaults['to'], 'tab' => 'general'])) }}">Limpiar</a>
        </div>
      </form>
    </sl-details>

    <div class="reports-grid reports-grid--2">
      <article class="report-chart-card">
        <h3>Cruce mensual (pastel)</h3>
        <div class="report-chart-wrap"><canvas id="crossMonthlyPieChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Cruce por años (barras)</h3>
        <div class="report-chart-wrap"><canvas id="crossYearlyBarChart"></canvas></div>
      </article>
    </div>
        </section>
      </sl-tab-panel>

      <sl-tab-panel name="income" @if($activeTabName === 'income') active @endif>
        <section class="report-section">
    <div class="report-section__header">
      <h2 class="section-title">Ingresos</h2>
      <div class="report-kpis">
        <span class="badge">Total: ${{ number_format((float) ($incomeData['totals']['incomes'] ?? 0), 2) }}</span>
        <span class="badge">Cobrados y validados: ${{ number_format((float) ($incomeData['totals']['linked'] ?? 0), 2) }}</span>
        <span class="badge">Fuente: Prefacturas relacionadas a movimientos de ingreso (Subtotal sin IVA)</span>
      </div>
    </div>

    <sl-details class="report-filters-collapse">
      <div slot="summary" class="report-filters-summary">
        <span>Filtros de ingresos</span>
      </div>
      <form method="GET" action="{{ route($reportsRouteName) }}" class="report-filters-form">
        <input type="hidden" name="tab" value="income">
        <input type="hidden" name="vat_mode" value="{{ $vatMode }}">
        <input type="hidden" name="profit_from" value="{{ $profitFilters['from'] }}">
        <input type="hidden" name="profit_to" value="{{ $profitFilters['to'] }}">
        <input type="hidden" name="expense_from" value="{{ $expenseFilters['from'] }}">
        <input type="hidden" name="expense_to" value="{{ $expenseFilters['to'] }}">
        <input type="hidden" name="expense_advances" value="{{ $expenseFilters['advances'] }}">
        <input type="hidden" name="cross_from" value="{{ $crossFilters['from'] }}">
        <input type="hidden" name="cross_to" value="{{ $crossFilters['to'] }}">
        <input type="hidden" name="request_from" value="{{ $requestFilters['from'] }}">
        <input type="hidden" name="request_to" value="{{ $requestFilters['to'] }}">

        <div class="report-filters-grid">
          <div class="field">
            <label>Desde</label>
            <input type="date" name="income_from" value="{{ $incomeFilters['from'] }}">
          </div>
          <div class="field">
            <label>Hasta</label>
            <input type="date" name="income_to" value="{{ $incomeFilters['to'] }}">
          </div>
        </div>
        <div class="report-filters-actions">
          <button type="submit" class="btn">Filtrar</button>
          <a class="btn btn-secondary" href="{{ route($reportsRouteName, array_merge(request()->except(['income_from', 'income_to']), ['income_from' => $defaults['from'], 'income_to' => $defaults['to'], 'tab' => 'income'])) }}">Limpiar</a>
        </div>
      </form>
    </sl-details>

    @if(!($incomeData['available'] ?? false))
      <div class="error">{{ $incomeData['message'] ?? 'No fue posible construir el reporte de ingresos.' }}</div>
    @endif

    <div class="reports-grid reports-grid--2">
      <article class="report-chart-card">
        <h3>Ingresos en el rango</h3>
        <div class="report-chart-wrap"><canvas id="incomeRangePieChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Ingresos por cliente</h3>
        <div class="report-chart-wrap"><canvas id="incomeByClientPieChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Ingresos mes a mes</h3>
        <div class="report-chart-wrap"><canvas id="incomeMonthlyBarChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Ingresos por años</h3>
        <div class="report-chart-wrap"><canvas id="incomeYearlyBarChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Ingresos por ejecutivo</h3>
        <div class="report-chart-wrap"><canvas id="incomeByExecutivePieChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Ingresos por ejecutivo y cliente</h3>
        <div class="report-chart-wrap"><canvas id="incomeByExecutiveClientPieChart"></canvas></div>
      </article>
    </div>
        </section>
      </sl-tab-panel>

      <sl-tab-panel name="request" @if($activeTabName === 'request') active @endif>
        <section class="report-section">
    <div class="report-section__header">
      <h2 class="section-title">Solicitudes</h2>
      <div class="report-kpis">
        <span class="badge">Totales: {{ number_format((int) ($requestData['totals']['requests_total'] ?? 0)) }}</span>
        <span class="badge badge--ok">Completas: {{ number_format((int) ($requestData['totals']['requests_complete'] ?? 0)) }}</span>
        <span class="badge">Pendientes: {{ number_format((int) ($requestData['totals']['requests_pending'] ?? 0)) }}</span>
        <span class="badge">Sin factura: {{ number_format((int) ($requestData['totals']['requests_without_invoice'] ?? 0)) }}</span>
        <span class="badge">Parciales: {{ number_format((int) ($requestData['totals']['requests_partial'] ?? 0)) }}</span>
        <span class="badge">Pendientes por aprobar: {{ number_format((int) ($requestData['totals']['requests_pending_approval'] ?? 0)) }}</span>
      </div>
    </div>
    <div class="report-kpis" style="margin-bottom:10px;">
      <span class="badge">Proveedores totales: {{ number_format((int) ($requestData['totals']['providers_total'] ?? 0)) }}</span>
      <span class="badge badge--ok">Con factura: {{ number_format((int) ($requestData['totals']['providers_complete'] ?? 0)) }}</span>
      <span class="badge">Sin factura: {{ number_format((int) ($requestData['totals']['providers_without_invoice'] ?? 0)) }}</span>
      <span class="badge">Parciales: {{ number_format((int) ($requestData['totals']['providers_partial'] ?? 0)) }}</span>
      <span class="badge">Pendientes por aprobar: {{ number_format((int) ($requestData['totals']['providers_pending_approval'] ?? 0)) }}</span>
    </div>

    <sl-details class="report-filters-collapse">
      <div slot="summary" class="report-filters-summary">
        <span>Filtros de solicitudes</span>
      </div>
      <form method="GET" action="{{ route($reportsRouteName) }}" class="report-filters-form">
        <input type="hidden" name="tab" value="request">
        <input type="hidden" name="vat_mode" value="{{ $vatMode }}">
        <input type="hidden" name="profit_from" value="{{ $profitFilters['from'] }}">
        <input type="hidden" name="profit_to" value="{{ $profitFilters['to'] }}">
        <input type="hidden" name="expense_from" value="{{ $expenseFilters['from'] }}">
        <input type="hidden" name="expense_to" value="{{ $expenseFilters['to'] }}">
        <input type="hidden" name="expense_advances" value="{{ $expenseFilters['advances'] }}">
        <input type="hidden" name="cross_from" value="{{ $crossFilters['from'] }}">
        <input type="hidden" name="cross_to" value="{{ $crossFilters['to'] }}">
        <input type="hidden" name="income_from" value="{{ $incomeFilters['from'] }}">
        <input type="hidden" name="income_to" value="{{ $incomeFilters['to'] }}">

        <div class="report-filters-grid">
          <div class="field">
            <label>Desde</label>
            <input type="date" name="request_from" value="{{ $requestFilters['from'] }}">
          </div>
          <div class="field">
            <label>Hasta</label>
            <input type="date" name="request_to" value="{{ $requestFilters['to'] }}">
          </div>
        </div>
        <div class="report-filters-actions">
          <button type="submit" class="btn">Filtrar</button>
          <a class="btn btn-secondary" href="{{ route($reportsRouteName, array_merge(request()->except(['request_from', 'request_to']), ['request_from' => $defaults['from'], 'request_to' => $defaults['to'], 'tab' => 'request'])) }}">Limpiar</a>
        </div>
      </form>
    </sl-details>

    @if(!($requestData['available'] ?? false))
      <div class="error">{{ $requestData['message'] ?? 'No fue posible construir el reporte de solicitudes.' }}</div>
    @endif

    <div class="reports-grid reports-grid--2">
      <article class="report-chart-card">
        <h3>Estatus de solicitudes</h3>
        <div class="report-chart-wrap"><canvas id="requestStatusOverviewPieChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Estatus de proveedores</h3>
        <div class="report-chart-wrap"><canvas id="requestProviderStatusPieChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Solicitudes mes a mes</h3>
        <div class="report-chart-wrap"><canvas id="requestMonthlyStatusBarChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Proveedores con incidencias</h3>
        <div class="report-chart-wrap"><canvas id="requestProvidersIssuesPieChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Participación por proveedor</h3>
        <div class="report-chart-wrap"><canvas id="requestProvidersVolumePieChart"></canvas></div>
      </article>
      <article class="report-chart-card">
        <h3>Solicitudes con más pendientes</h3>
        <div class="report-chart-wrap"><canvas id="requestTopPendingBarChart"></canvas></div>
      </article>
    </div>
        </section>
      </sl-tab-panel>
    </sl-tab-group>
  </div>
@endsection

@push('scripts')
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
  <script>
    (() => {
      const basePalette = ['#0f766e', '#16a34a', '#2563eb', '#f59e0b', '#7c3aed', '#dc2626', '#0ea5a4', '#9333ea', '#ea580c', '#0891b2', '#65a30d', '#1d4ed8'];
      const validTabs = ['profit', 'expense', 'income', 'request', 'general'];
      const chartRegistry = window.__adminReportsCharts || {};
      window.__adminReportsCharts = chartRegistry;

      const formatCurrency = (value) => new Intl.NumberFormat('es-MX', {
        style: 'currency',
        currency: 'MXN',
        maximumFractionDigits: 2,
      }).format(Number(value || 0));
      const formatCount = (value) => new Intl.NumberFormat('es-MX').format(Number(value || 0));

      const hasValues = (values) => Array.isArray(values) && values.some((value) => Math.abs(Number(value || 0)) > 0.009);

      const colorAt = (index, alpha = 0.9) => {
        const hex = basePalette[index % basePalette.length];
        const clean = hex.replace('#', '');
        const bigint = parseInt(clean, 16);
        const r = (bigint >> 16) & 255;
        const g = (bigint >> 8) & 255;
        const b = bigint & 255;
        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
      };

      const destroyCharts = () => {
        Object.keys(chartRegistry).forEach((id) => {
          try {
            chartRegistry[id]?.destroy?.();
          } catch (_) {
            // ignore
          }
          delete chartRegistry[id];
        });
      };

      const readPayload = (root) => {
        const payloadNode = root?.querySelector('#report-charts-payload');
        if (!payloadNode) return {};

        try {
          return JSON.parse(payloadNode.textContent || '{}');
        } catch (_) {
          return {};
        }
      };

      const showNoData = (root, canvasId, message = 'Sin datos en el rango seleccionado.') => {
        const canvas = root.querySelector(`#${canvasId}`);
        if (!canvas) return;
        const parent = canvas.parentElement;
        if (!parent) return;
        canvas.style.display = 'none';
        if (parent.querySelector('.chart-empty')) return;
        const empty = document.createElement('div');
        empty.className = 'chart-empty';
        empty.textContent = message;
        parent.appendChild(empty);
      };

      const resetNoDataStates = (root) => {
        root.querySelectorAll('.report-chart-wrap canvas').forEach((canvas) => {
          canvas.style.display = '';
        });
        root.querySelectorAll('.chart-empty').forEach((node) => node.remove());
      };

      const createChart = (root, canvasId, config) => {
        const canvas = root.querySelector(`#${canvasId}`);
        if (!canvas) return null;
        const chart = new Chart(canvas.getContext('2d'), config);
        chartRegistry[canvasId] = chart;
        return chart;
      };

      const renderPie = (root, canvasId, chartData, datasetLabel = 'Monto', valueFormatter = formatCurrency) => {
        const labels = chartData?.labels || [];
        const values = chartData?.values || [];
        if (!labels.length || !hasValues(values)) {
          showNoData(root, canvasId);
          return;
        }

        createChart(root, canvasId, {
          type: 'pie',
          data: {
            labels,
            datasets: [{
              label: datasetLabel,
              data: values,
              backgroundColor: labels.map((_, index) => colorAt(index)),
              borderWidth: 0,
            }],
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: { position: 'bottom' },
              tooltip: {
                callbacks: {
                  label: (context) => `${context.label}: ${valueFormatter(context.parsed)}`,
                },
              },
            },
          },
        });
      };

      const renderBar = (root, canvasId, labels, datasets, options = {}) => {
        const tickFormatter = options.tickFormatter || formatCurrency;
        const tooltipFormatter = options.tooltipFormatter
          || ((context) => `${context.dataset.label}: ${formatCurrency(context.parsed.y)}`);
        const isStacked = options.stacked === true;
        const hasData = Array.isArray(datasets) && datasets.some((dataset) => hasValues(dataset.data || []));
        if (!labels?.length || !hasData) {
          showNoData(root, canvasId);
          return;
        }

        createChart(root, canvasId, {
          type: 'bar',
          data: { labels, datasets },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
              mode: 'index',
              intersect: false,
            },
            scales: {
              x: {
                stacked: isStacked,
              },
              y: {
                beginAtZero: true,
                stacked: isStacked,
                ticks: {
                  callback: (value) => tickFormatter(value),
                },
              },
            },
            plugins: {
              legend: { position: 'bottom' },
              tooltip: {
                callbacks: {
                  label: (context) => tooltipFormatter(context),
                },
              },
            },
          },
        });
      };

      const renderCrossMonthlyPie = (root, canvasId, chartData) => {
        const labels = chartData?.labels || [];
        const gainValues = chartData?.gain_values || [];
        const expenseValues = chartData?.expense_values || [];

        if (!labels.length || (!hasValues(gainValues) && !hasValues(expenseValues))) {
          showNoData(root, canvasId);
          return;
        }

        createChart(root, canvasId, {
          type: 'doughnut',
          data: {
            labels,
            datasets: [
              {
                label: 'Ganancias',
                data: gainValues,
                backgroundColor: labels.map((_, index) => colorAt(index, 0.9)),
                borderWidth: 0,
              },
              {
                label: 'Gastos',
                data: expenseValues,
                backgroundColor: labels.map((_, index) => colorAt(index, 0.45)),
                borderWidth: 0,
              },
            ],
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: { position: 'bottom' },
              tooltip: {
                callbacks: {
                  label: (context) => `${context.dataset.label} · ${context.label}: ${formatCurrency(context.parsed)}`,
                },
              },
            },
          },
        });
      };

      const refreshAllCharts = () => {
        Object.values(chartRegistry).forEach((chart) => {
          if (!chart) return;
          chart?.resize?.();
          chart?.update?.('none');
        });
      };

      const queueChartRefresh = () => {
        requestAnimationFrame(() => refreshAllCharts());
        setTimeout(() => refreshAllCharts(), 120);
        setTimeout(() => refreshAllCharts(), 320);
      };

      const syncTabInputs = (root, tabName) => {
        root.querySelectorAll('.report-filters-form input[name="tab"]').forEach((input) => {
          input.value = tabName;
        });
      };

      const bindTabs = (root) => {
        const tabs = root.querySelector('#admin-report-tabs');
        if (!tabs) return;

        const setTabInUrl = (tabName) => {
          const url = new URL(window.location.href);
          url.searchParams.set('tab', tabName);
          window.history.replaceState({}, '', url.toString());
        };

        const setFallbackActiveState = (tabName) => {
          tabs.querySelectorAll('sl-tab[panel]').forEach((tabEl) => {
            const isTarget = tabEl.getAttribute('panel') === tabName;
            tabEl.toggleAttribute('active', isTarget);
          });
          tabs.querySelectorAll('sl-tab-panel[name]').forEach((panelEl) => {
            const isTarget = panelEl.getAttribute('name') === tabName;
            panelEl.toggleAttribute('active', isTarget);
            panelEl.hidden = !isTarget;
          });
        };

        const activateTab = (tabName) => {
          if (!tabName || !validTabs.includes(tabName)) {
            return;
          }

          tabs.dataset.activeTab = tabName;
          syncTabInputs(root, tabName);

          const tryActivate = (useFallback = true) => {
            if (typeof tabs.show === 'function') {
              tabs.show(tabName);
              return true;
            }

            if (useFallback) {
              setFallbackActiveState(tabName);
              return true;
            }

            return false;
          };

          tryActivate(true);
          queueChartRefresh();

          if (window.customElements?.whenDefined) {
            window.customElements
              .whenDefined('sl-tab-group')
              .then(() => {
                tryActivate(true);
                queueChartRefresh();
              })
              .catch(() => {});
          }
        };

        const preferredTab = tabs.dataset.activeTab;
        if (preferredTab && validTabs.includes(preferredTab)) {
          activateTab(preferredTab);
        }

        if (tabs.dataset.bound === '1') {
          return;
        }

        tabs.dataset.bound = '1';
        tabs.addEventListener('sl-tab-show', (event) => {
          const currentTab = event.detail?.name;
          if (currentTab && validTabs.includes(currentTab)) {
            tabs.dataset.activeTab = currentTab;
            syncTabInputs(root, currentTab);
            setTabInUrl(currentTab);
          }

          requestAnimationFrame(() => refreshAllCharts());
        });

        tabs.addEventListener('click', (event) => {
          const clickedTab = event.target?.closest?.('sl-tab[panel]');
          const tabName = clickedTab?.getAttribute?.('panel');
          if (tabName && validTabs.includes(tabName)) {
            tabs.dataset.activeTab = tabName;
            syncTabInputs(root, tabName);
            setTabInUrl(tabName);
          }
        });
      };

      const swapRootWithResponse = (html, pushHistory, url) => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const incomingRoot = doc.querySelector('#reports-ajax-root');
        const currentRoot = document.querySelector('#reports-ajax-root');

        if (!incomingRoot || !currentRoot) {
          window.location.href = url;
          return;
        }

        currentRoot.replaceWith(incomingRoot);

        if (pushHistory) {
          window.history.pushState({ reportsAjax: true }, '', url);
        }

        window.initAdminReports();
      };

      const fetchAndSwap = async (url, pushHistory = true) => {
        const root = document.querySelector('#reports-ajax-root');
        if (!root) {
          window.location.href = url;
          return;
        }

        root.classList.add('is-loading');
        try {
          const response = await fetch(url, {
            headers: {
              'X-Requested-With': 'XMLHttpRequest',
              'Accept': 'text/html',
            },
            credentials: 'same-origin',
          });

          if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
          }

          const html = await response.text();
          swapRootWithResponse(html, pushHistory, url);
        } catch (_) {
          window.location.href = url;
        } finally {
          root.classList.remove('is-loading');
        }
      };

      const bindForms = (root) => {
        root.querySelectorAll('.report-filters-form').forEach((form) => {
          if (form.dataset.bound === '1') {
            return;
          }
          form.dataset.bound = '1';

          form.addEventListener('submit', (event) => {
            event.preventDefault();
            const formData = new FormData(form);
            const tabs = root.querySelector('#admin-report-tabs');
            const currentTab = tabs?.dataset?.activeTab || formData.get('tab') || 'profit';
            formData.set('tab', currentTab);
            const query = new URLSearchParams(formData);
            const url = new URL(form.action, window.location.origin);
            url.search = query.toString();
            fetchAndSwap(url.toString(), true);
          });
        });
      };

      window.initAdminReports = function initAdminReports() {
        if (typeof window.Chart === 'undefined') return;
        const root = document.querySelector('#reports-ajax-root');
        if (!root) return;

        destroyCharts();
        resetNoDataStates(root);
        bindTabs(root);
        bindForms(root);

        const payload = readPayload(root);
        renderPie(root, 'profitRangePieChart', payload.profit?.composition, 'Ganancia');
        renderPie(root, 'profitByClientPieChart', payload.profit?.by_client, 'Ganancia');
        renderBar(root, 'profitMonthlyBarChart', payload.profit?.monthly?.labels || [], [{
          label: 'Ganancia mensual',
          data: payload.profit?.monthly?.values || [],
          backgroundColor: colorAt(1, 0.85),
        }]);
        renderBar(root, 'profitYearlyBarChart', payload.profit?.yearly?.labels || [], [{
          label: 'Ganancia anual',
          data: payload.profit?.yearly?.values || [],
          backgroundColor: colorAt(2, 0.85),
        }]);

        renderPie(root, 'expenseRangePieChart', payload.expense?.composition, 'Gasto');
        renderPie(root, 'expenseByProviderPieChart', payload.expense?.by_provider, 'Gasto');
        renderPie(root, 'expenseByTaxPieChart', payload.expense?.by_tax, 'Impuesto');
        renderBar(root, 'expenseMonthlyBarChart', payload.expense?.monthly?.labels || [], [{
          label: 'Gasto mensual',
          data: payload.expense?.monthly?.values || [],
          backgroundColor: colorAt(5, 0.85),
        }]);
        renderBar(root, 'expenseYearlyBarChart', payload.expense?.yearly?.labels || [], [{
          label: 'Gasto anual',
          data: payload.expense?.yearly?.values || [],
          backgroundColor: colorAt(6, 0.85),
        }]);

        renderCrossMonthlyPie(root, 'crossMonthlyPieChart', payload.cross?.monthly_pie);
        renderBar(root, 'crossYearlyBarChart', payload.cross?.yearly_bar?.labels || [], [
          {
            label: 'Ganancias',
            data: payload.cross?.yearly_bar?.gain_values || [],
            backgroundColor: colorAt(1, 0.85),
          },
          {
            label: 'Gastos',
            data: payload.cross?.yearly_bar?.expense_values || [],
            backgroundColor: colorAt(5, 0.85),
          },
        ]);

        renderPie(root, 'incomeRangePieChart', payload.income?.composition, 'Ingreso');
        renderPie(root, 'incomeByClientPieChart', payload.income?.by_client, 'Ingreso');
        renderBar(root, 'incomeMonthlyBarChart', payload.income?.monthly?.labels || [], [{
          label: 'Ingreso mensual',
          data: payload.income?.monthly?.values || [],
          backgroundColor: colorAt(7, 0.85),
        }]);
        renderBar(root, 'incomeYearlyBarChart', payload.income?.yearly?.labels || [], [{
          label: 'Ingreso anual',
          data: payload.income?.yearly?.values || [],
          backgroundColor: colorAt(8, 0.85),
        }]);
        renderPie(root, 'incomeByExecutivePieChart', payload.income?.by_executive, 'Ingreso');
        renderPie(root, 'incomeByExecutiveClientPieChart', payload.income?.by_executive_client, 'Ingreso');

        renderPie(root, 'requestStatusOverviewPieChart', payload.request?.status_overview, 'Solicitudes', formatCount);
        renderPie(root, 'requestProviderStatusPieChart', payload.request?.provider_status, 'Proveedores', formatCount);
        renderBar(root, 'requestMonthlyStatusBarChart', payload.request?.monthly_status?.labels || [], [
          {
            label: 'Total',
            data: payload.request?.monthly_status?.total_values || [],
            backgroundColor: colorAt(0, 0.75),
          },
          {
            label: 'Completas',
            data: payload.request?.monthly_status?.complete_values || [],
            backgroundColor: colorAt(1, 0.75),
          },
          {
            label: 'Pend. aprobación',
            data: payload.request?.monthly_status?.pending_approval_values || [],
            backgroundColor: colorAt(4, 0.75),
          },
          {
            label: 'Parciales',
            data: payload.request?.monthly_status?.partial_values || [],
            backgroundColor: colorAt(2, 0.75),
          },
          {
            label: 'Sin factura',
            data: payload.request?.monthly_status?.without_invoice_values || [],
            backgroundColor: colorAt(5, 0.75),
          },
        ], {
          stacked: false,
          tickFormatter: formatCount,
          tooltipFormatter: (context) => `${context.dataset.label}: ${formatCount(context.parsed.y)}`,
        });
        renderPie(root, 'requestProvidersIssuesPieChart', payload.request?.by_provider_issues, 'Incidencias', formatCount);
        renderPie(root, 'requestProvidersVolumePieChart', payload.request?.by_provider_volume, 'Solicitudes', formatCount);
        renderBar(root, 'requestTopPendingBarChart', payload.request?.top_pending_requests?.labels || [], [{
          label: 'Proveedores pendientes',
          data: payload.request?.top_pending_requests?.values || [],
          backgroundColor: colorAt(9, 0.82),
        }], {
          tickFormatter: formatCount,
          tooltipFormatter: (context) => `${context.dataset.label}: ${formatCount(context.parsed.y)}`,
        });
        queueChartRefresh();
      };

      window.addEventListener('popstate', () => {
        if (!document.querySelector('#reports-ajax-root')) return;
        fetchAndSwap(window.location.href, false);
      });

      document.addEventListener('DOMContentLoaded', () => {
        window.initAdminReports();
      });
    })();
  </script>
@endpush

@push('styles')
  <style>
    .reports-hero {
      margin-bottom: 14px;
    }
    .reports-vat-toggle {
      margin-top: 10px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .reports-vat-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .reports-vat-btn--active {
      background: #0f766e;
      border-color: #0f766e;
      color: #ffffff;
      box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.16);
    }
    .reports-vat-btn--active:hover {
      background: #0d6b63;
      border-color: #0d6b63;
      color: #ffffff;
    }
    .reports-vat-tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .02em;
      text-transform: uppercase;
      border-radius: 999px;
      padding: 2px 8px;
      background: rgba(255, 255, 255, 0.22);
    }
    .report-section {
      margin: 0;
    }
    .report-tabs-card {
      padding-top: 12px;
      transition: opacity .2s ease;
    }
    .report-tabs-card.is-loading {
      opacity: 0.55;
      pointer-events: none;
    }
    #admin-report-tabs::part(base) {
      border: 0;
    }
    #admin-report-tabs::part(nav) {
      border-bottom: 1px solid #e2e8f0;
      gap: 4px;
      margin-bottom: 14px;
      overflow-x: auto;
      scrollbar-width: thin;
    }
    #admin-report-tabs::part(tabs) {
      flex-wrap: nowrap;
    }
    #admin-report-tabs::part(tab) {
      border-radius: 10px 10px 0 0;
      font-weight: 600;
      color: #334155;
    }
    #admin-report-tabs::part(active-tab-indicator) {
      height: 3px;
      background: linear-gradient(90deg, #0f766e, #0ea5a4);
    }
    .report-section__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .report-kpis {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .badge--ok {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
    }
    .report-filters-collapse {
      margin-bottom: 14px;
    }
    .report-filters-collapse::part(base) {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #f8fafc;
    }
    .report-filters-collapse::part(summary) {
      padding: 12px 14px;
      font-weight: 600;
      color: #0b1220;
    }
    .report-filters-collapse::part(content) {
      padding: 0 14px 14px;
    }
    .report-filters-summary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .report-filters-form {
      margin: 0;
      padding: 0;
    }
    .report-filters-grid {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-bottom: 10px;
    }
    .report-filters-grid--three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .report-filters-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .reports-grid {
      display: grid;
      gap: 12px;
    }
    .reports-grid--2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .report-chart-card {
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #fff;
      padding: 12px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
      min-width: 0;
    }
    .report-chart-card h3 {
      margin: 0 0 8px;
      font-size: 0.96rem;
      color: #0f172a;
    }
    .report-chart-wrap {
      position: relative;
      min-height: 280px;
      height: 280px;
      width: 100%;
    }
    .chart-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;
      border: 1px dashed #cbd5e1;
      border-radius: 10px;
      color: #64748b;
      background: #f8fafc;
      text-align: center;
      padding: 12px;
      font-size: 0.9rem;
    }
    @media (max-width: 1100px) {
      .reports-grid--2 {
        grid-template-columns: 1fr;
      }
      .report-chart-wrap {
        min-height: 260px;
        height: 260px;
      }
    }
    @media (max-width: 820px) {
      .report-filters-grid,
      .report-filters-grid--three {
        grid-template-columns: 1fr;
      }
    }
    @media (min-width: 1400px) {
      .wrap {
        max-width: 96vw;
      }
    }
  </style>
@endpush