{% extends "base.html" %}
{% block title %}{{ recipe.title }} — {{ site_name|default('KitchenCrate') }}{% endblock %}

{% block content %}
<div class="container py-4" style="max-width: 1200px;">

  {# ── Flag Banner (admins/moderators only) ── #}
  {% if recipe.is_flagged and current_user.role in ['admin', 'moderator'] %}
    {% set flag_severity = 'warning' %}
    {% if flag_data and flag_data.severity == 'critical' %}
      {% set flag_severity = 'critical' %}
    {% endif %}
    {% if flag_severity == 'critical' %}
    <div class="alert alert-danger d-flex align-items-center mb-3" role="alert">
      <i class="fas fa-exclamation-circle me-2"></i>
      <div>
        <strong>CRITICAL:</strong> No ingredient list detected — extraction may be incomplete or inaccurate. &nbsp;
        <a href="{{ url_for('edit_recipe', recipe_id=recipe.id) }}" class="alert-link">Review &amp; Fix →</a>
      </div>
    </div>
    {% else %}
    <div class="alert alert-warning d-flex align-items-center mb-3" role="alert">
      <i class="fas fa-flag me-2"></i>
      <div>
        This recipe is flagged for review — some ingredients could not be matched. &nbsp;
        <a href="{{ url_for('edit_recipe', recipe_id=recipe.id) }}" class="alert-link">Review &amp; Fix →</a>
      </div>
    </div>
    {% endif %}
  {% endif %}

  {# ══════ HERO CARD: angled image + title ══════ #}
  <div class="card border-0 shadow-lg overflow-hidden" style="border-radius: 20px 20px 0 0;">

    <div class="position-relative overflow-hidden" style="min-height: 280px; background: white;">
      {% if recipe.image_filename %}
      <div class="position-absolute"
           style="top:0;right:0;width:45%;height:100%;transform:skewX(-8deg);transform-origin:top right;overflow:hidden;margin-right:-50px;">
        <div style="transform:skewX(8deg);width:120%;height:100%;margin-left:-10%;">
          <img src="{{ url_for('static', filename=(recipe.image_filename|recipe_img)) }}"
               style="width:100%;height:100%;object-fit:cover;" alt="{{ recipe.title }}">
        </div>
      </div>
      {% endif %}

      <div class="position-relative p-5" style="z-index:10;">
        <div style="max-width:55%;">
          <a href="{{ url_for('recipes') }}" class="text-muted small d-block mb-2">
            <i class="fas fa-arrow-left me-1"></i> Back to Recipes
          </a>
          <h1 class="display-4 fw-bold text-dark mb-2" style="line-height:1.2;">{{ recipe.title }}</h1>
          {% if recipe.description %}
          <p class="text-muted mb-2" style="font-size:1.1rem;">{{ recipe.description }}</p>
          {% endif %}
          {% if recipe_tags %}
          <div class="d-flex flex-wrap gap-1 mt-2">
            {% for tag in recipe_tags %}
            <span class="badge rounded-pill" style="background-color:{{ tag.color|default('#6c757d') }};">{{ tag.name }}</span>
            {% endfor %}
          </div>
          {% endif %}
        </div>

        {# Top-right action buttons #}
        <div class="position-absolute top-0 end-0 p-3 d-flex gap-2" style="z-index:20;">
          <button type="button" class="btn btn-sm btn-outline-success" id="cookModeBtn">
            <i class="fas fa-utensils me-1"></i>Cook Mode
          </button>
          <a href="{{ url_for('edit_recipe', recipe_id=recipe.id) }}" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-edit me-1"></i>Edit
          </a>
        </div>
      </div>
    </div>

    {# ══════ STATS BAR ══════ #}
    <div class="bg-light p-3 border-bottom">
      <div class="row g-2">

        {# Servings scaler #}
        <div class="col-6 col-md">
          <div class="card border-0 shadow-sm text-center h-100 overflow-hidden position-relative" style="min-height:120px">
            <button id="scalerResetBtn" onclick="resetServings()"
              style="display:none;position:absolute;top:6px;right:8px;z-index:3;
                     font-size:10px;color:#dc3545;cursor:pointer;border:0.5px solid #dc3545;
                     border-radius:4px;padding:1px 5px;background:#fff5f5;line-height:1.4;font-weight:500"
              title="Reset to default">Reset</button>
            <i class="fas fa-utensils position-absolute" style="font-size:5.5rem;color:#e9ecef;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0"></i>
            <div class="card-body p-0 position-relative d-flex flex-column align-items-center justify-content-center" style="min-height:120px;z-index:1">
              <div style="font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af;margin-bottom:4px;visibility:hidden" id="scalerModeLabel">Servings</div>
              <div class="d-flex align-items-center justify-content-center gap-2">
                <button class="btn btn-sm btn-outline-success rounded-circle"
                        style="width:26px;height:26px;padding:0;line-height:1;flex-shrink:0"
                        onclick="scalerStep(-1)">−</button>
                <div style="min-width:44px;text-align:center">
                  <span id="scalerDisplay" onclick="scalerStartEdit()"
                    style="font-size:2.8rem;font-weight:700;cursor:pointer;line-height:1;
                           padding:1px 4px;border-radius:6px;display:inline-block;color:#1f2937"
                    title="Click to enter a value"></span>
                  <input id="scalerInput" type="text"
                    style="display:none;width:56px;text-align:center;font-size:2rem;
                           font-weight:700;border:1.5px solid #198754;border-radius:6px;
                           padding:1px 3px;background:#fff"
                    onblur="scalerCommitEdit()"
                    onkeydown="if(event.key==='Enter')scalerCommitEdit();if(event.key==='Escape')scalerCancelEdit()">
                </div>
                <button class="btn btn-sm btn-outline-success rounded-circle"
                        style="width:26px;height:26px;padding:0;line-height:1;flex-shrink:0"
                        onclick="scalerStep(1)">+</button>
              </div>
              <small id="scalerSubLabel" style="visibility:hidden;color:#198754;font-size:.6rem;line-height:1.4;margin-top:1px">&nbsp;</small>
              <span id="scalerModeToggle" onclick="scalerToggleMode()"
                style="position:absolute;top:6px;left:8px;z-index:3;font-size:10px;
                       color:#198754;cursor:pointer;border:0.5px solid #198754;
                       border-radius:4px;padding:1px 5px;background:#f8f9fa;line-height:1.4">
                batch
              </span>
            </div>
          </div>
        </div>

        {# Prep #}
        <div class="col-6 col-md">
          <div class="card border-0 shadow-sm text-center h-100 overflow-hidden" style="min-height:120px">
            <div class="card-body p-0 position-relative d-flex flex-column align-items-center justify-content-center" style="min-height:120px">
              <i class="fas fa-mortar-pestle position-absolute" style="font-size:5.5rem;color:#e9ecef;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none"></i>
              <div class="position-relative" style="z-index:1">
                <div class="fw-bold" style="font-size:2.8rem;line-height:1;color:#1f2937">{% if recipe.prep_time %}{{ recipe.prep_time }}<span style="font-size:1.2rem">m</span>{% else %}<span style="font-size:1.8rem">—</span>{% endif %}</div>
              </div>
            </div>
          </div>
        </div>

        {# Cook #}
        <div class="col-6 col-md">
          <div class="card border-0 shadow-sm text-center h-100 overflow-hidden" style="min-height:120px">
            <div class="card-body p-0 position-relative d-flex flex-column align-items-center justify-content-center" style="min-height:120px">
              <i class="fas fa-fire position-absolute" style="font-size:5.5rem;color:#e9ecef;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none"></i>
              <div class="position-relative" style="z-index:1">
                <div class="fw-bold" style="font-size:2.8rem;line-height:1;color:#1f2937">{% if recipe.cook_time %}{{ recipe.cook_time }}<span style="font-size:1.2rem">m</span>{% else %}<span style="font-size:1.8rem">—</span>{% endif %}</div>
              </div>
            </div>
          </div>
        </div>

        {# Cuisine #}
        <div class="col-6 col-md">
          <div class="card border-0 shadow-sm text-center h-100 overflow-hidden" style="min-height:120px">
            <div class="card-body p-0 position-relative d-flex flex-column align-items-center justify-content-center" style="min-height:120px">
              <i class="fas fa-globe-americas position-absolute" style="font-size:5.5rem;color:#e9ecef;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none"></i>
              <div class="position-relative" style="z-index:1">
                <div class="fw-bold" style="font-size:1.6rem;line-height:1.2;color:#1f2937">{{ recipe.cuisine or 'General' }}</div>
              {% if recipe.culinary_type %}
              <div class="text-muted small mt-1" style="font-size:.7rem;text-transform:uppercase;letter-spacing:.05em">{{ recipe.culinary_type }}</div>
              {% endif %}
              {% if recipe.recipe_tags %}
              <div class="mt-2 d-flex flex-wrap gap-1">
                {% for rt in recipe.recipe_tags %}
                <span class="badge rounded-pill" style="background:#e8f5e9;color:#2e7d32;font-size:.65rem;font-weight:500">{{ rt.tag.name }}</span>
                {% endfor %}
              </div>
              {% endif %}
              </div>
            </div>
          </div>
        </div>

        {# Rating #}
        <div class="col-6 col-md">
          <div class="card border-0 shadow-sm text-center h-100 overflow-hidden" style="min-height:120px;cursor:pointer"
               data-bs-toggle="modal" data-bs-target="#ratingModal">
            <div class="card-body p-0 position-relative d-flex flex-column align-items-center justify-content-center" style="min-height:120px">
              <i class="fas fa-star position-absolute" style="font-size:5.5rem;color:#fef9c3;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none"></i>
              <div class="position-relative" style="z-index:1">
                <div class="fw-bold" style="font-size:2.8rem;line-height:1;color:#1f2937">{{ avg_rating or 0 }}</div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    {# ══════ INGREDIENTS + INSTRUCTIONS ══════ #}
    <div class="row g-0">

      {# Ingredients column #}
      <div class="col-lg-5 bg-light">
        <div class="bg-success text-white p-3">
          <h5 class="mb-0"><i class="fas fa-list me-2"></i>Ingredients
            <span class="badge bg-white text-success ms-2" style="font-size:.75rem;">{{ ingredients|length }}</span>
          </h5>
        </div>
        <div class="p-4">
          {% if ingredients %}
          {% set ns = namespace(current_group=none) %}
          {% for ing in ingredients|sort(attribute='group_order')|sort(attribute='order_index') %}
            {% if ing.group_label and ing.group_label != ns.current_group %}
              {% set ns.current_group = ing.group_label %}
              <div class="mt-3 mb-2 {% if not loop.first %}pt-2 border-top{% endif %}">
                <span class="fw-bold text-success text-uppercase" style="font-size:.72rem;letter-spacing:.06em">{{ ing.group_label }}</span>
              </div>
            {% endif %}
          <div class="d-flex align-items-start mb-3">
            <span class="bg-success me-3 flex-shrink-0"
                  style="width:8px;height:8px;min-width:8px;display:inline-block;border-radius:2px;margin-top:6px;"></span>
            <div class="flex-grow-1">
              <strong>
                {% if ing.quantity %}<span data-base-qty="{{ ing.quantity }}" data-base-unit="{{ ing.unit or '' }}">{{ ing.quantity }}</span> {% endif %}
                {% if ing.unit %}<span class="ing-unit">{{ {"c":"c","tbsp":"tbsp","tsp":"tsp","oz":"oz","lb":"lb","pc":"pc","whole":"whole","cup":"cup","tablespoon":"tbsp","teaspoon":"tsp","pound":"lb","ounce":"oz"}.get(ing.unit, ing.unit) }}</span> {% endif %}
              </strong>{% if ing.color_prefix %}{{ ing.color_prefix }} {% endif %}{{ ing.ingredient.name if ing.ingredient else '(unknown)' }}{% if ing.name_suffix %} {{ ing.name_suffix }}{% endif %}
              {% set mod_text = ing.modifier_display|default('') %}
              {% if mod_text or ing.package_size %}
              <span class="text-muted" style="font-size:.85em">
                · {% if ing.package_size %}({{ ing.package_size }}) {% endif %}{{ mod_text }}
              </span>
              {% endif %}
            </div>
          </div>
          {% endfor %}
          {% else %}
          <div class="text-center text-muted py-4">
            <i class="fas fa-leaf fa-2x mb-2 d-block"></i>No ingredients listed
          </div>
          {% endif %}
        </div>
      </div>

      {# Instructions column #}
      <div class="col-lg-7 bg-white">
        <div class="bg-success text-white p-3">
          <h5 class="mb-0"><i class="fas fa-clipboard-list me-2"></i>Instructions</h5>
        </div>
        <div class="p-4">
          {% set steps = (recipe.instructions or '')|parse_steps %}
          {% if steps %}
          {% for step in steps %}
          <div class="d-flex mb-3 step-block">
            <span class="badge bg-success rounded-circle me-3 flex-shrink-0"
                  style="width:28px;height:28px;min-width:28px;line-height:26px;font-size:1rem;font-weight:900;">{{ loop.index }}</span>
            <p class="mb-0 instruction-text">{{ step }}</p>
          </div>
          {% endfor %}
          {% else %}
          <div class="text-center text-muted py-4">
            <i class="fas fa-clipboard fa-2x mb-2 d-block"></i>No instructions yet
          </div>
          {% endif %}
        </div>
      </div>

    </div>
  </div>{# /.hero card #}

  {# ══════ SOCIAL STRIP ══════ #}
  <div class="card border-0 shadow-sm mt-2">
    <div class="card-body py-2 px-3">
      <div class="d-flex flex-wrap align-items-center gap-2">

        {# Favorite #}
        <button type="button" id="favBtn"
                class="btn btn-sm {{ 'btn-danger' if is_favorited else 'btn-outline-danger' }}">
          <i class="fas fa-heart me-1"></i>
          {{ 'Unfavorite' if is_favorited else 'Favorite' }}
          <span class="badge bg-white text-danger ms-1">{{ fav_count or 0 }}</span>
        </button>

        {# Log Cook #}
        <button type="button" id="logCookBtn" class="btn btn-sm btn-outline-success">
          <i class="fas fa-clipboard-check me-1"></i>Log Cook
          {% if cook_count %}<span class="badge bg-success ms-1">{{ cook_count }}×</span>{% endif %}
        </button>

        {# Add to Collection #}
        {% if user_collections %}
        <div class="dropdown">
          <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
            <i class="fas fa-folder-plus me-1"></i>Add to Collection
          </button>
          <ul class="dropdown-menu">
            {% for coll in user_collections %}
            <li>
              <button class="dropdown-item add-to-coll-btn" data-collection-id="{{ coll.id }}">
                {{ coll.name }}
              </button>
            </li>
            {% endfor %}
          </ul>
        </div>
        {% endif %}

        {# Personal Note toggle #}
        <button type="button" class="btn btn-sm btn-outline-secondary" id="noteToggleBtn">
          <i class="fas fa-sticky-note me-1"></i>
          {{ 'Edit Note' if user_note else 'Add Note' }}
        </button>

        <span class="ms-auto text-muted small">
          Added {{ recipe.created_at.strftime('%b %d, %Y') if recipe.created_at else '—' }}
          · {{ recipe.source or 'manual' }}
        </span>
      </div>

      {# Note input — hidden until toggled #}
      <div id="noteArea" class="mt-2" style="display:none;">
        <textarea class="form-control form-control-sm" id="noteText" rows="3"
                  placeholder="Add a personal note about this recipe...">{{ user_note.note_text if user_note else '' }}</textarea>
        <div class="d-flex gap-2 mt-1">
          <button type="button" id="saveNoteBtn" class="btn btn-sm btn-success">
            <i class="fas fa-save me-1"></i>Save Note
          </button>
          <button type="button" id="noteCancelBtn" class="btn btn-sm btn-outline-secondary">Cancel</button>
        </div>
      </div>

    </div>
  </div>

  {# ══════ PHOTO GALLERY + PDF DRAWER ══════ #}
  <div class="card border-0 shadow-lg overflow-hidden mt-0" style="border-radius: 0 0 20px 20px;">
    <div class="d-flex align-items-center justify-content-between p-3 bg-light"
         style="cursor:pointer;" data-bs-toggle="collapse" data-bs-target="#photoGallery">
      <div>
        <i class="fas fa-images me-2 text-success"></i>
        <strong>Photo Gallery &amp; PDF</strong>
        {% set photo_count = recipe.photos|list|length %}
        {% if photo_count %}
        <span class="badge bg-success ms-1">{{ photo_count }}</span>
        {% endif %}
        {% if recipe.pdf_filename %}
        <span class="badge bg-danger ms-1"><i class="fas fa-file-pdf"></i> PDF</span>
        {% endif %}
      </div>
      <i class="fas fa-chevron-down chevron-icon"></i>
    </div>

    <div class="collapse" id="photoGallery">
      <div class="p-3 bg-light">
        {% set photo_list = recipe.photos|list %}
        {% if photo_list %}
        <div class="row g-2">
          {% for photo in photo_list %}
          <div class="col-4 col-md-3">
            <div class="photo-thumb" data-lightbox-src="{{ url_for('static', filename=(photo.filename|recipe_img)) }}"
                 style="cursor:pointer;overflow:hidden;border-radius:8px;aspect-ratio:1;background:#eee;">
              <img src="{{ url_for('static', filename=(photo.filename|recipe_img)) }}"
                   style="width:100%;height:100%;object-fit:cover;" alt="Recipe photo">
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <div class="text-center text-muted py-3">
          <i class="fas fa-images fa-2x mb-2 d-block"></i>No photos yet
        </div>
        {% endif %}
      </div>

      {% if recipe.pdf_filename %}
      <hr class="m-0">
      <div class="p-3 bg-white">
        <div class="mb-2 d-flex align-items-center justify-content-between">
          <strong><i class="fas fa-file-pdf me-2 text-danger"></i>Original Recipe PDF</strong>
          <button type="button" class="btn btn-sm btn-outline-secondary"
                  data-lightbox-pdf="{{ url_for('static', filename='uploads/' ~ recipe.pdf_filename) }}">
            <i class="fas fa-expand me-1"></i>Fullscreen
          </button>
        </div>
        <embed src="{{ url_for('static', filename='uploads/' ~ recipe.pdf_filename) }}"
               type="application/pdf" width="100%" height="500px" class="border rounded">
      </div>
      {% endif %}
    </div>
  </div>

</div>{# /.container #}

{# ══════ RATING MODAL ══════ #}
<div class="modal fade" id="ratingModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-header border-0">
        <h6 class="modal-title fw-bold">Rate This Recipe</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body text-center">
        {% if not current_user.is_admin %}
        <div class="rating-stars mb-3">
          {% for i in range(5, 0, -1) %}
          <input type="radio" name="rating" value="{{ i }}" id="star{{ i }}" class="d-none"
                 {{ 'checked' if user_rating and user_rating == i else '' }}>
          <label for="star{{ i }}"
                 class="fas fa-star fa-2x {{ 'text-warning' if user_rating and i <= user_rating else 'text-muted' }}"
                 style="cursor:pointer;"></label>
          {% endfor %}
        </div>
        <button class="btn btn-success w-100 mb-2" id="submitRatingBtn"
                {{ 'disabled' if not user_rating else '' }}
                data-bs-dismiss="modal" onclick="submitRating()">
          {{ 'Update Rating' if user_rating else 'Submit Rating' }}
        </button>
        {% if user_rating %}
        <form method="POST" action="{{ url_for('remove_rating', recipe_id=recipe.id) }}">
          <button type="submit" class="btn btn-outline-danger btn-sm w-100">Remove My Rating</button>
        </form>
        {% endif %}
        {% else %}
        <p class="text-muted">Admins cannot rate recipes.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{# ══════ LIGHTBOX ══════ #}
<div id="lightboxOverlay"
     style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;align-items:center;justify-content:center;">
  <button id="lightboxClose"
          style="position:absolute;top:16px;right:20px;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;z-index:10;">✕</button>
  <div id="lightboxContent" style="max-width:90vw;max-height:90vh;overflow:auto;"></div>
</div>

{# ══════ TOOLBOX DRAWER ══════ #}
{# Backdrop #}
<div id="tbBackdrop" onclick="tbClose()"
     style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1040;"></div>

{# Drawer #}
<div id="tbDrawer"
     style="position:fixed;top:0;right:-100%;width:50%;max-width:520px;min-width:320px;
            height:100vh;background:#fff;z-index:1050;
            box-shadow:-4px 0 24px rgba(0,0,0,.18);
            transition:right .28s cubic-bezier(.4,0,.2,1);
            display:flex;flex-direction:column;overflow:hidden;">

  {# Header #}
  <div class="d-flex align-items-center justify-content-between px-3 py-2 bg-success text-white flex-shrink-0">
    <div class="d-flex align-items-center gap-2">
      <i class="fas fa-utensils"></i>
      <span class="fw-bold small">{{ recipe.title|truncate(30) }}</span>
    </div>
    <button onclick="tbClose()" class="btn-close btn-close-white btn-sm"></button>
  </div>

  {# Tab nav #}
  <div class="d-flex border-bottom flex-shrink-0 bg-light">
    <button class="tb-tab active" data-tab="steps" onclick="tbTab(this,'steps')" title="Steps">
      <i class="fas fa-list-ol"></i><span class="ms-1">Steps</span>
    </button>
    <button class="tb-tab" data-tab="timers" onclick="tbTab(this,'timers')" title="Timers">
      <i class="fas fa-stopwatch"></i><span class="ms-1">Timers</span>
    </button>
    <button class="tb-tab" data-tab="notes" onclick="tbTab(this,'notes')" title="Notes">
      <i class="fas fa-sticky-note"></i><span class="ms-1">Notes</span>
    </button>
    <button class="tb-tab" data-tab="temp" onclick="tbTab(this,'temp')" title="Temperature">
      <i class="fas fa-thermometer-half"></i><span class="ms-1">Temp</span>
    </button>
    <button class="tb-tab" data-tab="measure" onclick="tbTab(this,'measure')" title="Convert">
      <i class="fas fa-balance-scale"></i><span class="ms-1">Convert</span>
    </button>
  </div>

  {# Tab content #}
  <div class="flex-grow-1 overflow-auto p-3" id="tbContent">

    {# Steps #}
    <div class="tb-panel" id="tbPanel-steps">
      <div class="mb-3">
        <span class="small fw-bold text-muted text-uppercase">Step Navigation</span>
      </div>
      <div class="progress mb-3" style="height:6px;">
        <div class="progress-bar bg-success" id="stepProgressBar" style="width:0%;transition:width .3s;"></div>
      </div>
      <div id="stepNavOn">
        <div class="text-center mb-3">
          <span class="badge bg-success px-3 py-2 fs-6" id="stepNavCounter">Step 1 of 1</span>
        </div>
        <div class="card border-0 bg-light p-3 mb-3 rounded-3" style="min-height:140px;">
          <p class="mb-0 lh-base fs-6" id="stepNavText"></p>
        </div>
        <div class="d-flex gap-2">
          <button class="btn btn-outline-secondary flex-fill py-3" onclick="stepNav(-1)" id="stepPrevBtn" style="font-size:1.1rem;">
            <i class="fas fa-arrow-left me-2"></i>Prev
          </button>
          <button class="btn btn-success flex-fill py-3" onclick="stepNav(1)" id="stepNextBtn" style="font-size:1.1rem;">
            Next<i class="fas fa-arrow-right ms-2"></i>
          </button>
        </div>
      </div>

    </div>

    {# Timers #}
    <div class="tb-panel" id="tbPanel-timers" style="display:none;">
      <div class="small fw-bold text-muted text-uppercase mb-2">Countdown Timers</div>
      <div class="d-flex gap-2 mb-3">
        <input type="text" class="form-control form-control-sm" id="timerName" placeholder="Name (optional)" style="flex:1;">
        <input type="number" class="form-control form-control-sm" id="timerMins" placeholder="min" min="1" max="999" style="width:72px;">
        <button class="btn btn-success btn-sm px-3" onclick="timerAdd()"><i class="fas fa-plus"></i></button>
      </div>
      <div id="timerList"></div>
      <div id="timerEmpty" class="text-center text-muted py-4">
        <i class="fas fa-stopwatch fa-2x mb-2 d-block"></i>
        <span class="small">No active timers</span>
      </div>
    </div>

    {# Notes #}
    <div class="tb-panel" id="tbPanel-notes" style="display:none;">
      <div class="small fw-bold text-muted text-uppercase mb-2">Recipe Notes</div>
      <p class="text-muted small mb-2">Private — only you can see these.</p>
      <textarea class="form-control form-control-sm mb-2" id="tbNoteText" rows="9"
                placeholder="Add personal notes, modifications, tips...">{{ user_note.note_text if user_note else '' }}</textarea>
      <button class="btn btn-success btn-sm w-100" onclick="tbNoteSave()">
        <i class="fas fa-save me-1"></i>Save Note
      </button>
      <div id="tbNoteSaved" class="text-success small mt-2 text-center" style="display:none;">
        <i class="fas fa-check me-1"></i>Saved
      </div>
    </div>

    {# Temperature #}
    <div class="tb-panel" id="tbPanel-temp" style="display:none;">
      <div class="small fw-bold text-muted text-uppercase mb-3">Temperature</div>
      <div class="mb-3">
        <label class="form-label small fw-medium">Fahrenheit</label>
        <div class="input-group">
          <input type="number" class="form-control" id="tempF" placeholder="°F" oninput="tempConvert('F')">
          <span class="input-group-text">°F</span>
        </div>
      </div>
      <div class="text-center text-muted mb-3"><i class="fas fa-exchange-alt fa-lg"></i></div>
      <div class="mb-3">
        <label class="form-label small fw-medium">Celsius</label>
        <div class="input-group">
          <input type="number" class="form-control" id="tempC" placeholder="°C" oninput="tempConvert('C')">
          <span class="input-group-text">°C</span>
        </div>
      </div>
      <div class="card border-0 bg-light p-2 mt-2">
        <div class="small fw-medium text-muted mb-1">Common Oven Temps</div>
        <div class="row g-1" style="font-size:.8rem;">
          <div class="col-6">325°F = 163°C</div><div class="col-6">350°F = 177°C</div>
          <div class="col-6">375°F = 191°C</div><div class="col-6">400°F = 204°C</div>
          <div class="col-6">425°F = 218°C</div><div class="col-6">450°F = 232°C</div>
        </div>
      </div>
    </div>

    {# Measurement #}
    <div class="tb-panel" id="tbPanel-measure" style="display:none;">
      <div class="small fw-bold text-muted text-uppercase mb-3">Measurement Converter</div>
      <div class="mb-2">
        <label class="form-label small fw-medium">Amount</label>
        <input type="number" class="form-control" id="measAmt" placeholder="Enter amount" oninput="measConvert()" min="0" step="any">
      </div>
      <div class="row g-2 mb-3">
        <div class="col-6">
          <label class="form-label small fw-medium">From</label>
          <select class="form-select form-select-sm" id="measFrom" onchange="measConvert()">
            <optgroup label="Volume (US)">
              <option value="tsp">tsp</option><option value="tbsp">tbsp</option>
              <option value="fl_oz">fl oz</option><option value="cup">cup</option>
              <option value="pint">pint</option><option value="quart">quart</option>
              <option value="gallon">gallon</option>
            </optgroup>
            <optgroup label="Volume (Metric)">
              <option value="ml">ml</option><option value="l">liter</option>
            </optgroup>
            <optgroup label="Weight">
              <option value="oz">oz</option><option value="lb">lb</option>
              <option value="g">g</option><option value="kg">kg</option>
            </optgroup>
          </select>
        </div>
        <div class="col-6">
          <label class="form-label small fw-medium">To</label>
          <select class="form-select form-select-sm" id="measTo" onchange="measConvert()">
            <optgroup label="Volume (US)">
              <option value="tsp">tsp</option><option value="tbsp" selected>tbsp</option>
              <option value="fl_oz">fl oz</option><option value="cup">cup</option>
              <option value="pint">pint</option><option value="quart">quart</option>
              <option value="gallon">gallon</option>
            </optgroup>
            <optgroup label="Volume (Metric)">
              <option value="ml">ml</option><option value="l">liter</option>
            </optgroup>
            <optgroup label="Weight">
              <option value="oz">oz</option><option value="lb">lb</option>
              <option value="g">g</option><option value="kg">kg</option>
            </optgroup>
          </select>
        </div>
      </div>
      <div class="card border-success border p-3 text-center">
        <div class="text-muted small mb-1">Result</div>
        <div class="fw-bold fs-3 text-success" id="measResult">—</div>
      </div>
    </div>

  </div>{# /tbContent #}
</div>{# /tbDrawer #}


<script src="{{ url_for('static', filename='js/culinary_math.js') }}"></script>
<script>
(function () {
  /* ── Servings scaler ── */
  var baseServings = parseInt('{{ recipe.servings or 1 }}', 10) || 1;
  var currentServings = baseServings;
  var scalerMode = 'servings'; // 'servings' or 'batch'

  // Valid clean steps for servings mode
  function getCleanSteps(base) {
    var multipliers = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12];
    var steps = [];
    multipliers.forEach(function(m) {
      var v = Math.round(base * m);
      if (v >= 1 && steps.indexOf(v) === -1) steps.push(v);
    });
    steps.sort(function(a,b){return a-b;});
    return steps;
  }

  // Batch steps: 0.5, 1, 1.5, 2, 3, 4, 5, 6
  var batchSteps = [0.5, 1, 1.5, 2, 3, 4, 5, 6];
  var currentBatch = 1;

  function scalerRender() {
    var display = document.getElementById('scalerDisplay');
    var modeLabel = document.getElementById('scalerModeLabel');
    var subLabel = document.getElementById('scalerSubLabel');
    var resetBtn = document.getElementById('scalerResetBtn');
    var modeToggle = document.getElementById('scalerModeToggle');

    if (scalerMode === 'servings') {
      display.textContent = currentServings;
      modeLabel.textContent = 'Servings';
      subLabel.style.visibility = 'hidden';
      modeToggle.textContent = 'batch';
      modeToggle.style.color = '#198754';
      modeToggle.style.borderColor = '#198754';
      resetBtn.textContent = 'Reset';
      resetBtn.style.display = (currentServings !== baseServings) ? 'block' : 'none';
    } else {
      var batchDisplay = currentBatch === 0.5 ? '½' :
                         currentBatch === 1.5 ? '1½' : String(currentBatch);
      display.textContent = batchDisplay;
      modeLabel.textContent = currentBatch === 1 ? 'batch' : 'batches';
      var totalServings = Math.round(baseServings * currentBatch);
      subLabel.textContent = 'serves ' + totalServings;
      subLabel.style.visibility = 'visible';
      modeToggle.textContent = 'servings';
      modeToggle.style.color = '#6c757d';
      modeToggle.style.borderColor = '#dee2e6';
      resetBtn.textContent = 'Reset';
      resetBtn.style.display = (currentBatch !== 1) ? 'block' : 'none';
    }
  }

  window.scalerStep = function(dir) {
    if (scalerMode === 'servings') {
      var steps = getCleanSteps(baseServings);
      var idx = steps.indexOf(currentServings);
      if (idx === -1) {
        // Find nearest
        var nearest = 0;
        steps.forEach(function(s,i){ if(Math.abs(s-currentServings) < Math.abs(steps[nearest]-currentServings)) nearest=i; });
        idx = nearest;
      }
      var newIdx = Math.max(0, Math.min(steps.length-1, idx + dir));
      currentServings = steps[newIdx];
    } else {
      var bidx = batchSteps.indexOf(currentBatch);
      if (bidx === -1) bidx = 1;
      bidx = Math.max(0, Math.min(batchSteps.length-1, bidx + dir));
      currentBatch = batchSteps[bidx];
      currentServings = Math.round(baseServings * currentBatch);
    }
    scalerRender();
    updateIngredients();
  };

  window.scalerToggleMode = function() {
    scalerMode = scalerMode === 'servings' ? 'batch' : 'servings';
    if (scalerMode === 'batch') {
      currentBatch = currentServings / baseServings;
      // Snap to nearest batch step
      var best = batchSteps[1];
      batchSteps.forEach(function(s){ if(Math.abs(s-currentBatch) < Math.abs(best-currentBatch)) best=s; });
      currentBatch = best;
      currentServings = Math.round(baseServings * currentBatch);
    }
    scalerRender();
    updateIngredients();
  };

  window.scalerStartEdit = function() {
    var display = document.getElementById('scalerDisplay');
    var input = document.getElementById('scalerInput');
    input.value = scalerMode === 'servings' ? currentServings : currentBatch;
    display.style.display = 'none';
    input.style.display = 'inline-block';
    input.focus();
    input.select();
  };

  window.scalerCommitEdit = function() {
    var input = document.getElementById('scalerInput');
    var val = parseFloat(input.value);
    if (!isNaN(val) && val > 0) {
      if (scalerMode === 'servings') {
        var steps = getCleanSteps(baseServings);
        // Snap to nearest clean step
        var best = steps[0];
        steps.forEach(function(s){ if(Math.abs(s-val) < Math.abs(best-val)) best=s; });
        currentServings = best;
      } else {
        var best2 = batchSteps[1];
        batchSteps.forEach(function(s){ if(Math.abs(s-val) < Math.abs(best2-val)) best2=s; });
        currentBatch = best2;
        currentServings = Math.round(baseServings * currentBatch);
      }
      updateIngredients();
    }
    var display = document.getElementById('scalerDisplay');
    input.style.display = 'none';
    display.style.display = 'inline-block';
    scalerRender();
  };

  window.scalerCancelEdit = function() {
    var display = document.getElementById('scalerDisplay');
    document.getElementById('scalerInput').style.display = 'none';
    display.style.display = 'inline-block';
  };
  var scalerMode = 'servings'; // 'servings' or 'batch'

  // Valid clean steps for servings mode
  function getCleanSteps(base) {
    var multipliers = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12];
    var steps = [];
    multipliers.forEach(function(m) {
      var v = Math.round(base * m);
      if (v >= 1 && steps.indexOf(v) === -1) steps.push(v);
    });
    steps.sort(function(a,b){return a-b;});
    return steps;
  }

  // Batch steps: 0.5, 1, 1.5, 2, 3, 4, 5, 6
  var batchSteps = [0.5, 1, 1.5, 2, 3, 4, 5, 6];
  var currentBatch = 1;

  function scalerRender() {
    var display = document.getElementById('scalerDisplay');
    var modeLabel = document.getElementById('scalerModeLabel');
    var subLabel = document.getElementById('scalerSubLabel');
    var resetBtn = document.getElementById('scalerResetBtn');
    var modeToggle = document.getElementById('scalerModeToggle');

    if (scalerMode === 'servings') {
      display.textContent = currentServings;
      modeLabel.textContent = 'Servings';
      subLabel.style.visibility = 'hidden';
      modeToggle.textContent = 'batch';
      modeToggle.style.color = '#198754';
      modeToggle.style.borderColor = '#198754';
      resetBtn.textContent = 'Reset';
      resetBtn.style.display = (currentServings !== baseServings) ? 'block' : 'none';
    } else {
      var batchDisplay = currentBatch === 0.5 ? '½' :
                         currentBatch === 1.5 ? '1½' : String(currentBatch);
      display.textContent = batchDisplay;
      modeLabel.textContent = currentBatch === 1 ? 'batch' : 'batches';
      var totalServings = Math.round(baseServings * currentBatch);
      subLabel.textContent = 'serves ' + totalServings;
      subLabel.style.visibility = 'visible';
      modeToggle.textContent = 'servings';
      modeToggle.style.color = '#6c757d';
      modeToggle.style.borderColor = '#dee2e6';
      resetBtn.textContent = 'Reset';
      resetBtn.style.display = (currentBatch !== 1) ? 'block' : 'none';
    }
  }

  window.scalerStep = function(dir) {
    if (scalerMode === 'servings') {
      var steps = getCleanSteps(baseServings);
      var idx = steps.indexOf(currentServings);
      if (idx === -1) {
        // Find nearest
        var nearest = 0;
        steps.forEach(function(s,i){ if(Math.abs(s-currentServings) < Math.abs(steps[nearest]-currentServings)) nearest=i; });
        idx = nearest;
      }
      var newIdx = Math.max(0, Math.min(steps.length-1, idx + dir));
      currentServings = steps[newIdx];
    } else {
      var bidx = batchSteps.indexOf(currentBatch);
      if (bidx === -1) bidx = 1;
      bidx = Math.max(0, Math.min(batchSteps.length-1, bidx + dir));
      currentBatch = batchSteps[bidx];
      currentServings = Math.round(baseServings * currentBatch);
    }
    scalerRender();
    updateIngredients();
  };

  window.scalerToggleMode = function() {
    scalerMode = scalerMode === 'servings' ? 'batch' : 'servings';
    if (scalerMode === 'batch') {
      currentBatch = currentServings / baseServings;
      // Snap to nearest batch step
      var best = batchSteps[1];
      batchSteps.forEach(function(s){ if(Math.abs(s-currentBatch) < Math.abs(best-currentBatch)) best=s; });
      currentBatch = best;
      currentServings = Math.round(baseServings * currentBatch);
    }
    scalerRender();
    updateIngredients();
  };

  window.scalerStartEdit = function() {
    var display = document.getElementById('scalerDisplay');
    var input = document.getElementById('scalerInput');
    input.value = scalerMode === 'servings' ? currentServings : currentBatch;
    display.style.display = 'none';
    input.style.display = 'inline-block';
    input.focus();
    input.select();
  };

  window.scalerCommitEdit = function() {
    var input = document.getElementById('scalerInput');
    var val = parseFloat(input.value);
    if (!isNaN(val) && val > 0) {
      if (scalerMode === 'servings') {
        var steps = getCleanSteps(baseServings);
        // Snap to nearest clean step
        var best = steps[0];
        steps.forEach(function(s){ if(Math.abs(s-val) < Math.abs(best-val)) best=s; });
        currentServings = best;
      } else {
        var best2 = batchSteps[1];
        batchSteps.forEach(function(s){ if(Math.abs(s-val) < Math.abs(best2-val)) best2=s; });
        currentBatch = best2;
        currentServings = Math.round(baseServings * currentBatch);
      }
      updateIngredients();
    }
    var display = document.getElementById('scalerDisplay');
    input.style.display = 'none';
    display.style.display = 'inline-block';
    scalerRender();
  };

  window.scalerCancelEdit = function() {
    var display = document.getElementById('scalerDisplay');
    document.getElementById('scalerInput').style.display = 'none';
    display.style.display = 'inline-block';
  };

  function toFraction(n) {
    var fracs = {0.125:'⅛',0.167:'⅙',0.25:'¼',0.333:'⅓',0.5:'½',0.667:'⅔',0.75:'¾',0.875:'⅞'};
    var whole = Math.floor(n), frac = n - whole;
    for (var d in fracs) {
      if (Math.abs(frac - parseFloat(d)) < 0.02)
        return whole > 0 ? whole + ' ' + fracs[d] : fracs[d];
    }
    return n.toFixed(2).replace(/\.?0+$/, '');
  }

  function parseFrac(s) {
    if (!s) return NaN;
    s = String(s).trim();
    // "1 1/2" mixed
    var mix = s.match(/^(\d+)\s+(\d+)\/(\d+)$/);
    if (mix) return parseFloat(mix[1]) + parseFloat(mix[2])/parseFloat(mix[3]);
    // "1/3" simple fraction
    var frac = s.match(/^(\d+)\/(\d+)$/);
    if (frac) return parseFloat(frac[1])/parseFloat(frac[2]);
    return parseFloat(s);
  }

  function updateIngredients() {
    scalerRender();
    var ratio = currentServings / baseServings;
    document.querySelectorAll('[data-base-qty]').forEach(function(el) {
      var base = parseFrac(el.dataset.baseQty);
      if (isNaN(base)) return;
      var unit = (el.dataset.baseUnit || '').toLowerCase().trim();
      var scalable = ['cup','cups','c','tbsp','tablespoon','tablespoons','tsp','teaspoon','teaspoons'];
      var unitEl = el.closest('strong') ? el.closest('strong').querySelector('.ing-unit') : null;
      if (unit && scalable.includes(unit) && typeof formatCulinary === 'function') {
        var result = formatCulinary(base * ratio, unit);
        el.textContent = result.amount;
        if (unitEl) {
          if (result.unit) {
            // Unit promoted/changed — show it
            unitEl.textContent = result.unit;
            unitEl.style.display = '';
          } else {
            // Unit embedded in amount string — hide span
            unitEl.style.display = 'none';
          }
        }
      } else {
        el.textContent = toFraction(base * ratio);
        if (unitEl) unitEl.style.display = '';
      }
    });
    document.querySelectorAll('.inst-qty').forEach(function(el) {
      var base = parseFrac(el.dataset.baseQty);
      var unit = (el.dataset.baseUnit || '').toLowerCase().trim();
      if (isNaN(base)) return;
      var scalable = ['cup','cups','c','tbsp','tablespoon','tablespoons','tsp','teaspoon','teaspoons'];
      var unitEl = el.nextElementSibling;
      if (unit && scalable.includes(unit) && typeof formatCulinary === 'function') {
        var result = formatCulinary(base * ratio, unit);
        el.textContent = result.amount;
        // Hide the unit span — formatCulinary embeds unit in the amount string
        if (unitEl && unitEl.classList.contains('inst-unit')) {
          unitEl.style.display = 'none';
        }
      } else {
        el.textContent = toFraction(base * ratio);
        if (unitEl && unitEl.classList.contains('inst-unit')) {
          unitEl.style.display = '';
        }
      }
    });
  }

  window.resetServings = function() {
    currentServings = baseServings;
    currentBatch = 1;
    scalerRender();
    updateIngredients();
  };

  scalerRender();

  scalerRender();

  /* Parse measurements in instruction text for scaling */
  document.addEventListener('DOMContentLoaded', function() {
    var pattern = /(\d+\/\d+|\d+\.\d+|\d+)\s*(cups?|tbsp|tsp|teaspoons?|tablespoons?|oz|lbs?|g|kg|ml|l)\b/gi;
    document.querySelectorAll('.instruction-text').forEach(function(el) {
      el.innerHTML = el.textContent.replace(pattern, function(match, qty, unit) {
        var num = qty.includes('/') ? (function(s){var p=s.split('/');return parseFloat(p[0])/parseFloat(p[1]);})(qty) : parseFloat(qty);
        var u = unit.toLowerCase().trim();
        return '<span class="inst-qty" data-base-qty="' + num + '" data-base-unit="' + u + '">' + qty + '</span> <span class="inst-unit">' + unit + '</span>';
      });
    });
  });

  /* ── Rating modal ── */
  document.querySelectorAll('.rating-stars input').forEach(function(inp) {
    inp.addEventListener('change', function() {
      var btn = document.getElementById('submitRatingBtn');
      if (btn) { btn.disabled = false; btn.textContent = 'Submit Rating'; }
    });
  });

  window.submitRating = function() {
    var checked = document.querySelector('.rating-stars input:checked');
    if (!checked) return;
    fetch('{{ url_for("rate_recipe", recipe_id=recipe.id) }}', {
      method: 'POST',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      body: 'rating=' + checked.value
    }).then(function() { location.reload(); });
  };

  /* ── Favorite ── */
  var favBtn = document.getElementById('favBtn');
  if (favBtn) {
    favBtn.addEventListener('click', function() {
      fetch('/api/recipe/{{ recipe.id }}/favorite', {
        method: 'POST',
        headers: {'X-Requested-With': 'XMLHttpRequest'}
      }).then(function(r) { if (r.ok) location.reload(); });
    });
  }

  /* ── Log Cook ── */
  var logCookBtn = document.getElementById('logCookBtn');
  if (logCookBtn) {
    logCookBtn.addEventListener('click', function() {
      fetch('/api/recipe/{{ recipe.id }}/cook-log', {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest'},
        body: JSON.stringify({})
      }).then(function(r) { if (r.ok) location.reload(); });
    });
  }

  /* ── Add to Collection ── */
  document.querySelectorAll('.add-to-coll-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var cid = this.dataset.collectionId;
      fetch('/api/social/collection/' + cid + '/recipes', {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest'},
        body: JSON.stringify({recipe_id: {{ recipe.id }} })
      }).then(function(r) {
        if (r.ok) { alert('Added to collection!'); }
        else { alert('Could not add — already in collection?'); }
      });
    });
  });

  /* ── Personal Note ── */
  var noteToggle = document.getElementById('noteToggleBtn');
  var noteArea   = document.getElementById('noteArea');
  var noteCancel = document.getElementById('noteCancelBtn');
  if (noteToggle && noteArea) {
    noteToggle.addEventListener('click', function() {
      noteArea.style.display = noteArea.style.display === 'none' ? 'block' : 'none';
    });
  }
  if (noteCancel) noteCancel.addEventListener('click', function() { noteArea.style.display = 'none'; });
  var saveNoteBtn = document.getElementById('saveNoteBtn');
  if (saveNoteBtn) {
    saveNoteBtn.addEventListener('click', function() {
      var txt = document.getElementById('noteText').value;
      fetch('/api/recipe/{{ recipe.id }}/note', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest'},
        body: 'note_text=' + encodeURIComponent(txt)
      }).then(function(r) { if (r.ok) location.reload(); });
    });
  }

  /* ── Lightbox ── */
  var lbOverlay = document.getElementById('lightboxOverlay');
  var lbContent = document.getElementById('lightboxContent');
  var lbClose   = document.getElementById('lightboxClose');

  function openLightbox(html) {
    lbContent.innerHTML = html;
    lbOverlay.style.display = 'flex';
    document.body.style.overflow = 'hidden';
  }
  function closeLightbox() {
    lbOverlay.style.display = 'none';
    lbContent.innerHTML = '';
    document.body.style.overflow = '';
  }

  document.querySelectorAll('.photo-thumb').forEach(function(el) {
    el.addEventListener('click', function() {
      openLightbox('<img src="' + el.dataset.lightboxSrc + '" style="max-width:90vw;max-height:85vh;border-radius:8px;" alt="Recipe photo">');
    });
  });
  document.querySelectorAll('[data-lightbox-pdf]').forEach(function(el) {
    el.addEventListener('click', function() {
      openLightbox('<iframe src="' + el.dataset.lightboxPdf + '" style="width:85vw;height:85vh;border:none;border-radius:8px;"></iframe>');
    });
  });
  if (lbClose) lbClose.addEventListener('click', closeLightbox);
  if (lbOverlay) lbOverlay.addEventListener('click', function(e) { if (e.target === lbOverlay) closeLightbox(); });
  document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeLightbox(); });

  /* ── Toolbox Drawer ── */
  var RECIPE_ID = {{ recipe.id }};
  var SS_STEP   = 'kc_step_' + RECIPE_ID;
  var SS_OPEN   = 'kc_cook_open_' + RECIPE_ID;
  var SS_TIMERS = 'kc_timers';

  // Collect steps
  var tbSteps = [];
  document.querySelectorAll('.instruction-text').forEach(function(el) {
    var t = el.textContent.trim();
    if (t) tbSteps.push(t);
  });
  var tbStepIdx = 0;
  var tbStepMode = false;

  window.tbOpen = function() {
    document.getElementById('tbDrawer').style.right = '0';
    document.getElementById('tbBackdrop').style.display = 'block';
    sessionStorage.setItem(SS_OPEN, '1');
  };
  window.tbClose = function() {
    document.getElementById('tbDrawer').style.right = '-100%';
    document.getElementById('tbBackdrop').style.display = 'none';
    sessionStorage.removeItem(SS_OPEN);
  };

  // Show first panel on init and activate step mode
  document.getElementById('tbPanel-steps').style.display = 'block';
  stepModeActivate();
  window.tbTab = function(btn, tab) {
    document.querySelectorAll('.tb-tab').forEach(function(b) { b.classList.remove('active'); });
    btn.classList.add('active');
    document.querySelectorAll('.tb-panel').forEach(function(p) { p.style.display = 'none'; });
    document.getElementById('tbPanel-' + tab).style.display = 'block';
    if (tab === 'steps') { stepModeActivate(); } else { stepModeDeactivate(); }
  }

  // Wire Cook Mode button to open drawer
  var cookModeBtn = document.getElementById('cookModeBtn');
  if (cookModeBtn) {
    cookModeBtn.addEventListener('click', function() { tbOpen(); });
  }

  // Auto-open if ?cook=1 in URL
  if (new URLSearchParams(window.location.search).get('cook') === '1') {
    tbOpen();
  }
  // Restore open state from sessionStorage
  else if (sessionStorage.getItem(SS_OPEN)) {
    tbOpen();
  }

  // Escape key closes drawer
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') tbClose();
  });

  /* ── Step Navigation ── */
  function stepModeActivate() {
    tbStepMode = true;
    var saved = parseInt(sessionStorage.getItem(SS_STEP) || '0', 10);
    tbStepIdx = isNaN(saved) ? 0 : saved;
    stepRender();
  }

  function stepModeDeactivate() {
    tbStepMode = false;
    document.querySelectorAll('.step-block').forEach(function(el) { el.style.opacity = '1'; });
    document.getElementById('stepProgressBar').style.width = '0%';
  }

  function stepRender() {
    if (!tbSteps.length) return;
    tbStepIdx = Math.max(0, Math.min(tbStepIdx, tbSteps.length - 1));
    document.getElementById('stepNavText').textContent = tbSteps[tbStepIdx];
    document.getElementById('stepNavCounter').textContent =
      'Step ' + (tbStepIdx + 1) + ' of ' + tbSteps.length;
    document.getElementById('stepProgressBar').style.width =
      ((tbStepIdx + 1) / tbSteps.length * 100) + '%';
    document.getElementById('stepPrevBtn').disabled = tbStepIdx === 0;
    document.getElementById('stepNextBtn').disabled = tbStepIdx === tbSteps.length - 1;
    sessionStorage.setItem(SS_STEP, tbStepIdx);
    // Highlight active step on page
    document.querySelectorAll('.step-block').forEach(function(el, i) {
      el.style.opacity = i === tbStepIdx ? '1' : '.3';
    });
  }

  window.stepNav = function(dir) {
    tbStepIdx = Math.max(0, Math.min(tbStepIdx + dir, tbSteps.length - 1));
    stepRender();
  }

  /* ── Timers ── */
  var timers = {};
  var timerInterval = null;

  function timerLoad() {
    try {
      var saved = JSON.parse(sessionStorage.getItem(SS_TIMERS) || '[]');
      saved.forEach(function(t) {
        if (t.remaining > 0) {
          timers[t.id] = t;
          t._startedAt = Date.now() - ((t.total - t.remaining) * 1000);
        }
      });
    } catch(e) {}
    timerRenderAll();
    timerTickStart();
  }

  function timerSave() {
    var arr = Object.values(timers).map(function(t) {
      return { id: t.id, name: t.name, total: t.total, remaining: t.remaining, running: t.running };
    });
    sessionStorage.setItem(SS_TIMERS, JSON.stringify(arr));
  }

  window.timerAdd = function() {
    var name = (document.getElementById('timerName').value.trim() || 'Timer');
    var mins = parseFloat(document.getElementById('timerMins').value);
    if (!mins || mins <= 0) { document.getElementById('timerMins').focus(); return; }
    var secs = Math.round(mins * 60);
    var id = Date.now();
    timers[id] = { id: id, name: name, total: secs, remaining: secs, running: true, _startedAt: Date.now() };
    document.getElementById('timerName').value = '';
    document.getElementById('timerMins').value = '';
    timerSave();
    timerRenderAll();
    timerTickStart();
  }

  window.timerDelete = function(id) {
    delete timers[id];
    timerSave();
    timerRenderAll();
  }

  window.timerToggle = function(id) {
    var t = timers[id];
    if (!t) return;
    t.running = !t.running;
    if (t.running) t._startedAt = Date.now() - ((t.total - t.remaining) * 1000);
    timerSave();
    timerRenderAll();
  }

  function timerTickStart() {
    if (timerInterval) return;
    timerInterval = setInterval(function() {
      var anyRunning = false;
      Object.values(timers).forEach(function(t) {
        if (!t.running) return;
        anyRunning = true;
        var elapsed = (Date.now() - t._startedAt) / 1000;
        t.remaining = Math.max(0, t.total - elapsed);
        if (t.remaining <= 0) {
          t.running = false;
          timerAlert(t);
        }
      });
      timerRenderAll();
      timerSave();
      if (!anyRunning) { clearInterval(timerInterval); timerInterval = null; }
    }, 500);
  }

  function timerAlert(t) {
    // Audio beep
    try {
      var ctx = new (window.AudioContext || window.webkitAudioContext)();
      [0, 300, 600].forEach(function(delay) {
        var osc = ctx.createOscillator();
        var gain = ctx.createGain();
        osc.connect(gain); gain.connect(ctx.destination);
        osc.frequency.value = 880;
        gain.gain.setValueAtTime(0.4, ctx.currentTime + delay/1000);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + delay/1000 + 0.4);
        osc.start(ctx.currentTime + delay/1000);
        osc.stop(ctx.currentTime + delay/1000 + 0.5);
      });
    } catch(e) {}
    // Visual flash on timer
    var el = document.getElementById('timer-' + t.id);
    if (el) { el.classList.add('timer-done'); }
  }

  function timerFmt(secs) {
    secs = Math.max(0, Math.ceil(secs));
    var h = Math.floor(secs / 3600);
    var m = Math.floor((secs % 3600) / 60);
    var s = secs % 60;
    if (h > 0) return h + ':' + String(m).padStart(2,'0') + ':' + String(s).padStart(2,'0');
    return String(m).padStart(2,'0') + ':' + String(s).padStart(2,'0');
  }

  function timerRenderAll() {
    var list = document.getElementById('timerList');
    var empty = document.getElementById('timerEmpty');
    var keys = Object.keys(timers);
    empty.style.display = keys.length ? 'none' : 'block';
    list.innerHTML = keys.map(function(id) {
      var t = timers[id];
      var pct = (1 - t.remaining / t.total) * 100;
      var done = t.remaining <= 0;
      return '<div class="timer-item mb-2 p-2 border rounded-3 ' + (done ? 'timer-done' : '') + '" id="timer-' + t.id + '">' +
        '<div class="d-flex align-items-center justify-content-between mb-1">' +
          '<span class="small fw-medium">' + t.name + '</span>' +
          '<div class="d-flex gap-1">' +
            '<button class="btn btn-sm btn-outline-secondary py-0 px-2" onclick="timerToggle(' + t.id + ')">' +
              '<i class="fas fa-' + (t.running ? 'pause' : 'play') + '"></i>' +
            '</button>' +
            '<button class="btn btn-sm btn-outline-danger py-0 px-2" onclick="timerDelete(' + t.id + ')">' +
              '<i class="fas fa-times"></i>' +
            '</button>' +
          '</div>' +
        '</div>' +
        '<div class="d-flex align-items-center gap-2">' +
          '<span class="fw-bold ' + (done ? 'text-danger' : 'text-success') + '" style="font-size:1.3rem;font-variant-numeric:tabular-nums;min-width:60px;">' +
            (done ? 'Done!' : timerFmt(t.remaining)) +
          '</span>' +
          '<div class="progress flex-grow-1" style="height:6px;">' +
            '<div class="progress-bar ' + (done ? 'bg-danger' : 'bg-success') + '" style="width:' + pct + '%;transition:width .5s;"></div>' +
          '</div>' +
        '</div>' +
      '</div>';
    }).join('');
  }

  /* ── Notes ── */
  window.tbNoteSave = function() {
    var txt = document.getElementById('tbNoteText').value;
    fetch('/api/recipe/{{ recipe.id }}/note', {
      method: 'POST',
      headers: {'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest'},
      body: 'note_text=' + encodeURIComponent(txt)
    }).then(function(r) {
      if (r.ok) {
        var saved = document.getElementById('tbNoteSaved');
        saved.style.display = 'block';
        setTimeout(function() { saved.style.display = 'none'; }, 2000);
      }
    });
  }

  /* ── Temperature Converter ── */
  window.tempConvert = function(from) {
    var fEl = document.getElementById('tempF');
    var cEl = document.getElementById('tempC');
    if (from === 'F') {
      var f = parseFloat(fEl.value);
      cEl.value = isNaN(f) ? '' : Math.round((f - 32) * 5/9 * 10) / 10;
    } else {
      var c = parseFloat(cEl.value);
      fEl.value = isNaN(c) ? '' : Math.round((c * 9/5 + 32) * 10) / 10;
    }
  }

  /* ── Measurement Converter ── */
  var MEAS_TO_ML = {
    tsp: 4.92892, tbsp: 14.7868, fl_oz: 29.5735, cup: 236.588,
    pint: 473.176, quart: 946.353, gallon: 3785.41, ml: 1, l: 1000
  };
  var MEAS_TO_G = { oz: 28.3495, lb: 453.592, g: 1, kg: 1000 };

  window.measConvert = function() {
    var amt = parseFloat(document.getElementById('measAmt').value);
    var from = document.getElementById('measFrom').value;
    var to = document.getElementById('measTo').value;
    var res = document.getElementById('measResult');
    if (isNaN(amt)) { res.textContent = '—'; return; }
    var fromVol = MEAS_TO_ML[from], toVol = MEAS_TO_ML[to];
    var fromWt = MEAS_TO_G[from], toWt = MEAS_TO_G[to];
    var result;
    if (fromVol && toVol) result = amt * fromVol / toVol;
    else if (fromWt && toWt) result = amt * fromWt / toWt;
    else { res.textContent = 'Incompatible units'; return; }
    result = Math.round(result * 10000) / 10000;
    res.textContent = result + ' ' + to.replace('_',' ');
  }

  // Init timers from sessionStorage on load
  timerLoad();

})();
</script>

<style>
.tb-tab {
  flex: 1; border: none; background: none; padding: 10px 4px;
  font-size: .8rem; color: #6c757d; border-bottom: 2px solid transparent;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.tb-tab.active { color: #198754; border-bottom-color: #198754; font-weight: 600; }
.tb-tab:hover:not(.active) { color: #212529; background: #e9ecef; }
.tb-panel { display: none; }
.timer-done { background: #fff3f3 !important; border-color: #dc3545 !important; }
.step-block { transition: opacity .2s; }
</style>

{% endblock %}