{% extends "pos/base.html" %}
{% load static %}

{% block title %}Order {{ order.tiktok_order_id }}{% endblock %}
{% block heading %}TikTok Order Detail{% endblock %}

{% block content %}

<div class="row mb-3">
  <div class="col">
    <a href="{% url 'integrate:dashboard' %}" class="btn btn-secondary btn-sm">
      <i class="fas fa-arrow-left"></i> Back to Dashboard
    </a>
    {% if order.pos_status == 'STOCK_HOLD' %}
      <form method="post" action="{% url 'integrate:repost_order' order.pk %}"
            class="d-inline ml-2" onsubmit="return confirm('Repost this order?')">
        {% csrf_token %}
        <button type="submit" class="btn btn-warning btn-sm">
          <i class="fas fa-redo"></i> Repost to POS
        </button>
      </form>
    {% endif %}
  </div>
</div>

<div class="row">
  <!-- Order Info -->
  <div class="col-md-6">
    <div class="card shadow mb-4">
      <div class="card-header py-2">
        <h6 class="m-0 font-weight-bold text-primary">Order Information</h6>
      </div>
      <div class="card-body">
        <table class="table table-sm table-borderless">
          <tr><td><strong>TikTok Order ID</strong></td><td><code>{{ order.tiktok_order_id }}</code></td></tr>
          <tr><td><strong>Shop</strong></td><td>{{ order.shop.shop_name }}</td></tr>
          <tr><td><strong>Buyer</strong></td><td>{{ order.buyer_name|default:"—" }}</td></tr>
          <tr><td><strong>Phone</strong></td><td>{{ order.buyer_phone|default:"—" }}</td></tr>
          <tr><td><strong>Order Date</strong></td><td>{{ order.order_date|date:"d-M-Y H:i" }}</td></tr>
          <tr><td><strong>TikTok Status</strong></td>
            <td>
              <span class="badge badge-info">{{ order.tiktok_status }}</span>
            </td>
          </tr>
          <tr><td><strong>POS Status</strong></td>
            <td>
              {% if order.pos_status == 'POSTED' %}
                <span class="badge badge-success">POSTED</span>
              {% elif order.pos_status == 'STOCK_HOLD' %}
                <span class="badge badge-warning">STOCK HOLD</span>
              {% elif order.pos_status == 'REVERSED' %}
                <span class="badge badge-danger">REVERSED</span>
              {% else %}
                <span class="badge badge-secondary">{{ order.pos_status }}</span>
              {% endif %}
            </td>
          </tr>
          {% if order.pos_invoice_no %}
          <tr><td><strong>POS Invoice</strong></td><td>#{{ order.pos_invoice_no }}</td></tr>
          {% endif %}
          {% if order.pos_return_invoice_no %}
          <tr><td><strong>Return Invoice</strong></td><td>#{{ order.pos_return_invoice_no }}</td></tr>
          {% endif %}
          {% if order.stock_hold_reason %}
          <tr>
            <td><strong>Hold Reason</strong></td>
            <td><span class="text-danger small">{{ order.stock_hold_reason }}</span></td>
          </tr>
          {% endif %}
        </table>
      </div>
    </div>
  </div>

  <!-- Amounts -->
  <div class="col-md-6">
    <div class="card shadow mb-4">
      <div class="card-header py-2">
        <h6 class="m-0 font-weight-bold text-success">Amount Breakdown</h6>
      </div>
      <div class="card-body">
        <table class="table table-sm">
          <tr>
            <td>Original Amount</td>
            <td class="text-right">{{ order.original_amount|floatformat:2 }}</td>
          </tr>
          <tr class="text-danger">
            <td>(-) Discount</td>
            <td class="text-right">{{ order.discount_amount|floatformat:2 }}</td>
          </tr>
          <tr class="text-danger">
            <td>(-) Shipping Fee</td>
            <td class="text-right">{{ order.shipping_fee|floatformat:2 }}</td>
          </tr>
          <tr class="text-danger">
            <td>(-) Platform Fee</td>
            <td class="text-right">{{ order.platform_fee|floatformat:2 }}</td>
          </tr>
          <tr class="table-success">
            <td><strong>Net Earned</strong></td>
            <td class="text-right"><strong>{{ order.net_amount|floatformat:2 }}</strong></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Order Items -->
<div class="card shadow mb-4">
  <div class="card-header py-2">
    <h6 class="m-0 font-weight-bold text-primary">Order Items</h6>
  </div>
  <div class="card-body">
    <table class="table table-bordered table-sm">
      <thead class="thead-light">
        <tr>
          <th>TikTok SKU</th>
          <th>Product Name</th>
          <th>Matched Product</th>
          <th>Qty</th>
          <th>Sale Price</th>
          <th>Cost Price</th>
          <th>Profit</th>
          <th>Stock</th>
        </tr>
      </thead>
      <tbody>
        {% for item in items %}
        <tr {% if not item.stock_available %}class="table-warning"{% endif %}>
          <td><code>{{ item.sku_id }}</code></td>
          <td>{{ item.product_name }}</td>
          <td>
            {% if item.matched_product %}
              <span class="text-success">
                <i class="fas fa-check-circle"></i>
                {{ item.matched_product.name }}
              </span>
            {% else %}
              <span class="text-danger">
                <i class="fas fa-times-circle"></i> Not Found
              </span>
            {% endif %}
          </td>
          <td>{{ item.quantity }}</td>
          <td class="text-right">{{ item.sale_price|floatformat:2 }}</td>
          <td class="text-right">{{ item.cost_price|floatformat:2 }}</td>
          <td class="text-right {% if item.profit > 0 %}text-success{% else %}text-danger{% endif %}">
            {{ item.profit|floatformat:2 }}
          </td>
          <td>
            {% if item.stock_available %}
              <span class="badge badge-success">OK</span>
            {% else %}
              <span class="badge badge-danger" title="{{ item.stock_issue_note }}">
                HOLD
              </span>
              {% if item.stock_issue_note %}
                <br><small class="text-danger">{{ item.stock_issue_note }}</small>
              {% endif %}
            {% endif %}
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="8" class="text-center text-muted">No items</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- Webhook Logs -->
{% if logs %}
<div class="card shadow mb-4">
  <div class="card-header py-2">
    <h6 class="m-0 font-weight-bold text-secondary">Recent Webhook Events</h6>
  </div>
  <div class="card-body">
    <table class="table table-sm table-bordered">
      <thead class="thead-light">
        <tr><th>Event</th><th>Status</th><th>Error</th><th>Time</th></tr>
      </thead>
      <tbody>
        {% for log in logs %}
        <tr>
          <td><code>{{ log.event_type }}</code></td>
          <td>
            {% if log.processed %}
              <span class="badge badge-success">OK</span>
            {% else %}
              <span class="badge badge-danger">Failed</span>
            {% endif %}
          </td>
          <td><small class="text-danger">{{ log.error|default:"—" }}</small></td>
          <td><small>{{ log.received_at|date:"d-M-y H:i:s" }}</small></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}

{% endblock %}