<!DOCTYPE html>

<html lang="es">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Portal de Rendimiento - Atletas</title>

  <!-- PWA Metadata -->

  <meta name="theme-color" content="#0d1117">

  <meta name="apple-mobile-web-app-capable" content="yes">

  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

  <link rel="manifest" href="data:application/manifest+json;base64,ewogICJuYW1lIjogIlBvcnRhbCBkZSBSZW5kaW1pZW50byBBdGzDqXRpY28iLAogICJzaG9ydF9uYW1lIjogIkF0bGV0YXNBSiIsCiAgInN0YXJ0X3VybCI6ICIuL2luZGV4Lmh0bWwiLAogICJkaXNwbGF5IjogInN0YW5kYWxvbmUiLAogICJiYWNrZ3JvdW5kX2NvbG9yIjogIiMwZDExMTciLAogICJ0aGVtZV9jb2xvciI6ICIjMGI1ZWQ3Igp9">

  <!-- Tailwind CSS & Lucide Icons -->

  <script src="https://cdn.tailwindcss.com"></script>

  <script src="https://unpkg.com/lucide@latest"></script>

  <!-- Supabase JS Client -->

  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

  <style>

    body {

      background-color: #0b0f17;

      color: #e2e8f0;

      font-family: system-ui, -apple-system, sans-serif;

    }

    .accent-glow {

      box-shadow: 0 0 15px rgba(6, 182, 212, 0.25);

    }

    .card-dark {

      background-color: #131b2e;

      border: 1px solid #1e293b;

    }

  </style>

</head>

<body class="min-h-screen flex flex-col pb-20 md:pb-0">

  <!-- Header -->

  <header class="card-dark sticky top-0 z-50 border-b border-slate-800 px-6 py-4 flex justify-between items-center">

    <div class="flex items-center space-x-3">

      <!-- Logo Shark Icon -->

      <div class="bg-cyan-500/10 p-2 rounded-xl border border-cyan-500/30 text-cyan-400 accent-glow">

        <i data-lucide="waves" class="w-6 h-6"></i>

      </div>

      <div>

        <h1 class="font-bold text-lg text-white tracking-wide flex items-center gap-2">

          SHARK ATHLETICS <span class="text-xs bg-cyan-950 text-cyan-400 px-2 py-0.5 rounded border border-cyan-800">PRO</span>

        </h1>

        <p class="text-xs text-slate-400">Portal de Control & Rendimiento</p>

      </div>

    </div>

    <div id="connectionStatus" class="flex items-center gap-2 text-xs text-emerald-400 bg-emerald-950/50 border border-emerald-800/50 px-3 py-1.5 rounded-full">

      <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>

      Supabase Conectado

    </div>

  </header>

  <!-- Main Container -->

  <main class="flex-1 max-w-6xl w-full mx-auto p-4 md:p-6 space-y-6">

    <!-- Navigation Tabs -->

    <div class="flex border-b border-slate-800 space-x-4">

      <button onclick="switchTab('roster')" id="tab-roster" class="py-2 px-4 text-cyan-400 border-b-2 border-cyan-400 font-medium text-sm flex items-center gap-2">

        <i data-lucide="users" class="w-4 h-4"></i> Atletas

      </button>

      <button onclick="switchTab('metrics')" id="tab-metrics" class="py-2 px-4 text-slate-400 border-b-2 border-transparent hover:text-slate-200 font-medium text-sm flex items-center gap-2">

        <i data-lucide="activity" class="w-4 h-4"></i> Métricas & Evaluación

      </button>

      <button onclick="switchTab('logs')" id="tab-logs" class="py-2 px-4 text-slate-400 border-b-2 border-transparent hover:text-slate-200 font-medium text-sm flex items-center gap-2">

        <i data-lucide="clipboard-list" class="w-4 h-4"></i> Bitácora

      </button>

    </div>

    <!-- Section: Roster -->

    <section id="sec-roster" class="space-y-4">

      <div class="flex justify-between items-center">

        <h2 class="text-xl font-bold text-white">Lista de Atletas</h2>

        <button onclick="openModal('athlete')" class="bg-cyan-600 hover:bg-cyan-500 text-white px-4 py-2 rounded-lg text-sm font-semibold flex items-center gap-2 accent-glow">

          <i data-lucide="user-plus" class="w-4 h-4"></i> Nuevo Atleta

        </button>

      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="athletesGrid">

        <div class="card-dark p-4 rounded-xl flex items-center space-x-4">

          <div class="w-12 h-12 rounded-full bg-cyan-950 border border-cyan-700 flex items-center justify-center font-bold text-cyan-400">

            JD

          </div>

          <div>

            <h3 class="font-bold text-white">Juan Delgado</h3>

            <p class="text-xs text-slate-400">Categoría: Elite | Estilo: Libre</p>

            <span class="inline-block mt-1 text-[10px] bg-emerald-950 text-emerald-400 px-2 py-0.5 rounded border border-emerald-800">Activo</span>

          </div>

        </div>

      </div>

    </section>

    <!-- Section: Metrics -->

    <section id="sec-metrics" class="space-y-4 hidden">

      <div class="flex justify-between items-center">

        <h2 class="text-xl font-bold text-white">Registro de Métricas</h2>

        <button onclick="openModal('metric')" class="bg-cyan-600 hover:bg-cyan-500 text-white px-4 py-2 rounded-lg text-sm font-semibold flex items-center gap-2">

          <i data-lucide="plus-circle" class="w-4 h-4"></i> Registrar Tiempo

        </button>

      </div>

      <div class="card-dark p-4 rounded-xl overflow-x-auto">

        <table class="w-full text-left text-sm text-slate-300">

          <thead class="text-xs uppercase bg-slate-900/50 text-slate-400 border-b border-slate-800">

            <tr>

              <th class="p-3">Atleta</th>

              <th class="p-3">Prueba</th>

              <th class="p-3">Tiempo</th>

              <th class="p-3">Fecha</th>

            </tr>

          </thead>

          <tbody id="metricsTable">

            <tr class="border-b border-slate-800/50">

              <td class="p-3 font-medium text-white">Juan Delgado</td>

              <td class="p-3">100m Libre</td>

              <td class="p-3 text-cyan-400 font-mono">00:54.12</td>

              <td class="p-3 text-slate-500">2026-03-28</td>

            </tr>

          </tbody>

        </table>

      </div>

    </section>

    <!-- Section: Logs -->

    <section id="sec-logs" class="space-y-4 hidden">

      <h2 class="text-xl font-bold text-white">Bitácora de Entrenamientos</h2>

      <div class="card-dark p-6 rounded-xl space-y-3">

        <p class="text-sm text-slate-400">Espacio para notas diarias del entrenador, volúmenes de entrenamiento y observaciones de sesión.</p>

        <textarea class="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-cyan-500 text-sm" rows="4" placeholder="Escribe la bitácora de hoy..."></textarea>

        <button class="bg-slate-800 hover:bg-slate-700 text-white px-4 py-2 rounded-lg text-sm font-medium">Guardar Nota</button>

      </div>

    </section>

  </main>

  <script>

    // Inicializar Iconos

    lucide.createIcons();

    // Supabase Config

    const SUPABASE_URL = "https://ynysrxglxbenvbhlmmuj.supabase.co";

    const SUPABASE_KEY = "sb_publishable_9llhszkulRTvO-jr1VOwvA_Cg-I9OjH";

    const supabaseClient = supabase.createClient(SUPABASE_URL, SUPABASE_KEY);

    // Cambiar Pestanas

    function switchTab(tab) {

      ['roster', 'metrics', 'logs'].forEach(t => {

        document.getElementById(`sec-${t}`).classList.add('hidden');

        document.getElementById(`tab-${t}`).className = "py-2 px-4 text-slate-400 border-b-2 border-transparent hover:text-slate-200 font-medium text-sm flex items-center gap-2";

      });

      document.getElementById(`sec-${tab}`).classList.remove('hidden');

      document.getElementById(`tab-${tab}`).className = "py-2 px-4 text-cyan-400 border-b-2 border-cyan-400 font-medium text-sm flex items-center gap-2";

    }

    function openModal(type) {

      alert(`Función para añadir ${type} lista para vincular a tu tabla en Supabase.`);

    }

  </script>

</body>

</html>