<%- include('../partials/header') %>

<%
function fmtDateRo(v) {
  if (!v) return '-';
  const d = new Date(v);
  if (isNaN(d.getTime())) return String(v);
  const p = n => String(n).padStart(2,'0');
  return `${p(d.getDate())}.${p(d.getMonth()+1)}.${d.getFullYear()} ${p(d.getHours())}:${p(d.getMinutes())}`;
}
%>

<style>
.segment-kpis {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.segment-kpi {
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:14px;
}

.segment-kpi .label {
  font-size:12px;
  color:#64748b;
}

.segment-kpi .value {
  font-size:24px;
  font-weight:800;
}

.segment-detail-table th,
.segment-detail-table td {
  font-size:12px;
  padding:8px 7px;
}


.recommendation-header {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.recommendation-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
  margin-top:14px;
}

.recommendation-card {
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  background:#fff;
  position:relative;
}

.recommendation-card.selected {
  outline:2px solid #2563eb;
}

.recommendation-card img {
  width:100%;
  height:150px;
  object-fit:contain;
  display:block;
  margin-bottom:10px;
}

.recommendation-card .no-image {
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8fafc;
  border-radius:8px;
  color:#94a3b8;
  margin-bottom:10px;
  font-size:12px;
}

.recommendation-card .product-title {
  font-weight:800;
  min-height:42px;
}

.recommendation-card .meta {
  color:#64748b;
  font-size:11px;
  margin-top:4px;
}

.recommendation-card .price {
  font-size:20px;
  font-weight:800;
  margin-top:8px;
}

.recommendation-card .reason {
  font-size:11px;
  line-height:1.35;
  color:#475569;
  margin-top:8px;
  min-height:45px;
}

.recommendation-card .select-row {
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
}

.category-chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}

.category-chip {
  display:inline-block;
  border-radius:999px;
  padding:4px 8px;
  background:#f1f5f9;
  font-size:11px;
}

.email-ready {
  display:inline-block;
  border-radius:999px;
  padding:4px 8px;
  background:#ecfdf5;
  font-size:11px;
  font-weight:800;
}


.manual-product-search {
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  margin-top:12px;
}

.manual-results {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:10px;
  margin-top:12px;
}

.manual-result {
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:10px;
  display:grid;
  grid-template-columns:72px 1fr;
  gap:10px;
  align-items:center;
}

.manual-result img {
  width:72px;
  height:72px;
  object-fit:contain;
}

.blacklist-yes {
  color:#b91c1c;
  font-weight:800;
}

.blacklist-no {
  color:#64748b;
}

.source-badge {
  display:inline-block;
  border-radius:999px;
  padding:3px 7px;
  font-size:10px;
  font-weight:800;
  background:#f1f5f9;
}

.source-badge.manual {
  background:#fef3c7;
}

@media (max-width:800px) {
  .segment-kpis {
    grid-template-columns:1fr;
  }
}
</style>

<div class="card">
  <div class="toolbar">
    <div>
      <h2 style="margin-bottom:5px"><%= segment.name %></h2>
      <div class="small">
        Magazin: <%= segment.store_name || 'Toate magazinele' %>
      </div>
    </div>

    <form
      method="post"
      action="/segments/<%= segment.id %>/delete"
      onsubmit="return confirm('Ștergi segmentul „<%= segment.name.replace(/'/g,'') %>”?');"
    >
      <button class="btn" type="submit">Șterge</button>
    </form>
  </div>

  <div class="segment-kpis" style="margin-top:15px">
    <div class="segment-kpi">
      <div class="label">Clienți în segment acum</div>
      <div class="value"><%= total %></div>
    </div>

    <div class="segment-kpi">
      <div class="label">PF / PJ</div>
      <div class="value" style="font-size:17px">
        <%= rules.customer_type || 'PF + PJ' %>
      </div>
    </div>

    <div class="segment-kpi">
      <div class="label">Acord marketing obligatoriu</div>
      <div class="value" style="font-size:17px">
        <%= rules.marketing_only ? 'DA' : 'NU' %>
      </div>
    </div>
  </div>

  <h3 style="margin-top:18px">Reguli</h3>
  <ul>
    <% summary.forEach(x => { %>
      <li><%= x %></li>
    <% }) %>
  </ul>
</div>


<div class="card" id="recommendations" style="margin-top:16px">
  <div class="recommendation-header">
    <div>
      <h2 style="margin-bottom:4px">Recomandări automate de produse</h2>
      <div class="small">
        Produse în stoc alese pentru cross-sell: accesoriile sunt prioritizate, iar produsele principale sunt penalizate.
      </div>
    </div>

    <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
      <form
        method="post"
        action="/segments/<%= segment.id %>/recommendations/generate"
        onsubmit="return confirm('Generezi din nou recomandările pentru acest segment?');"
        style="display:flex;gap:8px;align-items:center;margin:0"
      >
        <select name="limit" style="width:auto">
          <% [6,9,12,15,18].forEach(n => { %>
            <option
              value="<%= n %>"
              <%= recommendations.length===n?'selected':'' %>
            >
              <%= n %> produse
            </option>
          <% }) %>
        </select>

        <button class="btn primary" type="submit">
          <%= recommendations.length ? 'Regenerează' : 'Generează recomandări' %>
        </button>
      </form>

      <form
        method="post"
        action="/segments/<%= segment.id %>/recommendations/clear-auto"
        onsubmit="return confirm('Ștergi toate produsele recomandate automat? Produsele adăugate MANUAL rămân.');"
        style="margin:0"
      >
        <button class="btn" type="submit">
          Șterge AUTO
        </button>
      </form>

      <form
        method="post"
        action="/segments/<%= segment.id %>/recommendations/clear-all"
        onsubmit="return confirm('Ștergi TOATE produsele din selecție, inclusiv cele adăugate manual?');"
        style="margin:0"
      >
        <button class="btn" type="submit">
          Șterge toate
        </button>
      </form>
    </div>
  </div>

  <% if (audienceCategories.length) { %>
    <div style="margin-top:12px">
      <strong>Categorii dominante în segment:</strong>

      <div class="category-chips">
        <% audienceCategories.forEach(c => { %>
          <span class="category-chip">
            <%= c.category %> · <%= c.buyers %> clienți
          </span>
        <% }) %>
      </div>
    </div>
  <% } %>


  <div id="manual-products" style="margin-top:18px;padding-top:14px;border-top:1px solid #e5e7eb">
    <h3 style="margin-bottom:4px">Adaugă produse manual</h3>

    <div class="small">
      Caută după SKU, denumire sau categorie. Produsul adăugat manual rămâne în selecție chiar dacă regenerezi recomandările automate.
    </div>

    <form class="manual-product-search" method="get" action="/segments/<%= segment.id %>#manual-products">
      <input
        name="product_q"
        value="<%= productQ || '' %>"
        placeholder="Ex: KD1188 / furtun pneumatic / presostat"
      >
      <button class="btn" type="submit">Caută produs</button>
    </form>

    <% if (productQ && !manualProducts.length) { %>
      <p class="small">Nu am găsit produse în stoc pentru „<%= productQ %>”.</p>
    <% } %>

    <% if (manualProducts.length) { %>
      <div class="manual-results">
        <% manualProducts.forEach(mp => { %>
          <div class="manual-result">
            <div>
              <% if (mp.image_url) { %>
                <img src="<%= mp.image_url %>" alt="<%= mp.name %>">
              <% } %>
            </div>

            <div>
              <strong><%= mp.name %></strong>
              <div class="small">SKU: <%= mp.sku %></div>
              <div class="small"><%= mp.category || '-' %></div>
              <div>
                <strong><%= Number(mp.price||0).toFixed(2) %> RON</strong>
                · stoc <%= Number(mp.stock||0).toFixed(0) %>
              </div>

              <form
                method="post"
                action="/segments/<%= segment.id %>/recommendations/manual-add"
                style="margin-top:7px"
              >
                <input type="hidden" name="product_id" value="<%= mp.id %>">
                <input type="hidden" name="product_q" value="<%= productQ %>">

                <button
                  class="btn"
                  type="submit"
                  <%= Number(mp.already_added)===1?'disabled':'' %>
                >
                  <%= Number(mp.already_added)===1 ? 'Deja adăugat' : '+ Adaugă manual' %>
                </button>
              </form>
            </div>
          </div>
        <% }) %>
      </div>
    <% } %>
  </div>

  <% if (!recommendations.length) { %>
    <div style="padding:24px 0 8px">
      <p>
        Apasă <strong>Generează recomandări</strong>.
        Sistemul va folosi:
      </p>

      <ul>
        <li>categoriile cumpărate de clienții segmentului;</li>
        <li>popularitatea produselor;</li>
        <li>prioritate pentru accesorii și produse complementare;</li>
        <li>penalizare pentru produse principale similare celor deja cumpărate;</li>
        <li>stocul actual;</li>
        <li>imaginea, prețul și linkul produsului;</li>
        <li>SKU-ul exclus din cumpărături, dacă segmentul are o regulă „NU a cumpărat”.</li>
      </ul>
    </div>
  <% } else { %>
    <div class="toolbar" style="margin-top:12px">
      <span>
        <strong><%= selectedRecommendationCount %></strong>
        produse selectate pentru viitorul email
      </span>

      <span class="email-ready">
        Pregătit pentru v0.5 Constructor email
      </span>
    </div>

    <form
      method="post"
      action="/segments/<%= segment.id %>/recommendations/select"
    >
      <div class="recommendation-grid">
        <% recommendations.forEach(p => { %>
          <div class="recommendation-card <%= Number(p.selected)===1?'selected':'' %>">
            <% if (p.image_url) { %>
              <img
                src="<%= p.image_url %>"
                alt="<%= p.name || p.sku %>"
                loading="lazy"
                onerror="this.style.display='none'"
              >
            <% } else { %>
              <div class="no-image">Fără imagine</div>
            <% } %>

            <div style="display:flex;justify-content:space-between;gap:8px;align-items:flex-start">
              <span class="source-badge <%= p.source==='manual'?'manual':'' %>">
                <%= p.source==='manual' ? 'MANUAL' : 'AUTO' %>
              </span>

              <form
                method="post"
                action="/segments/<%= segment.id %>/recommendations/remove"
                onsubmit="return confirm('Scoți produsul din selecție?');"
              >
                <input type="hidden" name="product_id" value="<%= p.product_id %>">
                <button class="btn" type="submit" style="padding:3px 7px">
                  ×
                </button>
              </form>
            </div>

            <div class="product-title"><%= p.name %></div>

            <div class="meta">
              SKU: <strong><%= p.sku %></strong>
            </div>

            <div class="meta">
              <%= p.category || 'Fără categorie' %>
            </div>

            <% if (!segment.store_id) { %>
              <div class="meta">
                Magazin: <%= p.store_name || '-' %>
              </div>
            <% } %>

            <div class="price">
              <%= Number(p.price || 0).toFixed(2) %> RON
            </div>

            <div class="meta">
              Stoc: <strong><%= Number(p.stock || 0).toFixed(0) %></strong>
              · Vândute: <strong><%= Number(p.sold_qty || 0).toFixed(0) %></strong>
              · Comenzi: <strong><%= p.order_count || 0 %></strong>
            </div>

            <div class="reason">
              <strong>De ce:</strong> <%= p.reason || '-' %>
            </div>

            <% if (p.url) { %>
              <div style="margin-top:8px">
                <a
                  href="<%= p.url %>"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Vezi produsul ↗
                </a>
              </div>
            <% } %>

            <label class="select-row">
              <input
                type="checkbox"
                name="product_ids"
                value="<%= p.product_id %>"
                style="width:auto"
                <%= Number(p.selected)===1?'checked':'' %>
              >
              Include în email
            </label>
          </div>
        <% }) %>
      </div>

      <div class="toolbar" style="margin-top:14px">
        <span>
          Recomandare: selectează <strong>3–6 produse</strong> pentru email.
        </span>

        <button
          class="btn primary"
          type="submit"
          onclick="return confirm('Salvezi produsele selectate pentru acest segment?');"
        >
          Salvează selecția
        </button>
      </div>
    </form>
  <% } %>
</div>

<div class="card" style="margin-top:16px">
  <div class="toolbar">
    <h2>Clienți</h2>

    <form method="get">
      <select name="page_size" onchange="this.form.submit()">
        <% [20,50,100,200].forEach(n => { %>
          <option value="<%= n %>" <%= pageSize===n?'selected':'' %>>
            <%= n %>/pagină
          </option>
        <% }) %>
      </select>
    </form>
  </div>

  <table class="segment-detail-table">
    <thead>
      <tr>
        <th>Email</th>
        <th>Tip</th>
        <th>Client</th>
        <th>Telefon</th>
        <th>Locație</th>
        <th>Comenzi</th>
        <th>Valoare</th>
        <th>Ultima comandă</th>
        <th>Marketing</th>
        <th>Blacklist</th>
        <th></th>
      </tr>
    </thead>

    <tbody>
      <% contacts.forEach(c => { %>
        <tr>
          <td><%= c.email %></td>
          <td><strong><%= c.customer_type || '-' %></strong></td>
          <td>
            <%= c.company_name ||
                [c.first_name,c.last_name].filter(Boolean).join(' ') ||
                '-' %>
          </td>
          <td><%= c.phone || '-' %></td>
          <td>
            <%= [c.city,c.county].filter(Boolean).join(', ') || '-' %>
          </td>
          <td><strong><%= c.total_orders || 0 %></strong></td>
          <td><%= Number(c.total_spent || 0).toFixed(2) %> RON</td>
          <td><%= fmtDateRo(c.last_order_at) %></td>
          <td>
            <%= c.marketing_consent && !c.unsubscribed ? 'Eligibil' : 'Nu' %>
          </td>
          <td>
            <% if (Number(c.is_blacklisted)===1) { %>
              <span class="blacklist-yes">
                <%= c.blacklist_status || 'DA' %>
              </span>
            <% } else { %>
              <span class="blacklist-no">Nu</span>
            <% } %>
          </td>
          <td>
            <a class="btn" href="/contacts/<%= c.id %>">360°</a>
          </td>
        </tr>
      <% }) %>
    </tbody>
  </table>

  <div class="toolbar" style="margin-top:12px">
    <span><strong><%= total %></strong> clienți</span>

    <% if (page > 1) { %>
      <a
        class="btn"
        href="?page_size=<%= pageSize %>&page=<%= page-1 %>"
      >
        ← Înapoi
      </a>
    <% } %>

    <span>Pagina <strong><%= page %></strong> / <%= totalPages %></span>

    <% if (page < totalPages) { %>
      <a
        class="btn"
        href="?page_size=<%= pageSize %>&page=<%= page+1 %>"
      >
        Înainte →
      </a>
    <% } %>
  </div>
</div>

<%- include('../partials/footer') %>
