@extends('dashboard.layouts.app')

@section('title', 'Uso y Límites')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Uso y Límites`}">
    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90" x-text="pageName"></h2>
      <nav>
        <ol class="flex items-center gap-1.5">
          <li>
            <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('dashboard.index') }}">
              Dashboard
              <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </a>
          </li>
          <li>
            <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('dashboard.suscripcion.index') }}">
              Suscripción
              <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </a>
          </li>
          <li class="text-sm text-gray-800 dark:text-white/90" x-text="pageName"></li>
        </ol>
      </nav>
    </div>
  </div>
  <!-- Breadcrumb End -->

  @if($suscripcion)
    <!-- Resumen de Uso -->
    <div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
      <!-- Empresas -->
      <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Empresas Activas</p>
            <p class="text-2xl font-bold text-gray-800 dark:text-white/90">
              {{ $estadisticas['empresas_activas'] }}
            </p>
          </div>
          <div class="h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
            <i data-lucide="building" class="h-6 w-6 text-blue-600 dark:text-blue-400"></i>
          </div>
        </div>
                  @if($suscripcion->plan->tieneLimiteUsuarios())
            <div class="mt-3">
              <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
                <span>Límite: {{ $suscripcion->plan->getLimiteUsuarios() }}</span>
                <span>{{ round(($estadisticas['empresas_activas'] / $suscripcion->plan->getLimiteUsuarios()) * 100) }}%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                <div class="bg-blue-600 h-2 rounded-full" 
                     style="width: {{ min(100, ($estadisticas['empresas_activas'] / $suscripcion->plan->getLimiteUsuarios()) * 100) }}%"></div>
              </div>
            </div>
          @endif
      </div>

      <!-- Reclamos -->
      <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Total Reclamos</p>
            <p class="text-2xl font-bold text-gray-800 dark:text-white/90">
              {{ $estadisticas['total_reclamos'] }}
            </p>
          </div>
          <div class="h-12 w-12 rounded-full bg-warning-100 dark:bg-warning-900/30 flex items-center justify-center">
            <i data-lucide="clock" class="h-6 w-6 text-warning-600 dark:text-warning-400"></i>
          </div>
        </div>
      </div>

      <!-- Reclamos Este Mes -->
      <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Este Mes</p>
            <p class="text-2xl font-bold text-gray-800 dark:text-white/90">
              {{ $estadisticas['reclamos_este_mes'] }}
            </p>
          </div>
          <div class="h-12 w-12 rounded-full bg-success-100 dark:bg-success-900/30 flex items-center justify-center">
            <i data-lucide="calendar" class="h-6 w-6 text-success-600 dark:text-success-400"></i>
          </div>
        </div>
        @if($suscripcion->plan->tieneLimiteReclamos())
          <div class="mt-3">
            <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
              <span>Límite: {{ $suscripcion->plan->getLimiteReclamos() }}</span>
              <span>{{ round(($estadisticas['reclamos_este_mes'] / $suscripcion->plan->getLimiteReclamos()) * 100) }}%</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
              <div class="bg-success-600 h-2 rounded-full" 
                   style="width: {{ min(100, ($estadisticas['reclamos_este_mes'] / $suscripcion->plan->getLimiteReclamos()) * 100) }}%"></div>
            </div>
          </div>
        @endif
      </div>

      <!-- Suscripciones Activas -->
      <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Suscripciones Activas</p>
            <p class="text-2xl font-bold text-gray-800 dark:text-white/90">
              {{ $estadisticas['suscripciones_activas'] }}
            </p>
          </div>
          <div class="h-12 w-12 rounded-full bg-success-100 dark:bg-success-900/30 flex items-center justify-center">
            <i data-lucide="check-circle" class="h-6 w-6 text-success-600 dark:text-success-400"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- Detalles del Plan -->
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
      <!-- Límites del Plan -->
      <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
        <h3 class="mb-6 text-lg font-semibold text-gray-800 dark:text-white/90">
          Límites del Plan {{ $suscripcion->plan->nombre }}
        </h3>
        
        <div class="space-y-4">
          @if($suscripcion->plan->tieneLimiteUsuarios())
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <i data-lucide="users" class="mr-3 h-5 w-5 text-blue-600 dark:text-blue-400"></i>
                <span class="text-gray-800 dark:text-white/90">Usuarios</span>
              </div>
              <span class="font-medium text-gray-800 dark:text-white/90">
                {{ $estadisticas['total_usuarios'] }} / {{ $suscripcion->plan->getLimiteUsuarios() }}
              </span>
            </div>
          @else
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <i data-lucide="users" class="mr-3 h-5 w-5 text-blue-600 dark:text-blue-400"></i>
                <span class="text-gray-800 dark:text-white/90">Usuarios</span>
              </div>
              <span class="font-medium text-gray-800 dark:text-white/90">
                {{ $estadisticas['total_usuarios'] }} / Ilimitado
              </span>
            </div>
          @endif



          @if($suscripcion->plan->tieneLimiteAlmacenamiento())
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <i data-lucide="hard-drive" class="mr-3 h-5 w-5 text-info-600 dark:text-info-400"></i>
                <span class="text-gray-800 dark:text-white/90">Almacenamiento</span>
              </div>
              <span class="font-medium text-gray-800 dark:text-white/90">
                0 / {{ $suscripcion->plan->getLimiteAlmacenamiento() }} GB
              </span>
            </div>
          @else
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <i data-lucide="hard-drive" class="mr-3 h-5 w-5 text-info-600 dark:text-info-400"></i>
                <span class="text-gray-800 dark:text-white/90">Almacenamiento</span>
              </div>
              <span class="font-medium text-gray-800 dark:text-white/90">
                0 / Ilimitado
              </span>
            </div>
          @endif

          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <i data-lucide="building" class="mr-3 h-5 w-5 text-success-600 dark:text-success-400"></i>
              <span class="text-gray-800 dark:text-white/90">Empresas</span>
            </div>
            <span class="font-medium text-gray-800 dark:text-white/90">
              {{ $estadisticas['empresas_activas'] }} / {{ $suscripcion->cantidad_empresas_permitidas }}
            </span>
          </div>
        </div>

        <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
          <a href="{{ route('dashboard.suscripcion.planes') }}" 
             class="text-sm text-blue-600 dark:text-blue-400 hover:underline">
            Ver otros planes →
          </a>
        </div>
      </div>

      <!-- Características del Plan -->
      <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
        <h3 class="mb-6 text-lg font-semibold text-gray-800 dark:text-white/90">
          Características Incluidas
        </h3>
        
        <div class="space-y-3">
          @if($suscripcion->plan->caracteristicas && count($suscripcion->plan->caracteristicas) > 0)
            @foreach($suscripcion->plan->caracteristicas as $caracteristica)
              <div class="flex items-center">
                <i data-lucide="check" class="mr-3 h-4 w-4 text-success-600 dark:text-success-400"></i>
                <span class="text-gray-800 dark:text-white/90">{{ $caracteristica }}</span>
              </div>
            @endforeach
          @else
            <div class="text-center py-8">
              <i data-lucide="info" class="mx-auto h-12 w-12 text-gray-400 mb-4"></i>
              <p class="text-gray-500 dark:text-gray-400">No hay características específicas definidas para este plan</p>
            </div>
          @endif
        </div>
      </div>
    </div>

    <!-- Recomendaciones -->
    <div class="mt-6 overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
      <h3 class="mb-4 text-lg font-semibold text-gray-800 dark:text-white/90">
        Recomendaciones
      </h3>
      
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">


        @if($suscripcion->plan->usuarios_limite && ($estadisticas['total_usuarios'] / $suscripcion->plan->usuarios_limite) > 0.8)
          <div class="flex items-start">
            <i data-lucide="users" class="mr-3 h-5 w-5 text-blue-600 dark:text-blue-400 mt-0.5"></i>
            <div>
              <p class="font-medium text-gray-800 dark:text-white/90">Límite de usuarios próximo</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">Estás cerca del límite de usuarios. Considera actualizar tu plan.</p>
            </div>
          </div>
        @endif



        @if($suscripcion->diasRestantes() !== null && $suscripcion->diasRestantes() <= 7)
          <div class="flex items-start">
            <i data-lucide="calendar" class="mr-3 h-5 w-5 text-error-600 dark:text-error-400 mt-0.5"></i>
            <div>
              <p class="font-medium text-gray-800 dark:text-white/90">Suscripción próxima a vencer</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">Tu suscripción vence en {{ $suscripcion->diasRestantes() }} días.</p>
            </div>
          </div>
        @endif
      </div>
    </div>
  @else
    <div class="text-center py-12">
      <i data-lucide="credit-card" class="mx-auto h-16 w-16 text-gray-400 mb-4"></i>
      <h3 class="text-lg font-medium text-gray-800 dark:text-white/90 mb-2">No tienes una suscripción activa</h3>
      <p class="text-gray-500 dark:text-gray-400 mb-6">Necesitas una suscripción para ver las estadísticas de uso</p>
      <a href="{{ route('dashboard.suscripcion.planes') }}" 
         class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-3 focus:ring-blue-500/10 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-200">
        Ver Planes Disponibles
      </a>
    </div>
  @endif
</div>
@endsection