{{define "user/dashboard.html"}}
{{template "user/layout_head" .}}
<style>
a.ut-kpi-card { color: inherit; text-decoration: none; display: block; }
a.ut-kpi-card:hover { color: inherit; }
.user-dash-kpi .ut-kpi-card { cursor: default; }
.user-dash-kpi a.ut-kpi-card { cursor: pointer; }
.user-dash-kpi .ut-kpi-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 8px;
  font-size: 1rem; margin-bottom: .45rem;
}
.user-dash-kpi .ut-kpi-icon--blue { color: #2563eb; background: rgba(37,99,235,.1); }
.user-dash-kpi .ut-kpi-icon--green { color: #16a34a; background: rgba(22,163,74,.1); }
.user-dash-kpi .ut-kpi-icon--amber { color: #d97706; background: rgba(217,119,6,.1); }
.user-dash-kpi .ut-kpi-icon--violet { color: #7c3aed; background: rgba(124,58,237,.1); }
.user-dash-kpi .ut-kpi-icon--sky { color: #0284c7; background: rgba(2,132,199,.1); }
.user-dash-kpi .ut-kpi-icon--rose { color: #e11d48; background: rgba(225,29,72,.1); }
.user-dash-quick__card {
  border: 1px solid var(--ut-border, #e2e8f0);
  border-radius: var(--ut-radius-md, 12px);
  background: #fff;
  box-shadow: var(--ut-shadow-card);
  padding: 1rem 1.15rem;
  height: 100%;
  display: flex; flex-direction: column; gap: .65rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.user-dash-quick__card:hover {
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 12px 32px rgba(37,99,235,.08);
}
.user-dash-quick__icon {
  width: 2.25rem; height: 2.25rem; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}
.user-dash-quick__title { font-size: .9rem; font-weight: 600; color: #0f172a; margin: 0; }
.user-dash-quick__desc { font-size: .75rem; color: #64748b; margin: 0; line-height: 1.45; }
.user-dash-onboard {
  border: 1px dashed rgba(37,99,235,.35);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(239,246,255,.95) 0%, rgba(255,255,255,.98) 100%);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.25rem;
}
.user-dash-onboard__title { font-size: 1rem; font-weight: 650; color: #1e293b; margin: 0 0 .35rem; }
.user-dash-onboard__desc { font-size: .8125rem; color: #64748b; margin: 0 0 .85rem; line-height: 1.55; }
.user-dash-onboard__steps {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  font-size: .8125rem; color: #475569; margin-bottom: .85rem;
}
.user-dash-onboard__steps span { display: inline-flex; align-items: center; gap: .3rem; }
.user-dash-onboard__steps i { color: #2563eb; }
.user-dash-site-row { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.user-dash-site-dot {
  width: .65rem; height: .65rem; border-radius: 2px; flex-shrink: 0;
  border: 1px solid rgba(15,23,42,.1);
}
.user-dash-site-name {
  font-weight: 600; font-size: .875rem; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-dash-site-meta { font-size: .75rem; color: #94a3b8; }
.user-dash-queued-time { font-size: .75rem; color: #94a3b8; }
.user-dash-table-compact .table td,
.user-dash-table-compact .table th { padding: .55rem .65rem; font-size: .8125rem; }
@media (max-width: 575.98px) {
  .user-dash-col-sites { order: -1; }
}
</style>

<div class="ut-shell-page">
<header class="ut-pagehead">
  <div class="ut-pagehead__main">
    <div class="ut-pagehead__icon" aria-hidden="true"><i class="bx bx-grid-alt"></i></div>
    <div class="ut-pagehead__body">
      <h1 class="ut-pagehead__title">{{T "user.dashboard.title"}}</h1>
      <p class="ut-pagehead__desc">{{T "user.dashboard.desc_prefix"}}{{if index .Data "Username"}}{{privacy "username" (index .Data "Username")}}{{else}}{{privacy "username" .User.Username}}{{end}}{{T "user.dashboard.desc_suffix"}}</p>
    </div>
  </div>
  <div class="ut-pagehead__actions d-flex flex-wrap gap-2">
    <a class="btn btn-primary btn-sm" href="/user/sites?action=add"><i class="bx bx-plus me-1"></i>{{T "user.dashboard.btn_new_site"}}</a>
    <a class="btn btn-outline-primary btn-sm" href="/agent" target="_blank" rel="noopener"><i class="bx bx-headphone me-1"></i>{{T "user.dashboard.btn_agent"}}</a>
  </div>
</header>

{{if eq (index .Data "SiteCount") 0}}
<div class="user-dash-onboard">
  <h2 class="user-dash-onboard__title"><i class="bx bx-rocket me-1 text-primary"></i>{{T "user.dashboard.onboard_title"}}</h2>
  <p class="user-dash-onboard__desc">{{T "user.dashboard.onboard_desc"}}</p>
  <div class="user-dash-onboard__steps">
    <span><i class="bx bx-check-circle"></i>{{T "user.dashboard.step1"}}</span>
    <span><i class="bx bx-check-circle"></i>{{T "user.dashboard.step2"}}</span>
    <span><i class="bx bx-check-circle"></i>{{T "user.dashboard.step3"}}</span>
    <span><i class="bx bx-check-circle"></i>{{T "user.dashboard.step4"}}</span>
  </div>
  <a class="btn btn-primary btn-sm" href="/user/sites?action=add"><i class="bx bx-plus me-1"></i>{{T "user.dashboard.create_first"}}</a>
</div>
{{end}}

<div class="ut-kpi-grid user-dash-kpi">
  <a class="ut-kpi-card" href="/user/sites">
    <div class="ut-kpi-body">
      <div class="ut-kpi-icon ut-kpi-icon--blue"><i class="bx bx-globe"></i></div>
      <div class="ut-kpi-label">{{T "user.dashboard.kpi_sites"}}</div>
      <div class="ut-kpi-value">{{index .Data "SiteCount"}} <small class="text-muted fs-6 fw-normal">/ {{index .Data "MaxSites"}}</small></div>
    </div>
  </a>
  <a class="ut-kpi-card" href="/user/sites">
    <div class="ut-kpi-body">
      <div class="ut-kpi-icon ut-kpi-icon--green"><i class="bx bx-link"></i></div>
      <div class="ut-kpi-label">{{T "user.dashboard.kpi_connected"}}</div>
      <div class="ut-kpi-value stat-up">{{index .Data "ConnectedSites"}}</div>
    </div>
  </a>
  <a class="ut-kpi-card" href="/user/sessions">
    <div class="ut-kpi-body">
      <div class="ut-kpi-icon ut-kpi-icon--sky"><i class="bx bx-chat"></i></div>
      <div class="ut-kpi-label">{{T "user.dashboard.kpi_sessions_24h"}}</div>
      <div class="ut-kpi-value">{{index .Data "SessionToday"}}</div>
    </div>
  </a>
  <a class="ut-kpi-card" href="/user/sessions?status=0">
    <div class="ut-kpi-body">
      <div class="ut-kpi-icon ut-kpi-icon--amber"><i class="bx bx-time-five"></i></div>
      <div class="ut-kpi-label">{{T "user.dashboard.kpi_queued"}}</div>
      <div class="ut-kpi-value {{if gt (index .Data "QueuedCount") 0}}stat-down{{end}}">{{index .Data "QueuedCount"}}</div>
    </div>
  </a>
  <a class="ut-kpi-card" href="/user/sessions?status=1">
    <div class="ut-kpi-body">
      <div class="ut-kpi-icon ut-kpi-icon--green"><i class="bx bx-message-dots"></i></div>
      <div class="ut-kpi-label">{{T "user.dashboard.status_active"}}</div>
      <div class="ut-kpi-value">{{index .Data "ActiveCount"}}</div>
    </div>
  </a>
  <a class="ut-kpi-card" href="/user/visitors">
    <div class="ut-kpi-body">
      <div class="ut-kpi-icon ut-kpi-icon--violet"><i class="bx bx-user-voice"></i></div>
      <div class="ut-kpi-label">{{T "user.dashboard.kpi_visitors_24h"}}</div>
      <div class="ut-kpi-value">{{index .Data "VisitorToday"}}</div>
    </div>
  </a>
  <a class="ut-kpi-card" href="/user/stats">
    <div class="ut-kpi-body">
      <div class="ut-kpi-icon ut-kpi-icon--blue"><i class="bx bx-envelope"></i></div>
      <div class="ut-kpi-label">{{T "user.dashboard.kpi_messages_24h"}}</div>
      <div class="ut-kpi-value">{{index .Data "MessageToday"}}</div>
    </div>
  </a>
  <a class="ut-kpi-card" href="/user/leads">
    <div class="ut-kpi-body">
      <div class="ut-kpi-icon ut-kpi-icon--rose"><i class="bx bx-target-lock"></i></div>
      <div class="ut-kpi-label">{{T "user.dashboard.kpi_leads"}}</div>
      <div class="ut-kpi-value">{{index .Data "LeadTagged"}}</div>
    </div>
  </a>
</div>

<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <a href="/user/sites" class="user-dash-quick__card text-decoration-none">
      <span class="user-dash-quick__icon text-primary" style="background:rgba(37,99,235,.1)"><i class="bx bx-globe"></i></span>
      <h3 class="user-dash-quick__title">{{T "user.dashboard.section_sites"}}</h3>
      <p class="user-dash-quick__desc">{{T "user.dashboard.quick_sites_desc"}}</p>
    </a>
  </div>
  <div class="col-6 col-md-3">
    <a href="/agent" target="_blank" rel="noopener" class="user-dash-quick__card text-decoration-none">
      <span class="user-dash-quick__icon text-success" style="background:rgba(22,163,74,.1)"><i class="bx bx-headphone"></i></span>
      <h3 class="user-dash-quick__title">{{T "user.dashboard.btn_agent"}}</h3>
      <p class="user-dash-quick__desc">{{T "user.dashboard.quick_agent_desc"}}</p>
    </a>
  </div>
  <div class="col-6 col-md-3">
    <a href="/user/stats" class="user-dash-quick__card text-decoration-none">
      <span class="user-dash-quick__icon text-info" style="background:rgba(2,132,199,.1)"><i class="bx bx-bar-chart-alt-2"></i></span>
      <h3 class="user-dash-quick__title">{{T "user.dashboard.quick_stats_title"}}</h3>
      <p class="user-dash-quick__desc">{{T "user.dashboard.quick_stats_desc"}}</p>
    </a>
  </div>
  <div class="col-6 col-md-3">
    <a href="/user/leads" class="user-dash-quick__card text-decoration-none">
      <span class="user-dash-quick__icon text-warning" style="background:rgba(217,119,6,.1)"><i class="bx bx-target-lock"></i></span>
      <h3 class="user-dash-quick__title">{{T "user.dashboard.quick_leads_title"}}</h3>
      <p class="user-dash-quick__desc">{{T "user.dashboard.quick_leads_desc"}}</p>
    </a>
  </div>
</div>

<div class="row g-3 mb-4">
  <div class="col-lg-7">
    <div class="ut-section h-100">
      <div class="ut-section__head">
        <div class="ut-section__head-icon ut-section__head-icon--amber"><i class="bx bx-hourglass"></i></div>
        <div class="ut-section__head-text">
          <h2 class="ut-section__head-title">{{T "user.dashboard.section_queued"}}</h2>
          <p class="ut-section__head-sub">{{T "user.dashboard.section_queued_desc"}}</p>
        </div>
        <div class="ms-auto flex-shrink-0">
          <a class="btn btn-sm btn-outline-primary" href="/user/sessions?status=0">{{T "user.dashboard.view_all"}}</a>
        </div>
      </div>
      <div class="ut-section__body ut-section__body--flush user-dash-table-compact">
        <div class="table-responsive">
          <table class="table table-hover mb-0 align-middle">
            <thead class="table-light">
              <tr><th>{{T "user.dashboard.col_visitor"}}</th><th>{{T "user.dashboard.col_site"}}</th><th>{{T "user.dashboard.waiting"}}</th><th class="text-end">{{T "user.dashboard.col_actions"}}</th></tr>
            </thead>
            <tbody>
            {{range index .Data "QueuedSessions"}}
            <tr>
              <td>
                <div class="fw-semibold">{{privacy "text" .visitor_label}}</div>
                {{if .ip_last_masked}}<div class="small text-muted">{{privacy "text" .ip_last_masked}}{{if .geo_short}} · {{.geo_short}}{{end}}</div>{{end}}
              </td>
              <td class="small">{{.site_name}}</td>
              <td class="user-dash-queued-time">{{unixTime .updated_at}}</td>
              <td class="text-end">
                <a href="/agent" target="_blank" rel="noopener" class="btn btn-sm btn-primary py-0 px-2" title="{{T "user.dashboard.go_agent"}}"><i class="bx bx-headphone"></i></a>
                <a href="#" class="btn btn-sm btn-outline-secondary py-0 px-2 js-user-session-chat" data-session-id="{{.id}}" data-title="{{.visitor_label}}" title="{{T "user.dashboard.view_chat"}}"><i class="bx bx-conversation"></i></a>
              </td>
            </tr>
            {{else}}
            <tr><td colspan="4" class="text-center text-muted py-4"><i class="bx bx-check-circle text-success me-1"></i>{{T "user.dashboard.empty_queued"}}</td></tr>
            {{end}}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-5 user-dash-col-sites">
    <div class="ut-section h-100">
      <div class="ut-section__head">
        <div class="ut-section__head-icon ut-section__head-icon--sky"><i class="bx bx-globe"></i></div>
        <div class="ut-section__head-text">
          <h2 class="ut-section__head-title">{{T "user.dashboard.kpi_sites"}}</h2>
          <p class="ut-section__head-sub">{{T "user.dashboard.section_sites_desc"}}</p>
        </div>
        <div class="ms-auto flex-shrink-0">
          <a class="btn btn-sm btn-outline-primary" href="/user/sites">{{T "user.dashboard.manage"}}</a>
        </div>
      </div>
      <div class="ut-section__body">
        {{range index .Data "Sites"}}
        <div class="d-flex align-items-center justify-content-between gap-2 py-2 border-bottom">
          <div class="user-dash-site-row min-width-0">
            <span class="user-dash-site-dot" style="background-color:{{.primary_color}}" aria-hidden="true"></span>
            <div class="min-width-0">
              <div class="user-dash-site-name">{{.name}}</div>
              <div class="user-dash-site-meta">{{.widget_title}} · {{T "user.dashboard.meta_sessions"}} {{.session_count}}{{if gt (asInt .active_session_count) 0}} · <span class="text-success">{{.active_session_count}} {{T "user.dashboard.status_active"}}</span>{{end}}</div>
            </div>
          </div>
          <div class="flex-shrink-0 text-end">
            {{if .widget_connected}}
            <span class="badge rounded-pill text-bg-success">{{T "user.dashboard.status_connected"}}</span>
            {{else}}
            <span class="badge rounded-pill text-bg-warning text-dark">{{T "user.dashboard.status_not_detected"}}</span>
            {{end}}
          </div>
        </div>
        {{else}}
        <p class="text-muted text-center py-3 mb-0"><i class="bx bx-info-circle me-1"></i>{{T "user.dashboard.empty_sites"}}<a href="/user/sites?action=add">{{T "user.dashboard.create_now"}}</a></p>
        {{end}}
      </div>
    </div>
  </div>
</div>

<div class="ut-section ut-section--table">
  <div class="ut-section__head">
    <div class="ut-section__head-icon ut-section__head-icon--green"><i class="bx bx-chat"></i></div>
    <div class="ut-section__head-text">
      <h2 class="ut-section__head-title">{{T "user.dashboard.section_sessions"}}</h2>
      <p class="ut-section__head-sub">{{T "user.dashboard.section_sessions_desc"}}</p>
    </div>
    <div class="ms-auto flex-shrink-0">
      <a class="btn btn-sm btn-outline-primary" href="/user/sessions">{{T "user.dashboard.all_sessions"}}</a>
    </div>
  </div>
  <div class="ut-section__body ut-section__body--flush user-dash-table-compact">
    <div class="table-responsive">
      <table class="table table-hover mb-0 align-middle">
        <thead class="table-light">
          <tr><th>{{T "user.dashboard.col_visitor"}}</th><th>{{T "user.dashboard.col_site"}}</th><th>{{T "user.dashboard.col_messages"}}</th><th>{{T "user.dashboard.col_status"}}</th><th>{{T "user.dashboard.col_updated"}}</th><th class="text-end">{{T "user.dashboard.col_actions"}}</th></tr>
        </thead>
        <tbody>
        {{range index .Data "RecentSessions"}}
        <tr>
          <td>
            <a href="#" class="text-decoration-none fw-semibold js-user-session-chat" data-session-id="{{.id}}" data-title="{{.visitor_label}}">{{privacy "text" .visitor_label}}</a>
            {{if gt (asInt .lead_level) 0}}<span class="badge rounded-pill ms-1" style="background:{{.lead_level_color}}20;color:{{.lead_level_color}};font-size:.65rem">{{.lead_level_name}}</span>{{end}}
          </td>
          <td class="small">{{.site_name}}</td>
          <td>
            <span class="badge text-bg-light text-dark">{{if gt (asInt .msg_count) 0}}{{.msg_count}}{{else}}0{{end}}</span>
            {{if .last_msg_preview}}<div class="small text-muted text-truncate" style="max-width:140px" title="{{.last_msg_content}}">{{.last_msg_preview}}</div>{{end}}
          </td>
          <td>
            {{if eq (asInt .status) 0}}<span class="badge text-bg-warning">{{T "user.dashboard.status_queued"}}</span>
            {{else if eq (asInt .status) 1}}<span class="badge text-bg-success">{{T "user.dashboard.status_active"}}</span>
            {{else}}<span class="badge text-bg-secondary">{{T "user.dashboard.status_closed"}}</span>{{end}}
          </td>
          <td class="small text-muted">{{unixTime .updated_at}}</td>
          <td class="text-end">
            {{if .session_ref}}<a href="/user/sessions/{{.session_ref}}" class="btn btn-sm btn-outline-secondary py-0 px-2" title="{{T "user.dashboard.detail"}}"><i class="bx bx-detail"></i></a>{{end}}
            <a href="#" class="btn btn-sm btn-outline-primary py-0 px-2 js-user-session-chat" data-session-id="{{.id}}" data-title="{{.visitor_label}}" title="{{T "user.dashboard.view_chat"}}"><i class="bx bx-conversation"></i></a>
          </td>
        </tr>
        {{else}}
        <tr><td colspan="6" class="text-center text-muted py-4">{{T "user.dashboard.empty_sessions"}}</td></tr>
        {{end}}
        </tbody>
      </table>
    </div>
  </div>
</div>
</div>

{{template "user/session_chat_modal" .}}
{{template "user/layout_foot" .}}
{{end}}