{% extends "layout.html" %}
{% block title %}{% endblock %}

{% block content %}
<h1 class="text-4xl font-bold text-gray-800 mb-6 text-center">
  🦐 LaksyaShrimp {{ current_product_name }}
</h1>
<hr class="mb-8">

<div class="flex justify-between items-center mb-6">
  <h2 class="text-3xl font-semibold text-gray-800">
    Chain History (Total Blocks: {{ full_chain_history | length }})
  </h2>
  <div>
    {% if dashboard_batch_id %}
    <a href="{{ url_for('product_trace', batch_id=dashboard_batch_id) }}"
       class="text-sm text-indigo-600 hover:text-indigo-800 font-medium mr-4">
       Dashboard →
    </a>
    {% endif %}
    <select onchange="window.location.href = this.value" class="py-2 px-3 border rounded-md text-base">
      {% for id, data in product_options.items() %}
      <option value="?product_id={{ id | urlencode }}" {% if id == selected_product_id %}selected{% endif %}>
        Switch to {{ data.name }}
      </option>
      {% endfor %}
    </select>
  </div>
</div>

{% if full_chain_history %}
<div class="space-y-6">
  {% for block_data in full_chain_history %}
  {% set stage_name = (block_data.block.stage or '') | string %}
  {% set clean_stage = stage_name.split('-', 1)[-1].strip().lower().replace('/', '-').replace('–', '-') %}
  {% set data_payload = block_data.block.transactions[0].data
     if block_data.block.transactions
     and block_data.block.transactions[0]
     and block_data.block.transactions[0].data else {} %}

  <div class="card mb-4 border border-gray-200 shadow-sm p-4 bg-white">
    <div class="flex justify-between items-start">
      <div class="max-w-2xl">
        <h3 class="text-lg font-bold text-gray-800 mb-1">
          {% if block_data.block_sub_label %}
            Block #{{ block_data.block_sub_label }} - {{ block_data.block.stage }}
          {% else %}
            {{ block_data.block.stage }}
          {% endif %}
        </h3>
        <p class="text-xs text-gray-500">Mined at: {{ block_data.block.timestamp }}</p>
        <p class="text-xs text-gray-500 mb-2">
          Hash: <span class="font-mono text-xs break-all">{{ block_data.block.hash }}</span>
        </p>
      </div>

      <!-- Static QR images and static public URLs: click target == QR target. -->
      <div class="flex flex-col sm:flex-row justify-end items-center gap-6">
        <!-- Transaction (Block) QR with stage name above -->
        <div class="flex flex-col items-center">
          <span class="text-sm font-semibold text-gray-800 mb-1">
            {% if block_data.block_sub_label %}Block #{{ block_data.block_sub_label }} - {% endif %}{{ block_data.block.stage }}
          </span>
          <a href="{{ block_data.qr_url }}" target="_blank">
            <img src="{{ block_data.qr_img }}"
                 alt="{{ block_data.block.stage }} QR"
                 class="w-36 h-36 rounded-lg border border-gray-300 shadow-sm hover:scale-105 transition-transform">
          </a>
        </div>

        <!-- Feedback QR with label above -->
        <div class="flex flex-col items-center">
          <span class="text-sm font-semibold text-gray-800 mb-1">Feedback QR</span>
          <a href="{{ block_data.feedback_qr_url }}"
             target="_blank">
            <img src="{{ block_data.feedback_qr_img }}"
                 alt="Feedback QR"
                 class="w-36 h-36 rounded-lg border border-gray-300 shadow-sm hover:scale-105 transition-transform">
          </a>
        </div>
      </div>
    </div>

    <!-- Average Rating Display -->
    <div class="text-center mt-2">
      {% if block_data.avg_rating_text %}
        {% set avg = block_data.avg_rating_value %}
        {% set count = (block_data.avg_rating_text.split('(')[1].rstrip(')')) if '(' in block_data.avg_rating_text else '0' %}
        <div class="flex justify-center items-center space-x-2">
          <div class="flex items-center">
            {% set full = avg | float | int %}
            {% for i in range(1, 6) %}
              {% if i <= full %}
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#facc15" class="w-5 h-5">
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.955a1 1 0 00.95.69h4.162c.969 0 1.371 1.24.588 1.81l-3.37 2.448a1 1 0 00-.364 1.118l1.287 3.955c.3.921-.755 1.688-1.54 1.118l-3.37-2.448a1 1 0 00-1.176 0l-3.37 2.448c-.785.57-1.84-.197-1.54-1.118l1.287-3.955a1 1 0 00-.364-1.118L2.065 9.382c-.783-.57-.38-1.81.588-1.81h4.162a1 1 0 00.95-.69l1.284-3.955z" />
                </svg>
              {% else %}
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#e5e7eb" class="w-5 h-5">
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.955a1 1 0 00.95.69h4.162c.969 0 1.371 1.24.588 1.81l-3.37 2.448a1 1 0 00-.364 1.118l1.287 3.955c.3.921-.755 1.688-1.54 1.118l-3.37-2.448a1 1 0 00-1.176 0l-3.37 2.448c-.785.57-1.84-.197-1.54-1.118l1.287-3.955a1 1 0 00-.364-1.118L2.065 9.382c-.783-.57-.38-1.81.588-1.81h4.162a1 1 0 00.95-.69l1.284-3.955z" />
                </svg>
              {% endif %}
            {% endfor %}
          </div>
          <div class="text-gray-800 font-semibold">{{ avg | round(1) }}/5</div>
          <div class="text-sm text-gray-500">({{ count }} ratings)</div>
        </div>
      {% else %}
        <div class="text-gray-400 text-sm italic">No ratings yet</div>
      {% endif %}
    </div>

    <hr class="my-3">

    <h4 class="text-md font-semibold text-gray-700 mb-2">Transaction Data:</h4>
    <div class="data-display text-sm text-gray-700 mb-4 space-y-1 p-3 border rounded-md bg-gray-50">
      {% for key, value in data_payload.items() %}
      <p><strong class="font-medium text-gray-800">{{ key | replace('_', ' ') }}:</strong> {{ value }}</p>
      {% endfor %}
      {% if not data_payload %}
      <p class="text-gray-500 italic">No transaction data found for this block.</p>
      {% endif %}
    </div>

    <!-- Certificate Uploads -->
    {% set upload_fields = {
      'broodstock facility': ['DoF approval', 'Health status', 'SPF status'],
      'hatchery-nursery': ['CAA approval', 'Health status', 'Antibiotic free status'],
      'grow-out system-1': ['CAA approval', 'Health status', 'Antibiotic free status'],
      'grow-out system-2': ['CAA approval', 'Health status', 'Antibiotic free status'],
      'grow-out system-3': ['CAA approval', 'Health status', 'Antibiotic free status'],
      'production of feed & inputs-1': ['Licence', 'CAA approval', 'QC report of feed'],
      'production of feed & inputs-2': ['Licence', 'CAA approval', 'QC report of feed'],
      'production of feed & inputs-3': ['Licence', 'CAA approval', 'QC report of feed'],
      'harvesting-1': ['Licence'],
      'harvesting-2': ['Licence'],
      'harvesting-3': ['Licence'],
      'aggregation/trading at farm gate-1': ['Licence'],
      'aggregation/trading at farm gate-2': ['Licence'],
      'aggregation/trading at farm gate-3': ['Licence'],
      'transportation-1': ['Licence'],
      'transportation-2': ['Licence'],
      'transportation-3': ['Licence'],
      'marketing-1': ['Licence'],
      'marketing-2': ['Licence'],
      'marketing-3': ['Licence'],
      'processing (direct from farms)-1': ['Licence', 'HACCP certificate'],
      'processing (direct from farms)-2': ['Licence', 'HACCP certificate'],
      'processing (direct from farms)-3': ['Licence', 'HACCP certificate'],
      'exporting-1': ['Export Licence', 'Health certificate', 'Phytosanitary certificate', 'Antibiotic Free Certificate'],
      'exporting-2': ['Export Licence', 'Health certificate', 'Phytosanitary certificate', 'Antibiotic Free Certificate'],
      'exporting-3': ['Export Licence', 'Health certificate', 'Phytosanitary certificate', 'Antibiotic Free Certificate'],
      'retailing-1': ['Retail Licence'],
      'retailing-2': ['Retail Licence'],
      'retailing-3': ['Retail Licence']
    } %}

    {% if clean_stage in upload_fields %}
    <div class="mt-4 bg-gray-50 border p-4 rounded-lg">
      <h4 class="text-md font-semibold text-gray-800 mb-3">Upload Certificates (PDF/JPG)</h4>
      {% for cert in upload_fields[clean_stage] %}
      <form action="{{ public_url('/upload_certificate') }}" method="post" enctype="multipart/form-data" class="mb-3">
        <input type="hidden" name="batch_id" value="{{ data_payload.get('ID', '') }}">
        <input type="hidden" name="stage_name" value="{{ block_data.block.stage }}">
        <input type="hidden" name="certificate_name" value="{{ cert }}">
        <label class="block text-gray-700 font-medium mb-1">{{ cert }}:</label>
        <div class="flex items-center gap-2">
          <input type="file" name="file" accept=".pdf,.jpg,.jpeg,.png"
                 class="text-sm border border-gray-300 rounded p-1 flex-1" required>
          <button type="submit"
                  class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded text-sm shadow-sm">
            Upload
          </button>
        </div>
      </form>
      {% endfor %}
    </div>
    {% endif %}

    <details class="text-xs mt-3">
      <summary class="cursor-pointer text-indigo-600 hover:text-indigo-800">
        View Full JSON Data (Debug)
      </summary>
      <pre class="bg-gray-100 p-2 rounded-md mt-1 overflow-x-auto">
{{ block_data.block | tojson(indent=2) }}
      </pre>
    </details>
  </div>
  {% endfor %}
</div>
{% else %}
<p class="text-center text-gray-600">
  The blockchain is empty, only the Genesis Block exists.
</p>
{% endif %}

{% if selected_product_id == 'vannamei_2025' %}
<section class="mt-12 pt-8 border-t-2 border-indigo-100">
  <h2 class="text-2xl font-bold text-gray-800 mb-2 text-center">🔗 Full Lineage Traces</h2>
  <p class="text-sm text-gray-500 text-center mb-8">
    Scan a QR below to view the complete supply chain lineage for each batch (Broodstock → Hatchery → Grow-out → Feed)
  </p>

  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6 justify-items-center">

    {% set lineage_defs = [
      ('a', 'Lineage A', '1a → 2a(N/A) → 3a → 4a'),
      ('b', 'Lineage B', '1b → 2b(N/A) → 3b → 4b'),
      ('c', 'Lineage C', '1c → 2c(N/A) → 3c → 4c'),
      ('d', 'Lineage D', '1d → 2d(N/A) → 3d → 4d'),
      ('e', 'Lineage E', '1e → 2e → 3e → 4e'),
    ] %}

    {% for lid, title, flow in lineage_defs %}
    <div class="flex flex-col items-center bg-white border border-indigo-200 rounded-xl shadow-sm p-4 w-full">
      <span class="text-sm font-bold text-indigo-700 mb-1">{{ title }}</span>
      <span class="text-xs text-gray-500 mb-3 text-center">{{ flow }}</span>
      <a href="{{ public_url('/lineage_trace/vannamei_2025/' ~ lid) }}" target="_blank">
        <img src="{{ url_for('static', filename='qr/lineage_vannamei_2025_' ~ lid ~ '.png') }}"
             alt="{{ title }} Lineage QR"
             class="w-36 h-36 rounded-lg border border-gray-200 hover:shadow-md transition">
      </a>
      <a href="{{ public_url('/lineage_trace/vannamei_2025/' ~ lid) }}"
         class="mt-3 text-xs text-indigo-600 hover:underline font-medium">
        View Lineage {{ lid | upper }} →
      </a>
    </div>
    {% endfor %}

  </div>
</section>
{% endif %}

<footer class="text-center mt-10 py-4 border-t border-gray-300 text-sm text-gray-600">
  Developed by <strong>ICAR-CIBA</strong>.
</footer>
{% endblock %}