{% extends 'base.html' %}
{% block content %}
  <div class="container mt-3 mb-3 p-2">
    <div class="row">
      <!-- Left Sidebar / Product Info -->
      <div class="col-md-4">
        <div class="bg-success text-white p-4 rounded shadow" style="min-height: 400px;">
          <h5 class="mb-4">{{ product.name }}</h5>
          <p class="small">{{ product.description|truncatewords:30 }}</p>

          <div class="mt-auto">
            <button hx-post="{% url 'shop:add_to_cart' product.id %}" hx-target="#cart-count" hx-swap="outerHTML" hx-indicator="#loading-spinner" class="btn btn-success w-100 mt-2"><i class="fas fa-cart-plus"></i> Add to Cart</button>

            <div id="loading-spinner" class="htmx-indicator">
              <small>Adding...</small>
            </div>
          </div>
        </div>
      </div>

      <!-- Main Product Details -->
      <div class="col-md-8">
        <div class="row">
          <div class="col-md-6">
            {% if product.images.all %}
              {% for img in product.images.all %}
                {% if img.is_primary or forloop.first %}
                  <img src="{{ img.image.url }}" class="img-fluid rounded shadow" alt="{{ img.alt_text|default:product.name }}" />
                {% endif %}
              {% endfor %}
            {% else %}
              <img src="{{ product.image.url }}" class="img-fluid rounded shadow" alt="{{ product.name }}" style="max-height: 300px; object-fit: contain; width: 100%;" />
            {% endif %}
          </div>
        <h1 class="mb-3">{{ product.name }}</h1>
        
        <!-- Price with Discount -->
        {% with discount=product.get_active_discount %}
          {% if discount %}
            <div class="pricing-section mb-4">
              <div class="d-flex align-items-center gap-3 mb-2">
                <span class="original-price text-muted text-decoration-line-through fs-4">
                  {{ currency_symbol }}{{ product.price|floatformat:2 }}
                </span>
                <span class="discounted-price text-success fw-bold fs-2">
                  {{ currency_symbol }}{{ product.get_discounted_price|floatformat:2 }}
                </span>
              </div>
              
              <div class="discount-info alert alert-success py-2">
                <i class="fas fa-tags"></i>
                <strong>{{ discount.name }}</strong> - Save {{ currency_symbol }}{{ product.get_discount_amount|floatformat:2 }}
                {% if discount.discount_type == 'percentage' %}
                  ({{ discount.discount_value }}% off)
                {% else %}
                  ({{ currency_symbol }}{{ discount.discount_value }} off)
                {% endif %}
                {% if discount.code %}
                  <br><small class="text-muted">Use code: <strong>{{ discount.code }}</strong></small>
                {% endif %}
              </div>
            </div>
          {% else %}
            <h3 class="text-success fw-bold mb-4">
              <span class="product-price" data-price="{{ product.price }}">
                {{ currency_symbol }}{{ product.price|floatformat:2 }}
              </span>
            </h3>
          {% endif %}
        {% endwith %}

        <p class="lead">{{ product.description }}</p>

        <p>
          <strong>Stock:</strong>
          <span class="badge bg-{% if product.stock > 5 %} success {% else %} warning {% endif %} fs-6">
            {{ product.stock }} units available
          </span>
        </p>

        <!-- Wishlist -->
        <button hx-post="{% url 'shop:toggle_wishlist' product.id %}" class="btn btn-outline-danger mt-3">❤️ Add to Wishlist</button>

        {% if product.allow_customer_offer %}
          <div class="card border-warning bg-light mt-4 mb-3">
            <div class="card-body">
              <h5 class="card-title">Submit Your Offer</h5>
              <p class="card-text text-muted mb-3">
                Send us your preferred price for this product.
                {% if product.min_offer_price %}
                  Minimum offer: {{ currency_symbol }}{{ product.min_offer_price|floatformat:2 }}
                {% endif %}
              </p>

              {% if request.user.is_authenticated %}
                <form method="post" action="{% url 'shop:make_offer' product.slug %}">
                  {% csrf_token %}
                  {{ offer_form.non_field_errors }}

                  <div class="mb-3">
                    {{ offer_form.offered_price.label_tag }}
                    {{ offer_form.offered_price }}
                    {{ offer_form.offered_price.errors }}
                  </div>

                  <div class="mb-3">
                    {{ offer_form.message.label_tag }}
                    {{ offer_form.message }}
                    {{ offer_form.message.errors }}
                  </div>

                  <button type="submit" class="btn btn-warning">Submit Your Offer</button>
                </form>
              {% else %}
                <p class="mb-0">
                  <a href="{% url 'account_login' %}?next={{ request.path }}">Log in</a> to make an offer for this product.
                </p>
              {% endif %}
            </div>
          </div>
        {% endif %}

        {% if request.user.is_staff %}
          <a href="{% url 'shop:product_update' product.slug %}" class="btn btn-outline-primary mt-3"><i class="fa fa-edit" aria-hidden="true"></i> Edit Product</a>
        {% endif %}
      </div>
    </div>

    <!-- Variants Section -->
    {% if product.variants.exists %}
      <div class="mt-5">
        <h4>Available Variants</h4>
        <div class="row g-3">
          {% for variant in product.variants.all %}
            {% if variant.is_active %}
              <div class="col-md-6">
                <div class="card h-100">
                  <div class="card-body">
                    <h6 class="card-title">{{ variant.sku }}</h6>
                    <p class="text-success fw-bold mb-1">${{ variant.price|floatformat:2 }}</p>
                    <p class="small text-muted mb-3">
                      <strong>Stock:</strong> {{ variant.stock }} units
                    </p>
                    <!-- Display variant attributes -->
                    <div class="small text-muted">
                      {% for attr in variant.attributes.all %}
                        <span class="badge bg-secondary me-1">{{ attr }}</span>
                      {% endfor %}
                    </div>

                    <button hx-post="{% url 'shop:add_to_cart' product.id %}" hx-target="#cart-count" hx-swap="outerHTML" class="btn btn-success btn-sm mt-3 w-100">Add to Cart</button>
                  </div>
                </div>
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    {% endif %}
    <!-- Reviews Section -->
    <div class="mt-3">
      <h4>Customer Reviews ({{ product.reviews.count }})</h4>
      <hr />
      {% for review in product.reviews.all %}
        <div class="mb-4 p-3 border rounded">
          <strong>{{ review.user.username }}</strong> —
          <span class="text-warning">{{ review.rating }}★</span>
          <p class="mt-2 mb-0">{{ review.comment }}</p>
        </div>
      {% empty %}
        <p class="text-muted">No reviews yet. Be the first!</p>
      {% endfor %}

      <h5 class="mt-4">Write a Review</h5>
      <form method="post" action="{% url 'shop:add_review' product.slug %}">
        {% csrf_token %}
        <div class="row g-3">
          <div class="col-md-4">
            <select name="rating" class="form-select" required>
              <option value="5">5 ★ Excellent</option>
              <option value="4">4 ★ Good</option>
              <option value="3">3 ★ Average</option>
              <option value="2">2 ★ Fair</option>
              <option value="1">1 ★ Poor</option>
            </select>
          </div>
          <div class="col-md-8">
            <textarea name="comment" class="form-control" rows="4" placeholder="Your honest review..."></textarea>
          </div>
        </div>
        <button type="submit" class="btn btn-primary mt-3">Submit Review</button>
      </form>
    </div>

    <!-- Rating & Reviews Section -->
    <div class="mt-5">
      <h4>Customer Reviews ({{ product.reviews.count }}) • {{ product.average_rating|floatformat:1 }} ★</h4>
      <div class="row mt-4">
        <!-- Write Review -->
        <div class="col-md-5">
          <h5>Write a Review</h5>
          <form method="post" action="{% url 'shop:add_review' product.slug %}">
            {% csrf_token %}
            <select name="rating" class="form-select mb-3" required>
              <option value="">Select Rating</option>
              <option value="5">5 ★ Excellent</option>
              <option value="4">4 ★ Good</option>
              <option value="3">3 ★ Average</option>
              <option value="2">2 ★ Fair</option>
              <option value="1">1 ★ Poor</option>
            </select>
            <textarea name="comment" class="form-control" rows="4" placeholder="Share your experience..."></textarea>
            <button type="submit" class="btn btn-primary mt-3">Submit Review</button>
          </form>
        </div>

        <!-- Existing Reviews -->
        <div class="col-md-7">
          {% for review in product.reviews.all %}
            <div class="border-bottom pb-3 mb-3">
              <div class="d-flex justify-content-between">
                <strong>{{ review.user.username }}</strong>
                <span class="text-warning">{{ review.rating }} ★</span>
              </div>
              <p class="mb-1">{{ review.comment }}</p>
              <small class="text-muted">{{ review.created_at|date:'d M Y' }}</small>
            </div>
          {% empty %}
            <p class="text-muted">No reviews yet. Be the first to review!</p>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <script>
    function showAddedMessage() {
      const msgDiv = document.getElementById('add-to-cart-message') || document.createElement('div')
      if (!document.getElementById('add-to-cart-message')) {
        msgDiv.id = 'add-to-cart-message'
        document.querySelector('.col-md-8').appendChild(msgDiv)
      }
      msgDiv.innerHTML = `
                    <div class="alert alert-success alert-dismissible fade show mt-3">
                        <strong>✅ Added to cart!</strong> 
                        <a href="{% url 'shop:cart' %}" class="alert-link">View Cart</a>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                `
      setTimeout(() => {
        msgDiv.innerHTML = ''
      }, 4000)
    }
  </script>
{% endblock %}