const { RestaurantCard } = window.BecoDesignSystem_7188f3;

const CARD_SHADOW = { boxShadow: "3px 3px 0 var(--ink-700)", borderColor: "var(--ink-600)" };

/** The whole middle. Drag sideways anywhere and the feed shifts to the next category. */
function FeedView({ query, filters = {}, sort = "distance", categories, index, setIndex, onOpenRestaurant, dragProgress, setDragProgress }) {
  const [dx, setDx] = React.useState(0);
  const [dragging, setDragging] = React.useState(false);
  const wrap = React.useRef(null);
  const [W, setW] = React.useState(390);
  const start = React.useRef(null);
  const axis = React.useRef(null);

  React.useEffect(() => {
    const measure = () => { if (wrap.current) setW(wrap.current.clientWidth || 390); };
    measure();
    window.addEventListener("resize", measure);
    window.addEventListener("orientationchange", measure);
    return () => { window.removeEventListener("resize", measure); window.removeEventListener("orientationchange", measure); };
  }, []);

  const num = (s) => parseFloat(String(s).replace(",", "."));
  const keep = (r) => (!filters.freeDelivery || r.deliveryFee === "R$ 0,00")
    && (!filters.fast || num(r.eta) <= 25)
    && (!filters.topRated || num(r.rating) >= 4.7)
    && (!filters.near || num(r.distance) <= 2);
  const order = {
    distance: (a, b) => num(a.distance) - num(b.distance),
    eta: (a, b) => num(a.eta) - num(b.eta),
    rating: (a, b) => num(b.rating) - num(a.rating),
    fee: (a, b) => num(a.deliveryFee.replace("R$ ", "")) - num(b.deliveryFee.replace("R$ ", ""))
  }[sort];

  const pages = categories.map(c => PLACES
    .filter(r => (c === "Tudo" || r.cuisine === c) && r.name.toLowerCase().includes(query.toLowerCase()) && keep(r))
    .sort(order));

  const onDown = (e) => { start.current = { x: e.clientX, y: e.clientY }; axis.current = null; };
  const onMove = (e) => {
    if (!start.current) return;
    const ddx = e.clientX - start.current.x, ddy = e.clientY - start.current.y;
    if (!axis.current && (Math.abs(ddx) > 8 || Math.abs(ddy) > 8)) axis.current = Math.abs(ddx) > Math.abs(ddy) ? "x" : "y";
    if (axis.current !== "x") return;
    const atEdge = (index === 0 && ddx > 0) || (index === categories.length - 1 && ddx < 0);
    const val = atEdge ? ddx * 0.28 : ddx;
    setDragging(true); setDx(val); setDragProgress(-val / W);
  };
  const end = () => {
    if (axis.current === "x" && Math.abs(dx) > 62) {
      const dir = dx < 0 ? 1 : -1;
      setIndex(Math.min(categories.length - 1, Math.max(0, index + dir)));
    }
    start.current = null; axis.current = null;
    setDragging(false); setDx(0); setDragProgress(0);
  };

  return (
    <div ref={wrap}
      onPointerDown={onDown} onPointerMove={onMove} onPointerUp={end} onPointerCancel={end}
      style={{
        position: "absolute", top: 104, left: 0, right: 0, bottom: 0, overflow: "hidden",
        touchAction: "pan-y", zIndex: 20,
        maskImage: "linear-gradient(to bottom, #000 0, #000 calc(100% - 168px), transparent calc(100% - 122px))",
        WebkitMaskImage: "linear-gradient(to bottom, #000 0, #000 calc(100% - 168px), transparent calc(100% - 122px))"
      }}>
      <div style={{
        display: "flex", height: "100%", width: categories.length * W,
        transform: "translateX(" + (-index * W + dx) + "px)",
        transition: dragging ? "none" : "transform var(--dur-slow) var(--ease-out)"
      }}>
        {pages.map((list, i) => (
          <div key={categories[i]} style={{ width: W, height: "100%", overflowY: Math.abs(i - index) < 1 ? "auto" : "hidden", padding: "0 16px 190px 16px", boxSizing: "border-box", scrollbarWidth: "none" }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, paddingTop: 4 }}>
              {list.map(r => (
                <div key={r.name} style={{ position: "relative" }}>
                  {r.producer ? (
                    <ProducerCard place={r} style={CARD_SHADOW}
                      onClick={(e) => onOpenRestaurant(r, e.currentTarget.getBoundingClientRect())} />
                  ) : (
                  <RestaurantCard layout="horizontal" style={CARD_SHADOW}
                    name={r.name} cuisine={r.cuisine} rating={r.rating} eta={r.eta}
                    distance={r.distance} deliveryFee={r.deliveryFee} badge={r.badge}
                    onClick={(e) => onOpenRestaurant(r, e.currentTarget.getBoundingClientRect())} />
                  )}
                  {r.brand && !r.producer && (
                    <div aria-hidden="true" style={{
                      position: "absolute", left: 1, top: 1, width: 88, height: 96, pointerEvents: "none",
                      borderRadius: "var(--radius-lg) 0 0 var(--radius-lg)", overflow: "hidden",
                      background: r.brand.bg, display: "flex", flexDirection: "column",
                      alignItems: "center", justifyContent: "center", gap: 1
                    }}>
                      <span style={{
                        fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 6.5, letterSpacing: "0.2em",
                        textTransform: "uppercase", color: r.brand.dimmer
                      }}>{r.brand.kicker}</span>
                      <span style={{
                        width: 44, height: 44, borderRadius: "50%", background: r.brand.paper,
                        border: "2px solid " + r.brand.accent, boxShadow: "0 0 0 3px " + r.brand.gold,
                        display: "flex", alignItems: "center", justifyContent: "center",
                        fontFamily: r.brand.display, fontSize: 16, lineHeight: 1, color: r.brand.accent, overflow: "hidden"
                      }}>{r.brand.logo ? <img src={r.brand.logo} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : r.brand.mark}</span>
                    </div>
                  )}
                </div>
              ))}
              {!list.length && (
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-400)", paddingTop: 40, lineHeight: 1.8 }}>
                  nada em {categories[i].toLowerCase()}
                  {Object.values(filters).some(Boolean) && <><br />com esses filtros</>}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
Object.assign(window, { FeedView });