/* linked.market — Product detail v2 (mobile + desktop) */
(function () {
const { useState } = React;
const h = React.createElement;
const { naira, VENDORS, byVendor, vendorOf } = window.LM_DATA;
const { Icon, Avatar, Slot, ImageBlock, VendorStrip, VMark, Badge, ProductCard, catLabel } = window;

const galleryDuos = (duo) => { const [a, b] = duo; return [duo, [b, a], [a, b]]; };

function useVariant(p) {
  const init = {}; if (p.variants) Object.keys(p.variants).forEach(k => init[k] = p.variants[k][0]);
  return useState(init);
}

function VariantPicker({ p, sel, setSel }) {
  if (!p.variants) return null;
  return h('div', { style: { display: 'flex', flexDirection: 'column', gap: 18 } },
    Object.entries(p.variants).map(([group, opts]) =>
      h('div', { key: group },
        h('div', { style: { display: 'flex', justifyContent: 'space-between', marginBottom: 10 } },
          h('span', { className: 'eyebrow' }, group),
          h('span', { style: { fontSize: 13, fontWeight: 600 } }, sel[group])),
        h('div', { style: { display: 'flex', gap: 9, flexWrap: 'wrap' } },
          opts.map(o => h('button', { key: o, className: 'vchip' + (sel[group] === o ? ' on' : ''), onClick: () => setSel({ ...sel, [group]: o }) }, o))))));
}

function StoreTrust({ v }) {
  return h('div', { className: 'card', style: { padding: 16, boxShadow: 'var(--shadow-sm)' } },
    h('div', { style: { display: 'flex', alignItems: 'center', gap: 11 } },
      h(Avatar, { name: v.name, color: v.avatar, size: 44, ring: true }),
      h('div', { style: { flex: 1, minWidth: 0, lineHeight: 1.25 } },
        h('div', { style: { display: 'flex', alignItems: 'center', gap: 5, fontWeight: 700, fontSize: 15, fontFamily: 'var(--font-display)' } }, v.name, v.verified && h(VMark)),
        h('div', { className: 't-mono', style: { fontSize: 12, color: 'var(--ink-3)' } }, '@' + v.handle)),
      h('button', { className: 'btn btn-secondary btn-sm' }, 'Follow')),
    h('div', { style: { display: 'flex', gap: 14, marginTop: 15, paddingTop: 15, borderTop: '1px solid var(--line)' } },
      [['Replies in', v.response], ['Orders', v.orders.toLocaleString()], ['On linked', v.age]].map(([l, val]) =>
        h('div', { key: l, style: { flex: 1 } },
          h('div', { className: 'price', style: { fontWeight: 700, fontSize: 15, fontFamily: 'var(--font-display)', letterSpacing: '-.02em' } }, val),
          h('div', { style: { fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 } }, l)))),
  );
}

/* ============================== MOBILE ============================== */
function DetailMobile(props) {
  const { product: p, marked, onMark, onOpen, onSend, onBack } = props;
  const v = vendorOf(p);
  const [sel, setSel] = useVariant(p);
  const [frame, setFrame] = useState(0);
  const duos = galleryDuos(p.duo);
  const related = byVendor(p.vendor).filter(x => x.id !== p.id).slice(0, 4);
  const isMarked = marked.has(p.id);

  return h(React.Fragment, null,
    h('div', { className: 'lm-scroll screen-fade' },
      h('div', { style: { position: 'relative' } },
        h(Slot, { key: frame, id: 'prod-' + p.id + '-g' + frame, duo: duos[frame], src: p.gallery[frame], placeholder: catLabel[p.cat] || 'Photo', style: { width: '100%', aspectRatio: '1/1' } }),
        p.badge && h('div', { style: { position: 'absolute', top: 60, left: 16, zIndex: 5 } }, h(Badge, { kind: p.badge })),
        h('div', { className: 'gdots', style: { position: 'absolute', bottom: 16, left: 0, right: 0, zIndex: 5 } },
          duos.map((_, i) => h('i', { key: i, className: i === frame ? 'on' : '', onClick: () => setFrame(i) })))),
      h('div', { style: { padding: '18px 18px 150px' } },
        h(VendorStrip, { vendor: v, size: 30 }),
        h('h1', { className: 't-display', style: { fontSize: 30, marginTop: 14 } }, p.name),
        h('div', { style: { display: 'flex', alignItems: 'center', gap: 10, marginTop: 10 } },
          h('span', { className: 'price', style: { fontSize: 24, fontWeight: 700, fontFamily: 'var(--font-display)', letterSpacing: '-.02em' } }, naira(p.price)),
          p.stock <= 3 ? h(Badge, { kind: 'low' }) : h(Badge, { kind: 'stock' })),
        h('p', { style: { fontSize: 14.5, lineHeight: 1.6, color: 'var(--ink-2)', marginTop: 14, textWrap: 'pretty' } }, p.desc),
        p.variants && h('div', { style: { marginTop: 24 } }, h(VariantPicker, { p, sel, setSel })),
        h('div', { style: { marginTop: 24 } }, h(StoreTrust, { v })),
        related.length > 0 && h('div', { style: { marginTop: 30 } },
          h('div', { className: 'sechead', style: { marginBottom: 15 } },
            h('div', { className: 'h', style: { fontSize: 19 } }, 'More from ', h('span', { className: 't-mono', style: { fontSize: 14, color: 'var(--ink-2)' } }, '@' + v.handle))),
          h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
            related.map(r => h(ProductCard, { key: r.id, p: r, marked: marked.has(r.id), onMark, onOpen })))))),
    h('div', { className: 'backbar' },
      h('button', { className: 'round-btn', onClick: onBack }, h(Icon, { name: 'chevL' })),
      h('button', { className: 'round-btn' }, h(Icon, { name: 'share' }))),
    h('div', { className: 'msticky' },
      h('button', { className: 'marker' + (isMarked ? ' on' : ''), style: { position: 'static', width: 54, height: 54, flex: '0 0 auto' }, onClick: () => onMark(p) },
        h(Icon, { name: 'bookmark', fill: isMarked })),
      h('button', { className: 'btn btn-primary btn-lg btn-block', onClick: () => onSend(p, sel) },
        h(Icon, { name: 'send' }), 'Send to @' + v.handle)),
  );
}

/* ============================== DESKTOP ============================== */
function DetailDesktop(props) {
  const { product: p, marked, onMark, onOpen, onSend, onBack } = props;
  const v = vendorOf(p);
  const [sel, setSel] = useVariant(p);
  const [frame, setFrame] = useState(0);
  const duos = galleryDuos(p.duo);
  const related = byVendor(p.vendor).filter(x => x.id !== p.id).slice(0, 4);
  const isMarked = marked.has(p.id);

  return h('div', { className: 'screen-fade', style: { maxWidth: 1160, margin: '0 auto', padding: '24px 40px 64px' } },
    h('button', { className: 'btn btn-ghost btn-sm', style: { marginBottom: 20, paddingLeft: 8 }, onClick: onBack }, h(Icon, { name: 'chevL' }), 'Back to discover'),
    h('div', { style: { display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 48, alignItems: 'start' } },
      h('div', { style: { display: 'grid', gridTemplateColumns: '74px 1fr', gap: 14, position: 'sticky', top: 90 } },
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
          duos.map((d, i) => h('div', { key: i, className: 'gthumb' + (i === frame ? ' on' : ''), onClick: () => setFrame(i) },
            h(Slot, { id: 'prod-' + p.id + '-g' + i, duo: d, src: p.gallery[i], placeholder: '', style: { position: 'absolute', inset: 0 } })))),
        h('div', { style: { position: 'relative' } },
          h(Slot, { key: frame, id: 'prod-' + p.id + '-g' + frame, duo: duos[frame], src: p.gallery[frame], placeholder: catLabel[p.cat] || 'Photo', style: { width: '100%', aspectRatio: '4/5', borderRadius: 'var(--r-xl)', boxShadow: 'var(--shadow-md)' } }),
          p.badge && h('div', { style: { position: 'absolute', top: 16, left: 16, zIndex: 5 } }, h(Badge, { kind: p.badge })))),
      h('div', null,
        h(VendorStrip, { vendor: v, size: 32 }),
        h('h1', { className: 't-display', style: { fontSize: 44, marginTop: 16, lineHeight: 1.0 } }, p.name),
        h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, marginTop: 16 } },
          h('span', { className: 'price', style: { fontSize: 30, fontWeight: 700, fontFamily: 'var(--font-display)', letterSpacing: '-.02em' } }, naira(p.price)),
          p.stock <= 3 ? h(Badge, { kind: 'low' }) : h(Badge, { kind: 'stock' })),
        h('p', { style: { fontSize: 15.5, lineHeight: 1.65, color: 'var(--ink-2)', marginTop: 16, maxWidth: 460, textWrap: 'pretty' } }, p.desc),
        p.variants && h('div', { style: { marginTop: 26 } }, h(VariantPicker, { p, sel, setSel })),
        h('div', { style: { display: 'flex', gap: 12, marginTop: 28 } },
          h('button', { className: 'btn btn-primary btn-lg', style: { flex: 1 }, onClick: () => onSend(p, sel) }, h(Icon, { name: 'send' }), 'Send to @' + v.handle),
          h('button', { className: 'btn btn-secondary btn-lg', onClick: () => onMark(p) }, h(Icon, { name: 'bookmark', fill: isMarked }), isMarked ? 'Marked' : 'Mark')),
        h('div', { style: { marginTop: 24 } }, h(StoreTrust, { v }))),
    ),
    related.length > 0 && h('div', { style: { marginTop: 56 } },
      h('div', { className: 'sechead', style: { marginBottom: 20 } },
        h('div', { className: 'h', style: { fontSize: 24 } }, 'More from ', h('span', { className: 't-mono', style: { fontSize: 17, color: 'var(--ink-2)' } }, '@' + v.handle))),
      h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 } },
        related.map(r => h(ProductCard, { key: r.id, p: r, marked: marked.has(r.id), onMark, onOpen, ratio: '4/5' })))),
  );
}

window.DetailMobile = DetailMobile;
window.DetailDesktop = DetailDesktop;
})();