/* ==========================================================================
   UI primitives — Mentores Up! Steam
   Iconos (Lucide-inspired, outline), badges, frame mobile, etc.
   Expone componentes en window.* para uso entre archivos.
   ========================================================================== */

const { useState, useEffect, useMemo, useRef } = React;

// ---------- ICONOS (Lucide-style outline 24px, stroke 2) ----------
const iconBase = {
  width: 22, height: 22, viewBox: "0 0 24 24", fill: "none",
  stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round",
};

const Icon = {
  Home: (p) => <svg {...iconBase} {...p}><path d="M3 9.5 12 3l9 6.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1Z"/></svg>,
  List: (p) => <svg {...iconBase} {...p}><path d="M8 6h13M8 12h13M8 18h13"/><circle cx="3.5" cy="6" r="1"/><circle cx="3.5" cy="12" r="1"/><circle cx="3.5" cy="18" r="1"/></svg>,
  Trophy: (p) => <svg {...iconBase} {...p}><path d="M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4Z"/><path d="M17 4h3v3a3 3 0 0 1-3 3M7 4H4v3a3 3 0 0 0 3 3"/></svg>,
  User: (p) => <svg {...iconBase} {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>,
  ArrowLeft: (p) => <svg {...iconBase} {...p}><path d="M19 12H5M12 19l-7-7 7-7"/></svg>,
  ArrowRight: (p) => <svg {...iconBase} {...p}><path d="M5 12h14M12 5l7 7-7 7"/></svg>,
  Check: (p) => <svg {...iconBase} {...p}><path d="m5 12 5 5L20 7"/></svg>,
  X: (p) => <svg {...iconBase} {...p}><path d="M6 6l12 12M18 6 6 18"/></svg>,
  Play: (p) => <svg {...iconBase} {...p}><path d="M6 4v16l14-8L6 4Z"/></svg>,
  Search: (p) => <svg {...iconBase} {...p}><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>,
  Bell: (p) => <svg {...iconBase} {...p}><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>,
  Settings: (p) => <svg {...iconBase} {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></svg>,
  Clock: (p) => <svg {...iconBase} {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
  ChevronRight: (p) => <svg {...iconBase} {...p}><path d="m9 6 6 6-6 6"/></svg>,
  ChevronDown: (p) => <svg {...iconBase} {...p}><path d="m6 9 6 6 6-6"/></svg>,
  Code: (p) => <svg {...iconBase} {...p}><path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/></svg>,
  Cpu: (p) => <svg {...iconBase} {...p}><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 15h3M1 9h3M1 15h3"/></svg>,
  Palette: (p) => <svg {...iconBase} {...p}><path d="M12 3a9 9 0 1 0 0 18 1.5 1.5 0 0 0 1.06-2.56l-.94-.94a1.5 1.5 0 0 1 1.06-2.56H17a4 4 0 0 0 4-4 9 9 0 0 0-9-8Z"/><circle cx="7.5" cy="10.5" r="1"/><circle cx="12" cy="7.5" r="1"/><circle cx="16.5" cy="10.5" r="1"/></svg>,
  Gamepad: (p) => <svg {...iconBase} {...p}><line x1="6" y1="11" x2="10" y2="11"/><line x1="8" y1="9" x2="8" y2="13"/><line x1="15" y1="12" x2="15.01" y2="12"/><line x1="18" y1="10" x2="18.01" y2="10"/><rect x="2" y="6" width="20" height="12" rx="6"/></svg>,
  Sparkles: (p) => <svg {...iconBase} {...p}><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>,
  Info: (p) => <svg {...iconBase} {...p}><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/></svg>,
  Star: (p) => <svg {...iconBase} {...p}><path d="m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6-5.4-2.8L6.6 19.8l1-6L3.2 9.5l6.1-.9L12 3Z"/></svg>,
  Vs: (p) => <svg {...iconBase} {...p}><path d="M5 4 9 20M19 4l-4 16M3 12h18"/></svg>,
  Skip: (p) => <svg {...iconBase} {...p}><path d="M5 4v16M19 5l-9 7 9 7V5Z"/></svg>,
  Mail: (p) => <svg {...iconBase} {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>,
  Lock: (p) => <svg {...iconBase} {...p}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>,
  Eye: (p) => <svg {...iconBase} {...p}><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>,
  Logout: (p) => <svg {...iconBase} {...p}><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg>,
  Calendar: (p) => <svg {...iconBase} {...p}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 10h18"/></svg>,
  Users: (p) => <svg {...iconBase} {...p}><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0M17 11a4 4 0 0 0 0-8M22 21a6 6 0 0 0-4-5.7"/></svg>,
  Paperclip: (p) => <svg {...iconBase} {...p}><path d="M21 11.5 12 20.5a5 5 0 0 1-7-7l9-9a3.5 3.5 0 0 1 5 5l-9 9a2 2 0 0 1-3-3l8.5-8.5"/></svg>,
  Filter: (p) => <svg {...iconBase} {...p}><path d="M3 4h18l-7 9v7l-4-2v-5L3 4Z"/></svg>,
};

// ---------- CategoryBadge ----------
function CategoryBadge({ category }) {
  const data = window.MENTORES_DATA.CATEGORIES[category];
  if (!data) return null;
  return <span className={`badge badge-cat badge-${category}`}>{data.label}</span>;
}

function StageBadge({ stage }) {
  const data = window.MENTORES_DATA.STAGES[stage];
  if (!data) return null;
  return <span className={`badge badge-${stage}`}>{data.label}</span>;
}

// ---------- PhoneFrame: contenedor con bisel iPhone-like en desktop ----------
function PhoneFrame({ children, label }) {
  return (
    <div className="phone-frame">
      {label && <div className="phone-label">{label}</div>}
      <div className="phone-bezel">
        <div className="phone-notch"></div>
        <div className="phone-screen">{children}</div>
      </div>
    </div>
  );
}

// ---------- Tabbar fijo (móvil) ----------
// Nota: la pestaña "Ranking" se ha retirado expresamente del menú del mentor:
// el ranking es secreto hasta que la organización lo valide.
function TabBar({ active = "home", onChange = () => {} }) {
  const tabs = [
    { id: "home", label: "Grupos", icon: <Icon.Home/> },
    { id: "me", label: "Yo", icon: <Icon.User/> },
  ];
  return (
    <nav className="tabbar tabbar-2">
      {tabs.map(t => (
        <button key={t.id} className={`tab ${active === t.id ? "is-active" : ""}`} onClick={() => onChange(t.id)}>
          {t.icon}
          <span>{t.label}</span>
        </button>
      ))}
    </nav>
  );
}

// ---------- TopBar (escritorio) — mismo estilo que AdminAppShell ----------
function MentorTopBar({ active = "home", onChange = () => {}, onLogout = () => {} }) {
  const tabs = [
    { id: "home", label: "Grupos", icon: <Icon.Home width={16} height={16}/> },
    { id: "me",   label: "Yo",     icon: <Icon.User width={16} height={16}/> },
  ];
  return (
    <div className="mentor-topbar">
      <img src="assets/logo-mentores-app-blanco.png" alt="Mentores Up! Steam"/>
      <div style={{fontWeight:700, fontFamily:"var(--font-sans)"}}>Mentores · Up! Steam Ed. 7</div>
      <div className="spacer"/>
      <nav style={{display:"flex", gap:6}}>
        {tabs.map((t) => (
          <button key={t.id} className="btn btn-ghost btn-sm"
            style={{
              color: "white",
              background: active === t.id ? "rgba(255,255,255,.18)" : "transparent",
              fontWeight: active === t.id ? 700 : 500,
            }}
            onClick={() => onChange(t.id)}>
            {t.icon} {t.label}
          </button>
        ))}
        <button className="btn btn-ghost btn-sm" style={{color:"white"}} onClick={onLogout}>
          <Icon.Logout width={16} height={16}/> Salir
        </button>
      </nav>
    </div>
  );
}

// expose
Object.assign(window, { Icon, CategoryBadge, StageBadge, PhoneFrame, TabBar, MentorTopBar });