// ui.jsx — Shared UI primitives for TeamCaddy

// ─────────────────────────────────────────────────────────────
// Avatar — monogram with hue-based gradient
// ─────────────────────────────────────────────────────────────
function Avatar({ initials, hue = 200, size = 40, ring = null }) {
  const bg = `linear-gradient(135deg, oklch(0.70 0.15 ${hue}), oklch(0.55 0.18 ${(hue+40)%360}))`;
  return (
    <div style={{
      width: size, height: size, borderRadius: size/2,
      background: bg, color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontWeight: 600, fontSize: size * 0.4, letterSpacing: -0.2,
      flexShrink: 0,
      boxShadow: ring ? `0 0 0 2.5px ${ring}, 0 0 0 4px #fff` : 'none',
    }}>{initials}</div>
  );
}

// ─────────────────────────────────────────────────────────────
// Photo placeholder — hue-shifted gradient with subtle grid
// ─────────────────────────────────────────────────────────────
function PhotoPlaceholder({ hue = 200, label, style = {}, radius = 12 }) {
  const gradA = `oklch(0.70 0.12 ${hue})`;
  const gradB = `oklch(0.50 0.14 ${(hue+40)%360})`;
  const gradC = `oklch(0.35 0.08 ${(hue+80)%360})`;
  return (
    <div style={{
      borderRadius: radius,
      background: `linear-gradient(145deg, ${gradA} 0%, ${gradB} 55%, ${gradC} 100%)`,
      position: 'relative', overflow: 'hidden',
      ...style,
    }}>
      <div style={{
        position:'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 24px)',
      }} />
      {label && (
        <div style={{
          position:'absolute', left: 10, bottom: 8,
          color:'rgba(255,255,255,0.95)', fontSize: 11, fontWeight: 600,
          textShadow:'0 1px 3px rgba(0,0,0,0.35)', letterSpacing: -0.2,
        }}>{label}</div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Card — generic rounded container
// ─────────────────────────────────────────────────────────────
function Card({ T, children, pad = true, style = {} }) {
  return (
    <div style={{
      background: T.card, borderRadius: T.listRadius,
      padding: pad ? T.cardPad : 0,
      ...style,
    }}>{children}</div>
  );
}

// ─────────────────────────────────────────────────────────────
// Tab bar — bottom iOS-style with liquid glass
// ─────────────────────────────────────────────────────────────
function TabBar({ T, current, onChange, isAdmin }) {
  const tabs = isAdmin
    ? [
        { id: 'home',     label: 'Home',      icon: 'home' },
        { id: 'schedule', label: 'Schedule',  icon: 'calendar' },
        { id: 'team',     label: 'Team',      icon: 'team' },
        { id: 'chat',     label: 'Chat',      icon: 'message' },
        { id: 'more',     label: 'More',      icon: 'more' },
      ]
    : [
        { id: 'home',     label: 'Home',      icon: 'home' },
        { id: 'schedule', label: 'Schedule',  icon: 'calendar' },
        { id: 'chat',     label: 'Chat',      icon: 'message' },
        { id: 'photos',   label: 'Photos',    icon: 'photos' },
        { id: 'team',     label: 'Team',      icon: 'team' },
      ];
  return (
    <div style={{
      position:'absolute', left: 0, right: 0, bottom: 0, zIndex: 30,
      padding: '8px 10px 28px',
      pointerEvents:'none',
    }}>
      <div style={{
        position:'relative', borderRadius: 32,
        background: T.dark ? 'rgba(28,28,30,0.72)' : 'rgba(255,255,255,0.72)',
        backdropFilter:'blur(24px) saturate(180%)',
        WebkitBackdropFilter:'blur(24px) saturate(180%)',
        boxShadow: T.dark
          ? '0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 24px rgba(0,0,0,0.4)'
          : '0 1px 0 rgba(255,255,255,0.9) inset, 0 6px 18px rgba(0,0,0,0.08)',
        border: T.dark ? '0.5px solid rgba(255,255,255,0.10)' : '0.5px solid rgba(0,0,0,0.05)',
        padding: '10px 4px 12px',
        display:'flex', pointerEvents:'auto',
      }}>
        {tabs.map(tab => {
          const active = current === tab.id;
          const color = active ? T.accent : T.label2;
          return (
            <button key={tab.id} onClick={() => onChange(tab.id)} style={{
              flex: 1, background:'transparent', border:'none', padding:'4px 2px',
              display:'flex', flexDirection:'column', alignItems:'center', gap: 3,
              color, cursor:'pointer', fontFamily: T.font,
            }}>
              <Icon name={tab.icon} size={26} color={color} weight={active ? 2.2 : 1.8} />
              <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: 0.1 }}>{tab.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Screen header — large title + optional trailing
// ─────────────────────────────────────────────────────────────
function ScreenHeader({ T, title, subtitle, trailing, onBack, padTop = 8 }) {
  return (
    <div style={{ padding: `${padTop}px 20px 4px` }}>
      {onBack && (
        <button onClick={onBack} style={{
          display:'flex', alignItems:'center', gap: 2,
          background:'transparent', border:'none', padding: 0, margin:'0 0 8px -4px',
          color: T.accent, fontFamily: T.font, fontSize: 17, fontWeight: 400, cursor:'pointer',
        }}>
          <Icon name="chevron-left" size={22} color={T.accent} weight={2.4} />
          Back
        </button>
      )}
      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap: 12 }}>
        <div style={{ minWidth: 0 }}>
          <div style={{
            fontFamily: T.displayFont, fontSize: 34, fontWeight: 700,
            color: T.label, letterSpacing: -0.8, lineHeight: 1.05,
          }}>{title}</div>
          {subtitle && (
            <div style={{ color: T.label2, fontSize: 15, marginTop: 2 }}>{subtitle}</div>
          )}
        </div>
        {trailing}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Pill button / chip
// ─────────────────────────────────────────────────────────────
function Pill({ T, children, color, bg, onClick, style = {}, icon }) {
  color = color || T.label;
  bg = bg || T.fill;
  return (
    <button onClick={onClick} style={{
      height: 30, padding: '0 12px',
      borderRadius: 15, background: bg, color, border:'none',
      fontFamily: T.font, fontSize: 13, fontWeight: 600, letterSpacing: -0.1,
      display:'inline-flex', alignItems:'center', gap: 4, cursor:'pointer',
      ...style,
    }}>
      {icon && <Icon name={icon} size={14} color={color} weight={2.4} />}
      {children}
    </button>
  );
}

// ─────────────────────────────────────────────────────────────
// RSVP Status badge
// ─────────────────────────────────────────────────────────────
function RsvpBadge({ T, status, size = 'sm' }) {
  const map = {
    in:  { bg: T.green, fg:'#fff', icon:'check',    label:'In' },
    out: { bg: T.red,   fg:'#fff', icon:'x',        label:'Out' },
    '?': { bg: T.fill,  fg: T.label2, label:'?',    icon: null },
  };
  const s = map[status] || map['?'];
  if (size === 'sm') {
    return (
      <div style={{
        width: 22, height: 22, borderRadius: 11,
        background: s.bg, color: s.fg,
        display:'flex', alignItems:'center', justifyContent:'center',
        fontSize: 12, fontWeight: 700,
      }}>
        {s.icon ? <Icon name={s.icon} size={13} color={s.fg} weight={3} /> : '?'}
      </div>
    );
  }
  return (
    <div style={{
      display:'inline-flex', alignItems:'center', gap: 6,
      padding: '4px 10px 4px 6px', borderRadius: 14,
      background: s.bg, color: s.fg,
      fontSize: 13, fontWeight: 600,
    }}>
      {s.icon ? <Icon name={s.icon} size={14} color={s.fg} weight={3} /> : <span>?</span>}
      {s.label}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Inline segmented control
// ─────────────────────────────────────────────────────────────
function Segmented({ T, options, value, onChange, style = {} }) {
  return (
    <div style={{
      display:'inline-flex', padding: 2, borderRadius: 10,
      background: T.fill2, ...style,
    }}>
      {options.map(o => {
        const active = o.value === value;
        return (
          <button key={o.value} onClick={() => onChange(o.value)} style={{
            padding:'6px 14px', border:'none', cursor:'pointer',
            background: active ? T.card : 'transparent',
            color: T.label, fontFamily: T.font, fontSize: 13, fontWeight: active ? 600 : 500,
            borderRadius: 8, transition: 'all 0.15s',
            boxShadow: active ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
          }}>{o.label}</button>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Event icon badge
// ─────────────────────────────────────────────────────────────
function EventIcon({ T, type, size = 40 }) {
  const map = {
    game:     { icon:'soccer',  bg: T.accent },
    practice: { icon:'whistle', bg: T.label2 },
    social:   { icon:'star',    bg: T.yellow },
  };
  const { icon, bg } = map[type] || map.practice;
  return (
    <div style={{
      width: size, height: size, borderRadius: size * 0.3,
      background: bg, display:'flex', alignItems:'center', justifyContent:'center',
      flexShrink: 0,
    }}>
      <Icon name={icon} size={size * 0.55} color="#fff" weight={2.2} />
    </div>
  );
}

Object.assign(window, {
  Avatar, PhotoPlaceholder, Card, TabBar, ScreenHeader, Pill, RsvpBadge, Segmented, EventIcon,
});