{% extends "base.html" %}
{% import "macros.html" as macros with context %}

{% block content %}

{# --- 宏：递归渲染树节点 --- #}
{% macro render_tree_node(tree_node) %}
<li>
    <div class="node-wrapper" style="position: relative;">
        {{ macros.item_slot(tree_node.item, show_name=True) }}

        {# 制作站图标 #}
        {% if tree_node.recipes %}
        {% set main_recipe = tree_node.recipes[0] %}

        {% if main_recipe.stations %}
        <div class="station-mini" title="{{ main_recipe.stations[0].name }}" style="z-index: 5;">
            {% if main_recipe.stations[0].imagePath %}
            <img src="{{ to_img_url(main_recipe.stations[0].imagePath) }}">
            {% else %}
            <span style="font-size: 10px;">?</span>
            {% endif %}
        </div>
        {% endif %}

        {# 条件显示 #}
        {% if main_recipe.conditions %}
        <div class="node-condition">
            {{ main_recipe.conditions[0] }}
        </div>
        {% endif %}
        {% endif %}

        {# [Marker] 截断提示 (Truncated) #}
        {% if tree_node.truncated %}
        <div
            style="position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); font-size: 18px; color: #ff6b6b; font-weight: bold; line-height: 1; z-index: 10; text-shadow: 1px 1px 0 #000;">
            ...
        </div>
        {% endif %}

        {# [Marker] 循环提示 (Loop) #}
        {% if tree_node.loop %}
        <div style="position: absolute; top: -6px; left: -6px; width: 16px; height: 16px; background: #2b3055; border-radius: 50%; color: #ffce45; font-size: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid #ffce45; z-index: 10; box-shadow: 0 0 2px #000;"
            title="检测到递归循环">
            ↺
        </div>
        {% endif %}

        {# [Marker] 引用提示 (Reference) #}
        {% if tree_node.reference %}
        <div style="position: absolute; top: -6px; left: -6px; width: 16px; height: 16px; background: #2b3055; border-radius: 50%; color: #4ff; font-size: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid #4ff; z-index: 10; box-shadow: 0 0 2px #000;"
            title="合成路线已在别处展示">
            *
        </div>
        {% endif %}

    </div>

    <!-- 子节点容器 -->
    {% if tree_node.recipes and tree_node.recipes[0].ingredients %}
    <ul>
        {% for ing_obj in tree_node.recipes[0].ingredients %}
        {{ render_tree_node(ing_obj.tree) }}
        {% endfor %}
    </ul>
    {% endif %}
</li>
{% endmacro %}


<div class="panel-header">
    <span class="panel-title">合成树: {{ data.root.item.name }}</span>
    <span style="font-size: 14px; color: #aaa;">{{ data.root.item.mod }}</span>
</div>

<div class="tree-container">
    <div class="tree">
        <ul>
            {{ render_tree_node(data.root) }}
        </ul>
    </div>
</div>

{# 底部信息栏 #}
<div
    style="display: flex; justify-content: space-between; align-items: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1);">

    {# 左侧：合成配方数量提示 #}
    <div style="font-size: 12px; color: #888;">
        {% if data.root.recipes|length > 1 %}
        * 该物品还有其他 {{ data.root.recipes|length - 1 }} 种合成配方，仅展示第一种。
        {% endif %}
    </div>

    {# 右侧：图例 (Legend) #}
    <div
        style="display: flex; gap: 10px; font-size: 12px; color: #bbb; background: rgba(0,0,0,0.2); padding: 5px 10px; border-radius: 4px;">
        <div style="display: flex; align-items: center; gap: 4px;">
            <span style="color: #4ff; font-weight: bold;">*</span> <span>参考别处</span>
        </div>
        <div style="display: flex; align-items: center; gap: 4px;">
            <span style="color: #ffce45; font-weight: bold;">↺</span> <span>循环配方</span>
        </div>
        <div style="display: flex; align-items: center; gap: 4px;">
            <span style="color: #ff6b6b; font-weight: bold;">...</span> <span>超出限制</span>
        </div>
    </div>
</div>

<!-- 用途列表 -->
{% if data.usageRecipes %}
<div class="section-title" style="margin-top: 20px;">可以合成</div>
<div style="display: flex; flex-direction: column; gap: 8px;">
    {% for r in data.usageRecipes %}
    {% set result_node = data.nodes[r.resultId|string] %}

    <div class="usage-card">

        <!-- [Fix] 1. 原料列表 (移至左侧) -->
        <div class="usage-ingredients">
            {% for ing in r.ingredients %}
            {% set ing_node = data.nodes[ing.itemId|string] %}
            {% if ing_node %}
            {% if ing.itemId == data.targetId %}
            <!-- 高亮当前物品 -->
            <div
                style="border: 2px solid #ffce45; border-radius: 6px; padding: 2px; background: rgba(255, 206, 69, 0.1);">
                <!-- [Fix] 传入 frameCount -->
                {{ macros.item_slot({'name': ing_node.name, 'stack': ing.count, 'imagePath': ing_node.imagePath,
                'frameCount': ing_node.frameCount}, show_name=False) }}
            </div>
            {% else %}
            <!-- [Fix] 传入 frameCount -->
            {{ macros.item_slot({'name': ing_node.name, 'stack': ing.count, 'imagePath': ing_node.imagePath,
            'frameCount': ing_node.frameCount}, show_name=False) }}
            {% endif %}
            {% endif %}
            {% endfor %}

            {% if r.conditions %}
            <div style="width: 100%; display: flex; gap: 5px; flex-wrap: wrap;">
                {% for cond in r.conditions %}
                <span class="usage-condition">{{ cond }}</span>
                {% endfor %}
            </div>
            {% endif %}
        </div>

        <!-- 2. 中间箭头与制作站 -->
        <div class="usage-middle">
            <div class="usage-station-icon">
                {% if r.stations %}
                {% if r.stations[0].imagePath %}
                <img src="{{ to_img_url(r.stations[0].imagePath) }}" style="width: 24px; height: 24px;">
                {% else %}
                <span style="font-size: 16px;">?</span>
                {% endif %}
                {% else %}
                <span style="font-size: 12px;">-</span>
                {% endif %}
            </div>
            <span style="font-size: 20px; font-weight: bold; color: #666;">➔</span>
        </div>

        <!-- [Fix] 3. 结果物品 (移至右侧) -->
        <div class="usage-result">
            {% if result_node %}
            <!-- [Fix] 传入 frameCount -->
            {{ macros.item_slot({'name': result_node.name, 'stack': r.resultCount, 'imagePath': result_node.imagePath,
            'frameCount': result_node.frameCount}, show_name=True) }}
            {% else %}
            {{ macros.item_slot({'name': 'ID:' ~ r.resultId, 'stack': r.resultCount}, show_name=True) }}
            {% endif %}
        </div>

    </div>
    {% endfor %}
</div>

{% if data.hiddenUsagesCount > 0 %}
<div
    style="text-align: center; color: #aaa; padding: 10px; background: rgba(0,0,0,0.2); border-radius: 8px; font-size: 14px;">
    ... 还有 <b>{{ data.hiddenUsagesCount }}</b> 个合成用途未显示 ...
</div>
{% endif %}

{% endif %}

{% endblock %}