// components/rinpo-phone-app-detail.jsx — in-phone app detail step

function RinpoPhoneAppDetail({ app, onBack, onAskRinpo, onOpenStore }) {
  const store = useStore();
  if (!app) return null;

  const body = buildDetailBody(app, store);

  return (
    <div className="rinpo-os-detail">
      <button type="button" className="rinpo-os-detail__back" onClick={onBack}>
        <Icon name="chev-left" size={16} /> Apps
      </button>
      <div className="rinpo-os-detail__head">
        <span className="rinpo-os-detail__icon">
          {app.icon === 'rinpo' ? <RinpoAvatarImage variant="compact" showPill={false} /> : <Icon name={app.icon} size={22} />}
        </span>
        <div>
          <h2 className="rinpo-os-detail__title">{app.label}</h2>
          <p className="rinpo-os-detail__sub">{app.blurb}</p>
        </div>
      </div>
      <div className="rinpo-os-detail__body">{body}</div>
      <div className="rinpo-os-detail__actions">
        <button type="button" className="rinpo-os-detail__cta" onClick={() => onAskRinpo(app)}>
          Ask RINPO About {app.label} <Icon name="arrow-right" size={14} />
        </button>
        {app.action === 'search' && (
          <button
            type="button"
            className="rinpo-os-detail__secondary"
            onClick={() => {
              if (window.matchMedia('(max-width: 720px)').matches) store.openDrawer('search');
              else onOpenStore('#/search');
            }}
          >
            Open search
          </button>
        )}
        {app.href && !app.external && (
          <button type="button" className="rinpo-os-detail__secondary" onClick={() => onOpenStore(app.href)}>
            Open in store
          </button>
        )}
        {app.external && (
          <a href={app.href} target="_blank" rel="noreferrer" className="rinpo-os-detail__secondary">
            Open WhatsApp
          </a>
        )}
      </div>
    </div>
  );
}

function buildDetailBody(app, store) {
  if (app.id === 'cart') {
    const quote = store.cartQuote({ shipMethod: 'standard' });
    const ship = window.CustomerCommerce.shippingSettings();
    const need = Math.max(0, ship.freeAbove - quote.subtotal);
    return (
      <>
        <div className="rinpo-os-metric">
          <span>Items in bag</span><strong>{store.cartCount()}</strong>
        </div>
        <div className="rinpo-os-metric">
          <span>Subtotal</span><strong>{HAP.formatPrice(quote.subtotal)}</strong>
        </div>
        {need > 0 ? (
          <p className="rinpo-os-detail__note">Add {HAP.formatPrice(need)} more for free shipping above {HAP.formatPrice(ship.freeAbove)}.</p>
        ) : (
          <p className="rinpo-os-detail__note">You qualify for free standard shipping.</p>
        )}
      </>
    );
  }
  if (app.id === 'orders') {
    const orders = global.APG ? global.APG.getOrders() : store.state.orders;
    const last = orders[0];
    if (!last) return <p className="rinpo-os-detail__note">No orders yet. Browse pebbles to get started.</p>;
    return (
      <>
        <div className="rinpo-os-metric"><span>Latest order</span><strong>{last.id}</strong></div>
        <div className="rinpo-os-metric"><span>Status</span><strong>{last.status}</strong></div>
        <div className="rinpo-os-metric"><span>Total</span><strong>{HAP.formatPrice(last.total)}</strong></div>
      </>
    );
  }
  if (app.id === 'bulk') {
    return (
      <p className="rinpo-os-detail__note">
        Builders, resorts, landscapers and nurseries — pebbles by the bag or truckload from Mannuthy, Thrissur. Call +91 7559 907 176 or WhatsApp us.
      </p>
    );
  }
  if (app.category && HAP.productsInCategory) {
    const products = HAP.productsInCategory(app.category).slice(0, 3);
    return (
      <>
        <p className="rinpo-os-detail__note">{app.blurb}</p>
        <div className="rinpo-os-detail__products">
          {products.map(function (p) {
            return (
              <a key={p.id} href={'#/products/' + p.slug} className="rinpo-os-detail__product">
                <img src={p.image} alt="" />
                <span>{p.name}</span>
                <span>{HAP.formatPrice(window.CustomerCommerce.unitPrice(p.price, p.variants[0]))}</span>
              </a>
            );
          })}
        </div>
      </>
    );
  }
  return <p className="rinpo-os-detail__note">{app.blurb}</p>;
}

window.RinpoPhoneAppDetail = RinpoPhoneAppDetail;