@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Dashboard')

@section('vendor-style')
@vite(['resources/assets/vendor/libs/apex-charts/apex-charts.scss'])
@endsection

@section('vendor-script')
@vite(['resources/assets/vendor/libs/apex-charts/apexcharts.js'])
@endsection

@section('page-script')
@vite(['resources/assets/js/dashboards-analytics.js'])
@endsection

@section('content')
<div class="row g-6">
  <!-- Dashboard tabs -->
  <div class="col-12">
    <ul class="nav nav-pills mb-6" id="dashboardNav" role="tablist">
      <li class="nav-item">
        <button type="button" class="nav-link active d-flex align-items-center" id="expiring-tab" data-bs-toggle="pill"
          data-bs-target="#expiring-tab-pane" role="tab" aria-controls="expiring-tab-pane" aria-selected="true">
          <i class="icon-base ti tabler-alert-triangle me-1"></i> Vencimientos próximos
          @if ($expiringDomains->count())
            <span class="badge bg-label-warning rounded-pill ms-2">{{ $expiringDomains->count() }}</span>
          @endif
        </button>
      </li>
      <li class="nav-item">
        <button type="button" class="nav-link d-flex align-items-center" id="analytics-tab" data-bs-toggle="pill"
          data-bs-target="#analytics-tab-pane" role="tab" aria-controls="analytics-tab-pane" aria-selected="false">
          <i class="icon-base ti tabler-chart-bar me-1"></i> Analítica general
        </button>
      </li>
    </ul>
  </div>

  <div class="col-12">
    <div class="tab-content p-0">
      <!-- Vencimientos próximos -->
      <div class="tab-pane fade show active" id="expiring-tab-pane" role="tabpanel" aria-labelledby="expiring-tab">
        <div class="card">
          @if ($expiringDomains->isEmpty())
            <div class="card-body text-center py-8">
              <i class="icon-base ti tabler-circle-check icon-52px text-success mb-4"></i>
              <h5 class="mb-1">No tienes dominios por vencer pronto</h5>
              <p class="text-body mb-0">Los dominios con estado "Alerta" o "Vencido" van a aparecer acá.</p>
            </div>
          @else
            <div class="table-responsive">
              <table class="table table-sm align-middle">
                <thead>
                  <tr>
                    <th>Dominio</th>
                    <th>Categoría</th>
                    <th>Estado</th>
                    <th>Vence</th>
                    <th>Costo renovación</th>
                    <th class="text-end">Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($expiringDomains as $domain)
                    <tr>
                      <td>
                        <a href="{{ 'https://' . $domain->name }}" target="_blank" rel="noopener" class="fw-medium">
                          {{ $domain->name }}
                          <i class="icon-base ti tabler-external-link icon-14px ms-1 text-body-secondary"></i>
                        </a>
                      </td>
                      <td>{{ $domain->category?->name ?? '—' }}</td>
                      <td>@include('content.domains._status_badge', ['domain' => $domain])</td>
                      <td>
                        <span class="badge bg-label-{{ $domain->expirationBadgeColor() }}">
                          {{ $domain->timeUntilExpirationCompact() }}
                        </span>
                        <small class="text-body-secondary d-block mt-1">{{ $domain->expirationDateHuman() }}</small>
                      </td>
                      <td>
                        @php $renewalCost = $domain->renewal_cost ?? $domain->estimated_renewal_cost; @endphp
                        {{ $renewalCost ? \App\Models\Currency::format($renewalCost, $domain->currency) : '—' }}
                        @if (!$domain->renewal_cost && $domain->estimated_renewal_cost)
                          <span class="badge bg-label-secondary">est.</span>
                        @endif
                      </td>
                      <td class="text-end">
                        <div class="d-flex justify-content-end gap-1">
                          <a href="{{ route('domains.show', $domain) }}" class="btn btn-icon btn-text-secondary">
                            <i class="icon-base ti tabler-eye"></i>
                          </a>
                          <a href="{{ route('domains.edit', $domain) }}" class="btn btn-icon btn-text-secondary">
                            <i class="icon-base ti tabler-edit"></i>
                          </a>
                        </div>
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          @endif
        </div>
      </div>
      <!--/ Vencimientos próximos -->

      <!-- Analítica general -->
      <div class="tab-pane fade" id="analytics-tab-pane" role="tabpanel" aria-labelledby="analytics-tab">
        <div class="row g-6">
          <!-- Quick stats -->
          <div class="col-sm-6 col-xl-3">
            <a href="{{ route('domains.index') }}" class="card h-100 text-decoration-none">
              <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                  <div class="avatar me-3">
                    <span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-world icon-md"></i></span>
                  </div>
                  <h4 class="mb-0">{{ $totalDomains }}</h4>
                </div>
                <p class="mb-0 text-body">Dominios en cartera</p>
              </div>
            </a>
          </div>
          <div class="col-sm-6 col-xl-3">
            <a href="{{ route('domains.index', ['expiring' => 30]) }}" class="card h-100 text-decoration-none">
              <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                  <div class="avatar me-3">
                    <span class="avatar-initial rounded bg-label-warning"><i class="icon-base ti tabler-alert-triangle icon-md"></i></span>
                  </div>
                  <h4 class="mb-0">{{ $expiringSoonCount }}</h4>
                </div>
                <p class="mb-0 text-body">Por vencer en 30 días</p>
              </div>
            </a>
          </div>
          <div class="col-sm-6 col-xl-3">
            <a href="{{ route('domains.index', ['status' => 'for_sale']) }}" class="card h-100 text-decoration-none">
              <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                  <div class="avatar me-3">
                    <span class="avatar-initial rounded bg-label-success"><i class="icon-base ti tabler-tag icon-md"></i></span>
                  </div>
                  <h4 class="mb-0">{{ $forSaleCount }}</h4>
                </div>
                <p class="mb-0 text-body">En venta</p>
              </div>
            </a>
          </div>
          <div class="col-sm-6 col-xl-3">
            <div class="card h-100">
              <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                  <div class="avatar me-3">
                    <span class="avatar-initial rounded bg-label-info"><i class="icon-base ti tabler-currency-dollar icon-md"></i></span>
                  </div>
                  <h4 class="mb-0">{{ \App\Models\Currency::format($totalInvested, 'USD') }}</h4>
                </div>
                <p class="mb-0 text-body">Invertido en total (USD)</p>
                @if ($hasNonUsdDomains)
                  <p class="mb-0 text-body-secondary small">No incluye dominios en otras monedas.</p>
                @endif
              </div>
            </div>
          </div>
          <!--/ Quick stats -->

          @if ($totalDomains === 0)
            <!-- Empty state -->
            <div class="col-12">
              <div class="card">
                <div class="card-body text-center py-8">
                  <i class="icon-base ti tabler-world icon-52px text-body-secondary mb-4"></i>
                  <h5 class="mb-1">Todavía no tienes dominios registrados</h5>
                  <p class="text-body mb-4">Empieza agregando el primero a tu cartera.</p>
                  <a href="{{ route('domains.create') }}" class="btn btn-primary">Agregar dominio</a>
                </div>
              </div>
            </div>
            <!--/ Empty state -->
          @else
            <!-- Distribution charts -->
            <div class="col-md-6 col-xl-4">
              <div class="card h-100">
                <div class="card-header">
                  <h5 class="mb-0">Por estado</h5>
                </div>
                <div class="card-body">
                  <div id="statusDistributionChart"
                    data-labels="{{ $statusDistribution->pluck('status')->map->label()->toJson() }}"
                    data-colors="{{ $statusDistribution->pluck('status')->map->color()->toJson() }}"
                    data-series="{{ $statusDistribution->pluck('total')->toJson() }}"></div>
                </div>
              </div>
            </div>

            <div class="col-md-6 col-xl-4">
              <div class="card h-100">
                <div class="card-header">
                  <h5 class="mb-0">Por categoría</h5>
                </div>
                <div class="card-body">
                  <div id="categoryDistributionChart"
                    data-labels="{{ $categoryDistribution->pluck('name')->toJson() }}"
                    data-series="{{ $categoryDistribution->pluck('total')->toJson() }}"></div>
                </div>
              </div>
            </div>

            <!-- Recent activity -->
            <div class="col-xl-4">
              <div class="card h-100">
                <div class="card-header">
                  <h5 class="mb-0">Últimos movimientos</h5>
                </div>
                <div class="card-body">
                  <ul class="timeline mb-0">
                    @forelse ($recentLogs as $log)
                      <li class="timeline-item timeline-item-transparent">
                        <span class="timeline-point timeline-point-{{ $log->type->color() }}"></span>
                        <div class="timeline-event">
                          <div class="timeline-header mb-1">
                            <a href="{{ route('domains.show', $log->domain) }}" class="fw-medium">{{ $log->domain->name }}</a>
                            <small class="text-body-secondary d-block">{{ $log->created_at->diffForHumans() }}</small>
                          </div>
                          <p class="mb-0">{{ $log->description }}</p>
                        </div>
                      </li>
                    @empty
                      <p class="text-body mb-0">Todavía no hay movimientos.</p>
                    @endforelse
                  </ul>
                </div>
              </div>
            </div>
            <!--/ Recent activity -->
          @endif
        </div>
      </div>
      <!--/ Analítica general -->
    </div>
  </div>
</div>
@endsection