// Shared UI primitives — v2

// ─── Spark decorative element (from brand motif) ─────────────────
const Spark = ({ size = 32, color, opacity = 1, style: sx = {} }) => {
  const c = color || 'var(--accent)';
  return (
    <div style={{ position: 'relative', width: size, height: size, flexShrink: 0, opacity, ...sx }}>
      {[0,30,60,90,120,150].map(deg => (
        <div key={deg} style={{
          position: 'absolute', top: '50%', left: '50%',
          width: size * 0.92, height: Math.max(1.5, size * 0.05),
          background: `linear-gradient(90deg, transparent, ${c}, transparent)`,
          borderRadius: size,
          transform: `translate(-50%,-50%) rotate(${deg}deg)`
        }} />
      ))}
    </div>
  );
};

// ─── Corner bracket decoration (game UI) ─────────────────────────
const Corners = ({ color = 'rgba(245,158,11,0.4)', sz = 10 }) => {
  const bw = `1.5px solid ${color}`;
  const corners = [
    { top: 0, left: 0,    borderTop: bw, borderLeft: bw },
    { top: 0, right: 0,   borderTop: bw, borderRight: bw },
    { bottom: 0, left: 0,  borderBottom: bw, borderLeft: bw },
    { bottom: 0, right: 0, borderBottom: bw, borderRight: bw },
  ];
  return (
    <>
      {corners.map((s, i) => (
        <div key={i} style={{ position: 'absolute', width: sz, height: sz, pointerEvents: 'none', ...s }} />
      ))}
    </>
  );
};

// ─── XP progress bar ─────────────────────────────────────────────
const XPBar = ({ xp, xpToNext, color, height = 6, showLabel = false }) => {
  const c = color || 'var(--accent)';
  const pct = Math.min(100, (xp / xpToNext) * 100);
  return (
    <div style={{ width: '100%' }}>
      {showLabel && (
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5,
          fontSize: 10, color: '#606074', fontFamily: "'Exo 2',sans-serif", letterSpacing: 1.5 }}>
          <span>XP</span>
          <span>{xp.toLocaleString()} / {xpToNext.toLocaleString()}</span>
        </div>
      )}
      <div style={{ width: '100%', height, background: '#08080e', borderRadius: height,
        overflow: 'hidden', border: '1px solid rgba(255,255,255,0.04)' }}>
        <div style={{
          width: `${pct}%`, height: '100%',
          background: `linear-gradient(90deg, ${c}77, ${c})`,
          borderRadius: height, boxShadow: `0 0 10px ${c}44`,
          transition: 'width .7s cubic-bezier(.4,0,.2,1)'
        }} />
      </div>
    </div>
  );
};

// ─── Level badge ──────────────────────────────────────────────────
const LevelBadge = ({ level, size = 'md' }) => {
  const s = { sm: [34,9,14], md: [50,9,20], lg: [68,10,28] }[size] || [50,9,20];
  return (
    <div style={{
      width: s[0], height: s[0], flexShrink: 0,
      background: 'linear-gradient(140deg, #0e0900, #1a1200)',
      border: '1.5px solid var(--accent)', borderRadius: 3,
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      boxShadow: '0 0 20px rgba(245,158,11,.18), inset 0 1px 0 rgba(255,255,255,.07)'
    }}>
      <div style={{ fontSize: s[1], color: 'var(--accent)', opacity: .5,
        fontFamily: "'Exo 2',sans-serif", letterSpacing: 1.5, lineHeight: 1 }}>LV</div>
      <div style={{ fontSize: s[2], color: 'var(--accent)', fontFamily: "'Exo 2',sans-serif",
        fontWeight: 900, lineHeight: 1.1 }}>{level}</div>
    </div>
  );
};

// ─── Skill tag ────────────────────────────────────────────────────
const SkillTag = ({ skillId, skills }) => {
  const s = (skills || []).find(x => x.id === skillId) || {};
  const c = s.color || 'var(--accent)';
  return (
    <span style={{
      fontSize: 10, fontWeight: 700, letterSpacing: .8,
      color: c, background: `${c}14`, border: `1px solid ${c}30`,
      borderRadius: 2, padding: '2px 7px', fontFamily: "'Exo 2',sans-serif"
    }}>{s.abbr || skillId}</span>
  );
};

const Stars = ({ n, max = 5 }) => (
  <span style={{ color: 'var(--accent)', fontSize: 11, letterSpacing: 1.5, opacity: .8 }}>
    {'★'.repeat(n)}{'☆'.repeat(max - n)}
  </span>
);

// ─── Modal ────────────────────────────────────────────────────────
const Modal = ({ open, onClose, title, children, width = 480 }) => {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, background: 'rgba(0,0,0,.9)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      zIndex: 1000, padding: 16
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background: '#0d0d16',
        borderTop: '1px solid rgba(255,255,255,.12)',
        border: '1px solid rgba(255,255,255,.07)',
        borderRadius: 6, width: '100%', maxWidth: width, padding: 28,
        boxShadow: '0 32px 80px rgba(0,0,0,.9)'
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 22 }}>
          <h3 style={{ margin: 0, fontFamily: "'Exo 2',sans-serif", color: '#f0f0f2',
            fontSize: 16, fontWeight: 800, letterSpacing: .5 }}>{title}</h3>
          <button onClick={onClose} style={{ background: 'none', border: 'none', color: '#696980',
            fontSize: 16, cursor: 'pointer', padding: 4, transition: 'color .15s' }}
            onMouseEnter={e => e.currentTarget.style.color = '#777'}
            onMouseLeave={e => e.currentTarget.style.color = '#696980'}>✕</button>
        </div>
        {children}
      </div>
    </div>
  );
};

// ─── Button ───────────────────────────────────────────────────────
const Btn = ({ children, onClick, variant = 'primary', style: sx = {}, disabled = false }) => {
  const v = {
    primary:   { background: 'var(--accent)', color: '#000', border: '1px solid transparent' },
    secondary: { background: 'transparent', color: 'var(--accent)', border: '1px solid rgba(245,158,11,.28)' },
    ghost:     { background: 'rgba(255,255,255,.04)', color: '#777', border: '1px solid rgba(255,255,255,.07)' },
    danger:    { background: '#ef4444', color: '#fff', border: '1px solid transparent' },
  }[variant] || {};
  return (
    <button onClick={onClick} disabled={disabled} style={{
      padding: '9px 20px', borderRadius: 4, cursor: disabled ? 'not-allowed' : 'pointer',
      fontFamily: "'Exo 2',sans-serif", fontWeight: 700, fontSize: 12, letterSpacing: .8,
      opacity: disabled ? .35 : 1, transition: 'opacity .15s, transform .1s', ...v, ...sx
    }}
      onMouseDown={e => { if (!disabled) e.currentTarget.style.transform = 'scale(.97)'; }}
      onMouseUp={e => e.currentTarget.style.transform = ''}
      onMouseLeave={e => e.currentTarget.style.transform = ''}
    >{children}</button>
  );
};

// ─── Input field ──────────────────────────────────────────────────
const Field = ({ label, value, onChange, placeholder, type = 'text', sx = {} }) => (
  <div style={{ marginBottom: 16 }}>
    {label && <div style={{ fontSize: 10, color: '#727288', marginBottom: 7,
      fontFamily: "'Exo 2',sans-serif", letterSpacing: 1.8, textTransform: 'uppercase' }}>{label}</div>}
    <input type={type} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder}
      style={{
        width: '100%', padding: '10px 13px', background: '#07070e',
        border: '1px solid rgba(255,255,255,.07)', borderRadius: 4, color: '#eee',
        fontSize: 14, outline: 'none', boxSizing: 'border-box',
        fontFamily: "'Noto Sans JP',sans-serif", ...sx
      }}
      onFocus={e => e.target.style.borderColor = 'rgba(245,158,11,.4)'}
      onBlur={e => e.target.style.borderColor = 'rgba(255,255,255,.07)'}
    />
  </div>
);

// ─── Section label ────────────────────────────────────────────────
const SLabel = ({ children, style: sx = {} }) => (
  <div style={{ fontFamily: "'Exo 2',sans-serif", fontSize: 10, letterSpacing: 2.5,
    color: '#5e5e72', textTransform: 'uppercase', marginBottom: 14, ...sx }}>{children}</div>
);

Object.assign(window, { Spark, Corners, XPBar, LevelBadge, SkillTag, Stars, Modal, Btn, Field, SLabel });