/* linked.market — UI primitives v2 */
const { useState: _useState } = React;
const _Icon = window.Icon;

const CAT_COLOR = { fashion: '--cat-fashion', gadgets: '--cat-gadgets', beauty: '--cat-beauty', home: '--cat-home', food: '--cat-food', craft: '--cat-craft', all: '--ink' };
const catColor = (id) => `var(${CAT_COLOR[id] || '--ink'})`;
const catLabel = { fashion: 'Fashion', gadgets: 'Gadget', beauty: 'Beauty', home: 'Home', food: 'Food', craft: 'Craft' };

/* ---------- Avatar ---------- */
function Avatar({ name, color, size = 36, ring, style, className }) {
  const initials = name.split(' ').filter(w => /[A-Za-zÀ-ÿ]/.test(w[0])).slice(0, 2).map(w => w[0]).join('').toUpperCase();
  return React.createElement('div', {
    className: 'avatar ' + (ring ? 'ring ' : '') + (className || ''),
    style: { width: size, height: size, background: color, fontSize: size * 0.4, ...style },
  }, initials);
}

/* ---------- real-photo Slot (stock src + duotone behind) ---------- */
function Slot({ id, duo, src, placeholder, style, className }) {
  const [a, b] = duo;
  return React.createElement('div', {
    className: 'slot ' + (className || ''),
    style: { background: `linear-gradient(150deg, ${a} 0%, ${b} 100%)`, ...style },
  },
    React.createElement('image-slot', { id, src, shape: 'rect', fit: 'cover', placeholder: placeholder || 'Drop photo' }),
  );
}

/* ---------- duotone-only block ---------- */
function ImageBlock({ duo, glyph, label, radius = 0, ratio, style, className }) {
  const [a, b] = duo;
  return React.createElement('div', {
    className: 'imgblock ' + (className || ''),
    style: { background: `linear-gradient(150deg, ${a} 0%, ${b} 100%)`, borderRadius: radius, aspectRatio: ratio, ...style },
  },
    glyph && React.createElement('div', { className: 'glyph' }, React.createElement(_Icon, { name: glyph })),
    label && React.createElement('span', { className: 'lbl' }, label),
  );
}

function VMark() {
  return React.createElement('span', { className: 'vmark', title: 'Verified vendor' }, React.createElement(_Icon, { name: 'check' }));
}

function Badge({ kind, children }) {
  const map = {
    verified: { cls: 'badge-verified', icon: 'check', text: 'Verified' },
    new: { cls: 'badge-new', text: 'New in' },
    low: { cls: 'badge-low', text: 'Low stock' },
    featured: { cls: 'badge-featured', icon: 'star', text: 'Featured' },
    stock: { cls: 'badge-stock', icon: 'check', text: 'In stock' },
  };
  const m = map[kind] || {};
  return React.createElement('span', { className: 'badge ' + (m.cls || '') },
    m.icon && React.createElement(_Icon, { name: m.icon, fill: kind === 'verified' }), children || m.text);
}

function VendorStrip({ vendor, size = 26, showHandle = true, onClick }) {
  return React.createElement('div', { className: 'vstrip', onClick, style: onClick ? { cursor: 'pointer' } : null },
    React.createElement(Avatar, { name: vendor.name, color: vendor.avatar, size }),
    React.createElement('div', { style: { minWidth: 0, lineHeight: 1.25 } },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 5 } },
        React.createElement('span', { className: 'name' }, vendor.name),
        vendor.verified && React.createElement(VMark, null)),
      showHandle && React.createElement('div', { className: 'handle' }, '@' + vendor.handle)),
  );
}

function Marker({ on, onToggle, size }) {
  const [pulse, setPulse] = _useState(false);
  const click = (e) => { e.stopPropagation(); if (!on) { setPulse(true); setTimeout(() => setPulse(false), 460); } onToggle && onToggle(); };
  return React.createElement('button', {
    className: 'marker' + (on ? ' on' : '') + (pulse ? ' pulse' : ''),
    onClick: click, 'aria-pressed': on, title: on ? 'Marked' : 'Mark',
    style: size ? { width: size, height: size } : null,
  }, React.createElement(_Icon, { name: 'bookmark', fill: on }));
}

/* ---------- product card v2 ---------- */
function ProductCard({ p, marked, onMark, onOpen, ratio }) {
  const v = window.LM_DATA.vendorOf(p);
  const naira = window.LM_DATA.naira;
  return React.createElement('div', { className: 'pcard', onClick: () => onOpen(p) },
    React.createElement('div', { className: 'media', style: { aspectRatio: ratio || '4/5' } },
      React.createElement(Slot, { id: 'prod-' + p.id, duo: p.duo, src: p.img, placeholder: catLabel[p.cat] || 'Photo', style: { position: 'absolute', inset: 0 } }),
      React.createElement(Marker, { on: marked, onToggle: () => onMark(p) }),
      p.badge && React.createElement('div', { style: { position: 'absolute', top: 10, left: 10, zIndex: 4 } }, React.createElement(Badge, { kind: p.badge })),
      React.createElement('span', { className: 'pricepill price' }, naira(p.price)),
    ),
    React.createElement('div', { className: 'body' },
      React.createElement('div', { className: 'vmini' },
        React.createElement(Avatar, { name: v.name, color: v.avatar, size: 19 }),
        React.createElement('span', { className: 'h' }, '@' + v.handle),
        v.verified && React.createElement(VMark, null)),
      React.createElement('div', { className: 'pname' }, p.name),
    ),
  );
}

/* ---------- store card v2 ---------- */
function StoreCard({ vendor, onOpen, width }) {
  return React.createElement('div', { className: 'scard', style: width ? { width } : null, onClick: () => onOpen && onOpen(vendor) },
    React.createElement(Slot, { id: 'store-' + vendor.handle, duo: vendor.cover, src: vendor.img, placeholder: 'Store cover', className: 'cover', style: { height: 108 } }),
    React.createElement('div', { className: 'sbody' },
      React.createElement(Avatar, { name: vendor.name, color: vendor.avatar, size: 58, className: 'savatar' }),
      React.createElement('div', { className: 'sname' }, vendor.name, vendor.verified && React.createElement(VMark, null)),
      React.createElement('div', { className: 'smeta' }, React.createElement('span', { className: 't-mono' }, '@' + vendor.handle), '  ·  ', vendor.location),
      React.createElement('div', { className: 'sstats' },
        React.createElement('div', { className: 'sstat' }, React.createElement('div', { className: 'n' }, vendor.response), React.createElement('div', { className: 'l' }, 'Replies in')),
        React.createElement('div', { className: 'sstat' }, React.createElement('div', { className: 'n' }, (vendor.followers / 1000).toFixed(1) + 'k'), React.createElement('div', { className: 'l' }, 'Followers')),
        React.createElement('div', { className: 'sstat' }, React.createElement('div', { className: 'n' }, vendor.age), React.createElement('div', { className: 'l' }, 'On linked')),
      ),
    ),
  );
}

Object.assign(window, { Avatar, Slot, ImageBlock, VMark, Badge, VendorStrip, Marker, ProductCard, StoreCard, catColor, catLabel });