// Rich recipe article — Details, Video, Ingredients, Cooking Steps.
// Used for recipes that carry a `steps` array (e.g. Classic Qatayef Dough).

const RecipeArticle = ({ recipeId, onAdd, basket, quantities, onQty, onBack, onSend, onGoBasket }) => {
  const r = BLYZR.recipes.find((x) => x.id === recipeId) || BLYZR.recipes[0];
  const buyable = r.ingredients.filter((i) => BLYZR.productById[i.id]);
  const toBuy = buyable.filter((i) => !basket.has(i.id));
  const toBuyTotal = toBuy.reduce((s, i) => s + BLYZR.productById[i.id].price, 0);
  const fullTotal = buyable.reduce((s, i) => s + BLYZR.productById[i.id].price, 0);
  const addAll = () => toBuy.forEach((i) => onAdd(i.id));

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

      {/* HERO */}
      <div className="article-hero">
        <div className="art-img"><img src={r.image} alt={r.name}/></div>
        <div>
          <div className="crumb" style={{ marginBottom: 16 }}><span className="dot"/><span>{r.tags.join(' · ')}</span></div>
          <h1 style={{ fontFamily: 'var(--f-display)', fontWeight: 400, fontSize: 50, lineHeight: 1.06, letterSpacing: '-0.028em', margin: '0 0 20px' }}>
            {r.name}
          </h1>
          <div className="art-byline">
            <OrbMini/>
            <span>By <a href={r.author.url} target="_blank" rel="noopener">{r.author.name}</a> · <span className="mono" style={{ fontSize: 12 }}>{r.author.handle}</span></span>
          </div>
          <p className="art-desc">{r.description}</p>
          <div style={{ display: 'flex', gap: 8, marginTop: 22, flexWrap: 'wrap' }}>
            <button className="btn btn-accent" onClick={toBuy.length ? addAll : onGoBasket}>
              {toBuy.length ? `Add ${toBuy.length} ingredients · $${toBuyTotal.toFixed(2)}` : 'In your basket ✓'}
              {toBuy.length ? <Icon.plus style={{ width: 14, height: 14 }}/> : null}
            </button>
            <button className="btn btn-outline" onClick={() => onSend(`how do i make ${r.name.toLowerCase()}`)}>Ask Blyzr</button>
          </div>
        </div>
      </div>

      {/* DETAILS */}
      <div className="sec-head" style={{ marginTop: 48 }}><h3>Details</h3><span className="meta">per serving · {r.details.servingSize}</span></div>
      <div className="detail-grid">
        <div className="detail-cell"><div className="k">Skill</div><div className="v">{r.details.skill}</div></div>
        <div className="detail-cell"><div className="k">Cook time</div><div className="v">{r.details.time}</div></div>
        <div className="detail-cell"><div className="k">Servings</div><div className="v">{r.details.servings}</div></div>
        <div className="detail-cell"><div className="k">Serving size</div><div className="v" style={{ fontSize: 17 }}>{r.details.servingSize}</div></div>
        <div className="detail-cell"><div className="k">Est. calories</div><div className="v">{r.details.calories}<small> /serving</small></div></div>
      </div>
      <div className="macro-row">
        {r.nutrition.map((n) => (
          <div key={n.k} className="macro-chip">
            <span className="mk">{n.k}</span>
            <span className="mv">{n.v}</span>
            {n.pct ? <span className="mp">{n.pct}</span> : null}
          </div>
        ))}
      </div>
      <div className="mono muted" style={{ fontSize: 10.5, letterSpacing: '0.04em', marginTop: 12 }}>* Percent daily values are based on a 2,000 calorie diet.</div>

      {/* WATCH */}
      <div className="sec-head" style={{ marginTop: 52 }}><h3>Watch</h3><span className="meta">{r.video.platform} · {r.author.handle}</span></div>
      <div style={{ display: 'flex', gap: 32, alignItems: 'center', flexWrap: 'wrap' }}>
        <a className="video-card" href={r.video.url} target="_blank" rel="noopener">
          <img src={r.image} alt={r.name}/>
          <div className="vscrim"/>
          <span className="vtag">▶ {r.video.platform}</span>
          <div className="vplay"><Icon.play/></div>
          <div className="vmeta">
            <div style={{ fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.1 }}>Watch the technique</div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', marginTop: 5, opacity: 0.92 }}>{r.author.name} · {r.author.handle}</div>
          </div>
        </a>
        <div style={{ maxWidth: 340 }}>
          <div className="eyebrow" style={{ marginBottom: 10, display: 'flex', alignItems: 'center', gap: 8 }}><OrbMini/> Blyzr tip</div>
          <p className="muted" style={{ fontSize: 14.5, lineHeight: 1.6, margin: 0 }}>
            Watch how thin the batter runs, and how the surface goes matte before you lift it — that's the moment. Heavy non-stick pan, medium heat, and never flip.
          </p>
          <a className="btn btn-outline" href={r.video.url} target="_blank" rel="noopener" style={{ marginTop: 16 }}>
            Open on {r.video.platform} <Icon.arrow style={{ width: 14, height: 14 }}/>
          </a>
        </div>
      </div>

      {/* INGREDIENTS */}
      <div className="sec-head" style={{ marginTop: 52 }}>
        <h3>Ingredients</h3>
        <span className="meta">{r.ingredients.length} items · tap to add</span>
      </div>
      <div className="ingr-grid">
        {r.ingredients.map((ing) => {
          const prod = BLYZR.productById[ing.id];
          const inB = prod && basket.has(prod.id);
          return (
            <div
              key={ing.id}
              className={`ingr-card ${inB ? 'added' : ''}`}
              data-clickable={prod ? '1' : '0'}
              onClick={prod ? () => onAdd(prod.id) : undefined}
            >
              <div className="ic-img">
                {prod && prod.img
                  ? <img src={prod.img} alt={ing.name}/>
                  : prod
                    ? <Glyph kind={prod.glyph} style={{ width: '46%', height: '46%', color: 'var(--ink-3)' }}/>
                    : <Glyph kind="carton" style={{ width: '40%', height: '40%', color: 'var(--ink-4)' }}/>}
                {prod
                  ? <span className="ic-add">{inB ? <Icon.check/> : <Icon.plus/>}</span>
                  : <span className="ic-have">have it</span>}
              </div>
              <div className="ic-name">{ing.name}</div>
              <div className="ic-amt">{ing.amount}</div>
              {ing.note ? <div className="ic-note">{ing.note}</div> : null}
            </div>
          );
        })}
      </div>

      {/* STEPS */}
      <div className="sec-head" style={{ marginTop: 52 }}><h3>Cooking steps</h3><span className="meta">{r.steps.length} steps · {r.details.time}</span></div>
      <div>
        {r.steps.map((s) => (
          <div key={s.n} className="step-card">
            <div className="step-num">{s.n}</div>
            <div>
              <div className="st-time">Step {s.n} · {s.time}</div>
              <div className="st-body">{s.body}</div>
              {s.uses && s.uses.length > 0 && (
                <div className="step-uses">
                  {s.uses.map((u, idx) => <span key={idx} className="use-chip">{u}</span>)}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>

      {/* FOOTER CTA */}
      <div className="glass" style={{ marginTop: 44, padding: 22, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <OrbMini/>
          <div>
            <div style={{ fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 22 }}>Make it a Ramadan basket?</div>
            <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>Everything but the water — {(toBuy.length || buyable.length)} items, ${(toBuy.length ? toBuyTotal : fullTotal).toFixed(2)}</div>
          </div>
        </div>
        <button className="btn btn-accent" onClick={toBuy.length ? addAll : onGoBasket}>
          {toBuy.length ? 'Add all' : 'Open basket'} <Icon.arrow style={{ width: 14, height: 14 }}/>
        </button>
      </div>
    </>
  );
};

window.RecipeArticle = RecipeArticle;