// Reusable primitives for the mini-program

// ── Mini-program chrome: custom status bar + capsule button ──
function MpChrome({ title = '喝啥 YO', dark = false, onBack, showBack = false }) {
  const [city, setCity] = React.useState('上海市');
  const [cityOpen, setCityOpen] = React.useState(false);
  const cities = ['上海市', '北京市', '广州市', '深圳市', '杭州市', '成都市'];
  const fg = dark ? '#fff' : 'var(--ink-1)';
  const selectCity = (nextCity) => {
    setCity(nextCity);
    setCityOpen(false);
  };
  return (
    <div style={{
      position: 'relative', padding: '52px 16px 12px',
      display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center',
      gap: 8,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        {showBack ? (
          <button onClick={onBack} style={{
            width: 32, height: 32, borderRadius: 999,
            background: 'rgba(0,0,0,0.04)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <IconChevron size={16} color={fg} style={{ transform: 'rotate(180deg)' }} />
          </button>
        ) : (
          <button onClick={() => setCityOpen(true)} style={{
            display: 'flex', alignItems: 'center', gap: 4, fontSize: 13,
            color: 'var(--ink-2)', fontWeight: 500,
          }}>
            <IconLocation size={14} color="var(--ink-2)" />
            <span>{city}</span>
            <IconChevronDown size={12} color="var(--ink-2)" />
          </button>
        )}
      </div>
      <div style={{ fontSize: 13, fontWeight: 600, color: fg, letterSpacing: 0.5 }}>
        {title}
      </div>
      {cityOpen && !showBack && (
        <>
          <button aria-label="关闭地区选择" onClick={() => setCityOpen(false)} style={{
            position: 'fixed', inset: 0, zIndex: 80, background: 'transparent',
          }} />
          <div style={{
            position: 'absolute', top: 86, left: 16, right: 16, zIndex: 90,
            padding: 12, borderRadius: 18, background: 'rgba(255,255,255,0.96)',
            border: '0.5px solid rgba(0,0,0,0.06)',
            boxShadow: '0 10px 28px rgba(28,23,16,0.12)',
            backdropFilter: 'blur(18px)',
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              marginBottom: 10,
            }}>
              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-1)' }}>切换地区</span>
              <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>用于原型预览</span>
            </div>
            <button onClick={() => selectCity('上海市')} style={{
              width: '100%', height: 38, borderRadius: 14, marginBottom: 8,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '0 12px',
              background: 'var(--surface)',
              boxShadow: 'inset 0 0 0 0.5px rgba(0,0,0,0.06)',
            }}>
              <span style={{
                display: 'flex', alignItems: 'center', gap: 6,
                fontSize: 12, fontWeight: 600, color: 'var(--ink-1)',
              }}>
                <IconLocation size={14} color="var(--ink-2)" />
                获取当前位置
              </span>
              <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>模拟定位</span>
            </button>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
              {cities.map(c => {
                const active = c === city;
                return (
                  <button key={c} onClick={() => selectCity(c)} style={{
                    height: 34, borderRadius: 999,
                    background: active ? 'var(--ink-1)' : 'var(--paper)',
                    color: active ? '#fff' : 'var(--ink-2)',
                    fontSize: 12, fontWeight: active ? 600 : 500,
                    boxShadow: active ? 'none' : 'inset 0 0 0 0.5px rgba(0,0,0,0.06)',
                  }}>
                    {c}
                  </button>
                );
              })}
            </div>
          </div>
        </>
      )}
      {/* capsule — WeChat mini-program convention */}
      <div style={{
        justifySelf: 'end',
        height: 32, width: 87, borderRadius: 999,
        background: 'rgba(0,0,0,0.04)',
        border: '0.5px solid rgba(0,0,0,0.08)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-around',
        position: 'relative',
      }}>
        <div style={{ display: 'flex', gap: 3 }}>
          <span style={{ width: 3, height: 3, borderRadius: 99, background: '#000' }} />
          <span style={{ width: 3, height: 3, borderRadius: 99, background: '#000' }} />
          <span style={{ width: 3, height: 3, borderRadius: 99, background: '#000' }} />
        </div>
        <div style={{
          width: 0.5, height: 16, background: 'rgba(0,0,0,0.12)',
        }} />
        <div style={{
          width: 18, height: 18, borderRadius: 99,
          border: '1.3px solid #000',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <div style={{ width: 6, height: 6, borderRadius: 99, background: '#000' }} />
        </div>
      </div>
    </div>
  );
}

// ── Drink cup illustration placeholder (striped) ──
function CupPlaceholder({ colorA, colorB, size = 72, label, drinkName }) {
  return (
    <div style={{
      position: 'relative', width: size, height: size * 1.15,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      {/* colored bg blob */}
      <div style={{
        position: 'absolute', inset: '10% 5%',
        background: `radial-gradient(ellipse at 30% 20%, ${colorA}, ${colorB})`,
        borderRadius: '48% 52% 50% 50% / 55% 45% 55% 45%',
        opacity: 0.35,
      }} />
      {/* the cup silhouette — stripes */}
      <svg width={size * 0.78} height={size * 1.05} viewBox="0 0 60 80" style={{ position: 'relative', zIndex: 1 }}>
        <defs>
          <pattern id={`stripe-${colorB.replace('#','')}`} patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(40)">
            <rect width="6" height="6" fill={colorA} />
            <rect width="3" height="6" fill={colorB} opacity="0.6" />
          </pattern>
        </defs>
        <path d="M8 18 L52 18 L48 76 Q48 78 46 78 L14 78 Q12 78 12 76 Z"
              fill={`url(#stripe-${colorB.replace('#','')})`}
              stroke={colorB} strokeWidth="1.2" opacity="0.9" />
        <rect x="6" y="14" width="48" height="6" rx="1.5" fill={colorB} opacity="0.85" />
        <rect x="32" y="2" width="5" height="18" rx="1.5" fill={colorB} opacity="0.7" transform="rotate(10 34.5 11)" />
      </svg>
      {label && (
        <div style={{
          position: 'absolute', bottom: -4, fontFamily: 'var(--font-mono)',
          fontSize: 8, color: 'var(--ink-3)', letterSpacing: 0.5, whiteSpace: 'nowrap',
        }}>{label}</div>
      )}
    </div>
  );
}

// ── Tiny data bar (calories / sugar rings etc.) ──
function DataRing({ value, max, color, size = 36, label, sublabel }) {
  const r = (size - 6) / 2;
  const c = 2 * Math.PI * r;
  const pct = Math.min(1, value / max);
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} stroke="var(--ink-5)" strokeWidth="3" fill="none" />
        <circle cx={size/2} cy={size/2} r={r} stroke={color} strokeWidth="3" fill="none"
                strokeDasharray={c} strokeDashoffset={c * (1 - pct)} strokeLinecap="round"
                style={{ transition: 'stroke-dashoffset 400ms ease' }} />
      </svg>
      {label && (
        <div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', lineHeight: 1.2 }}>{label}</div>
          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink-1)', lineHeight: 1.2 }}>{sublabel}</div>
        </div>
      )}
    </div>
  );
}

// ── Bottom tab bar ──
function TabBar({ active, onChange }) {
  const tabs = [
    { id: 'home',     label: '首页', Icon: IconHome },
    { id: 'favorite', label: '收藏', Icon: IconHeart },
    { id: 'library',  label: '品牌', Icon: IconCup },
    { id: 'me',       label: '我的', Icon: IconUser },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 30,
      background: 'var(--surface)',
      borderTop: '0.5px solid rgba(0,0,0,0.06)',
      paddingBottom: 22, paddingTop: 8,
      display: 'flex',
    }}>
      {tabs.map(({ id, label, Icon }) => {
        const on = id === active;
        return (
          <button key={id} onClick={() => onChange(id)}
                  style={{ flex: 1, display: 'flex', flexDirection: 'column',
                           alignItems: 'center', gap: 4, padding: '4px 0' }}>
            <Icon size={22} color={on ? 'var(--brand-yellow-ink)' : 'var(--ink-3)'}
                  fill={on ? 'var(--brand-yellow)' : 'none'} stroke={on ? 1.4 : 1.8} />
            <span style={{ fontSize: 10, color: on ? 'var(--ink-1)' : 'var(--ink-3)', fontWeight: on ? 600 : 400 }}>
              {label}
            </span>
          </button>
        );
      })}
    </div>
  );
}

Object.assign(window, { MpChrome, CupPlaceholder, DataRing, TabBar });