// CyberX Battle Pass — Reusable components (cards, rows, progress nodes)

// ─────────────────────────────────────────────────────────────
// Reward node — the card-on-the-track
// "free" or "premium" track row; size scales with focus state
// ─────────────────────────────────────────────────────────────
function RewardNode({
  level, tier, locked = false, claimed = false, current = false, isPremium = false,
  rewardKind = 'coins', rewardName = '500 XP',
  scale = 1, blocked = false,
}) {
  const w = 120 * scale, h = 152 * scale;
  const t = tier || tierFor(level);
  const isLegend = level >= 30;
  const border = current ? t.hi : (locked ? 'rgba(255,255,255,0.06)' : `${t.color}55`);
  const bg = current
    ? `linear-gradient(160deg, ${t.color}33, ${CX.card})`
    : isLegend
    ? `linear-gradient(160deg, #A855F722, ${CX.card})`
    : CX.card;

  return (
    <div style={{
      position: 'relative', width: w, height: h, flexShrink: 0,
      borderRadius: 10, background: bg,
      border: `1.5px solid ${border}`,
      overflow: 'hidden',
      boxShadow: current
        ? `0 0 0 1px ${t.hi}66, 0 0 22px ${t.color}55`
        : isPremium && !locked
        ? `0 0 12px ${CX.premiumGold}33`
        : 'none',
      opacity: locked && !current ? 0.55 : 1,
      transition: 'all .2s',
    }}>
      {/* level number strip */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        padding: '6px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        background: `linear-gradient(180deg, ${t.color}33, transparent)`,
        borderBottom: `1px solid ${t.color}33`,
      }}>
        <Display size={11} color={t.hi} tracking={0.18}>LVL</Display>
        <Display size={20} color={current ? '#fff' : t.hi} tracking={0}>{level}</Display>
      </div>

      {/* Premium / Free indicator (small left tab) */}
      {isPremium && (
        <div style={{
          position: 'absolute', top: 30, right: 4, padding: '2px 4px', borderRadius: 3,
          background: `${CX.premiumGold}22`, display: 'flex', alignItems: 'center', gap: 2,
        }}>
          <PremiumStar size={9}/>
        </div>
      )}

      {/* Icon area */}
      <div style={{
        position: 'absolute', top: 36, left: 0, right: 0, bottom: 42,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <RewardIcon kind={rewardKind} size={56 * scale} tier={locked ? '#3a3a44' : t.color}/>
        {locked && !current && (
          <div style={{
            position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: 'rgba(13,15,20,0.55)',
          }}>
            <svg width="22" height="24" viewBox="0 0 22 24"><path d="M5 11 L5 7 Q5 1 11 1 Q17 1 17 7 L17 11 M2 11 L20 11 L20 22 Q20 23 19 23 L3 23 Q2 23 2 22 Z" stroke={CX.textMute} strokeWidth="1.8" fill={CX.card} strokeLinejoin="round"/></svg>
          </div>
        )}
        {claimed && (
          <div style={{
            position: 'absolute', top: 4, right: 4,
            width: 22, height: 22, borderRadius: 11,
            background: CX.green, display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `0 0 8px ${CX.green}99`,
          }}>
            <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6 L5 9 L10 3" stroke="#0D0F14" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
        )}
      </div>

      {/* name */}
      <div style={{
        position: 'absolute', left: 8, right: 8, bottom: 8,
        fontFamily: FONT_BODY, fontSize: 11, lineHeight: 1.25,
        color: locked && !current ? CX.textMute : CX.white,
        textAlign: 'center', fontWeight: 500,
      }}>{rewardName}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Track pair (Free above / Premium below) — connected by line
// ─────────────────────────────────────────────────────────────
function LevelColumn({ level, freeReward, premReward, current = false, claimedFree = false, claimedPrem = false, locked = false, hasPremium = true }) {
  const t = tierFor(level);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0, flexShrink: 0 }}>
      <RewardNode
        level={level} tier={t}
        current={current}
        locked={locked && !claimedFree}
        claimed={claimedFree}
        rewardKind={freeReward?.kind || 'coins'}
        rewardName={freeReward?.name || '500 XP'}
      />
      {/* connector with FREE tag */}
      <div style={{
        position: 'relative', height: 28, width: 120,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{ position: 'absolute', top: 0, bottom: 0, left: '50%', width: 2, background: `${t.color}55`, transform: 'translateX(-50%)' }}/>
        <span style={{
          fontFamily: FONT_DISPLAY, fontSize: 10, letterSpacing: '0.2em',
          color: CX.textSec, background: CX.black, padding: '0 6px', position: 'relative', zIndex: 1,
        }}>FREE ▲ PREMIUM</span>
      </div>
      <RewardNode
        level={level} tier={t}
        current={current}
        locked={locked || !hasPremium}
        claimed={claimedPrem}
        isPremium
        rewardKind={premReward?.kind || 'hoodie'}
        rewardName={premReward?.name || 'Худи CyberX'}
      />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Task row card
// ─────────────────────────────────────────────────────────────
function TaskCard({
  icon = 'time', title, desc, xp = 100, progress, max,
  tierColor = CX.green, deadline, done = false, expiring = false,
  steam = false,
}) {
  const pct = progress != null ? Math.min(100, (progress / max) * 100) : 0;
  return (
    <div style={{
      background: CX.card, borderRadius: 12,
      border: `1px solid ${done ? `${CX.green}44` : expiring ? `${CX.danger}77` : tierColor + '33'}`,
      padding: 14, position: 'relative',
      boxShadow: expiring ? `0 0 16px ${CX.danger}33` : 'none',
    }}>
      {/* left tier accent */}
      <div style={{
        position: 'absolute', left: 0, top: 12, bottom: 12, width: 3, borderRadius: 2,
        background: done ? CX.green : expiring ? CX.danger : tierColor,
        boxShadow: `0 0 8px ${done ? CX.green : expiring ? CX.danger : tierColor}88`,
      }}/>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
        <div style={{
          width: 40, height: 40, borderRadius: 8, flexShrink: 0,
          background: `${tierColor}1F`, border: `1px solid ${tierColor}44`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <TaskIcon kind={icon} size={22} active color={done ? CX.green : tierColor}/>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
            <div style={{
              fontFamily: FONT_BODY, fontWeight: 600, fontSize: 14, color: CX.white,
              letterSpacing: 0.1,
            }}>{title}</div>
            <div style={{
              fontFamily: FONT_MONO, fontSize: 13, color: done ? CX.green : CX.amber, fontWeight: 600, flexShrink: 0,
            }}>+<MonoNum n={xp}/> XP</div>
          </div>
          <div style={{
            fontFamily: FONT_BODY, fontSize: 12, color: CX.textSec, marginTop: 3,
            lineHeight: 1.4,
          }}>{desc}</div>
          {progress != null && (
            <div style={{ marginTop: 8 }}>
              <XPBar value={progress} max={max} color={done ? CX.green : tierColor} height={5} glow={false}/>
              <div style={{
                display: 'flex', justifyContent: 'space-between', marginTop: 4,
                fontFamily: FONT_MONO, fontSize: 10.5, color: CX.textMute,
              }}>
                <span>{typeof progress === 'string' ? progress : `${progress} / ${max}`}</span>
                <span>{done ? 'ЗАВЕРШЕНО ✓' : deadline}</span>
              </div>
            </div>
          )}
          {progress == null && deadline && (
            <div style={{
              marginTop: 6, fontFamily: FONT_MONO, fontSize: 10.5,
              color: expiring ? CX.danger : CX.textMute,
            }}>
              {expiring ? '⏰ ' : ''}{deadline}
            </div>
          )}
        </div>
      </div>
      {steam && (
        <div style={{
          position: 'absolute', top: 8, right: 8,
          padding: '2px 6px', borderRadius: 3, background: '#171a21',
          fontFamily: FONT_BODY, fontSize: 9, color: '#66c0f4', fontWeight: 600,
          letterSpacing: 1, textTransform: 'uppercase',
        }}>STEAM</div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Avatar with tier ring
// ─────────────────────────────────────────────────────────────
function Avatar({ size = 64, tier, initials = 'AX', src }) {
  const t = tier || TIERS.knight;
  return (
    <div style={{
      width: size, height: size, position: 'relative', flexShrink: 0,
    }}>
      <div style={{
        position: 'absolute', inset: 0, borderRadius: '50%',
        background: t.grad, padding: 2.5, boxShadow: `0 0 14px ${t.color}66`,
      }}>
        <div style={{
          width: '100%', height: '100%', borderRadius: '50%',
          background: CX.cardHi, display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: FONT_DISPLAY, fontSize: size * 0.42, color: CX.white, letterSpacing: '0.04em',
          backgroundImage: src ? `url(${src})` : 'none', backgroundSize: 'cover', backgroundPosition: 'center',
        }}>{!src && initials}</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Bottom nav
// ─────────────────────────────────────────────────────────────
function BottomNav({ active = 'pass' }) {
  const items = [
    { id: 'home', label: 'Главная', icon: <path d="M3 11 L12 3 L21 11 L21 21 L14 21 L14 14 L10 14 L10 21 L3 21 Z"/> },
    { id: 'pass', label: 'Pass', icon: <path d="M12 2 L4 6 L4 13 Q4 19 12 22 Q20 19 20 13 L20 6 Z M9 12 L11 14 L15 10"/> },
    { id: 'tops', label: 'Топы', icon: <path d="M5 4 L5 10 Q5 14 12 14 Q19 14 19 10 L19 4 M5 6 L2 6 L2 9 Q2 11 5 11 M19 6 L22 6 L22 9 Q22 11 19 11 M12 14 L12 18 M8 21 L16 21 L15 18 L9 18 Z"/> },
    { id: 'profile', label: 'Профиль', icon: <path d="M12 12 A4 4 0 1 0 12 4 A4 4 0 0 0 12 12 M4 22 Q4 14 12 14 Q20 14 20 22"/> },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      background: 'rgba(13,15,20,0.92)',
      backdropFilter: 'blur(20px)',
      WebkitBackdropFilter: 'blur(20px)',
      borderTop: `1px solid ${CX.line}`,
      paddingTop: 8, paddingBottom: 28, paddingLeft: 8, paddingRight: 8,
      display: 'flex', justifyContent: 'space-around',
      zIndex: 20,
    }}>
      {items.map(it => {
        const on = it.id === active;
        return (
          <div key={it.id} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
            padding: '6px 12px',
            flex: 1,
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill={on ? CX.red : 'none'}
              stroke={on ? CX.red : CX.textMute} strokeWidth="1.8" strokeLinejoin="round" strokeLinecap="round"
              style={{ filter: on ? `drop-shadow(0 0 6px ${CX.red}77)` : 'none' }}>
              {it.icon}
            </svg>
            <span style={{
              fontFamily: FONT_BODY, fontSize: 10.5, fontWeight: on ? 600 : 500,
              color: on ? CX.red : CX.textMute, letterSpacing: 0.2,
            }}>{it.label}</span>
          </div>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Header bar (custom — replaces iOS large title)
// ─────────────────────────────────────────────────────────────
function CXHeader({ title = 'СЕЗОН 1: ОПЕРАЦИЯ COPPER', sub, back = false }) {
  return (
    <div style={{
      paddingTop: 56, paddingBottom: 10,
      paddingLeft: 16, paddingRight: 16,
      display: 'flex', alignItems: 'center', gap: 12,
      background: 'linear-gradient(180deg, rgba(13,15,20,1), rgba(13,15,20,0.6))',
      position: 'relative', zIndex: 5,
    }}>
      {back ? (
        <div style={{
          width: 36, height: 36, borderRadius: 8, background: CX.card,
          border: `1px solid ${CX.line}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M10 2 L4 7 L10 12" stroke={CX.white} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </div>
      ) : (
        <CXMark size={28} color={CX.red} glow/>
      )}
      <div style={{ flex: 1, textAlign: 'center', minWidth: 0 }}>
        <div style={{
          fontFamily: FONT_DISPLAY, fontSize: 13, letterSpacing: '0.18em',
          color: CX.white, fontWeight: 600, lineHeight: 1.2,
          textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap',
        }}>{title}</div>
        {sub && <div style={{
          fontFamily: FONT_BODY, fontSize: 10.5, color: CX.textMute, marginTop: 2, letterSpacing: 0.4,
        }}>{sub}</div>}
      </div>
      <div style={{
        width: 36, height: 36, borderRadius: 8, background: CX.card,
        border: `1px solid ${CX.line}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <svg width="16" height="14" viewBox="0 0 16 14"><path d="M2 2 L14 2 M2 7 L14 7 M2 12 L14 12" stroke={CX.white} strokeWidth="1.8" strokeLinecap="round"/></svg>
      </div>
    </div>
  );
}

Object.assign(window, { RewardNode, LevelColumn, TaskCard, Avatar, BottomNav, CXHeader });