// Recipes, Recipe detail, Basket screens

/* ============================================
   RECIPES LIST
   ============================================ */
const Recipes = ({ onSend, onAdd, basket, onOpenRecipe }) => (
  <>
    <CanvasHeader
      crumb="02 — ideas"
      title="Three ways with <em>what you have.</em>"
      subtitle="Sorted by how little extra you'd need to shop. Tap to add the missing ingredients in one go."
    />

    <div className="grid-2" style={{ gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 28 }}>
      {[...BLYZR.recipes].sort((a, b) => (b.image ? 1 : 0) - (a.image ? 1 : 0)).map((r, i) => {
        const onImg = !!r.image;
        const titleHead = r.name.split(' ').slice(0, -1).join(' ');
        const titleTail = r.name.split(' ').slice(-1)[0];
        return (
        <button
          key={r.id}
          onClick={() => onOpenRecipe(r.id)}
          style={{
            background: onImg ? 'var(--surface-2)' : `linear-gradient(${r.gradient})`,
            border: '1px solid var(--border-soft)',
            borderRadius: 'var(--r-lg)',
            padding: 24,
            textAlign: 'left',
            cursor: 'pointer',
            transition: '0.2s',
            display: 'flex',
            flexDirection: 'column',
            gap: 18,
            aspectRatio: '1.3',
            position: 'relative',
            overflow: 'hidden',
            animation: `fade-up 0.5s ${i * 0.1}s both`,
          }}
          className="recipe-tile"
        >
          {onImg ? (
            <>
              <img src={r.image} alt={r.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}/>
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, oklch(0.14 0.01 80 / 0.12), transparent 35%, oklch(0.14 0.01 80 / 0.80))' }}/>
            </>
          ) : (
            <div style={{ position: 'absolute', right: -20, bottom: -20, opacity: 0.18 }}>
              <Glyph kind={r.ingredients[0] && BLYZR.productById[r.ingredients[0].id] ? BLYZR.productById[r.ingredients[0].id].glyph : 'leaf'} style={{ width: 160, height: 160, color: 'var(--ink)' }}/>
            </div>
          )}

          <div className="eyebrow" style={{ color: onImg ? 'oklch(0.96 0.02 100 / 0.9)' : 'var(--ink-2)', position: 'relative' }}>{r.tags.join(' · ')}</div>

          <div style={{ marginTop: 'auto', position: 'relative' }}>
            <div style={{ fontFamily: 'var(--f-display)', fontSize: 30, lineHeight: 1.05, letterSpacing: '-0.02em', color: onImg ? 'oklch(0.99 0.003 100)' : 'var(--ink)' }}>
              {titleHead} <em style={{ fontStyle: 'italic', color: onImg ? 'oklch(0.92 0.02 100)' : 'var(--ink-2)' }}>{titleTail}</em>
            </div>
            <div className="mono" style={{ fontSize: 12, color: onImg ? 'oklch(0.95 0.02 100 / 0.8)' : 'var(--ink-3)', marginTop: 8, letterSpacing: '0.06em' }}>
              {r.time} · serves {r.serves} · {r.level}
            </div>
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative' }}>
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: onImg ? 'oklch(0.95 0.02 100 / 0.85)' : 'var(--ink-2)' }}>
              {r.ingredients.length} ingredients
            </span>
            <span style={{ width: 32, height: 32, borderRadius: '50%', background: 'oklch(0.99 0.003 100 / 0.85)', display: 'grid', placeItems: 'center', backdropFilter: 'blur(10px)', color: 'var(--ink)' }}>
              <Icon.arrow style={{ width: 14, height: 14 }}/>
            </span>
          </div>
        </button>
        );
      })}
    </div>

    <div className="sec-head">
      <h3>Pair with</h3>
      <span className="meta">freshly curated · 04</span>
    </div>
    <div className="grid-4">
      {['p-bread', 'p-coff', 'p-avo', 'p-but'].map((id) => {
        const p = BLYZR.productById[id];
        return <ProductCard key={id} p={p} inBasket={basket.has(id)} onAdd={onAdd}/>;
      })}
    </div>
  </>
);

/* ============================================
   RECIPE DETAIL
   ============================================ */
const RecipeDetail = ({ recipeId, autoAdd, onAdd, basket, pantrySet, onSend, onBack, onGoBasket }) => {
  const r = BLYZR.recipes.find((x) => x.id === recipeId) || BLYZR.recipes[0];
  const [checked, setChecked] = useS(new Set());

  // Auto-add missing ingredients when the agent navigated here with autoAdd
  useE(() => {
    if (!autoAdd) return;
    const missing = r.ingredients.filter((i) => !pantrySet.has(i.id));
    missing.forEach((m, idx) => {
      setTimeout(() => onAdd(m.id, { silent: true }), 200 + idx * 250);
    });
  }, [autoAdd, recipeId]);

  const toggle = (id) => setChecked((s) => {
    const next = new Set(s); next.has(id) ? next.delete(id) : next.add(id); return next;
  });

  return (
    <>
      <div style={{ display: 'flex', gap: 12, marginBottom: 20 }}>
        <button className="btn btn-ghost" onClick={onBack}><Icon.back/> Back</button>
      </div>

      <div className="recipe-hero" style={{ background: `${`linear-gradient(${r.gradient}), var(--surface)`}` }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{r.tags.join(' · ')}</div>
          <h2>{r.name.split(' ').slice(0, -1).join(' ')} <em>{r.name.split(' ').slice(-1)[0]}</em></h2>
          <p className="muted" style={{ marginTop: 10, fontSize: 14, maxWidth: 420 }}>{r.tagline}.</p>
          <div className="stats">
            <div className="stat"><b>{r.time.split(' ')[0]}</b><span>min</span></div>
            <div className="stat"><b>{r.serves}</b><span>serves</span></div>
            <div className="stat"><b>{r.level}</b><span>level</span></div>
          </div>
        </div>
        <div style={{ display: 'grid', placeItems: 'center', position: 'relative' }}>
          <div style={{ position: 'relative', width: 160, height: 160 }}>
            <Orb size={160}/>
          </div>
        </div>
      </div>

      <div className="sec-head" style={{ marginTop: 32 }}>
        <h3>Ingredients</h3>
        <span className="meta">{r.ingredients.length} items · {r.ingredients.filter((i) => !pantrySet.has(i.id)).length} to buy</span>
      </div>

      <div style={{ background: 'var(--bg)', border: '1px solid var(--border-soft)', borderRadius: 'var(--r-lg)', padding: '4px 20px' }}>
        {r.ingredients.map((i) => {
          const p = BLYZR.productById[i.id];
          const have = pantrySet.has(i.id);
          const isChecked = checked.has(i.id);
          return (
            <div key={i.id} className={`ingr-row ${isChecked ? 'checked' : ''}`}>
              <button className="ingr-check" onClick={() => toggle(i.id)}>
                <Icon.check/>
              </button>
              <div className="ingr-name">{p.name}</div>
              <div className="ingr-amount">{i.amount}</div>
              <div className={`ingr-status ${have ? 'in' : ''}`}>
                {have ? '✓ pantry' : basket.has(i.id) ? 'in basket' : `+$${p.price.toFixed(2)}`}
              </div>
            </div>
          );
        })}
      </div>

      <div className="glass" style={{ marginTop: 24, padding: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 4 }}>Missing from your pantry</div>
          <div style={{ fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 22 }}>
            ${r.ingredients.filter((i) => !pantrySet.has(i.id)).reduce((s, i) => s + BLYZR.productById[i.id].price, 0).toFixed(2)} to complete the dish
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-outline" onClick={() => onSend('what else can i make')}>Try another</button>
          <button className="btn btn-accent" onClick={onGoBasket}>
            Open basket <Icon.arrow style={{ width: 14, height: 14 }}/>
          </button>
        </div>
      </div>
    </>
  );
};

/* ============================================
   BASKET
   ============================================ */
const Basket = ({ basket, quantities, onAdd, onRemove, onQty, onCheckout, onSend, preset }) => {
  const items = Array.from(basket).map((id) => ({ p: BLYZR.productById[id], q: quantities[id] || 1 }));
  const subtotal = items.reduce((s, { p, q }) => s + p.price * q, 0);
  const delivery = subtotal > 40 ? 0 : 2.50;
  const total = subtotal + delivery;

  return (
    <>
      <CanvasHeader
        crumb={preset === 'restock' ? '04 — restock' : preset === 'weekly' ? '04 — weekly basket' : '04 — basket'}
        title={preset === 'restock' ? 'Topped up the <em>essentials.</em>' : 'Your basket, <em>composed.</em>'}
        subtitle="Tap quantities to adjust. Blyzr keeps a quiet eye on duplicates and what's already in your pantry."
        right={(
          <div className="col gap-2" style={{ alignItems: 'flex-end' }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-4)' }}>est. delivery</div>
            <div style={{ fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 26 }}>thu 6–7pm</div>
          </div>
        )}
      />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 28 }}>
        <div>
          <div style={{ background: 'var(--bg)', border: '1px solid var(--border-soft)', borderRadius: 'var(--r-lg)', padding: '4px 20px' }}>
            {items.length === 0 && (
              <div style={{ padding: '60px 20px', textAlign: 'center', color: 'var(--ink-3)' }}>
                <div style={{ fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 24, marginBottom: 8 }}>Empty so far.</div>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Ask Blyzr for ideas →</div>
              </div>
            )}
            {items.map(({ p, q }) => (
              <div key={p.id} className="basket-row">
                <div className="basket-thumb"><PThumb p={p}/></div>
                <div>
                  <div className="name">{p.name}</div>
                  <div className="meta">{p.sub} · {p.sku}</div>
                </div>
                <div className="qty">
                  <button onClick={() => onQty(p.id, q - 1)}><Icon.minus/></button>
                  <span className="n">{q}</span>
                  <button onClick={() => onQty(p.id, q + 1)}><Icon.plus/></button>
                </div>
                <div className="price">${(p.price * q).toFixed(2)}</div>
                <button className="x" onClick={() => onRemove(p.id)}><Icon.x/></button>
              </div>
            ))}
          </div>

          <div className="sec-head" style={{ marginTop: 36 }}>
            <h3>Often added with these</h3>
            <span className="meta">smart picks · 03</span>
          </div>
          <div className="grid-3">
            {['p-bread', 'p-lem', 'p-coff'].filter((id) => !basket.has(id)).map((id) => {
              const p = BLYZR.productById[id];
              return <ProductCard key={id} p={p} inBasket={false} onAdd={onAdd}/>;
            })}
          </div>
        </div>

        <div>
          <div className="totals">
            <div className="eyebrow" style={{ marginBottom: 14 }}>Summary</div>
            <div className="totals-line"><span>Subtotal · {items.length} items</span><span className="v">${subtotal.toFixed(2)}</span></div>
            <div className="totals-line"><span>Delivery</span><span className="v">{delivery === 0 ? 'Free' : `$${delivery.toFixed(2)}`}</span></div>
            <div className="totals-line"><span>Loyalty (Blyzr+)</span><span className="v" style={{ color: 'var(--accent-ink)' }}>−$1.40</span></div>
            <div className="totals-line total"><span>Total</span><span className="v">${(total - 1.40).toFixed(2)}</span></div>

            <button className="btn btn-accent btn-lg" style={{ width: '100%', justifyContent: 'center', marginTop: 18 }} disabled={items.length === 0} onClick={onCheckout}>
              Checkout <Icon.arrow style={{ width: 14, height: 14 }}/>
            </button>

            <div className="mono" style={{ marginTop: 14, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-4)', textAlign: 'center' }}>
              one-tap pay · face ID
            </div>
          </div>

          <div className="glass" style={{ marginTop: 16, padding: 16, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <OrbMini/>
            <div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 4 }}>Blyzr notes</div>
              <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.45 }}>
                You're getting $4.50 off cold-press oil this week — already factored in. Skip avocados, last week's two are still good.
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

window.Recipes = Recipes;
window.RecipeDetail = RecipeDetail;
window.Basket = Basket;