// pages/merchant.jsx — public merchant storefront foundation (no checkout)

function MerchantPublicPage() {
  const route = useRoute();
  const slug = route.params.slug;
  const api = window.OwnerMerchantOs;
  const os = api && api.get && api.get();
  const tenant = api && api.tenant && api.tenant();
  const listings = (os && tenant && tenant.slug === slug)
    ? os.publicListings(tenant)
    : [];
  const [pin, setPin] = React.useState('');
  const svc = os && tenant && pin ? os.serviceability(tenant, pin) : null;
  const brand = (tenant && tenant.merchantBrand) || (tenant && tenant.name) || slug;

  return (
    <div>
      <section style={{ padding: '48px 0 24px', background: 'var(--cream)' }}>
        <div className="container">
          <div className="crumbs">
            <a href="#/">Home</a>
            <span className="sep">/</span>
            <span className="here">{brand}</span>
          </div>
          <h1 className="serif" style={{ fontSize: 'var(--fs-display)', lineHeight: 1.05 }}>{brand}</h1>
          <p style={{ color: 'var(--ink-2)', maxWidth: 560, marginTop: 12 }}>
            Public catalog for this merchant. Serviceability is a location flag only — no live courier coverage is claimed.
          </p>
        </div>
      </section>
      <div className="container" style={{ padding: '24px 0 64px' }}>
        <div className="field" style={{ maxWidth: 280, marginBottom: 24 }}>
          <label>Check pincode</label>
          <input className="inp" value={pin} onChange={(e) => setPin(e.target.value)} placeholder="6-digit pincode" />
          {svc && <p style={{ marginTop: 8, color: 'var(--ink-2)' }}>{svc.serviced ? 'This pincode is flagged as serviceable.' : 'Not flagged for this pincode.'} Live courier is not enabled.</p>}
        </div>
        <div className="grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 20 }}>
          {listings.map((row) => (
            <a key={row.listingId} href={row.path} className="card card-pad" style={{ textDecoration: 'none', color: 'inherit' }}>
              {row.images[0] && <img src={row.images[0].url} alt={row.images[0].alt} style={{ width: '100%', aspectRatio: '1', objectFit: 'cover', borderRadius: 8 }} />}
              <h3 className="serif" style={{ marginTop: 12 }}>{row.name}</h3>
              <p className="muted">{row.categoryKey}</p>
              <p>{row.priceMinor != null ? '₹' + (row.priceMinor / 100).toFixed(2) : 'Price on request'}</p>
            </a>
          ))}
        </div>
        {listings.length === 0 && (
          <p style={{ color: 'var(--ink-2)' }}>No published listings for this merchant yet.</p>
        )}
      </div>
    </div>
  );
}