{% extends "base.html" %}

{% block extra_head %}
    <title>{{ product.title }} — {{ get_plugin_setting('minishop', 'shop_name', 'Magazin Online') }}</title>
    <meta name="description" content="{{ product.short_description or product.title }}">
    <meta property="og:type" content="product">
    <meta property="og:title" content="{{ product.title }}">
    <meta property="og:description" content="{{ product.short_description or product.title }}">
    {% if product.featured_image %}
    <meta property="og:image" content="{{ product.featured_image }}">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="{{ product.featured_image }}">
    {% endif %}
    <meta property="og:url" content="{{ request.url }}">
{% endblock %}

{% block content %}
<div class="container py-4">
  <!-- Breadcrumb -->
  <nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/" class="text-decoration-none">{{ t_shop('home', 'Acasă') }}</a></li>
      <li class="breadcrumb-item"><a href="/shop" class="text-decoration-none">{{ t_shop('shop', 'Magazin') }}</a></li>
      {% if product.category_name %}
      <li class="breadcrumb-item"><a href="/shop?category={{ product.category_slug }}" class="text-decoration-none">{{ product.category_name }}</a></li>
      {% endif %}
      <li class="breadcrumb-item active" aria-current="page">{{ product.title }}</li>
    </ol>
  </nav>

  <div class="row g-4 mb-5">
    <!-- Galerie Imagini & Video (Stânga) -->
    <div class="col-lg-7">
      <div class="card border-0 shadow-sm rounded-3 overflow-hidden mb-3">
        <!-- Main Image (1200x630 OG Standard) -->
        <div class="ratio ratio-16x9 bg-body-tertiary" style="aspect-ratio: 1200 / 630;">
          {% if product.featured_image %}
          <img id="main-product-img" src="{{ product.featured_image }}" class="object-fit-cover" alt="{{ product.title }}">
          {% else %}
          <div class="d-flex align-items-center justify-content-center bg-body-secondary text-secondary fs-1">
            📦
          </div>
          {% endif %}
        </div>
      </div>

      <!-- Galerie Thumbnails -->
      {% if product.gallery_images and product.gallery_images|length > 0 %}
      <div class="d-flex gap-2 overflow-auto pb-2 mb-4">
        {% if product.featured_image %}
        <img src="{{ product.featured_image }}" class="rounded border p-1 object-fit-cover cursor-pointer gallery-thumb active" width="70" height="70" onclick="changeMainImg(this.src)">
        {% endif %}
        {% for img in product.gallery_images %}
        <img src="{{ img }}" class="rounded border p-1 object-fit-cover cursor-pointer gallery-thumb" width="70" height="70" onclick="changeMainImg(this.src)">
        {% endfor %}
      </div>
      {% endif %}

      <!-- Player Video Prezentare -->
      {% if product.video_url %}
      <div class="mt-4">
        <h5 class="fw-bold mb-3">🎬 Prezentare Video</h5>
        <div class="ratio ratio-16x9 rounded-3 overflow-hidden shadow-sm">
          {% if 'youtube.com' in product.video_url or 'youtu.be' in product.video_url %}
            {% set yt_id = product.video_url.split('v=')[-1].split('&')[0].split('/')[-1] %}
            <iframe src="https://www.youtube.com/embed/{{ yt_id }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          {% else %}
            <video controls class="w-100 h-100">
              <source src="{{ product.video_url }}" type="video/mp4">
              Browserul tău nu suportă redarea video.
            </video>
          {% endif %}
        </div>
      </div>
      {% endif %}
    </div>

    <!-- Detalii Produse & Formular Cumpărare (Dreapta) -->
    <div class="col-lg-5">
      <div class="card border-0 shadow-sm rounded-3 p-4">
        <div class="d-flex flex-wrap gap-2 mb-2 align-items-center">
          {% if product.product_type == 'digital' %}
          <span class="badge bg-primary text-white">{{ t_shop('digital_badge', '⚡ Produs Digital') }}</span>
          {% else %}
          <span class="badge bg-success text-white">{{ t_shop('physical_badge', '📦 Produs Fizic') }}</span>
          {% endif %}
          {% if product.category_name %}
          <span class="badge bg-secondary text-white">{{ product.category_name }}</span>
          {% endif %}
          {% if post_header_meta_html %}
          {{ post_header_meta_html|safe }}
          {% endif %}
        </div>

        <h2 class="fw-bold text-body mb-2">{{ product.title }}</h2>

        <!-- Rating Stele Summary -->
        <div class="d-flex align-items-center gap-2 mb-3">
          <div class="text-warning fs-5">
            {% set avg_int = rating_summary.average_rating|round|int %}
            {% for i in range(1, 6) %}
              {% if i <= avg_int %}★{% else %}☆{% endif %}
            {% endfor %}
          </div>
          <span class="fw-bold text-body small">{{ rating_summary.average_rating }}</span>
          <span class="text-secondary small">({{ rating_summary.review_count }} recenzii)</span>
        </div>

        <!-- Preț -->
        <div class="my-3 p-3 bg-body-tertiary rounded-3 d-flex align-items-center justify-content-between flex-wrap gap-2">
          <span class="text-secondary fw-semibold">{{ t_shop('final_price', 'Preț final') }}:</span>
          <div class="d-flex align-items-baseline flex-wrap gap-2">
            {% if product.old_price and product.old_price > product.price %}
              {% set discount = ((product.old_price - product.price) / product.old_price * 100)|round|int %}
              <span class="fs-5 text-muted text-decoration-line-through me-1">{{ "%.2f"|format(product.old_price) }} {{ product.currency }}</span>
              {% if product.price > 0 %}
                <span class="display-6 fw-bold text-danger">{{ "%.2f"|format(product.price) }}</span>
                <span class="fs-5 fw-bold text-secondary ms-1">{{ product.currency }}</span>
              {% else %}
                <span class="display-6 fw-bold text-success">0.00</span>
                <span class="fs-5 fw-bold text-success me-1">{{ product.currency }}</span>
                <span class="badge text-bg-success ms-1 px-2 py-1 fs-6">{{ t_shop('free_badge', '🎁 GRATUIT') }}</span>
              {% endif %}
              <span class="badge text-bg-danger ms-2 px-2 py-1 fs-6">🔥 -{{ discount }}% {{ t_shop('discount_label', 'REDUCERE') }}</span>
            {% else %}
              {% if product.price > 0 %}
                <span class="display-6 fw-bold text-primary">{{ "%.2f"|format(product.price) }}</span>
                <span class="fs-5 fw-bold text-secondary ms-1">{{ product.currency }}</span>
              {% else %}
                <span class="badge text-bg-success rounded-pill px-3 py-2 fs-5 fw-bold">{{ t_shop('free_badge', '🎁 GRATUIT') }} (0.00 {{ product.currency }})</span>
              {% endif %}
            {% endif %}
          </div>
        </div>

        {% if product.short_description %}
        <div class="text-secondary small mb-4" style="white-space: pre-line;">{{ product.short_description }}</div>
        {% endif %}

        <!-- Formular Plasare Comandă Directă -->
        <h5 class="fw-bold mb-3 border-top pt-3">{{ t_shop('place_order', '🛒 Plasează Comanda') }}</h5>
        <form id="checkout-form" onsubmit="handleCheckoutSubmit(event)">
          <input type="hidden" name="product_id" value="{{ product.id }}">
          
          <div class="mb-3">
            <label class="form-label small fw-semibold">{{ t_shop('full_name', 'Nume complet *') }}</label>
            <input type="text" name="customer_name" class="form-control form-control-sm" required value="{{ current_user.display_name if current_user else '' }}">
          </div>

          <div class="mb-3">
            <label class="form-label small fw-semibold">{{ t_shop('email_address', 'Adresă de e-mail *') }}</label>
            <input type="email" name="customer_email" class="form-control form-control-sm" required placeholder="{{ t_shop('email_placeholder', 'adresa@email.com') }}">
          </div>

          {% if product.product_type == 'physical' %}
          <div class="mb-3">
            <label class="form-label small fw-semibold">{{ t_shop('phone_number', 'Număr de Telefon') }}</label>
            <input type="tel" name="customer_phone" class="form-control form-control-sm" placeholder="{{ t_shop('phone_placeholder', '07xx xxx xxx') }}">
          </div>

          <div class="mb-3">
            <label class="form-label small fw-semibold">{{ t_shop('delivery_address', 'Adresă de Livrare') }}</label>
            <textarea name="shipping_address" class="form-control form-control-sm" rows="2" placeholder="{{ t_shop('address_placeholder', 'Oraș, Strada, Număr...') }}"></textarea>
          </div>
          {% endif %}

          {% if product.price > 0 %}
          <!-- Selecție Metodă de Plată -->
          <div class="mb-4">
            <label class="form-label small fw-semibold">{{ t_shop('payment_method', 'Metodă de Plată *') }}</label>
            <div class="d-flex flex-column gap-2">
              <div class="form-check p-3 border rounded-3 bg-body-tertiary">
                <input class="form-check-input me-2" type="radio" name="payment_method" id="pay_stripe" value="stripe" checked>
                <label class="form-check-label fw-bold d-flex justify-content-between align-items-center w-100" for="pay_stripe">
                  <span>{{ t_shop('card_stripe', '💳 Card Online (Stripe)') }}</span>
                  <span class="badge bg-primary text-white small">{{ t_shop('card_instant', 'Instant') }}</span>
                </label>
              </div>
              {% if product.product_type == 'physical' %}
              <div class="form-check p-3 border rounded-3 bg-body-tertiary">
                <input class="form-check-input me-2" type="radio" name="payment_method" id="pay_ramburs" value="ramburs">
                <label class="form-check-label fw-bold" for="pay_ramburs">
                  {{ t_shop('cash_on_delivery', '🚚 Ramburs la livrare') }}
                </label>
              </div>
              {% endif %}
            </div>
          </div>
          {% else %}
          <input type="hidden" name="payment_method" value="free" />
          {% endif %}

          <div id="checkout-msg" class="mb-3 small"></div>

          <button type="submit" id="checkout-btn" class="btn {% if product.price > 0 %}btn-primary{% else %}btn-success{% endif %} btn-lg w-100 fw-bold shadow">
            {% if product.price > 0 %}
              {{ t_shop('buy_now', 'Cumpără Acum') }} — {{ "%.2f"|format(product.price) }} {{ product.currency }}
            {% else %}
              {{ t_shop('download_free_btn', '📥 Descarcă Gratuit') }} (0.00 {{ product.currency }})
            {% endif %}
          </button>
        </form>
      </div>
    </div>
  </div>

  <!-- Descriere Extinsă Produs -->
  {% if product.description_html %}
  <div class="card border-0 shadow-sm rounded-3 p-4 mb-5">
    <h4 class="fw-bold mb-3">{{ t_shop('product_description', '📄 Descriere și Detalii Produs') }}</h4>
    <div class="text-body lh-lg" style="white-space: pre-line;">
      {{ product.description_html|safe }}
    </div>
  </div>
  {% endif %}

  <!-- Plugin Footer Hooks (Social Share, Comentarii & Discuții, Newsletter) -->
  {% if post_article_footer_html %}
  <div class="card border-0 shadow-sm rounded-3 p-4 mb-5">
    {{ post_article_footer_html | safe }}
  </div>
  {% endif %}

  <!-- Secțiune Recenzii & Reviews -->
  <div class="card border-0 shadow-sm rounded-3 p-4 mb-5">
    <div class="d-flex align-items-center justify-content-between border-bottom pb-3 mb-4">
      <h4 class="fw-bold mb-0">⭐ {{ t_shop('reviews_title', 'Recenzii și Păreri Produs') }} ({{ rating_summary.review_count }})</h4>
      <button class="btn btn-outline-primary btn-sm fw-semibold" onclick="toggleReviewForm()">
        ✍️ {{ t_shop('add_review', 'Adaugă o Recenzie') }}
      </button>
    </div>

    <!-- Formular Adăugare Recenzie -->
    <div id="review-form-box" class="card bg-body-tertiary border-0 p-4 mb-4" style="display: none;">
      <h5 class="fw-bold mb-3">{{ t_shop('add_review', 'Spune-ne părerea ta despre acest produs') }}</h5>
      <form id="review-form" onsubmit="handleReviewSubmit(event)">
        <div class="row g-3 mb-3">
          {% if not current_user %}
          <div class="col-md-6">
            <label class="form-label small fw-semibold">{{ t_shop('full_name', 'Numele tău') }}</label>
            <input type="text" name="user_name" class="form-control form-control-sm" required placeholder="Ion Popescu">
          </div>
          {% endif %}
          <div class="col-md-6">
            <label class="form-label small fw-semibold">{{ t_shop('your_rating', 'Nota ta (Stele) *') }}</label>
            <select name="rating" class="form-select form-select-sm" required>
              <option value="5">⭐⭐⭐⭐⭐ (5)</option>
              <option value="4">⭐⭐⭐⭐ (4)</option>
              <option value="3">⭐⭐⭐ (3)</option>
              <option value="2">⭐⭐ (2)</option>
              <option value="1">⭐ (1)</option>
            </select>
          </div>
        </div>

        <div class="mb-3">
          <label class="form-label small fw-semibold">{{ t_shop('your_comment', 'Comentariu sau Părere *') }}</label>
          <textarea name="comment" class="form-control form-control-sm" rows="3" required></textarea>
        </div>

        <div id="review-msg" class="mb-3 small"></div>

        <div class="d-flex gap-2">
          <button type="submit" id="review-btn" class="btn btn-primary btn-sm fw-semibold px-4">
            {{ t_shop('submit_review_btn', 'Trimite Recenzia') }}
          </button>
          <button type="button" class="btn btn-secondary btn-sm px-3" onclick="toggleReviewForm()">
            {{ t_shop('cancel_btn', 'Anulează') }}
          </button>
        </div>
      </form>
    </div>

    <!-- Listă Recenzii Existente -->
    {% if reviews and reviews|length > 0 %}
    <div class="d-flex flex-column gap-3">
      {% for r in reviews %}
      <div class="p-3 border rounded-3 bg-body-tertiary">
        <div class="d-flex align-items-center justify-content-between mb-2">
          <div class="d-flex align-items-center gap-2">
            {% if r.user_avatar %}
            <img src="{{ r.user_avatar }}" width="32" height="32" class="rounded-circle" alt="">
            {% else %}
            <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center fw-bold" style="width: 32px; height: 32px; font-size: 0.8rem;">
              {{ r.user_name[0]|upper }}
            </div>
            {% endif %}
            <span class="fw-bold text-body">{{ r.user_name }}</span>
          </div>
          <div class="text-warning">
            {% for i in range(1, 6) %}
              {% if i <= r.rating %}★{% else %}☆{% endif %}
            {% endfor %}
          </div>
        </div>
        <p class="text-secondary small mb-0">{{ r.comment }}</p>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-4 text-secondary">
      Fii primul care lasă o recenzie pentru acest produs!
    </div>
    {% endif %}
  </div>
</div>

<script>
function changeMainImg(src) {
    const mainImg = document.getElementById('main-product-img');
    if (mainImg) mainImg.src = src;
}

function toggleReviewForm() {
    const box = document.getElementById('review-form-box');
    if (box) box.style.display = box.style.display === 'none' ? 'block' : 'none';
}

async function handleCheckoutSubmit(e) {
    e.preventDefault();
    const btn = document.getElementById('checkout-btn');
    const msg = document.getElementById('checkout-msg');
    const form = e.target;

    btn.disabled = true;
    msg.innerHTML = '<span class="text-muted"><span class="spinner-border spinner-border-sm me-1"></span> Procesăm comanda...</span>';

    const formData = new FormData(form);

    try {
        const res = await fetch('/shop/checkout', {
            method: 'POST',
            body: formData
        });
        const data = await res.json();
        if (data.ok) {
            msg.innerHTML = '<span class="text-success fw-semibold">✅ Comandă creată cu succes! Redirecționare...</span>';
            setTimeout(() => {
                window.location.href = data.redirect_url;
            }, 1000);
        } else {
            msg.innerHTML = '<span class="text-danger fw-semibold">❌ ' + (data.err || 'Eroare la procesare') + '</span>';
            btn.disabled = false;
        }
    } catch(err) {
        msg.innerHTML = '<span class="text-danger fw-semibold">❌ Eroare de rețea.</span>';
        btn.disabled = false;
    }
}

async function handleReviewSubmit(e) {
    e.preventDefault();
    const btn = document.getElementById('review-btn');
    const msg = document.getElementById('review-msg');
    const form = e.target;

    btn.disabled = true;
    msg.innerHTML = '<span class="text-muted">Se trimite...</span>';

    const formData = new FormData(form);
    const slug = '{{ product.slug }}';

    try {
        const res = await fetch('/shop/product/' + slug + '/review', {
            method: 'POST',
            body: formData
        });
        const data = await res.json();
        if (data.ok) {
            msg.innerHTML = '<span class="text-success fw-semibold">✅ ' + data.msg + '</span>';
            setTimeout(() => { window.location.reload(); }, 1500);
        } else {
            msg.innerHTML = '<span class="text-danger fw-semibold">❌ ' + (data.err || 'Eroare la salvare') + '</span>';
            btn.disabled = false;
        }
    } catch(err) {
        msg.innerHTML = '<span class="text-danger fw-semibold">❌ Eroare de rețea.</span>';
        btn.disabled = false;
    }
}
</script>
{% endblock %}