<%- include('../partials/header') %>
<style>
.auto-layout{display:grid;grid-template-columns:minmax(380px,.8fr) minmax(560px,1.2fr);gap:16px;align-items:start}
.auto-status{font-weight:800}.on{color:#15803d}.off{color:#b91c1c}
@media(max-width:1050px){.auto-layout{grid-template-columns:1fr}}
</style>

<div class="toolbar">
  <div>
    <h2>Automatizări remarketing</h2>
    <div class="small">v0.6 creează drafturi automat. Trimiterea către clienți rămâne manuală după verificare.</div>
  </div>
  <form method="post" action="/automations/run-all" onsubmit="return confirm('Rulezi acum toate automatizările active?');">
    <button class="btn primary">Rulează acum</button>
  </form>
</div>

<div class="auto-layout" style="margin-top:14px">
<form class="card" method="post" action="/automations/create">
  <h2>Automatizare nouă</h2>
  <label>Nume<input name="name" required placeholder="Compresoare – follow-up 7 zile"></label>

  <label>Magazin<select name="store_id" required>
    <option value="">Alege...</option>
    <% stores.forEach(s=>{ %><option value="<%= s.id %>"><%= s.name %></option><% }) %>
  </select></label>

  <label>Segment<select name="segment_id" required>
    <option value="">Alege...</option>
    <% segments.forEach(s=>{ %><option value="<%= s.id %>"><%= s.name %> · <%= s.store_name %></option><% }) %>
  </select></label>

  <label>Campanie șablon<select name="template_campaign_id" required>
    <option value="">Alege un draft din v0.5...</option>
    <% templates.forEach(c=>{ %><option value="<%= c.id %>"><%= c.name %> · <%= c.store_name %></option><% }) %>
  </select></label>

  <label>Declanșator<select name="trigger_type" id="trigger_type" required>
    <option value="after_purchase_days">La X zile după cumpărare</option>
    <option value="inactive_days">Fără comandă de X zile</option>
    <option value="category_purchase">A cumpărat recent o categorie</option>
    <option value="product_purchase">A cumpărat recent un SKU</option>
    <option value="new_products_category">Produse noi într-o categorie</option>
  </select></label>

  <label id="days-label">X zile<input type="number" min="0" max="3650" name="trigger_days" value="7"></label>
  <label id="value-label">Categorie / SKU<input name="trigger_value" placeholder="Ex: compres / KD1188"></label>

  <button class="btn primary">Salvează automatizarea</button>
</form>

<div class="card">
<h2>Automatizări</h2>
<table>
<thead><tr><th>Nume</th><th>Trigger</th><th>Segment</th><th>Ultima rulare</th><th>Stare</th><th></th></tr></thead>
<tbody>
<% automations.forEach(a=>{ %>
<tr>
<td><strong><%= a.name %></strong><div class="small"><%= a.template_name || '-' %></div></td>
<td>
  <%= a.trigger_type %>
  <% if(a.trigger_days){ %><div class="small"><%= a.trigger_days %> zile</div><% } %>
  <% if(a.trigger_value){ %><div class="small"><%= a.trigger_value %></div><% } %>
</td>
<td><%= a.segment_name %></td>
<td><%= a.last_run_at || '-' %><div class="small"><%= a.last_result || '' %></div></td>
<td><span class="auto-status <%= a.active?'on':'off' %>"><%= a.active?'ACTIVĂ':'OPRITĂ' %></span></td>
<td>
  <div style="display:flex;gap:5px;flex-wrap:wrap">
    <form method="post" action="/automations/<%= a.id %>/run"><button class="btn">Rulează</button></form>
    <form method="post" action="/automations/<%= a.id %>/toggle"><button class="btn"><%= a.active?'Oprește':'Activează' %></button></form>
    <form method="post" action="/automations/<%= a.id %>/delete" onsubmit="return confirm('Ștergi automatizarea?');"><button class="btn">×</button></form>
  </div>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>

<div class="card" style="margin-top:16px">
<h2>Ultimele rulări</h2>
<table>
<thead><tr><th>Automatizare</th><th>Data</th><th>Status</th><th>Potriviri</th><th>Campanie creată</th><th>Mesaj</th></tr></thead>
<tbody>
<% runs.forEach(r=>{ %>
<tr>
<td><%= r.automation_name %></td><td><%= r.created_at %></td><td><%= r.status %></td><td><%= r.matched_count %></td>
<td><% if(r.campaign_id){ %><a href="/campaigns/<%= r.campaign_id %>/edit">#<%= r.campaign_id %></a><% } else { %>-<% } %></td>
<td><%= r.message || '-' %></td>
</tr>
<% }) %>
</tbody>
</table>
</div>

<script>
(function(){
 const type=document.getElementById('trigger_type');
 const days=document.getElementById('days-label');
 const value=document.getElementById('value-label');
 function refresh(){
   const t=type.value;
   days.style.display=['after_purchase_days','inactive_days'].includes(t)?'block':'none';
   value.style.display=['category_purchase','product_purchase','new_products_category'].includes(t)?'block':'none';
 }
 type.addEventListener('change',refresh);refresh();
})();
</script>
<%- include('../partials/footer') %>
