// ui.jsx — shared contexts + UI primitives

const LangCtx = React.createContext({ lang: 'es', t: STR.es });
const NavCtx  = React.createContext(null);
const CartCtx = React.createContext({ cart: {}, addToCart: () => {}, removeFromCart: () => {}, clearCart: () => {} });
const useLang = () => React.useContext(LangCtx);
const useNav  = () => React.useContext(NavCtx);
const useCart = () => React.useContext(CartCtx);

// Price pill (handles "Consultar")
function Price({ value, size = 16 }) {
  const { t } = useLang();
  const s = fmt(value);
  return (
    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: size, color: 'var(--c-accent-ink)', whiteSpace: 'nowrap' }}>
      {s || t.consult}
    </span>
  );
}

// Stepper button style
const STEP_BTN = { width: 28, height: 28, borderRadius: 999, border: '1.5px solid var(--c-line)', background: 'var(--c-bg)', color: 'var(--c-brand)', fontWeight: 700, fontSize: 18, lineHeight: 1, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 };

// Full-width product row card
function ProductCard({ p }) {
  const { lang } = useLang();
  const { cart, addToCart, removeFromCart } = useCart();
  const name = lang === 'en' && p.en ? p.en : p.name;
  const qty = cart[p.id]?.qty || 0;
  return (
    <div className="card prod-row" style={{ alignItems: 'center' }}>
      <Placeholder icon={p.icon} tone={p.tone} src={p.photo} style={{ width: 64, height: 64, flexShrink: 0, borderRadius: 'var(--r-sm)' }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 7, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--c-ink)', lineHeight: 1.15 }}>{name}</span>
          {p.vol && <span className="vol">{p.vol}</span>}
          {p.tag && <span className="tag">{p.tag}</span>}
        </div>
        {p.desc && <p style={{ margin: '4px 0 0', fontSize: 12, color: 'var(--c-ink-soft)', lineHeight: 1.4 }}>{p.desc}</p>}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 5, flexShrink: 0 }}>
        <Price value={p.price} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          {qty > 0 && <>
            <button style={STEP_BTN} onClick={() => removeFromCart(p.id)}>−</button>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, minWidth: 16, textAlign: 'center', color: 'var(--c-brand)' }}>{qty}</span>
          </>}
          <button style={{ ...STEP_BTN, background: 'var(--c-brand)', color: '#fff', border: 'none' }}
            onClick={() => addToCart(p.id, { name, price: p.price, icon: p.icon, tone: p.tone })}>+</button>
        </div>
      </div>
    </div>
  );
}

// Small card for horizontal "featured" rail
function ProductMini({ p }) {
  const { lang } = useLang();
  const name = lang === 'en' && p.en ? p.en : p.name;
  return (
    <div className="card lift" style={{ width: 150, flexShrink: 0, overflow: 'hidden' }}>
      <div style={{ position: 'relative' }}>
        <Placeholder icon={p.icon} tone={p.tone} src={p.photo} label={null} style={{ height: 96, borderRadius: 0 }} />
        {p.tag && <span className="tag" style={{ position: 'absolute', left: 8, top: 8, background: 'rgba(0,0,0,.32)', color: '#fff' }}>{p.tag}</span>}
      </div>
      <div style={{ padding: '10px 11px 11px' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13.5, lineHeight: 1.15, minHeight: 31 }}>{name}</div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 6 }}>
          <Price value={p.price} size={14.5} />
          {p.vol && <span className="vol">{p.vol}</span>}
        </div>
      </div>
    </div>
  );
}

// Recommendation chip (Esquel) — display only
function RecItem({ id }) {
  const p = productById(id);
  const { lang } = useLang();
  if (!p) return null;
  const name = lang === 'en' && p.en ? p.en : p.name;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '7px 12px 7px 9px', borderRadius: 999, border: '1px solid var(--c-line)', background: 'var(--c-bg)' }}>
      <span style={{ color: 'var(--c-brand)', display: 'flex' }}><Icon name={p.icon} size={15} sw={1.9} /></span>
      <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--c-ink)', whiteSpace: 'nowrap' }}>{name}</span>
    </span>
  );
}

// Ticket-style combo card — shows summed price + add to cart
function ComboCard({ c }) {
  const { t, lang } = useLang();
  const { cart, addToCart, removeFromCart } = useCart();
  const total = comboTotal(c);
  const cartId = 'combo-' + c.id;
  const qty = cart[cartId]?.qty || 0;
  return (
    <div className="ticket lift" style={{ display: 'flex' }}>
      <div style={{ width: 86, flexShrink: 0, position: 'relative', background: 'var(--c-brand)' }}>
        <Placeholder icon={c.icon} tone={c.tone} label={null} style={{ height: '100%', borderRadius: 0 }} />
      </div>
      <div className="perf" style={{ left: 86 }} />
      <div style={{ flex: 1, padding: '13px 14px 13px 18px', minWidth: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16 }}>{c.name}</div>
            <div style={{ fontSize: 11.5, color: 'var(--c-ink-soft)', marginTop: 1 }}>{c.for}</div>
          </div>
          {c.tag && <span className="tag" style={{ flexShrink: 0 }}>{c.tag}</span>}
        </div>
        <ul style={{ margin: '9px 0 11px', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 3 }}>
          {c.items.map((id, i) => {
            const p = productById(id);
            const name = p ? (lang === 'en' && p.en ? p.en : p.name) : id;
            return (
              <li key={i} style={{ fontSize: 12.5, color: 'var(--c-ink)', display: 'flex', alignItems: 'center', gap: 7 }}>
                <span style={{ color: 'var(--c-brand)', display: 'flex' }}><Icon name="check" size={13} sw={2.4} /></span>{name}
              </li>
            );
          })}
        </ul>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ fontSize: 13.5 }}>
            <span style={{ fontSize: 10.5, color: 'var(--c-ink-soft)', textTransform: 'uppercase', letterSpacing: '.08em', marginRight: 5 }}>{t.approx}</span>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--c-accent-ink)' }}>{fmt(total)}</span>
          </span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            {qty > 0 && <>
              <button style={STEP_BTN} onClick={() => removeFromCart(cartId)}>−</button>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--c-brand)' }}>{qty}</span>
            </>}
            <button style={{ ...STEP_BTN, background: 'var(--c-brand)', color: '#fff', border: 'none' }}
              onClick={() => addToCart(cartId, { name: c.name, price: total, icon: c.icon || 'bag', tone: c.tone || 'brand', isCombo: true })}>+</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function SectionHead({ eyebrow, title, sub, action }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12, margin: '0 0 13px' }}>
      <div>
        {eyebrow && <div className="h-eyebrow" style={{ marginBottom: 5 }}>{eyebrow}</div>}
        <div className="h-title">{title}</div>
        {sub && <div className="h-sub" style={{ marginTop: 3 }}>{sub}</div>}
      </div>
      {action}
    </div>
  );
}

// Top app header
function Header() {
  const { lang, setLang, t } = useLang();
  const { cart } = useCart();
  const { go } = useNav();
  const totalQty = Object.values(cart).reduce((s, v) => s + v.qty, 0);
  return (
    <div className="app-header">
      <div style={{ display: 'flex', alignItems: 'center', gap: 11, position: 'relative' }}>
        <Stamp size={42} color="#F3E9D3" />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17, letterSpacing: '-.01em', lineHeight: 1, color: '#FBF6EC' }}>Cafetería La Z</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 3, fontSize: 11, color: 'rgba(251,246,236,.72)' }}>
            <Icon name="pin" size={13} sw={1.8} style={{ color: 'var(--c-gold)' }} />{t.terminal}
          </div>
        </div>
        {totalQty > 0 && (
          <button onClick={() => go('order')} style={{ position: 'relative', background: 'rgba(255,255,255,.18)', border: 'none', borderRadius: 10, width: 38, height: 38, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#FBF6EC', cursor: 'pointer', flexShrink: 0 }}>
            <Icon name="bag" size={20} sw={1.9} />
            <span style={{ position: 'absolute', top: -4, right: -4, background: 'var(--c-accent)', color: '#fff', borderRadius: 999, minWidth: 18, height: 18, fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 4px', fontFamily: 'var(--font-display)' }}>{totalQty}</span>
          </button>
        )}
        <button onClick={() => setLang(lang === 'es' ? 'en' : 'es')} className="lang-btn">
          <Icon name="globe" size={14} sw={1.8} />{lang.toUpperCase()}
        </button>
      </div>
    </div>
  );
}

// Open-now status strip
function OpenStrip() {
  const { t } = useLang();
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 12.5, fontWeight: 600, color: 'var(--c-brand)', whiteSpace: 'nowrap' }}>
      <span style={{ width: 8, height: 8, borderRadius: 999, background: '#2e9e5b', boxShadow: '0 0 0 3px rgba(46,158,91,.18)', flexShrink: 0 }} />
      {t.open} · <span style={{ color: 'var(--c-ink-soft)', fontWeight: 500 }}>{t.closes}</span>
    </div>
  );
}

Object.assign(window, {
  LangCtx, NavCtx, CartCtx, useLang, useNav, useCart,
  Price, ProductCard, ProductMini, RecItem, ComboCard, SectionHead, Header, OpenStrip,
});