/* Capitán Fantasy — UI kit (matches src/index.css design system) */

// lucide-style stroke icons (paths approximated to lucide)
const I = {
  users: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75',
  trophy: 'M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22M18 2H6v7a6 6 0 0 0 12 0V2Z',
  shield: 'M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z',
  radio: 'M4.9 19.1C1 15.2 1 8.8 4.9 4.9M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5M19.1 4.9C23 8.8 23 15.2 19.1 19.1M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2',
  bars: 'M3 3v18h18M18 17V9M13 17V5M8 17v-3',
  user: 'M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8',
  more: 'M5 12h.01M12 12h.01M19 12h.01',
  globe: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10',
  swords: 'M14.5 17.5 3 6V3h3l11.5 11.5M13 19l6-6M16 16l4 4M19 21l2-2M14.5 6.5 18 3h3v3l-3.5 3.5M5 14l-2 2M3 19l2 2M3 17l4 4',
  zap: 'M13 2 3 14h9l-1 8 10-12h-9z',
  skull: 'M8 20v2h8v-2M12.5 17l-.5-1-.5 1h1ZM16 20a2 2 0 0 0 1.56-3.25 8 8 0 1 0-11.12 0A2 2 0 0 0 8 20M9 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2M15 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2',
  flame: 'M12 3c1 3-2 4-2 7a2 2 0 0 0 4 0c2 2 2 3 2 5a4 4 0 0 1-8 0c0-4 4-5 4-12Z',
  target: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4',
  list: 'M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01',
  book: 'M4 19.5A2.5 2.5 0 0 1 6.5 17H20M4 19.5A2.5 2.5 0 0 0 6.5 22H20V2H6.5A2.5 2.5 0 0 0 4 4.5z',
  coins: 'M9 14a6 6 0 1 0 0-12 6 6 0 0 0 0 12ZM15.5 9.5a6 6 0 1 1-6 9',
  bag: 'M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0',
  cal: 'M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z',
  gift: 'M20 12v10H4V12M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z',
  save: 'M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2zM17 21v-8H7v8M7 3v5h8',
  check: 'M20 6 9 17l-5-5',
  plus: 'M12 5v14M5 12h14',
  x: 'M18 6 6 18M6 6l12 12',
  chevR: 'M9 18l6-6-6-6',
  arrowR: 'M5 12h14M13 6l6 6-6 6',
  chevL: 'M15 18l-6-6 6-6',
  chevD: 'M6 9l6 6 6-6',
  bell: 'M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0',
  star: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z',
  fire: 'M12 3c1 3-2 4-2 7a2 2 0 0 0 4 0c2 2 2 3 2 5a4 4 0 0 1-8 0c0-4 4-5 4-12Z',
  lock: 'M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM7 11V7a5 5 0 0 1 10 0v4',
  clock: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20M12 6v6l4 2',
  arrowUp: 'M12 19V5M5 12l7-7 7 7',
  arrowDown: 'M12 5v14M19 12l-7 7-7-7',
  whistle: 'M2 12a5 5 0 1 0 10 0 5 5 0 0 0-10 0M12 9h10v3h-3l-1.5 3M7 12h.01',
  settings: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-2.82 1.17V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15H4.5a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 6 9.4l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 12 4.6V4.5a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 2.82 1.17l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9z',
  share: 'M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13',
  logout: 'M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9',
  crown: 'M2 18h20l-2-9-5 4-3-7-3 7-5-4z',
  ticket: 'M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2 2 2 0 0 0 0 4 2 2 0 0 1 2 2 2 2 0 0 1-2 2H5a2 2 0 0 1-2-2 2 2 0 0 0 0-4 2 2 0 0 1-2-2zM13 5v14',
  trend: 'M22 7l-8.5 8.5-5-5L2 17',
  sparkle: 'M12 3l1.9 5.8a2 2 0 0 0 1.3 1.3L21 12l-5.8 1.9a2 2 0 0 0-1.3 1.3L12 21l-1.9-5.8a2 2 0 0 0-1.3-1.3L3 12l5.8-1.9a2 2 0 0 0 1.3-1.3z',
};

function Icon({ name, size = 22, color = 'currentColor', sw = 2, style, fill = 'none' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}>
      <path d={I[name] || I.star} />
    </svg>
  );
}

const hsl = (v) => `hsl(${v})`;
const C = {
  bg: 'hsl(var(--background))', card: 'hsl(var(--surface))', cardBorder: 'hsl(var(--surface-border))',
  border: 'hsl(var(--border))', primary: 'hsl(var(--primary))', gold: 'hsl(var(--gold))',
  goldDark: 'hsl(var(--gold-dark))', pitch: 'hsl(var(--pitch))', pitchLight: 'hsl(var(--pitch-light))',
  silver: 'hsl(var(--silver))', bronze: 'hsl(var(--bronze))', info: 'hsl(var(--info))',
  success: 'hsl(var(--success))', destructive: 'hsl(var(--destructive))', warning: 'hsl(var(--warning))',
  fg: 'hsl(var(--foreground))', mut: 'hsl(var(--muted-foreground))', secondary: 'hsl(var(--secondary))',
};
const tierColor = { 'all-star': C.gold, 'professional': C.primary, 'canchero': C.info, 'novato': C.silver, 'amateur': C.mut };
const posColor = { GK: C.gold, DEF: C.info, MID: C.success, FWD: C.primary };
const posLabel = { GK: 'POR', DEF: 'DEF', MID: 'MED', FWD: 'DEL' };

// Team crest — real club logo (escudo oficial), monogram fallback
const SHIELD = 'polygon(0% 0%, 100% 0%, 100% 62%, 50% 100%, 0% 62%)';
function Crest({ team, size = 34 }) {
  const t = (window.CF.teams[team]) || { short: '?', c1: '#444', c2: '#222' };
  if (t.logo) {
    return (
      <div style={{ width: size, height: size, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src={t.logo} alt={t.name} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'contain', filter: 'drop-shadow(0 1px 3px rgba(0,0,0,0.5))' }} />
      </div>
    );
  }
  return (
    <div style={{ width: size, height: size, flexShrink: 0, position: 'relative', filter: 'drop-shadow(0 2px 3px rgba(0,0,0,0.5))' }}>
      <div style={{ width: '100%', height: '100%', clipPath: SHIELD, WebkitClipPath: SHIELD, background: `linear-gradient(135deg, ${t.c1} 0 50%, ${t.c2} 50% 100%)`, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', paddingTop: size * 0.16 }}>
        <span style={{ fontWeight: 900, fontSize: size * 0.3, color: '#fff', letterSpacing: -0.5, textShadow: '0 1px 2px rgba(0,0,0,0.7)' }}>{t.short}</span>
      </div>
    </div>
  );
}

// Player headshot avatar — photo in circle, team-color ring, club logo badge
function PlayerAvatar({ player, size = 38, badge = true }) {
  const t = window.CF.teams[player.team] || { c1: '#444', c2: '#222' };
  return (
    <div style={{ width: size, height: size, flexShrink: 0, position: 'relative' }}>
      <div style={{ width: size, height: size, borderRadius: 999, overflow: 'hidden', background: `linear-gradient(160deg, ${t.c1}, ${t.c2})`, boxShadow: `inset 0 0 0 2px ${t.c1}`, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
        {player.photo
          ? <img src={player.photo} alt={player.name} loading="lazy" style={{ width: '108%', height: '108%', objectFit: 'cover', objectPosition: 'top center' }} />
          : <span style={{ fontWeight: 800, fontSize: size * 0.34, color: '#fff', alignSelf: 'center' }}>{player.name.split(' ').slice(-1)[0][0]}</span>}
      </div>
      {badge && t.logo && (
        <div style={{ position: 'absolute', bottom: -2, right: -3, width: size * 0.48, height: size * 0.48, borderRadius: 999, background: 'hsl(var(--surface))', border: '1.5px solid hsl(var(--background))', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
          <img src={t.logo} alt="" loading="lazy" style={{ width: '78%', height: '78%', objectFit: 'contain' }} />
        </div>
      )}
    </div>
  );
}

// Tier badge (CF .stat-badge + .tier-*)
function TierBadge({ tier, small }) {
  const t = window.CF.TIERS[tier] || { label: tier };
  const col = tierColor[tier] || C.mut;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 999,
      padding: small ? '2px 7px' : '3px 9px', fontSize: small ? 10 : 11, fontWeight: 700,
      color: col, background: col.replace('hsl', 'hsla').replace(')', ' / 0.12)'),
      border: `1px solid ${col.replace('hsl', 'hsla').replace(')', ' / 0.2)')}`,
    }}>{t.label}</span>
  );
}

function PosPill({ pos, size = 'sm' }) {
  const col = posColor[pos];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      width: size === 'sm' ? 30 : 34, padding: '2px 0', borderRadius: 6, fontSize: 10, fontWeight: 800, letterSpacing: 0.3,
      color: col, background: col.replace('hsl', 'hsla').replace(')', ' / 0.14)'),
    }}>{posLabel[pos]}</span>
  );
}

// Button (CF: primary = gradient, etc.)
function Btn({ children, variant = 'primary', size = 'md', full, onClick, icon, style, disabled }) {
  const pads = { sm: '8px 14px', md: '12px 18px', lg: '15px 22px' };
  const fs = { sm: 13, md: 14, lg: 15 };
  const variants = {
    primary: { background: C.primary, color: '#fff', border: 'none' },
    gold: { background: 'linear-gradient(135deg, hsl(var(--gold)) 0%, hsl(var(--gold-dark)) 100%)', color: '#1a1505', border: 'none' },
    pitch: { background: 'linear-gradient(135deg, hsl(var(--pitch)) 0%, hsl(var(--pitch-light)) 100%)', color: '#fff', border: 'none' },
    secondary: { background: C.secondary, color: C.fg, border: `1px solid ${C.border}` },
    ghost: { background: 'transparent', color: C.mut, border: `1px solid ${C.border}` },
    outline: { background: 'transparent', color: C.primary, border: `1px solid ${C.primary.replace('hsl', 'hsla').replace(')', ' / 0.4)')}` },
  };
  return (
    <button onClick={disabled ? undefined : onClick} style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      width: full ? '100%' : 'auto', padding: pads[size], borderRadius: 'var(--radius)',
      fontFamily: 'inherit', fontWeight: 700, fontSize: fs[size], cursor: disabled ? 'default' : 'pointer',
      opacity: disabled ? 0.45 : 1, transition: 'all .15s', ...variants[variant], ...style,
    }}>
      {icon && <Icon name={icon} size={size === 'sm' ? 15 : 17} />}
      {children}
    </button>
  );
}

function Card({ children, style, onClick, pad = 16, hover }) {
  return (
    <div onClick={onClick} className="glass-card" style={{
      borderRadius: 'var(--radius)', padding: pad, cursor: onClick ? 'pointer' : 'default',
      transition: 'all .18s', ...style,
    }}>{children}</div>
  );
}

function SectionHead({ title, sub, action, onAction, icon }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
        {icon && <Icon name={icon} size={19} color={C.primary} />}
        <div>
          <h3 style={{ fontSize: 18, fontWeight: 800 }}>{title}</h3>
          {sub && <div style={{ fontSize: 12.5, color: C.mut, marginTop: 2, fontWeight: 500 }}>{sub}</div>}
        </div>
      </div>
      {action && <button onClick={onAction} style={{ background: 'none', border: 'none', cursor: 'pointer', color: C.primary, fontFamily: 'inherit', fontWeight: 700, fontSize: 13 }}>{action}</button>}
    </div>
  );
}

function LiveDot({ size = 8, color }) {
  const c = color || C.destructive;
  return (
    <span style={{ position: 'relative', display: 'inline-flex', width: size, height: size }}>
      <span style={{ position: 'absolute', inset: 0, borderRadius: 999, background: c, opacity: 0.75, animation: 'ping 1.3s cubic-bezier(0,0,.2,1) infinite' }} />
      <span style={{ position: 'relative', borderRadius: 999, width: size, height: size, background: c }} />
    </span>
  );
}

function LiveBadge({ minute, small }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: C.destructive.replace('hsl', 'hsla').replace(')', ' / 0.15)'), color: C.destructive, borderRadius: 6, padding: small ? '2px 7px' : '3px 9px', fontWeight: 800, fontSize: small ? 10 : 11, letterSpacing: 0.3 }}>
      <LiveDot size={6} />EN VIVO{minute != null ? ` ${minute}'` : ''}
    </span>
  );
}

// Player chip used on pitch — minimal: clean avatar + thin name, flat badges
function PitchPlayer({ p, isCaptain, onClick, points }) {
  return (
    <button onClick={onClick} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, width: 60, border: 'none', background: 'none', cursor: 'pointer', padding: 0 }}>
      <div style={{ position: 'relative' }}>
        <PlayerAvatar player={p} size={44} />
        {isCaptain && <span style={{ position: 'absolute', top: -4, left: -4, width: 17, height: 17, borderRadius: 999, background: C.gold, color: '#1a1505', fontSize: 10, fontWeight: 900, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1.5px solid hsl(var(--background))', zIndex: 2 }}>C</span>}
        {points != null && <span style={{ position: 'absolute', top: -5, right: -7, background: C.primary, color: '#fff', fontSize: 9.5, fontWeight: 800, padding: '1px 5px', borderRadius: 999, border: '1.5px solid hsl(var(--background))', zIndex: 2 }} className="num">{points}</span>}
      </div>
      <span style={{ fontSize: 10.5, fontWeight: 600, color: 'hsl(0 0% 100% / 0.9)', maxWidth: 60, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textShadow: '0 1px 2px rgba(0,0,0,0.6)' }}>{p.name.split(' ').slice(-1)[0]}</span>
    </button>
  );
}

// Empty pitch slot — minimal hairline
function EmptySlot({ pos, onClick }) {
  return (
    <button onClick={onClick} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, width: 60, border: 'none', background: 'none', cursor: 'pointer', padding: 0 }}>
      <div style={{ width: 44, height: 44, borderRadius: 999, border: '1.5px dashed hsl(0 0% 100% / 0.22)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name="plus" size={17} color="hsl(0 0% 100% / 0.5)" />
      </div>
      <span style={{ fontSize: 10, fontWeight: 600, color: 'hsl(0 0% 100% / 0.5)' }}>{posLabel[pos]}</span>
    </button>
  );
}

function Avatar({ name, size = 40, team }) {
  const initials = name.split(' ').map((w) => w[0]).slice(0, 2).join('').toUpperCase();
  return (
    <div style={{ width: size, height: size, borderRadius: 999, flexShrink: 0, background: team ? undefined : C.secondary, display: 'flex', alignItems: 'center', justifyContent: 'center', border: `1px solid ${C.border}`, overflow: 'hidden' }}>
      {team ? <Crest team={team} size={size} /> : <span style={{ fontWeight: 800, fontSize: size * 0.36, color: C.mut }}>{initials}</span>}
    </div>
  );
}

Object.assign(window, { Icon, I, C, tierColor, posColor, posLabel, Crest, PlayerAvatar, SHIELD, TierBadge, PosPill, Btn, Card, SectionHead, LiveDot, LiveBadge, PitchPlayer, EmptySlot, Avatar });