{{define "user/leads.html"}}
{{template "user/layout_head" .}}
{{template "user_pagehead" (dict "Icon" "bx-target-lock" "Title" (T "user.leads.title") "Desc" (T "user.leads.desc"))}}

<style>
.user-leads-chart-wrap { position: relative; height: 240px; }
.user-leads-range .btn-check:checked + .btn {
  color: #fff !important;
  background-color: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
}
.user-leads-kpi .card-body { padding: 1rem 1.15rem; }
.user-leads-kpi .kpi-val { font-size: 1.65rem; font-weight: 700; line-height: 1.2; }
.user-leads-table-title { font-size: .95rem; font-weight: 600; margin-bottom: .75rem; }
.user-leads-loading { opacity: .55; pointer-events: none; }
.user-leads-site-filter label { white-space: nowrap; flex-shrink: 0; }
.user-leads-level-filter label { white-space: nowrap; flex-shrink: 0; }
.user-leads-star { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; font-size: .8125rem; }
.user-leads-star i { font-size: .95rem; }
.user-leads-tag { display: inline-block; font-size: .6875rem; padding: .12rem .4rem; border-radius: 999px; background: #f1f5f9; color: #475569; margin-right: .2rem; margin-bottom: .15rem; }
.user-leads-notes { font-size: .75rem; color: #64748b; max-width: 220px; }
</style>

<div id="leadsRoot" data-site-id="{{index .Data "SiteID"}}">
  <div class="card border-0 shadow-sm mb-3">
    <div class="card-body py-3 d-flex flex-wrap align-items-center gap-3">
      <div class="btn-group user-leads-range" role="group" aria-label="{{T "user.leads.range_aria"}}">
        <input type="radio" class="btn-check" name="leadsRange" id="leadsR7" autocomplete="off" checked>
        <label class="btn btn-outline-primary btn-sm" for="leadsR7">{{T "user.leads.range_7"}}</label>
        <input type="radio" class="btn-check" name="leadsRange" id="leadsR30" autocomplete="off">
        <label class="btn btn-outline-primary btn-sm" for="leadsR30">{{T "user.leads.range_30"}}</label>
      </div>
      <div class="d-flex align-items-center gap-2 user-leads-level-filter flex-shrink-0">
        <label class="text-muted small mb-0" for="leadsLevelFilter">{{T "user.leads.filter_level"}}</label>
        <select id="leadsLevelFilter" class="form-select form-select-sm" style="min-width: 120px;">
          <option value="0">{{T "user.leads.all_marked"}}</option>
          {{range index .Data "LeadLevels"}}
          <option value="{{.Level}}">{{.Name}}</option>
          {{end}}
        </select>
      </div>
      <div class="d-flex align-items-center gap-2 ms-md-auto user-leads-site-filter flex-shrink-0">
        <label class="text-muted small mb-0" for="leadsSiteFilter">{{T "user.leads.filter_site"}}</label>
        <select id="leadsSiteFilter" class="form-select form-select-sm" style="min-width: 180px;">
          <option value="0">{{T "user.leads.all_sites"}}</option>
          {{range index .Data "Sites"}}
          <option value="{{.id}}" {{if eq (asInt (index $.Data "SiteID")) (asInt .id)}}selected{{end}}>{{.name}}</option>
          {{end}}
        </select>
      </div>
    </div>
  </div>

  <div class="row g-3 mb-4 user-leads-kpi" id="leadsKpiRow">
    <div class="col-6 col-md-3"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="text-muted small">{{T "user.leads.kpi_visitors"}}</div><div class="kpi-val" data-kpi="total_tagged">-</div></div></div></div>
    <div class="col-6 col-md-3"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="text-muted small">{{T "user.leads.won"}}</div><div class="kpi-val" data-kpi="converted">-</div></div></div></div>
    <div class="col-6 col-md-3"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="text-muted small">{{T "user.leads.conversion"}}</div><div class="kpi-val" data-kpi="convert_rate">-</div></div></div></div>
    <div class="col-6 col-md-3"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="text-muted small">{{T "user.leads.tag_types"}}</div><div class="kpi-val" data-kpi="tag_types">-</div></div></div></div>
  </div>

  <div class="row g-3 mb-4">
    <div class="col-12 col-lg-5">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-leads-table-title">{{T "user.leads.level_dist"}}</div>
        <div class="user-leads-chart-wrap" style="height:220px"><canvas id="chartLeadLevels" aria-label="{{T "user.leads.level_dist_aria"}}"></canvas></div>
      </div></div>
    </div>
    <div class="col-12 col-lg-7">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-leads-table-title">{{T "user.leads.trend_title"}}</div>
        <div class="user-leads-chart-wrap"><canvas id="chartLeadDaily" aria-label={{jsString (T "user.leads.chart_aria")}}></canvas></div>
      </div></div>
    </div>
  </div>

  <div class="row g-3 mb-4">
    <div class="col-12 col-lg-5">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-leads-table-title">{{T "user.leads.tags_top"}}</div>
        <div class="user-leads-chart-wrap" style="height:260px"><canvas id="chartLeadTags" aria-label="{{T "user.leads.tags_stats_aria"}}"></canvas></div>
      </div></div>
    </div>
    <div class="col-12 col-lg-7">
      <div class="card border-0 shadow-sm h-100"><div class="card-body">
        <div class="user-leads-table-title">{{T "user.leads.detail_title"}}</div>
        <p class="text-muted small mb-2">{{T "user.leads.detail_hint"}}</p>
        <div class="table-responsive">
          <table class="table table-sm table-hover mb-0 align-middle">
            <thead class="table-light"><tr>
              <th>{{T "user.leads.col_visitor"}}</th><th>{{T "user.leads.filter_site"}}</th><th>{{T "user.leads.filter_level"}}</th><th>{{T "user.leads.col_tags"}}</th><th>{{T "user.leads.col_note"}}</th><th class="text-end">{{T "user.leads.col_marked_at"}}</th>
            </tr></thead>
            <tbody id="leadsVisitorBody"><tr><td colspan="6" class="text-center text-muted py-3">{{T "user.leads.loading"}}</td></tr></tbody>
          </table>
        </div>
      </div></div>
    </div>
  </div>
</div>

{{template "public/script_chartjs" .}}
<script>
(function () {
  var charts = {};

  function esc(s) {
    return $('<div/>').text(s == null ? '' : String(s)).html();
  }

  function formatTs(ts) {
    if (!ts) return '—';
    var d = new Date(ts * 1000);
    var pad = function (n) { return n < 10 ? '0' + n : '' + n; };
    return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
  }

  function getDays() {
    return $('#leadsR30').is(':checked') ? 30 : 7;
  }

  function loadLeads() {
    var days = getDays();
    var siteId = $('#leadsSiteFilter').val() || '0';
    var level = $('#leadsLevelFilter').val() || '0';
    var $root = $('#leadsRoot');
    $root.addClass('user-leads-loading');
    $.getJSON('/api/user/leads/data?days=' + encodeURIComponent(days) + '&site_id=' + encodeURIComponent(siteId) + '&lead_level=' + encodeURIComponent(level))
      .done(function (res) {
        if (!res.success || !res.data) return;
        renderKpi(res.data.summary || {});
        renderLevelChart(res.data.level_distribution || []);
        renderDailyChart(res.data.daily_tagged || []);
        renderTagChart(res.data.tag_top || []);
        renderVisitors(res.data.visitors || []);
      })
      .always(function () {
        $root.removeClass('user-leads-loading');
      });
  }

  function renderKpi(s) {
    $('#leadsKpiRow [data-kpi="total_tagged"]').text(s.total_tagged != null ? s.total_tagged : '-');
    $('#leadsKpiRow [data-kpi="converted"]').text(s.converted != null ? s.converted : '-');
    $('#leadsKpiRow [data-kpi="tag_types"]').text(s.tag_types != null ? s.tag_types : '-');
    if (s.convert_rate != null && s.total_tagged > 0) {
      $('#leadsKpiRow [data-kpi="convert_rate"]').text(Number(s.convert_rate).toFixed(1) + '%');
    } else {
      $('#leadsKpiRow [data-kpi="convert_rate"]').text('-');
    }
  }

  function upsertChart(id, cfg) {
    if (charts[id]) { charts[id].destroy(); }
    var el = document.getElementById(id);
    if (!el || !window.Chart) return;
    charts[id] = new Chart(el, cfg);
  }

  function renderLevelChart(rows) {
    rows = (rows || []).filter(function (r) { return (r.level || 0) > 0 && (r.count || 0) > 0; });
    upsertChart('chartLeadLevels', {
      type: 'doughnut',
      data: {
        labels: rows.map(function (r) { return r.name; }),
        datasets: [{ data: rows.map(function (r) { return r.count; }), backgroundColor: rows.map(function (r) { return r.color; }) }]
      },
      options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } }
    });
  }

  function renderDailyChart(rows) {
    upsertChart('chartLeadDaily', {
      type: 'line',
      data: {
        labels: rows.map(function (r) { return (r.date || '').slice(5); }),
        datasets: [{
          label: {{jsString (T "user.leads.chart_marks")}}, data: rows.map(function (r) { return r.count || 0; }),
          borderColor: 'rgb(37, 99, 235)', backgroundColor: 'rgba(37, 99, 235, 0.12)', fill: true, tension: 0.3
        }]
      },
      options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }
      }
    });
  }

  function renderTagChart(rows) {
    upsertChart('chartLeadTags', {
      type: 'bar',
      data: {
        labels: rows.map(function (r) { return r.tag; }),
        datasets: [{ label: {{jsString (T "user.leads.chart_count")}}, data: rows.map(function (r) { return r.count; }), backgroundColor: 'rgba(99, 102, 241, 0.75)' }]
      },
      options: {
        indexAxis: 'y', responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { beginAtZero: true, ticks: { precision: 0 } } }
      }
    });
  }

  function visitorChatLink(v) {
    var name = esc(v.name || {{jsString (T "user.leads.col_visitor")}});
    return '<a href="#" class="ut-visitor-chat-link js-user-session-chat" data-visitor-id="' + esc(String(v.id)) + '" data-title="' + name + '" title="{{T "user.leads.view_chat"}}">'
      + '<span class="ut-visitor-chat-link__avatar"><i class="bx bx-user"></i></span>'
      + '<span class="ut-visitor-chat-link__text">' + name + '</span>'
      + '<i class="bx bx-chevron-right ut-visitor-chat-link__arrow" aria-hidden="true"></i>'
      + '</a>';
  }

  function renderVisitors(rows) {
    var $tb = $('#leadsVisitorBody');
    if (!rows.length) {
      $tb.html('<tr><td colspan="6" class="text-center text-muted py-3">{{T "user.leads.empty"}}</td></tr>');
      return;
    }
    var html = '';
    rows.forEach(function (v) {
      var tags = (v.tags || []).map(function (t) { return '<span class="user-leads-tag">' + esc(t) + '</span>'; }).join('');
      html += '<tr>'
        + '<td>' + visitorChatLink(v) + '</td>'
        + '<td class="small">' + esc(v.site_name) + '</td>'
        + '<td><span class="user-leads-star" style="color:' + esc(v.lead_level_color || '#64748b') + '"><i class="bx bxs-star"></i>' + esc(v.lead_level_name) + '</span></td>'
        + '<td>' + (tags || '<span class="text-muted">—</span>') + '</td>'
        + '<td class="user-leads-notes" title="' + esc(v.agent_notes || '') + '">' + esc(v.agent_notes || '—') + '</td>'
        + '<td class="text-end small text-muted">' + esc(formatTs(v.lead_updated_at)) + '</td>'
        + '</tr>';
    });
    $tb.html(html);
  }

  $('input[name="leadsRange"]').on('change', loadLeads);
  $('#leadsSiteFilter, #leadsLevelFilter').on('change', function () {
    var sid = $('#leadsSiteFilter').val();
    var url = '/user/leads' + (sid && sid !== '0' ? '?site_id=' + encodeURIComponent(sid) : '');
    history.replaceState(null, '', url);
    loadLeads();
  });

  loadLeads();
})();
</script>
{{template "user/session_chat_modal" .}}
{{template "user/layout_foot" .}}
{{end}}