<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%= producto.nombre %> | <%= negocio.nombreNegocio %></title>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Outfit:wght@600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="/css/estilos.css" />
</head>
<body style="--brand: <%= negocio.colorPrincipal %>;">
  <nav class="navbar">
    <a href="/" class="logo"><%= negocio.nombreNegocio %></a>
    <div class="nav-links">
      <a href="/carrito">🛒 Carrito<% if (cantidadCarrito > 0) { %> (<%= cantidadCarrito %>)<% } %></a>
      <a href="/login">Acceso del negocio</a>
    </div>
  </nav>

  <main class="page">
    <a href="/" class="back-link">← Volver al catálogo</a>
    <% const imagenes = producto.imagenes || []; %>
    <div class="detalle-producto">
      <div>
        <div class="imagen">
          <% if (imagenes.length > 0) { %>
            <img id="imagen-principal" src="<%= imagenes[0].url %>" alt="<%= producto.nombre %>" />
          <% } else { %>
            Sin imagen
          <% } %>
        </div>
        <% if (imagenes.length > 1) { %>
          <div style="display:flex; gap:0.6rem; margin-top:0.8rem; flex-wrap:wrap;">
            <% imagenes.forEach(function (img) { %>
              <img src="<%= img.url %>" alt="" onclick="document.getElementById('imagen-principal').src=this.src"
                   style="width:60px; height:60px; object-fit:cover; border-radius:6px; border:1px solid var(--line); cursor:pointer;" />
            <% }) %>
          </div>
        <% } %>
      </div>
      <div>
        <% const resenas = producto.resenas || []; %>
        <% const promedio = resenas.length > 0 ? resenas.reduce(function (s, r) { return s + r.calificacion; }, 0) / resenas.length : 0; %>
        <% if (producto.categoria) { %>
          <p class="page-sub" style="margin-bottom: 0.4rem;"><%= producto.categoria.nombre %></p>
        <% } %>
        <h1><%= producto.nombre %></h1>

        <div style="display:flex; align-items:center; gap:0.8rem; margin-bottom: 0.6rem; flex-wrap:wrap;">
          <% if (resenas.length > 0) { %>
            <span style="color:#f5a623; letter-spacing:1px;">
              <%= '★'.repeat(Math.round(promedio)) %><%= '☆'.repeat(5 - Math.round(promedio)) %>
            </span>
            <a href="#resenas" style="font-size:0.8rem; color: var(--ink-faint);"><%= promedio.toFixed(1) %> (<%= resenas.length %> reseña<%= resenas.length === 1 ? '' : 's' %>)</a>
          <% } %>
          <form action="/producto/<%= producto.id %>/like" method="POST" style="margin:0;">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
            <button type="submit" class="btn btn-outline btn-sm">👍 Me gusta<% if (producto.likes > 0) { %> (<%= producto.likes %>)<% } %></button>
          </form>
        </div>
        <p class="precio">
          <% if (producto.precioOferta) { %>
            <span style="text-decoration: line-through; color: var(--ink-faint); font-size: 1rem; margin-right: 0.5rem;">$<%= producto.precio %></span>
          <% } %>
          <% if (producto.precioLocal && producto.precioLocal.moneda !== 'USD') { %>
            <%= producto.precioLocal.formateado %>
          <% } else { %>
            $<%= producto.precioOferta || producto.precio %>
          <% } %>
        </p>
        <% if (producto.precioLocal && producto.precioLocal.moneda !== 'USD') { %>
          <p style="margin-top:-0.6rem; font-size: 0.8rem; color: var(--ink-faint);">≈ $<%= producto.precioOferta || producto.precio %> USD</p>
        <% } %>
        <p><%= producto.descripcion || 'Sin descripción.' %></p>
        <p class="page-sub"><%= producto.stock > 0 ? producto.stock + ' disponibles' : 'Sin stock por ahora' %></p>

        <% if (producto.caracteristicas && producto.caracteristicas.length > 0) { %>
          <div class="card" style="margin-top: 1.2rem;">
            <h3 style="font-family: var(--font-display); margin-top:0; font-size: 0.95rem;">Características</h3>
            <table>
              <tbody>
                <% producto.caracteristicas.forEach(function (c) { %>
                  <tr><td><%= c.nombre %></td><td><%= c.valor %></td></tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        <% } %>

        <% if (producto.stock > 0) { %>
          <form action="/carrito/agregar" method="POST" style="display:flex; gap:0.6rem; align-items:center; margin-top: 1.2rem;">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
            <input type="hidden" name="productoId" value="<%= producto.id %>" />
            <input type="number" name="cantidad" value="1" min="1" max="<%= producto.stock %>" style="width:70px; padding:0.7rem; border:1px solid var(--line); border-radius:6px;" />
            <button type="submit" class="btn btn-primary">Agregar al carrito</button>
          </form>
        <% } %>

        <% if (negocio.whatsapp) { %>
          <a href="https://wa.me/<%= negocio.whatsapp %>?text=<%= encodeURIComponent('Hola, me interesa: ' + producto.nombre) %>" target="_blank" class="btn btn-outline" style="margin-top: 0.7rem;">Consultar por WhatsApp</a>
        <% } %>
      </div>
    </div>

    <section id="resenas" style="max-width: 640px; margin-top: 3rem; scroll-margin-top: 20px;">
      <h2 style="font-family: var(--font-display); font-size: 1.2rem; color: var(--ink);">Reseñas<% if (resenas.length > 0) { %> (<%= resenas.length %>)<% } %></h2>

      <% if (resenas.length === 0) { %>
        <p class="page-sub">Todavía no hay reseñas de este producto — ¡sé el primero!</p>
      <% } else { %>
        <div style="display:flex; flex-direction:column; gap:0.9rem; margin-bottom: 1.6rem;">
          <% resenas.forEach(function (r) { %>
            <div class="card">
              <div style="display:flex; justify-content:space-between; align-items:baseline;">
                <strong><%= r.nombreCliente %></strong>
                <span style="color:#f5a623; font-size: 0.9rem;"><%= '★'.repeat(r.calificacion) %><%= '☆'.repeat(5 - r.calificacion) %></span>
              </div>
              <% if (r.comentario) { %><p style="margin: 0.4rem 0 0; font-size: 0.88rem;"><%= r.comentario %></p><% } %>
            </div>
          <% }) %>
        </div>
      <% } %>

      <div class="card form-panel">
        <h3 style="font-family: var(--font-display); margin-top:0; font-size: 1rem;">Dejá tu reseña</h3>
        <form action="/producto/<%= producto.id %>/resenas" method="POST">
          <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
          <div class="form-group">
            <label>Tu nombre</label>
            <input type="text" name="nombreCliente" required />
          </div>
          <div class="form-group">
            <label>Calificación</label>
            <select name="calificacion" required>
              <option value="5">★★★★★ Excelente</option>
              <option value="4">★★★★☆ Muy bueno</option>
              <option value="3">★★★☆☆ Bueno</option>
              <option value="2">★★☆☆☆ Regular</option>
              <option value="1">★☆☆☆☆ Malo</option>
            </select>
          </div>
          <div class="form-group">
            <label>Comentario (opcional)</label>
            <textarea name="comentario" rows="3"></textarea>
          </div>
          <button type="submit" class="btn btn-primary">Publicar reseña</button>
        </form>
      </div>
    </section>
  </main>

  <%- include('partials/footer-publico', { negocio }) %>
</body>
</html>
