// Green Voice — Common shell components (top bar, bottom nav, FAB)

// Top navigation
function GVTopBar({ title, showBack, onBack, actions = ['search', 'notifications'], onAction, transparent }) {
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: '0 16px',
      height: 56,
      background: transparent ? 'transparent' : GV.color.surface,
      borderBottom: transparent ? 'none' : `1px solid ${GV.color.borderSubtle}`,
      position: 'sticky',
      top: 0,
      zIndex: 30,
      flexShrink: 0,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, minWidth: 0 }}>
        {showBack && (
          <button
            onClick={onBack}
            style={{
              background: 'none',
              border: 'none',
              padding: 4,
              cursor: 'pointer',
              display: 'flex',
              color: GV.color.forestDeep,
            }}
          >
            <Icon name="arrow_back" size={24} />
          </button>
        )}
        {title === 'GREEN_VOICE_LOGO' ? (
          <h1 style={{
            fontFamily: GV.font.serif,
            fontSize: 22,
            fontWeight: 700,
            color: GV.color.forestDeep,
            margin: 0,
            letterSpacing: '-0.01em',
          }}>Green Voice</h1>
        ) : (
          <h1 style={{
            fontFamily: GV.font.serif,
            fontSize: 18,
            fontWeight: 600,
            color: GV.color.forestDeep,
            margin: 0,
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
          }}>{title}</h1>
        )}
      </div>
      <div style={{ display: 'flex', gap: 4 }}>
        {actions.map(a => (
          <button
            key={a}
            onClick={() => onAction && onAction(a)}
            style={{
              background: 'none',
              border: 'none',
              padding: 8,
              cursor: 'pointer',
              display: 'flex',
              color: GV.color.forestDeep,
            }}
          >
            <Icon name={a} size={22} />
          </button>
        ))}
      </div>
    </div>
  );
}

// Bottom nav — 5 tabs (원본 시안 그대로)
const TABS = [
  { id: 'home', label: '홈', icon: 'home' },
  { id: 'course', label: '골프장', icon: 'golf_course' },
  { id: 'ranking', label: '랭킹', icon: 'leaderboard' },
  { id: 'round', label: '라운드', icon: 'calendar_month' },
  { id: 'clubhouse', label: '클럽하우스', icon: 'workspace_premium' },
];

function GVBottomNav({ tab, onChange }) {
  return (
    <div style={{
      display: 'flex',
      justifyContent: 'space-around',
      alignItems: 'stretch',
      background: GV.color.white,
      borderTop: `1px solid ${GV.color.borderSubtle}`,
      paddingTop: 8,
      paddingBottom: 8,
      flexShrink: 0,
    }}>
      {TABS.map(t => {
        const active = tab === t.id;
        return (
          <button
            key={t.id}
            onClick={() => onChange(t.id)}
            style={{
              flex: 1,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 3,
              background: 'none',
              border: 'none',
              cursor: 'pointer',
              padding: '4px 0',
              color: active ? GV.color.forestDeep : GV.color.outline,
              transition: 'color 0.15s',
            }}
          >
            <Icon name={t.icon} size={24} filled={active} />
            <span style={{
              fontFamily: GV.font.sans,
              fontSize: 10.5,
              fontWeight: active ? 700 : 500,
              letterSpacing: '0.02em',
            }}>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
}

// Sticky CTA (bottom floating action)
function GVStickyCTA({ label, icon = 'edit_note', onClick, style }) {
  return (
    <div style={{
      position: 'absolute',
      bottom: 16,
      left: 20,
      right: 20,
      zIndex: 20,
      pointerEvents: 'none',
      ...style,
    }}>
      <button
        onClick={onClick}
        style={{
          width: '100%',
          background: GV.color.forestDeep,
          color: GV.color.white,
          border: 'none',
          borderRadius: 999,
          padding: '14px 24px',
          fontFamily: GV.font.sans,
          fontSize: 15,
          fontWeight: 600,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 8,
          boxShadow: GV.shadow.floating,
          cursor: 'pointer',
          pointerEvents: 'auto',
          transition: 'transform 0.1s',
        }}
        onMouseDown={e => e.currentTarget.style.transform = 'scale(0.98)'}
        onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
        onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
      >
        <Icon name={icon} size={20} color={GV.color.prestigeGold} />
        <span>{label}</span>
      </button>
    </div>
  );
}

// FAB (circular)
function GVFab({ icon = 'add', onClick, style }) {
  return (
    <button
      onClick={onClick}
      style={{
        position: 'absolute',
        bottom: 16,
        right: 20,
        width: 56,
        height: 56,
        borderRadius: 999,
        background: GV.color.forestDeep,
        color: GV.color.prestigeGold,
        border: 'none',
        boxShadow: GV.shadow.floating,
        cursor: 'pointer',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 20,
        transition: 'transform 0.1s',
        ...style,
      }}
      onMouseDown={e => e.currentTarget.style.transform = 'scale(0.95)'}
      onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
      onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
    >
      <Icon name={icon} size={24} />
    </button>
  );
}

// Empty scrollbars global style
function ScrollbarStyle() {
  return (
    <style>{`
      .gv-scroll::-webkit-scrollbar { display: none; }
      .gv-scroll { -ms-overflow-style: none; scrollbar-width: none; }
      .gv-hscroll::-webkit-scrollbar { display: none; }
      .gv-hscroll { -ms-overflow-style: none; scrollbar-width: none; }
    `}</style>
  );
}

Object.assign(window, { GVTopBar, GVBottomNav, GVStickyCTA, GVFab, TABS, ScrollbarStyle });