{% extends "base.html" %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/product_detail.css') }}">
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/product_detail.js') }}" defer></script>
{% endblock %}

{% block content %}
<div class="product-detail-container">

  <div class="product-detail">

    <div class="product-gallery">

      <div class="main-image-container">
        <img id="mainImage" src="{{ product.get_image_url() }}" alt="{{ product.name }}" class="main-image">
      </div>

      {% if product.images|length > 0 %}
      <div class="thumbnail-gallery">
        {% for image in product.images|sort(attribute='display_order') %}
        <div class="thumbnail-container {% if loop.first %}active{% endif %}"
          data-image-url="{{ url_for('static', filename='uploads/products/' + image.filename) }}"
          onclick="changeImage(this)">
          <img src="{{ url_for('static', filename='uploads/products/' + image.filename) }}"
            alt="{{ product.name }} - Image {{ loop.index }}" class="thumbnail">
        </div>
        {% endfor %}
      </div>
      {% endif %}
    </div>

    <div class="product-info">
      <h1>{{ product.name }}</h1>

      <div class="stock-status">
        {% if product.stock > 10 %}
        <span class="in-stock">✓ In Stock ({{ product.stock }} available)</span>
        {% elif product.stock > 0 %}
        <span class="low-stock">⚠ Low Stock (Only {{ product.stock }} left!)</span>
        {% else %}
        <span class="out-of-stock">✗ Out of Stock</span>
        {% endif %}
      </div>

      {% if product.average_rating > 0 %}
      <div class="product-rating">
        <div class="stars">
          {% for i in range(5) %}
          <span class="star {% if i < product.average_rating|int %}filled{% endif %}">★</span>
          {% endfor %}
        </div>
        <span class="rating-value">{{ product.average_rating }}/5</span>
        <span class="review-count">({{ product.review_count }} reviews)</span>
      </div>
      {% endif %}

      <div class="price-section">
        <span class="price">${{ "%.2f"|format(product.price) }}</span>
      </div>

      <div class="product-meta">
        {% if product.sku %}
        <div class="meta-item">
          <strong>SKU:</strong> {{ product.sku }}
        </div>
        {% endif %}

        {% if product.company %}
        <div class="meta-item">
          <strong>Brand:</strong> {{ product.company }}
        </div>
        {% endif %}

        {% if product.color %}
        <div class="meta-item">
          <strong>Color:</strong> {{ product.color }}
        </div>
        {% endif %}

        {% if product.size %}
        <div class="meta-item">
          <strong>Size:</strong> {{ product.size }}
        </div>
        {% endif %}

        {% if product.category %}
        <div class="meta-item">
          <strong>Category:</strong> {{ product.category.name }}
        </div>
        {% endif %}
      </div>

      <div class="description-section">
        <h3>Description</h3>
        <p>{{ product.description or 'No description available.' }}</p>
      </div>

      {% if product.material or product.weight or product.dimensions %}
      <div class="specifications">
        <h3>Specifications</h3>
        <div class="spec-grid">
          {% if product.material %}
          <div class="spec-item">
            <span class="spec-label">Material:</span>
            <span class="spec-value">{{ product.material }}</span>
          </div>
          {% endif %}

          {% if product.weight %}
          <div class="spec-item">
            <span class="spec-label">Weight:</span>
            <span class="spec-value">{{ product.weight }} kg</span>
          </div>
          {% endif %}

          {% if product.dimensions %}
          <div class="spec-item">
            <span class="spec-label">Dimensions:</span>
            <span class="spec-value">{{ product.dimensions }}</span>
          </div>
          {% endif %}
        </div>
      </div>
      {% endif %}

      <div class="actions-section">
        {% if current_user.is_authenticated and product.stock > 0 %}
        <a href="{{ url_for('cart.add_to_cart', product_id=product.id) }}" class="btn btn-primary">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <circle cx="9" cy="21" r="1"></circle>
            <circle cx="20" cy="21" r="1"></circle>
            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
          </svg>
          Add to Cart
        </a>
        {% elif current_user.is_authenticated %}
        <button class="btn btn-secondary" disabled>
          Out of Stock
        </button>
        {% else %}
        <a href="{{ url_for('auth.login') }}" class="btn btn-primary">
          Login to Purchase
        </a>
        {% endif %}

        <a href="{{ url_for('main.products') }}" class="btn btn-outline">
          ← Back to Products
        </a>
      </div>
    </div>
  </div>

  {% if related_products %}
  <div class="related-products">
    <h2>Related Products</h2>
    <div class="related-grid">
      {% for related in related_products %}
      <div class="product-card">
        <a href="{{ url_for('main.product_detail', id=related.id) }}" class="product-link">
          <div class="product-image">
            <img src="{{ related.get_image_url() }}" alt="{{ related.name }}">
          </div>
          <div class="product-info">
            <h3 class="product-name">{{ related.name }}</h3>
            <div class="product-price">${{ "%.2f"|format(related.price) }}</div>
          </div>
        </a>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}