// Web desktop primitives for Moment — Premium Dark Edition

// ─── Photo placeholder ───
function WebPhoto({ idx = 0, label, ratio = '1', style = {}, rounded = 0, children }) {
  const p = (window.PhotoPalette && window.PhotoPalette[idx % window.PhotoPalette.length]) || { bg: '#1c1c1e', label: '' };
  return (
    <div style={{
      width: '100%', aspectRatio: ratio,
      background: p.bg, position: 'relative', overflow: 'hidden',
      borderRadius: rounded, ...style,
    }}>
      {p.img && (
        <img src={p.img} alt={p.label || ''} loading="lazy" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', display: 'block',
        }} />
      )}
      {/* subtle grain */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1.5px)',
        backgroundSize: '4px 4px', mixBlendMode: 'overlay', pointerEvents: 'none',
      }} />
      {label !== false && (
        <div style={{
          position: 'absolute', bottom: 8, right: 10,
          fontFamily: window.M.fontMono, fontSize: 12, color: 'rgba(255,255,255,0.6)',
          letterSpacing: 0.4, fontWeight: 400,
          textShadow: '0 1px 3px rgba(0,0,0,0.7)',
        }}>{label || p.label}</div>
      )}
      {children}
    </div>
  );
}

// ─── Avatar (web sizes) ───
function WebAvatar({ member, size = 36, ring = false }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: member.color, color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.5, flexShrink: 0,
      boxShadow: ring ? `0 0 0 2px #000, 0 0 0 4px ${member.color}` : 'none',
    }}>
      <span style={{ filter: 'saturate(1.1)' }}>{member.emoji}</span>
    </div>
  );
}

// ─── Button ───
function WebButton({ children, variant = 'primary', size = 'md', onClick, full, style = {}, disabled, leading, trailing }) {
  const M = window.M;
  const variants = {
    primary:   { bg: M.ink,        color: M.cream,      border: 'none' },
    secondary: { bg: M.paper,      color: M.ink,        border: `1px solid ${M.ink4}` },
    accent:    { bg: M.coral,      color: '#fff',       border: 'none' },
    sun:       { bg: M.sun,        color: M.ink,        border: 'none' },
    ghost:     { bg: 'transparent', color: M.ink2,      border: 'none' },
    kakao:     { bg: M.kakao,      color: M.kakaoText,  border: 'none' },
  };
  const sizes = {
    sm: { h: 40, px: 18, fs: 14, r: 20 },
    md: { h: 50, px: 24, fs: 15, r: 25 },
    lg: { h: 56, px: 30, fs: 16, r: 28 },
    xl: { h: 64, px: 36, fs: 17, r: 32 },
  };
  const v = variants[variant] || variants.primary;
  const s = sizes[size] || sizes.md;
  return (
    <button onClick={onClick} disabled={disabled} style={{
      height: s.h, padding: `0 ${s.px}px`, borderRadius: s.r,
      fontSize: s.fs, fontFamily: M.fontBody, fontWeight: 600,
      letterSpacing: -0.2,
      background: v.bg, color: v.color, border: v.border,
      width: full ? '100%' : undefined,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7,
      cursor: disabled ? 'not-allowed' : 'pointer',
      opacity: disabled ? 0.4 : 1,
      transition: 'transform 0.13s, box-shadow 0.13s, filter 0.13s',
      boxShadow: variant === 'accent'
        ? '0 2px 12px rgba(244,63,94,0.4)'
        : variant === 'sun'
        ? '0 2px 12px rgba(251,191,36,0.35)'
        : 'none',
      ...style,
    }}>{leading}{children}{trailing}</button>
  );
}

// ─── Logo — M + smile arc ───
function WebLogo({ size = 26, color, sub = false }) {
  const M = window.M;
  const c = color || M.ink;
  const sw = size * 0.7;
  const sd = size * 0.2;
  const st = Math.max(size * 0.09, 1.8);
  const svgH = sd + st * 2;
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: sub ? 8 : 0, whiteSpace: 'nowrap' }}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: size * 0.04 }}>
        <span style={{
          fontFamily: M.fontSerif, fontSize: size, fontWeight: 800,
          color: c, lineHeight: 1, display: 'block', letterSpacing: -1,
        }}>M</span>
        <svg width={sw} height={svgH} viewBox={`0 0 ${sw} ${svgH}`} style={{ display: 'block', overflow: 'visible' }}>
          <path
            d={`M${st},${st * 0.5} Q${sw / 2},${sd + st * 0.5} ${sw - st},${st * 0.5}`}
            stroke={c} strokeWidth={st} fill="none" strokeLinecap="round"
          />
        </svg>
      </div>
      {sub && (
        <span style={{
          fontFamily: M.fontBody, fontSize: size * 0.52,
          color: c, fontWeight: 700, letterSpacing: 0.3,
        }}>모먼트</span>
      )}
    </div>
  );
}

// ─── Chip ───
function WebChip({ children, color, bg, style = {} }) {
  const M = window.M;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      height: 22, padding: '0 9px', borderRadius: 6,
      background: bg || M.coralSoft, color: color || M.coralDark,
      fontSize: 12, fontWeight: 700, fontFamily: M.fontBody, letterSpacing: 0.1,
      ...style,
    }}>{children}</span>
  );
}

// ─── Web Frame — dark browser-window chrome ───
function WebFrame({ children, w = 1200, h = 800, url = 'moment.app' }) {
  const M = window.M;
  return (
    <div style={{
      width: w, height: h, borderRadius: 14, overflow: 'hidden',
      background: M.cream,
      boxShadow: '0 2px 4px rgba(0,0,0,0.5), 0 20px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04)',
      display: 'flex', flexDirection: 'column', fontFamily: M.fontBody,
    }}>
      {/* Browser chrome */}
      <div style={{
        height: 40, background: M.paper, borderBottom: `1px solid ${M.ink4}`,
        display: 'flex', alignItems: 'center', padding: '0 14px', gap: 10, flexShrink: 0,
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#ff5f57' }} />
          <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#febc2e' }} />
          <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#28c840' }} />
        </div>
        <div style={{ display: 'flex', gap: 4, color: M.ink3, fontSize: 13, marginLeft: 8 }}>
          <span>‹</span><span>›</span><span style={{ marginLeft: 4 }}>↻</span>
        </div>
        <div style={{
          flex: 1, height: 24, borderRadius: 6, background: M.ivory,
          display: 'flex', alignItems: 'center', padding: '0 12px', gap: 8,
          fontSize: 12, color: M.ink3, fontFamily: M.fontMono,
          border: `1px solid ${M.ink4}`,
        }}>
          <span style={{ fontSize: 11 }}>🔒</span>
          <span>{url}</span>
          <span style={{ flex: 1 }} />
          <span style={{ fontSize: 12 }}>★</span>
        </div>
        <div style={{ color: M.ink3, fontSize: 14 }}>⋯</div>
      </div>
      {/* Content */}
      <div className="ko" style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
        {children}
      </div>
    </div>
  );
}

// ─── Web header (in-app top nav) ───
function WebHeader({ active = 'home', dark = false }) {
  const M = window.M;
  const fg  = M.ink;
  const fg2 = M.ink3;
  const bg  = M.cream;
  const items = [
    { id: 'home',    label: '오늘' },
    { id: 'archive', label: '타임라인' },
    { id: 'group',   label: '그룹' },
  ];
  return (
    <div style={{
      height: 60, background: bg,
      borderBottom: `1px solid ${M.ink4}`,
      display: 'flex', alignItems: 'center', padding: '0 32px', gap: 24, flexShrink: 0,
    }}>
      <WebLogo size={18} color={fg} />
      <div style={{ display: 'flex', gap: 2, marginLeft: 12 }}>
        {items.map(it => (
          <div key={it.id} style={{
            padding: '7px 14px', borderRadius: 8, fontSize: 14, fontWeight: 600,
            color: it.id === active ? fg : fg2,
            background: it.id === active ? M.ivory : 'transparent',
            cursor: 'pointer', letterSpacing: -0.1,
          }}>{it.label}</div>
        ))}
      </div>
      <div style={{ flex: 1 }} />
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8, padding: '5px 12px 5px 8px',
        borderRadius: 20, background: M.ivory,
        border: `1px solid ${M.ink4}`,
      }}>
        <span style={{ fontSize: 16 }}>🌸</span>
        <span style={{ fontSize: 13, fontWeight: 600, color: fg }}>화양연화</span>
        <span style={{ fontSize: 11, color: fg2 }}>▾</span>
      </div>
      <div style={{
        width: 32, height: 32, borderRadius: 16, background: M.ivory,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        position: 'relative', border: `1px solid ${M.ink4}`,
      }}>
        <span style={{ fontSize: 15 }}>🔔</span>
        <div style={{ position: 'absolute', top: 7, right: 7, width: 5, height: 5, borderRadius: 3, background: M.coral }}/>
      </div>
      <WebAvatar member={window.Members && window.Members[0]} size={28} />
    </div>
  );
}

Object.assign(window, { WebPhoto, WebAvatar, WebButton, WebLogo, WebChip, WebFrame, WebHeader });