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

{% block title %}TikTok Shops{% endblock %}
{% block heading %}TikTok Shops{% endblock %}

{% block content %}

<div class="mb-3">
  <a href="{% url 'integrate:shop_add' %}" class="btn btn-success btn-sm">
    <i class="fas fa-plus"></i> Add New Shop
  </a>
  <a href="{% url 'integrate:dashboard' %}" class="btn btn-primary btn-sm ml-1">
    <i class="fas fa-chart-bar"></i> Dashboard
  </a>
  <a href="{% url 'integrate:config_list' %}" class="btn btn-secondary btn-sm ml-1">
    <i class="fas fa-cog"></i> Config
  </a>
</div>

{% if not shops %}
<div class="alert alert-info">
  Koi TikTok shop nahi mili. <strong>"Add New Shop"</strong> button dabayein.
</div>
{% else %}
<div class="row">
  {% for shop in shops %}
  <div class="col-md-6 mb-4">
    <div class="card shadow {% if not shop.is_active %}border-secondary{% elif shop.is_authorized %}border-success{% else %}border-warning{% endif %}">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h6 class="m-0 font-weight-bold">
          {{ shop.shop_name }}
          {% if shop.is_authorized %}
            <span class="badge badge-success ml-1">Authorized</span>
          {% else %}
            <span class="badge badge-warning ml-1">Not Authorized</span>
          {% endif %}
          {% if not shop.is_active %}
            <span class="badge badge-secondary ml-1">Inactive</span>
          {% endif %}
        </h6>
        <div>
          <a href="{% url 'integrate:shop_edit' shop.pk %}" class="btn btn-xs btn-outline-primary">
            <i class="fas fa-edit"></i>
          </a>
          <form method="post" action="{% url 'integrate:shop_delete' shop.pk %}"
                class="d-inline" onsubmit="return confirm('Deactivate {{ shop.shop_name }}?')">
            {% csrf_token %}
            <button class="btn btn-xs btn-outline-danger">
              <i class="fas fa-trash"></i>
            </button>
          </form>
        </div>
      </div>
      <div class="card-body">
        <table class="table table-sm table-borderless mb-2">
          <tr>
            <td><strong>TikTok Shop ID</strong></td>
            <td>{{ shop.tiktok_shop_id|default:"—" }}</td>
          </tr>
          <tr>
            <td><strong>App Key</strong></td>
            <td><code>{{ shop.app_key|default:"(from global config)" }}</code></td>
          </tr>
          <tr>
            <td><strong>Token Expiry</strong></td>
            <td>
              {% if shop.token_expiry %}
                {% if shop.is_token_expired %}
                  <span class="text-danger">{{ shop.token_expiry|date:"d-M-Y H:i" }} (EXPIRED)</span>
                {% else %}
                  <span class="text-success">{{ shop.token_expiry|date:"d-M-Y H:i" }}</span>
                {% endif %}
              {% else %}—{% endif %}
            </td>
          </tr>
        </table>

        <!-- Webhook URL -->
        <div class="mb-2">
          <label class="small text-muted font-weight-bold">Webhook URL (Register in TikTok Partner Center):</label>
          <div class="input-group input-group-sm">
            <input type="text" class="form-control"
                   value="{{ request.scheme }}://{{ request.get_host }}/integrate/tiktok/webhook/{{ shop.webhook_token }}/"
                   id="webhook_{{ shop.id }}" readonly>
            <div class="input-group-append">
              <button class="btn btn-outline-secondary"
                      onclick="copyWebhook('webhook_{{ shop.id }}')">
                <i class="fas fa-copy"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- Actions -->
        <div class="mt-2">
          {% if not shop.is_authorized or shop.is_token_expired %}
            <a href="{% url 'integrate:shop_authorize' shop.pk %}"
               class="btn btn-warning btn-sm">
              <i class="fas fa-key"></i> Authorize Shop
            </a>
          {% else %}
            <a href="{% url 'integrate:shop_authorize' shop.pk %}"
               class="btn btn-outline-success btn-sm">
              <i class="fas fa-sync"></i> Re-authorize
            </a>
          {% endif %}
          <a href="{% url 'integrate:dashboard' %}?shop={{ shop.id }}"
             class="btn btn-outline-primary btn-sm ml-1">
            <i class="fas fa-list"></i> View Orders
          </a>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

{% endblock %}

{% block javascripts %}
<script>
function copyWebhook(inputId) {
  var inp = document.getElementById(inputId);
  inp.select();
  document.execCommand('copy');
  alert('Webhook URL copied!');
}
</script>
{% endblock %}