<section class="dashboard-page">
  <span class="page-blob blob-1" aria-hidden="true"></span>
  <span class="page-blob blob-2" aria-hidden="true"></span>
  <span class="page-blob blob-3" aria-hidden="true"></span>

  <div class="container-dashboard">
    <div class="page-head fade-in-up">
      <div class="head-content">
        <div class="badge-pill">
          <i class="bi bi-grid-1x2-fill"></i> {{ isCliente ? 'Visão Cliente' : 'Visão Geral' }}
        </div>
        <h1 class="page-title">{{ isCliente ? 'Dashboard do Cliente' : 'Dashboard de Gestão de Linhas' }}</h1>
        <p class="page-subtitle">
          {{ isCliente ? 'Acompanhe suas linhas em tempo real com foco em operação e disponibilidade.' : 'Painel operacional com foco em status, cobertura e histórico da base.' }}
        </p>
      </div>

      <div class="head-actions">
        <div class="status-indicator" *ngIf="loading">
          <span class="spinner-border spinner-border-sm text-brand"></span>
          <span>Atualizando dados...</span>
        </div>
        <div class="status-indicator error" *ngIf="!loading && errorMsg">
          <i class="bi bi-exclamation-triangle-fill"></i> {{ errorMsg }}
        </div>
        <div class="last-update" *ngIf="!loading && !errorMsg">
          <i class="bi bi-check2-circle"></i> Dados atualizados
        </div>
      </div>
    </div>

    <div class="hero-grid fade-in-up" [style.animation-delay]="'100ms'" *ngIf="!isCliente || clientOverview.hasData">
      <div class="hero-card" *ngFor="let k of kpis; trackBy: trackByKpiKey">
        <div class="hero-icon">
          <i [class]="k.icon"></i>
        </div>
        <div class="hero-data">
          <span class="hero-label">{{ k.title }}</span>
          <span class="hero-value">{{ k.value }}</span>
          <span class="hero-hint" *ngIf="k.hint">{{ k.hint }}</span>
        </div>
      </div>
    </div>

    <ng-container *ngIf="!isCliente; else clienteDashboard">
      <div class="context-title fade-in-up" [style.animation-delay]="'180ms'">
        <h2>Página Geral</h2>
        <p>Distribuição e saúde atual da base de linhas.</p>
      </div>

      <div class="dashboard-section fade-in-up" [style.animation-delay]="'220ms'">
        <div class="section-top-row">
          <div class="card-modern card-status">
            <div class="card-header-clean">
              <div class="header-icon brand"><i class="bi bi-pie-chart-fill"></i></div>
              <div class="header-text">
                <h3>Status da Base</h3>
                <p>Distribuição atual das linhas</p>
              </div>
            </div>
            <div class="card-body-split">
              <div class="chart-wrapper-pie">
                <canvas #chartStatusPie></canvas>
              </div>
              <div class="status-list">
                <div class="status-item">
                  <span class="dot d-active"></span>
                  <span class="lbl">Ativas</span>
                  <span class="val">{{ statusResumo.ativos | number:'1.0-0' }}</span>
                </div>
                <div class="status-item">
                  <span class="dot d-reserve"></span>
                  <span class="lbl">Reservas</span>
                  <span class="val">{{ statusResumo.reservas | number:'1.0-0' }}</span>
                </div>
                <div class="status-item">
                  <span class="dot d-blocked"></span>
                  <span class="lbl">Bloq. (Perda/Roubo)</span>
                  <span class="val">{{ statusResumo.perdaRoubo | number:'1.0-0' }}</span>
                </div>
                <div class="status-item">
                  <span class="dot d-blocked-soft"></span>
                  <span class="lbl">Bloq. (120 dias)</span>
                  <span class="val">{{ statusResumo.bloq120 | number:'1.0-0' }}</span>
                </div>
                <div class="status-item total-row">
                  <span class="lbl">Total Geral</span>
                  <span class="val">{{ statusResumo.total | number:'1.0-0' }}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="card-modern card-adicionais">
            <div class="card-header-clean">
              <div class="header-icon blue"><i class="bi bi-diagram-3-fill"></i></div>
              <div class="header-text">
                <h3>Serviços Adicionais</h3>
                <p>Comparativo de linhas com e sem adicionais (Geral)</p>
              </div>
            </div>
            <div class="card-body-adicionais">
              <div class="chart-wrapper-pie-sm">
                <canvas #chartAdicionaisComparativo></canvas>
              </div>
              <div class="compare-list">
                <div class="compare-item">
                  <span class="dot d-com-add"></span>
                  <span class="lbl">Com adicionais</span>
                  <span class="val">{{ adicionaisComparativo.com | number:'1.0-0' }}</span>
                  <span class="pct">{{ adicionaisComparativo.pctCom }}</span>
                </div>
                <div class="compare-item">
                  <span class="dot d-sem-add"></span>
                  <span class="lbl">Sem adicionais</span>
                  <span class="val">{{ adicionaisComparativo.sem | number:'1.0-0' }}</span>
                  <span class="pct">{{ adicionaisComparativo.pctSem }}</span>
                </div>
                <div class="compare-item total-row">
                  <span class="lbl">Total analisado</span>
                  <span class="val">{{ adicionaisComparativo.total | number:'1.0-0' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="dashboard-section fade-in-up" [style.animation-delay]="'280ms'">
        <div class="grid-halves">
          <div class="card-modern">
            <div class="card-header-clean">
              <div class="header-icon warning"><i class="bi bi-shield-exclamation"></i></div>
              <div class="header-text">
                <h3>Vigência (Buckets)</h3>
                <p>Status de vencimento atual</p>
              </div>
            </div>
            <div class="chart-wrapper-pie">
              <canvas #chartVigenciaSupervisao></canvas>
            </div>
          </div>

          <div class="card-modern">
            <div class="card-header-clean">
              <div class="header-icon blue"><i class="bi bi-globe2"></i></div>
              <div class="header-text">
                <h3>Vivo Travel</h3>
                <p>Linhas com e sem serviço ativo</p>
              </div>
            </div>
            <div class="chart-wrapper-pie">
              <canvas #chartTravelMundo></canvas>
            </div>
          </div>
        </div>

        <div class="grid-triples mt-3">
          <div class="card-modern">
            <div class="card-header-clean">
              <div class="header-text">
                <h3>Linhas por Franquia</h3>
                <p>Distribuição da base por faixa de franquia</p>
              </div>
            </div>
            <div class="chart-wrapper-bar compact">
              <canvas #chartLinhasPorFranquia></canvas>
            </div>
          </div>

          <div class="card-modern">
            <div class="card-header-clean">
              <div class="header-text">
                <h3>Adicionais Pagos (Serviços)</h3>
                <p>Quantidade de linhas por serviço adicional ativo</p>
              </div>
            </div>
            <div class="chart-wrapper-bar compact">
              <canvas #chartAdicionaisPagos></canvas>
            </div>
          </div>

          <div class="card-modern">
            <div class="card-header-clean">
              <div class="header-text">
                <h3>Tipo de Chip</h3>
                <p>Quantidade de linhas e-SIM e SIMCARD</p>
              </div>
            </div>
            <div class="chart-wrapper-pie">
              <canvas #chartTipoChip></canvas>
            </div>
          </div>
        </div>
      </div>

      <div class="context-title fade-in-up" [style.animation-delay]="'320ms'">
        <h2>Página Resumo</h2>
        <p>Indicadores do Resumo focados em quantidade e distribuição de linhas.</p>
      </div>

      <div class="dashboard-section fade-in-up" [style.animation-delay]="'360ms'">
        <div class="card-modern full-width">
          <div class="toolbar-header">
            <div class="title-group">
              <i class="bi bi-bar-chart-line text-brand"></i>
              <div>
                <h3>Resumo Operacional de Linhas</h3>
                <p>Dados consolidados da página Resumo sem foco financeiro</p>
              </div>
            </div>

            <div class="toolbar-controls">
              <div class="control-group">
                <label>Visualizar Top</label>
                <select
                  [value]="resumoTopN"
                  (change)="resumoTopN = +($any($event.target).value); onResumoTopNChange()"
                  class="form-select-sm">
                  <option *ngFor="let size of resumoTopOptions" [value]="size">{{ size }}</option>
                </select>
              </div>

              <div class="divider-v"></div>

              <a class="btn-link" [routerLink]="['/resumo']" [queryParams]="{ tab: 'totais' }">Ver Página Resumo <i class="bi bi-arrow-right"></i></a>
            </div>
          </div>

          <div class="card-body-grid">
            <div class="loading-overlay" *ngIf="resumoLoading">
              <div class="spinner-border text-brand" role="status"></div>
            </div>

            <div class="error-state" *ngIf="!resumoLoading && resumoError">
              <i class="bi bi-exclamation-circle"></i>
              <span>{{ resumoError }}</span>
            </div>

            <div class="analytics-grid" *ngIf="!resumoLoading && !resumoError">
              <div class="mini-chart-card">
                <h6>Top Clientes (Qtd. Linhas)</h6>
                <div class="chart-area"><canvas #chartResumoTopClientes></canvas></div>
              </div>

              <div class="mini-chart-card">
                <h6>Top Planos (Qtd. Linhas)</h6>
                <div class="chart-area"><canvas #chartResumoTopPlanos></canvas></div>
              </div>

              <div class="mini-chart-card">
                <h6>PF vs PJ (Qtd. Linhas)</h6>
                <div class="chart-area"><canvas #chartResumoPfPjLinhas></canvas></div>
              </div>

              <div class="mini-chart-card">
                <h6>Reserva por DDD</h6>
                <div class="chart-area"><canvas #chartResumoReservaDdd></canvas></div>
              </div>

              <div class="mini-chart-card mini-metric-card">
                <h6>DIFERENÇA PJ X PF</h6>
                <div class="metric-stack">
                  <div class="metric-line">
                    <span>PF (Linhas)</span>
                    <strong>{{ formatInt(resumoDiferencaPjPf.pfLinhas) }}</strong>
                  </div>
                  <div class="metric-line">
                    <span>PJ (Linhas)</span>
                    <strong>{{ formatInt(resumoDiferencaPjPf.pjLinhas) }}</strong>
                  </div>
                  <div class="metric-line">
                    <span>Total Linhas</span>
                    <strong>{{ formatInt(resumoDiferencaPjPf.totalLinhas) }}</strong>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="context-title fade-in-up" [style.animation-delay]="'420ms'">
        <h2>Histórico</h2>
        <p>Séries mensais para acompanhamento contínuo de movimentações e vigência.</p>
      </div>

      <div class="dashboard-section fade-in-up" [style.animation-delay]="'460ms'">
        <div class="history-grid">
          <div class="card-modern">
            <div class="card-header-clean">
              <div class="header-text">
                <h3>MUREG (12 Meses)</h3>
                <p>Histórico mensal de mudanças de plano/aparelho</p>
              </div>
            </div>
            <div class="chart-wrapper-bar compact-half">
              <canvas #chartMureg12></canvas>
            </div>
          </div>

          <div class="card-modern">
            <div class="card-header-clean">
              <div class="header-text">
                <h3>Troca de Número (12 Meses)</h3>
                <p>Histórico mensal de trocas realizadas</p>
              </div>
            </div>
            <div class="chart-wrapper-bar compact-half">
              <canvas #chartTroca12></canvas>
            </div>
          </div>

          <div class="card-modern">
            <div class="card-header-clean">
              <div class="header-icon purple"><i class="bi bi-calendar2-check"></i></div>
              <div class="header-text">
                <h3>Vigência (Próx. 12 Meses)</h3>
                <p>Contratos a encerrar por mês</p>
              </div>
            </div>
            <div class="chart-wrapper-bar compact-half">
              <canvas #chartVigenciaMesAno></canvas>
            </div>
          </div>
        </div>
      </div>
    </ng-container>

    <ng-template #clienteDashboard>
      <ng-container *ngIf="clientOverview.hasData; else clienteSemDados">
        <div class="context-title fade-in-up" [style.animation-delay]="'180ms'">
          <h2>Monitoramento da Sua Base</h2>
          <p>Visão operacional das suas linhas para acompanhar uso, status e disponibilidade.</p>
        </div>

        <div class="dashboard-section fade-in-up" [style.animation-delay]="'220ms'">
          <div class="section-top-row">
            <div class="card-modern card-status">
              <div class="card-header-clean">
                <div class="header-icon brand"><i class="bi bi-pie-chart-fill"></i></div>
                <div class="header-text">
                  <h3>Status das Linhas</h3>
                  <p>Distribuição atual da sua base</p>
                </div>
              </div>
              <div class="card-body-split">
                <div class="chart-wrapper-pie">
                  <canvas #chartStatusPie></canvas>
                </div>
                <div class="status-list">
                  <div class="status-item">
                    <span class="dot d-active"></span>
                    <span class="lbl">Ativas</span>
                    <span class="val">{{ statusResumo.ativos | number:'1.0-0' }}</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="card-modern">
              <div class="card-header-clean">
                <div class="header-icon blue"><i class="bi bi-wifi"></i></div>
                <div class="header-text">
                  <h3>Faixa de Franquia Line</h3>
                  <p>Quantidade de linhas por faixa de franquia contratada</p>
                </div>
              </div>
              <div class="chart-wrapper-bar compact-half">
                <canvas #chartLinhasPorFranquia></canvas>
              </div>
            </div>
          </div>
        </div>

        <div class="dashboard-section fade-in-up" [style.animation-delay]="'260ms'">
          <div class="card-modern full-width">
            <div class="card-header-clean">
              <div class="header-text">
                <h3>Top Planos (Qtd. Linhas)</h3>
                <p>Planos com maior volume na sua operação</p>
              </div>
            </div>
            <div class="chart-wrapper-bar compact">
              <canvas #chartResumoTopPlanos></canvas>
            </div>
          </div>

          <div class="grid-halves mt-3 client-secondary-grid">
            <div class="card-modern">
              <div class="card-header-clean">
                <div class="header-text">
                  <h3>Top Usuários (Qtd. Linhas)</h3>
                  <p>Apenas usuários de fato (sem bloqueados/aguardando)</p>
                </div>
              </div>
              <div class="chart-wrapper-bar compact">
                <canvas #chartResumoTopClientes></canvas>
              </div>
            </div>

            <div class="card-modern">
              <div class="card-header-clean">
                <div class="header-icon brand"><i class="bi bi-sim"></i></div>
                <div class="header-text">
                  <h3>Tipo de Chip</h3>
                  <p>Distribuição entre e-SIM, SIMCARD e outros</p>
                </div>
              </div>
              <div class="chart-wrapper-pie">
                <canvas #chartTipoChip></canvas>
              </div>
            </div>
          </div>
        </div>
      </ng-container>

      <ng-template #clienteSemDados>
        <div class="dashboard-section fade-in-up" [style.animation-delay]="'180ms'">
          <div class="card-modern full-width">
            <div class="card-header-clean">
              <div class="header-icon warning"><i class="bi bi-info-circle-fill"></i></div>
              <div class="header-text">
                <h3>Sem dados para exibição</h3>
                <p>Não encontramos linhas vinculadas ao seu acesso no momento.</p>
              </div>
            </div>
            <div class="card-body-grid">
              <p class="mb-0 text-muted">
                Assim que a base deste cliente estiver disponível na página Geral, os KPIs e gráficos serão atualizados automaticamente.
              </p>
            </div>
          </div>
        </div>
      </ng-template>
    </ng-template>
  </div>
</section>
