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

<%
function fmtDateRo(v) {
  if (!v) return '-';
  const d = new Date(v);
  if (isNaN(d.getTime())) return 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>
.client-badge {
  display:inline-block;
  padding:4px 9px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  background:#eef2ff;
}
.client-badge.pj { background:#e0f2fe; }
.client-badge.pf { background:#ecfdf5; }

.kpi-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
.kpi {
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:14px;
  background:#fff;
}
.kpi .label { color:#64748b; font-size:12px; }
.kpi .value { font-size:20px; font-weight:800; margin-top:4px; }

.product-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px;
}
.product-card {
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  background:#fff;
}
.product-card img {
  width:100%;
  height:150px;
  object-fit:contain;
  display:block;
  margin-bottom:10px;
}
.product-name {
  min-height:42px;
  font-weight:700;
}
.small-muted {
  color:#64748b;
  font-size:12px;
}
@media (max-width:900px) {
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
</style>

<div class="grid two">
  <div class="card">
    <h2>Client 360°</h2>

    <p>
      <strong>
        <%= [contact.first_name,contact.last_name].filter(Boolean).join(' ') || contact.email %>
      </strong>
    </p>

    <p>
      <strong>Tip client:</strong>
      <span class="client-badge <%= String(contact.customer_type || '').toLowerCase() %>">
        <%= contact.customer_type === 'PJ'
          ? 'PJ — Persoană juridică'
          : (contact.customer_type === 'PF'
              ? 'PF — Persoană fizică'
              : 'Necunoscut') %>
      </span>
    </p>

    <% if (contact.customer_type==='PJ' || contact.company_name || contact.cui) { %>
      <p><strong>Firmă:</strong> <%= contact.company_name || '-' %></p>
      <p><strong>CUI/CIF:</strong> <%= contact.cui || '-' %></p>
      <p><strong>Reg. Com.:</strong> <%= contact.reg_com || '-' %></p>
      <p>
        <strong>Persoană de contact:</strong>
        <%= [contact.first_name,contact.last_name].filter(Boolean).join(' ') || '-' %>
      </p>
    <% } %>

    <p><strong>Email:</strong> <%= contact.email %></p>
    <p><strong>Telefon:</strong> <%= contact.phone || '-' %></p>
    <p>
      <strong>Adresă:</strong>
      <%= [contact.address,contact.city,contact.county,contact.postal_code]
            .filter(Boolean).join(', ') || '-' %>
    </p>

    <div class="kpi-grid">
      <div class="kpi">
        <div class="label">Comenzi</div>
        <div class="value"><%= contact.total_orders || 0 %></div>
      </div>

      <div class="kpi">
        <div class="label">Valoare totală</div>
        <div class="value"><%= Number(contact.total_spent || 0).toFixed(2) %> RON</div>
      </div>

      <div class="kpi">
        <div class="label">Ultima comandă</div>
        <div class="value" style="font-size:16px"><%= fmtDateRo(contact.last_order_at) %></div>
      </div>

      <div class="kpi">
        <div class="label">Produse distincte</div>
        <div class="value"><%= purchasedProducts.length %></div>
      </div>
    </div>

    <hr>

    <p>Emailuri primite: <strong><%= contact.emails_sent || 0 %></strong></p>
    <p>Deschideri: <strong><%= contact.emails_opened || 0 %></strong></p>
    <p>Clickuri: <strong><%= contact.email_clicks || 0 %></strong></p>
  </div>

  <div class="card">
    <h2>Categorii cumpărate</h2>

    <table>
      <thead>
        <tr>
          <th>Categorie</th>
          <th>Cant.</th>
          <th>Comenzi</th>
          <th>Valoare</th>
          <th>Ultima</th>
        </tr>
      </thead>
      <tbody>
        <% categories.forEach(x => { %>
          <tr>
            <td><%= x.category %></td>
            <td><%= Number(x.qty || 0).toFixed(0) %></td>
            <td><%= x.orders || 0 %></td>
            <td><%= Number(x.value_total || 0).toFixed(2) %> RON</td>
            <td><%= fmtDateRo(x.last_purchase) %></td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  </div>
</div>

<div class="card" style="margin-top:16px">
  <h2>Produse cumpărate (<%= purchasedProducts.length %>)</h2>

  <% if (!purchasedProducts.length) { %>
    <p class="small-muted">Nu există încă produse asociate comenzilor acestui client.</p>
  <% } else { %>
    <div class="product-grid">
      <% purchasedProducts.forEach(p => { %>
        <div class="product-card">
          <% if (p.image_url) { %>
            <img
              src="<%= p.image_url %>"
              alt="<%= p.product_name || p.sku %>"
              loading="lazy"
              onerror="this.style.display='none'"
            >
          <% } %>

          <div class="product-name"><%= p.product_name || p.sku %></div>

          <div class="small-muted">
            SKU: <strong><%= p.sku %></strong>
          </div>

          <div class="small-muted">
            Categorie: <%= p.category || '-' %>
          </div>

          <div style="margin-top:8px">
            Cantitate cumpărată: <strong><%= Number(p.quantity || 0).toFixed(0) %></strong>
          </div>

          <div>
            Comenzi: <strong><%= p.order_count || 0 %></strong>
          </div>

          <div>
            Valoare: <strong><%= Number(p.total_value || 0).toFixed(2) %> RON</strong>
          </div>

          <div class="small-muted">
            Ultima cumpărare: <%= fmtDateRo(p.last_purchase) %>
          </div>

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

<div class="card" style="margin-top:16px">
  <h2>Istoric comenzi</h2>

  <table>
    <thead>
      <tr>
        <th>Comandă</th>
        <th>Data</th>
        <th>Total</th>
        <th>Status</th>
        <th>Tip plată</th>
        <th>Status plată</th>
        <th>Produse</th>
      </tr>
    </thead>
    <tbody>
      <% orders.forEach(o => { %>
        <tr>
          <td><a href="/orders/<%= o.id %>"><%= o.external_id %></a></td>
          <td><%= fmtDateRo(o.ordered_at) %></td>
          <td><%= Number(o.total || 0).toFixed(2) %> <%= o.currency || 'RON' %></td>
          <td><%= o.status || '-' %></td>
          <td><%= o.payment_method || '-' %></td>
          <td><%= o.payment_status || '-' %></td>
          <td><%= o.item_count || 0 %></td>
        </tr>
      <% }) %>
    </tbody>
  </table>
</div>

<div class="card" style="margin-top:16px">
  <h2>Activitate email</h2>

  <table>
    <thead>
      <tr>
        <th>Eveniment</th>
        <th>Data</th>
        <th>Link</th>
      </tr>
    </thead>
    <tbody>
      <% events.forEach(e => { %>
        <tr>
          <td><%= e.event_type %></td>
          <td><%= fmtDateRo(e.event_at || e.created_at) %></td>
          <td><%= e.url || '-' %></td>
        </tr>
      <% }) %>
    </tbody>
  </table>
</div>


<div class="card" style="margin-top:16px">
  <h2>Tracking campanii marketing</h2>
  <% if (!marketingEvents || !marketingEvents.length) { %>
    <p class="small-muted">Nu există încă evenimente de campanie pentru acest client.</p>
  <% } else { %>
    <table>
      <thead><tr><th>Campanie</th><th>Eveniment</th><th>Data</th><th>Link / motiv</th><th>Device</th></tr></thead>
      <tbody>
      <% marketingEvents.forEach(e => { %>
        <tr>
          <td><a href="/campaigns/<%= e.campaign_id %>/tracking"><%= e.campaign_name || ('#'+e.campaign_id) %></a></td>
          <td><strong><%= e.event_type %></strong></td>
          <td><%= fmtDateRo(e.event_at) %></td>
          <td>
            <% if (e.clicked_url) { %><a href="<%= e.clicked_url %>" target="_blank" rel="noopener"><%= e.clicked_url %></a>
            <% } else { %><%= e.reason || '-' %><% } %>
          </td>
          <td><%= e.device || '-' %></td>
        </tr>
      <% }) %>
      </tbody>
    </table>
  <% } %>
</div>

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