@extends('layouts/layoutMaster')

@section('title', 'Metricas Mariachi')

@section('page-style')
<style>
  @media (max-width: 991.98px) {
    .artist-dashboard-desktop {
      display: none;
    }

    .artist-dashboard-mobile {
      display: grid;
      gap: 1rem;
      padding-bottom: 1rem;
    }

    .artist-dashboard-mobile__chips,
    .artist-dashboard-mobile__quick-actions,
    .artist-dashboard-mobile__stats,
    .artist-dashboard-mobile__list {
      display: grid;
      gap: 0.8rem;
    }

    .artist-dashboard-mobile__quick-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .artist-dashboard-mobile__quick-action {
      display: grid;
      gap: 0.4rem;
      padding: 1rem;
      color: #111827;
      text-decoration: none;
    }

    .artist-dashboard-mobile__quick-action i {
      width: 2.5rem;
      height: 2.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.95rem;
      background: rgba(185, 28, 28, 0.08);
      color: #b91c1c;
      font-size: 1.15rem;
    }

    .artist-dashboard-mobile__quick-action strong {
      font-size: 0.98rem;
      font-weight: 800;
    }

    .artist-dashboard-mobile__quick-action span {
      color: rgba(71, 85, 105, 0.76);
      font-size: 0.8rem;
    }

    .artist-dashboard-mobile__stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .artist-dashboard-mobile__stat {
      padding: 1rem;
    }

    .artist-dashboard-mobile__stat-label {
      display: block;
      margin-bottom: 0.45rem;
      color: rgba(71, 85, 105, 0.68);
      font-size: 0.78rem;
      font-weight: 700;
    }

    .artist-dashboard-mobile__stat-value {
      margin: 0;
      color: #111827;
      font-size: 1.55rem;
      font-weight: 800;
      line-height: 1;
    }

    .artist-dashboard-mobile__stat-meta {
      display: block;
      margin-top: 0.5rem;
      color: rgba(71, 85, 105, 0.76);
      font-size: 0.78rem;
      line-height: 1.4;
    }

    .artist-dashboard-mobile__section-title {
      margin: 0 0 0.7rem;
      color: #111827;
      font-size: 1.24rem;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .artist-dashboard-mobile__listing {
      padding: 1rem;
    }

    .artist-dashboard-mobile__listing-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.85rem;
    }

    .artist-dashboard-mobile__listing-title {
      margin: 0;
      color: #111827;
      font-size: 0.98rem;
      font-weight: 800;
      line-height: 1.2;
    }

    .artist-dashboard-mobile__listing-city,
    .artist-dashboard-mobile__listing-meta {
      color: rgba(71, 85, 105, 0.76);
      font-size: 0.79rem;
    }

    .artist-dashboard-mobile__listing-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.7rem;
      margin-bottom: 0.9rem;
    }

    .artist-dashboard-mobile__listing-metric strong {
      display: block;
      color: #111827;
      font-size: 1rem;
      font-weight: 800;
    }

    .artist-dashboard-mobile__listing-metric span {
      color: rgba(71, 85, 105, 0.68);
      font-size: 0.74rem;
      line-height: 1.35;
    }

    .artist-dashboard-mobile__listing-link {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      color: #b91c1c;
      font-size: 0.82rem;
      font-weight: 800;
      text-decoration: none;
    }
  }

  @media (min-width: 992px) {
    .artist-dashboard-mobile {
      display: none;
    }
  }
</style>
@endsection

@section('content')
@php
  $statusMap = [
    'active' => ['label' => 'Activo', 'class' => 'success'],
    'draft' => ['label' => 'Borrador', 'class' => 'secondary'],
    'awaiting_plan' => ['label' => 'Sin plan', 'class' => 'warning'],
    'awaiting_payment' => ['label' => 'Esperando pago', 'class' => 'warning'],
    'paused' => ['label' => 'Pausado', 'class' => 'danger'],
  ];

  $usagePercent = $openDraftLimit > 0 ? min(100, (int) round(($openDraftsCount / $openDraftLimit) * 100)) : 0;
@endphp

  <div class="artist-dashboard-mobile">
    @if($planIssues !== [])
      <section class="artist-mobile-card p-3">
        <div class="d-flex align-items-center gap-2 mb-2">
          <i class="icon-base ti tabler-alert-triangle text-warning"></i>
          <strong class="text-dark">Ajustes pendientes</strong>
        </div>
        <div class="d-grid gap-2">
          @foreach($planIssues as $issue)
            <span class="artist-mobile-chip">{{ $issue }}</span>
          @endforeach
        </div>
      </section>
    @endif

    <section class="artist-dashboard-mobile__quick-actions">
      <a href="{{ route('mariachi.quotes.index') }}" class="artist-dashboard-mobile__quick-action artist-mobile-card">
        <i class="icon-base ti tabler-message-circle"></i>
        <strong>Clientes</strong>
        <span>{{ number_format($openQuotesTotal) }} abiertas para responder</span>
      </a>

      <a href="{{ route('mariachi.listings.index') }}" class="artist-dashboard-mobile__quick-action artist-mobile-card">
        <i class="icon-base ti tabler-speakerphone"></i>
        <strong>Publicaciones</strong>
        <span>{{ number_format((int) ($listingTotals['active'] ?? 0)) }} anuncios activos</span>
      </a>
    </section>

    <section class="artist-dashboard-mobile__stats">
      <article class="artist-dashboard-mobile__stat artist-mobile-card">
        <span class="artist-dashboard-mobile__stat-label">Solicitudes</span>
        <p class="artist-dashboard-mobile__stat-value">{{ number_format($quotesTotal) }}</p>
        <span class="artist-dashboard-mobile__stat-meta">30 días: {{ number_format($quotes30d) }}</span>
      </article>

      <article class="artist-dashboard-mobile__stat artist-mobile-card">
        <span class="artist-dashboard-mobile__stat-label">Respuesta</span>
        <p class="artist-dashboard-mobile__stat-value">{{ $responseRate }}%</p>
        <span class="artist-dashboard-mobile__stat-meta">{{ $pendingFirstReply }} esperando primera respuesta</span>
      </article>

      <article class="artist-dashboard-mobile__stat artist-mobile-card">
        <span class="artist-dashboard-mobile__stat-label">Vistas</span>
        <p class="artist-dashboard-mobile__stat-value">{{ number_format($viewsTotal) }}</p>
        <span class="artist-dashboard-mobile__stat-meta">30 días: {{ number_format($views30d) }}</span>
      </article>

      <article class="artist-dashboard-mobile__stat artist-mobile-card">
        <span class="artist-dashboard-mobile__stat-label">Favoritos</span>
        <p class="artist-dashboard-mobile__stat-value">{{ number_format($favoritesTotal) }}</p>
        <span class="artist-dashboard-mobile__stat-meta">30 días: {{ number_format($favorites30d) }}</span>
      </article>
    </section>

    @if($listings->isNotEmpty())
      <section>
        <h3 class="artist-dashboard-mobile__section-title">Tus anuncios</h3>
        <div class="artist-dashboard-mobile__list">
          @foreach($listings->take(3) as $listing)
            @php
              $statusInfo = $statusMap[$listing->status] ?? ['label' => $listing->status, 'class' => 'secondary'];
            @endphp
            <article class="artist-dashboard-mobile__listing artist-mobile-card">
              <div class="artist-dashboard-mobile__listing-top">
                <div>
                  <h4 class="artist-dashboard-mobile__listing-title">{{ $listing->title }}</h4>
                  <div class="artist-dashboard-mobile__listing-city">{{ $listing->city_name ?: 'Sin ciudad definida' }}</div>
                </div>
                <span class="badge bg-label-{{ $statusInfo['class'] }}">{{ $statusInfo['label'] }}</span>
              </div>

              <div class="artist-dashboard-mobile__listing-metrics">
                <div class="artist-dashboard-mobile__listing-metric">
                  <strong>{{ number_format((int) $listing->views_count) }}</strong>
                  <span>Vistas</span>
                </div>
                <div class="artist-dashboard-mobile__listing-metric">
                  <strong>{{ number_format((int) $listing->favorites_count) }}</strong>
                  <span>Favoritos</span>
                </div>
                <div class="artist-dashboard-mobile__listing-metric">
                  <strong>{{ number_format((int) $listing->quotes_count) }}</strong>
                  <span>Solicitudes</span>
                </div>
              </div>

              <div class="d-flex justify-content-between align-items-center gap-3">
                <span class="artist-dashboard-mobile__listing-meta">Actualizado {{ $listing->updated_at?->diffForHumans() ?: '-' }}</span>
                <a href="{{ route('mariachi.listings.edit', ['listing' => $listing->id, 'editor' => 'fullscreen']) }}" class="artist-dashboard-mobile__listing-link">
                  Editar <i class="icon-base ti tabler-arrow-up-right"></i>
                </a>
              </div>
            </article>
          @endforeach
        </div>
      </section>
    @endif
  </div>

  <div class="artist-dashboard-desktop">
  <div class="card mb-6">
    <div class="card-body d-flex justify-content-between align-items-center flex-wrap gap-3">
      <div>
        <h5 class="mb-1">Metricas de anuncios</h5>
        <p class="mb-0 text-muted">Datos reales tomados de tus anuncios, conversaciones, favoritos y reseñas.</p>
    </div>
    <div class="d-flex flex-wrap gap-2">
      <a class="btn btn-primary" href="{{ route('mariachi.listings.index') }}">Gestionar anuncios</a>
      <a class="btn btn-outline-primary" href="{{ route('mariachi.quotes.index') }}">Abrir solicitudes</a>
      <a class="btn btn-outline-primary" href="{{ route('mariachi.reviews.index') }}">Ver opiniones</a>
    </div>
  </div>
</div>

  @if(! $profile)
  <div class="card">
    <div class="card-body">
      <p class="mb-0 text-muted">Aun no tienes perfil de mariachi. Completa tu perfil para ver metricas.</p>
    </div>
  </div>
  @else
  @if($planIssues !== [])
    <div class="alert alert-warning mb-6">
      <strong>Tu plan actual requiere ajuste.</strong>
      <ul class="mb-0 mt-2">
        @foreach($planIssues as $issue)
          <li>{{ $issue }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <div class="row g-4 mb-6">
    <div class="col-xl-3 col-md-6">
      <div class="card h-100">
        <div class="card-body">
          <h6 class="mb-1">Borradores abiertos</h6>
          <h3 class="mb-1">{{ $openDraftLimit === 0 ? $openDraftsCount : $openDraftsCount.' / '.$openDraftLimit }}</h3>
          <p class="mb-2 text-muted">Activos: {{ (int) ($listingTotals['active'] ?? 0) }} · En revisión: {{ number_format((int) $listings->where('review_status', \App\Models\MariachiListing::REVIEW_PENDING)->count()) }}</p>
          @if($openDraftLimit > 0)
            <div class="progress" style="height: 8px;">
              <div class="progress-bar" role="progressbar" style="width: {{ $usagePercent }}%;"></div>
            </div>
          @else
            <small class="text-muted">Sin tope para borradores en tu paquete actual.</small>
          @endif
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-md-6">
      <div class="card h-100">
        <div class="card-body">
          <h6 class="mb-1">Vistas reales</h6>
          <h3 class="mb-1">{{ number_format($viewsTotal) }}</h3>
          <p class="mb-0 text-muted">Ultimos 30 dias: {{ number_format($views30d) }}</p>
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-md-6">
      <div class="card h-100">
        <div class="card-body">
          <h6 class="mb-1">Favoritos reales</h6>
          <h3 class="mb-1">{{ number_format($favoritesTotal) }}</h3>
          <p class="mb-0 text-muted">Ultimos 30 dias: {{ number_format($favorites30d) }}</p>
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-md-6">
      <div class="card h-100">
        <div class="card-body">
          <h6 class="mb-1">Solicitudes reales</h6>
          <h3 class="mb-1">{{ number_format($quotesTotal) }}</h3>
          <p class="mb-0 text-muted">Abiertas: {{ number_format($openQuotesTotal) }} · Ultimos 30 dias: {{ number_format($quotes30d) }}</p>
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-md-6">
      <div class="card h-100">
        <div class="card-body">
          <h6 class="mb-1">Tasa de respuesta</h6>
          <h3 class="mb-1">{{ $responseRate }}%</h3>
          <p class="mb-0 text-muted">Respondidas: {{ $repliedConversations }} / {{ $totalConversations }} · Pendientes primera respuesta: {{ $pendingFirstReply }}</p>
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-md-6">
      <div class="card h-100">
        <div class="card-body">
          <h6 class="mb-1">Reseñas aprobadas</h6>
          <h3 class="mb-1">{{ number_format($approvedReviewsTotal) }}</h3>
          <p class="mb-0 text-muted">Calificacion promedio: {{ number_format($approvedRatingAvg, 2) }} / 5</p>
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-md-6">
      <div class="card h-100">
        <div class="card-body">
          <h6 class="mb-1">Anuncios nuevos (30d)</h6>
          <h3 class="mb-1">{{ number_format($newListings30d) }}</h3>
          <p class="mb-0 text-muted">Periodo de analisis: ultimos 30 dias.</p>
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-md-6">
      <div class="card h-100">
        <div class="card-body">
          <h6 class="mb-1">Estado del perfil</h6>
          <h3 class="mb-1 text-capitalize">{{ $profile->verification_status ?: 'Sin verificar' }}</h3>
          <p class="mb-0 text-muted">
            @if($profile->hasActiveVerification())
              Verificación activa hasta {{ $profile->verification_expires_at?->format('Y-m-d') ?: 'nuevo aviso' }}
            @elseif($profile->verification_status === 'payment_pending')
              Verificación en revisión
            @else
              Sin verificación activa
            @endif
          </p>
        </div>
      </div>
    </div>
  </div>

  {{-- Gráfico de tendencia 30 días --}}
  <div class="card mb-6">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0">Tendencia últimos 30 días</h5>
      <span class="text-muted small">Vistas y solicitudes por día</span>
    </div>
    <div class="card-body">
      <div id="dashboardTrendChart"></div>
    </div>
  </div>

  {{-- Tabla de rendimiento por anuncio --}}
  @if($listings->isNotEmpty())
  <div class="card mb-6">
    <div class="card-header">
      <h5 class="mb-0">Rendimiento por anuncio</h5>
    </div>
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th>Anuncio</th>
            <th class="text-center">Estado</th>
            <th class="text-center">Vistas</th>
            <th class="text-center">Favoritos</th>
            <th class="text-center">Solicitudes</th>
            <th class="text-center">Calificación</th>
            <th class="text-center">Vence</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          @foreach($listings as $listing)
          @php
            $statusInfo = $statusMap[$listing->status] ?? ['label' => $listing->status, 'class' => 'secondary'];
            $expiresAt = $listing->currentPlanExpiresAt();
            $daysLeft = $expiresAt ? (int) now()->diffInDays($expiresAt, false) : null;
            $expiryClass = $daysLeft !== null ? ($daysLeft <= 7 ? 'text-danger fw-semibold' : ($daysLeft <= 30 ? 'text-warning fw-semibold' : 'text-muted')) : 'text-muted';
          @endphp
          <tr>
            <td>
              <div class="fw-semibold">{{ mb_strlen($listing->title) > 45 ? mb_substr($listing->title, 0, 45).'…' : $listing->title }}</div>
              <small class="text-muted">{{ $listing->city_name }}</small>
            </td>
            <td class="text-center">
              <span class="badge bg-label-{{ $statusInfo['class'] }}">{{ $statusInfo['label'] }}</span>
            </td>
            <td class="text-center">{{ number_format((int) $listing->views_count) }}</td>
            <td class="text-center">{{ number_format((int) $listing->favorites_count) }}</td>
            <td class="text-center">
              {{ number_format((int) $listing->quotes_count) }}
              @if((int) $listing->open_quotes_count > 0)
                <span class="badge bg-warning ms-1">{{ $listing->open_quotes_count }} abiertas</span>
              @endif
            </td>
            <td class="text-center">
              @if((int) $listing->approved_reviews_count > 0)
                <span>{{ number_format((float) $listing->approved_rating_avg, 1) }} ★</span>
                <small class="text-muted">({{ $listing->approved_reviews_count }})</small>
              @else
                <span class="text-muted">—</span>
              @endif
            </td>
            <td class="text-center {{ $expiryClass }}">
              @if($expiresAt)
                {{ $daysLeft !== null && $daysLeft <= 0 ? 'Vencido' : ($daysLeft.'d') }}
                <div class="small fw-normal text-muted">{{ $expiresAt->format('d/m/Y') }}</div>
              @else
                <span class="text-muted">—</span>
              @endif
            </td>
            <td class="text-end">
              <a href="{{ route('mariachi.listings.plans', ['listing' => $listing->id]) }}" class="btn btn-sm btn-outline-primary">Renovar</a>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
  @endif

@endif
  </div>
@endsection

@section('page-script')
@vite('resources/assets/vendor/libs/apex-charts/apexcharts.js')
<script>
(function () {
  const chartData = @json($chartData);
  const options = {
    chart: { type: 'area', height: 240, toolbar: { show: false }, zoom: { enabled: false } },
    series: [
      { name: 'Vistas', data: chartData.views },
      { name: 'Solicitudes', data: chartData.quotes },
    ],
    xaxis: { categories: chartData.labels, tickAmount: 7, labels: { style: { fontSize: '12px' } } },
    yaxis: { min: 0, labels: { formatter: v => Math.round(v) } },
    colors: ['#696cff', '#03c3ec'],
    fill: { type: 'gradient', gradient: { opacityFrom: 0.35, opacityTo: 0.05 } },
    stroke: { curve: 'smooth', width: 2 },
    dataLabels: { enabled: false },
    tooltip: { shared: true, intersect: false },
    legend: { position: 'top' },
    grid: { borderColor: 'rgba(0,0,0,0.06)' },
  };
  const chart = new ApexCharts(document.getElementById('dashboardTrendChart'), options);
  chart.render();
})();
</script>
@endsection