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

@extends('layouts/layoutMaster')

@section('title', 'Herramientas')

@section('page-style')
  <style>
    .tool-hero {
      background: linear-gradient(135deg, #5562ff 0%, #7a4dfd 45%, #9f45f9 100%);
      color: #fff;
    }
    .tool-hero .card-body {
      padding: 2.5rem 2.5rem;
    }
    .tool-hero .badge {
      background-color: rgba(255, 255, 255, 0.2);
      color: #ffffff;
      letter-spacing: 0.02em;
    }
    .tool-hero .metric-value {
      font-size: 1.875rem;
      font-weight: 700;
      line-height: 1.2;
    }
    .tool-hero .metric-label {
      letter-spacing: 0.08em;
      font-size: 0.75rem;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.7);
    }
    .tool-textarea {
      font-family: var(--bs-font-monospace);
      min-height: 320px;
      resize: vertical;
    }
    .tool-textarea:focus {
      box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.25);
    }
    .tool-output {
      background-color: #f8f9fb;
    }
    .tool-actions .btn {
      min-width: 5.25rem;
    }
    .tool-summary-badge {
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    @media (max-width: 991.98px) {
      .tool-hero .card-body {
        padding: 2rem 1.75rem;
      }
    }
  </style>
@endsection

@section('page-script')
  @vite('resources/assets/js/admin/tools/metrics-converter.js')
@endsection

@section('content')
<div data-page="metrics-tools">
  <div class="card tool-hero border-0 shadow-sm mb-4">
    <div class="card-body d-flex flex-column flex-lg-row align-items-start align-items-lg-center gap-4">
      <div class="flex-grow-1">
        <span class="badge rounded-pill px-3 py-2 mb-3">Productividad</span>
        <h3 class="mb-2 text-white">Herramientas internas</h3>
        <p class="mb-0 fs-6" style="color: rgba(255, 255, 255, 0.82);">
          Convierte al instante los reportes del nuevo portal de GiGi Delivery (formato con columnas separadas por líneas) al histórico compatible con tus plantillas de Excel.
        </p>
      </div>
      <div class="d-flex flex-wrap gap-4 text-center">
        <div>
          <div class="metric-value" id="tools-counter-processed">0</div>
          <div class="metric-label">Filas exportadas</div>
        </div>
        <div>
          <div class="metric-value" id="tools-counter-warnings">0</div>
          <div class="metric-label">Incidencias</div>
        </div>
        <div>
          <div class="metric-value fs-5" id="tools-counter-updated">--:--</div>
          <div class="metric-label">Última conversión</div>
        </div>
      </div>
    </div>
  </div>

  <div id="tools-alert" class="alert d-none" role="alert"></div>

  <div class="row g-4">
    <div class="col-lg-6">
      <div class="card h-100 shadow-sm">
        <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
          <div>
            <h5 class="card-title mb-1">Entrada desde GiGi Delivery</h5>
            <small class="text-muted">Pega el bloque tal y como se descarga del portal (Fecha/Rider, Delegación, Transporte, Ciudad y Métricas).</small>
          </div>
          <div class="tool-actions btn-group" role="group">
            <button type="button" class="btn btn-sm btn-outline-secondary" data-tools="sample">
              <i class="icon-base ti tabler-template me-1"></i>Ejemplo
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary" data-tools="clear">
              <i class="icon-base ti tabler-eraser me-1"></i>Limpiar
            </button>
          </div>
        </div>
        <div class="card-body">
          <textarea class="form-control tool-textarea" rows="16" data-tools="input" placeholder="05/10/2025	4118833&#10;GIGI DELIVERY, S.L&#10;Bici&#10;GRO&#10;16.5 0.00% 10.00% 0.00% 7.9h 2.09 17.78m 0.00%"></textarea>
          <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mt-3">
            <div class="text-muted small">
              Consejo: pulsa <span class="fw-semibold">Ctrl/Cmd + Enter</span> para convertir directamente.
            </div>
            <button type="button" class="btn btn-primary" data-tools="convert">
              <i class="icon-base ti tabler-wand me-1"></i>
              Convertir a formato histórico
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card h-100 shadow-sm">
        <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
          <div>
            <h5 class="card-title mb-1">Salida lista para Excel</h5>
            <small class="text-muted"><span id="tools-output-lines">0</span> líneas preparadas para pegar o guardar.</small>
          </div>
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-sm btn-outline-primary" data-tools="copy">
              <i class="icon-base ti tabler-copy me-1"></i>Copiar
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary" data-tools="download">
              <i class="icon-base ti tabler-download me-1"></i>Descargar
            </button>
          </div>
        </div>
        <div class="card-body">
          <textarea class="form-control tool-textarea tool-output" rows="16" data-tools="output" readonly></textarea>
          <div class="mt-3">
            <div class="small text-muted mb-1">Resumen rápido</div>
            <div class="d-flex flex-wrap gap-2">
              <span class="badge bg-label-primary text-primary tool-summary-badge d-none" data-tools="badge-city"></span>
              <span class="badge bg-label-success text-success tool-summary-badge d-none" data-tools="badge-riders"></span>
              <span class="badge bg-label-info text-info tool-summary-badge d-none" data-tools="badge-cash"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card mt-4 shadow-sm">
    <div class="card-header">
      <h6 class="mb-0">Cómo funciona</h6>
    </div>
    <div class="card-body">
      <ol class="list-unstyled d-flex flex-column gap-2 mb-0">
        <li>
          <span class="badge bg-label-primary me-2">1</span>
          Exporta o copia las métricas desde el portal nuevo (cada rider ocupa cinco líneas consecutivas: Fecha/Rider, Delegación, Transporte, Ciudad y Métricas).
        </li>
        <li>
          <span class="badge bg-label-primary me-2">2</span>
          Pega el bloque en la caja de entrada y pulsa <strong>Convertir</strong> (o usa Ctrl/Cmd + Enter).
        </li>
        <li>
          <span class="badge bg-label-primary me-2">3</span>
          Copia o descarga el resultado en TSV y pégalo en tu plantilla de seguimiento histórico.
        </li>
      </ol>
    </div>
  </div>
</div>
@endsection