// Shared product tile — real photo if available, else monochrome gradient with initials
function ProductTile({ tono = 'beige', catalogo, imagen, size = 56, radius = 8 }) {
  const T = window.T;
  const bg = window.TONE_GRADIENT[tono] || window.TONE_GRADIENT.beige;
  const initials = (catalogo || '').replace(/[^A-Za-z]/g, '').slice(0, 2).toUpperCase();
  const [imgFailed, setImgFailed] = React.useState(false);
  const useImage = imagen && !imgFailed;
  return (
    <div style={{
      width: size, height: size, borderRadius: radius,
      background: useImage ? '#fff' : bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0, position: 'relative', overflow: 'hidden',
      boxShadow: 'inset 0 0 0 0.5px rgba(0,0,0,0.08)',
    }}>
      {useImage ? (
        <img src={imagen} alt=""
          onError={() => setImgFailed(true)}
          style={{
            width: '100%', height: '100%', objectFit: 'contain',
            padding: Math.max(2, size * 0.06),
          }}
        />
      ) : (
        <span style={{
          fontFamily: T.serif, fontStyle: 'italic', fontSize: size * 0.32,
          color: 'rgba(255,255,255,0.9)', letterSpacing: -0.5,
          textShadow: '0 1px 2px rgba(0,0,0,0.15)',
        }}>{initials}</span>
      )}
    </div>
  );
}

function StatusPill({ estado, enviado, size = 'md' }) {
  const T = window.T;
  const map = {
    pendiente: { label: enviado ? 'En curso' : 'Borrador', bg: enviado ? T.warnSoft : T.paperDeep, fg: enviado ? 'oklch(0.45 0.12 70)' : T.inkSoft, dot: enviado ? T.warn : T.inkMute },
    completado: { label: 'Completado', bg: T.okSoft, fg: 'oklch(0.38 0.1 155)', dot: T.ok },
    cancelado: { label: 'Cancelado', bg: T.dangerSoft, fg: T.accentInk, dot: T.danger },
  };
  const s = map[estado] || map.pendiente;
  const px = size === 'sm' ? '3px 8px' : '5px 10px';
  const fs = size === 'sm' ? 10 : 11;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: px, borderRadius: 999, background: s.bg, color: s.fg,
      fontFamily: T.sans, fontSize: fs, fontWeight: 500, letterSpacing: 0.2,
      textTransform: 'uppercase',
    }}>
      <span style={{ width: 5, height: 5, borderRadius: 999, background: s.dot }} />
      {s.label}
    </span>
  );
}

// Section header for inside screens (small serif eyebrow + title)
function SectionHead({ eyebrow, title, action }) {
  const T = window.T;
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: '0 24px', marginBottom: 12 }}>
      <div>
        {eyebrow && (
          <div style={{
            fontFamily: T.mono, fontSize: 10, letterSpacing: 1.5,
            textTransform: 'uppercase', color: T.inkMute, marginBottom: 4,
          }}>{eyebrow}</div>
        )}
        <div style={{ fontFamily: T.serif, fontSize: 22, color: T.ink, letterSpacing: -0.3 }}>{title}</div>
      </div>
      {action}
    </div>
  );
}

// Primary button
function PrimaryBtn({ children, onClick, disabled, icon, variant = 'accent', style = {} }) {
  const T = window.T;
  const bg = variant === 'accent' ? T.ink : T.accent;
  return (
    <button onClick={onClick} disabled={disabled} style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      width: '100%', padding: '14px 18px', borderRadius: 999,
      background: disabled ? T.paperDeep : bg,
      color: disabled ? T.inkMute : T.paper,
      border: 'none', cursor: disabled ? 'not-allowed' : 'pointer',
      fontFamily: T.sans, fontSize: 15, fontWeight: 500, letterSpacing: 0.1,
      transition: 'transform 0.12s, opacity 0.12s',
      ...style,
    }}
    onMouseDown={(e) => !disabled && (e.currentTarget.style.transform = 'scale(0.985)')}
    onMouseUp={(e) => (e.currentTarget.style.transform = 'scale(1)')}
    onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
      {icon}
      {children}
    </button>
  );
}

function GhostBtn({ children, onClick, icon, style = {} }) {
  const T = window.T;
  return (
    <button onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
      padding: '10px 14px', borderRadius: 999, background: 'transparent',
      color: T.ink, border: `1px solid ${T.hairline}`, cursor: 'pointer',
      fontFamily: T.sans, fontSize: 13, fontWeight: 500, ...style,
    }}>
      {icon}{children}
    </button>
  );
}

Object.assign(window, { ProductTile, StatusPill, SectionHead, PrimaryBtn, GhostBtn });