<?php
declare(strict_types=1);

require_once __DIR__ . '/../_dashboard.php';
dashboard_render_start('Analytika', 'analytics');

if ($dashboardUser && !$dashboardUser['is_company']):
?>
<header class="page-heading"><span class="welcome">Výsledky vaší stránky</span><h1>Analytika</h1><p>Podívejte se, jak lidé objevují váš Link in Bio a co je nejvíce zaujalo.</p></header>

<section class="ui-card analytics-summary-card">
  <div class="quick-head"><div class="card-title"><span class="round-icon"><i class="ph ph-chart-line-up"></i></span><div><h2>Výkon Link in Bio</h2><p id="period-label">Posledních 30 dní</p></div></div><select id="analytics-period" class="btn btn-neutral" aria-label="Vybrat období"><option value="7">Posledních 7 dní</option><option value="30" selected>Posledních 30 dní</option><option value="all">Celkem</option></select></div>
  <div id="analytics-notice" class="notice" role="status"></div>
  <div class="metrics analytics-metrics"><div class="metric"><span class="round-icon coral"><i class="ph ph-eye"></i></span><div><small>Zobrazení stránky</small><strong id="metric-views">—</strong></div></div><div class="metric"><span class="round-icon"><i class="ph ph-cursor-click"></i></span><div><small>Kliknutí na odkazy</small><strong id="metric-clicks">—</strong></div></div><div class="metric"><span class="round-icon green"><i class="ph ph-chat-circle"></i></span><div><small>Nové poptávky</small><strong id="metric-contacts">—</strong></div></div></div>
  <div class="analytics-chart-head"><div><h3>Vývoj návštěvnosti</h3><p>Jak se v čase mění zobrazení stránky a kliknutí na odkazy.</p></div><div class="chart-legend"><span><i class="views"></i>Zobrazení</span><span><i class="clicks"></i>Kliknutí</span></div></div>
  <div id="analytics-chart" class="analytics-chart" aria-live="polite"></div>
</section>

<div class="analytics-detail-grid">
  <section class="ui-card"><div class="card-title"><span class="round-icon"><i class="ph ph-link"></i></span><div><h2>Nejúspěšnější odkazy</h2><p>Které odkazy získávají nejvíce pozornosti.</p></div></div><div id="analytics-links" class="analytics-list"></div></section>
  <section class="ui-card"><div class="card-title"><span class="round-icon green"><i class="ph ph-clock-counter-clockwise"></i></span><div><h2>Poslední kliknutí</h2><p>Odkud lidé přišli a na co klikli.</p></div></div><div id="analytics-activity" class="analytics-list"></div></section>
</div>

<script>
const period = document.getElementById('analytics-period');
const fmt = value => Number(value || 0).toLocaleString('cs-CZ');
const safeText = value => String(value ?? '').replace(/[&<>"']/g, char => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[char]));
const periodLabels = {7: 'Posledních 7 dní', 30: 'Posledních 30 dní', all: 'Celkem'};
function formatActivityTime(value) {
  if (!value) return 'nedávno';
  const date = new Date(String(value).replace(' ', 'T'));
  if (Number.isNaN(date.getTime())) return 'nedávno';
  return new Intl.DateTimeFormat('cs-CZ', {dateStyle: 'medium', timeStyle: 'short'}).format(date);
}
function renderChart(rows) {
  const chart = document.getElementById('analytics-chart');
  const data = Array.isArray(rows) ? rows : [];
  const max = Math.max(0, ...data.flatMap(row => [Number(row.views || 0), Number(row.clicks || 0)]));
  if (!data.length || max === 0) {
    chart.innerHTML = '<div class="analytics-empty"><i class="ph ph-chart-line"></i><strong>Graf se začne plnit po prvních návštěvách.</strong><span>Až svou stránku začnete sdílet, výsledky uvidíte tady.</span></div>';
    return;
  }
  const width = 720, height = 210, padding = {top: 18, right: 12, bottom: 34, left: 12};
  const innerWidth = width - padding.left - padding.right;
  const innerHeight = height - padding.top - padding.bottom;
  const point = (value, index) => [padding.left + (data.length === 1 ? innerWidth / 2 : index * innerWidth / (data.length - 1)), padding.top + innerHeight - (Number(value || 0) / max) * innerHeight];
  const points = key => data.map((row, index) => point(row[key], index).join(',')).join(' ');
  const area = data.map((row, index) => point(row.views, index).join(',')).join(' ') + ' ' + (padding.left + innerWidth) + ',' + (padding.top + innerHeight) + ' ' + padding.left + ',' + (padding.top + innerHeight);
  const first = data[0]?.label || '', last = data[data.length - 1]?.label || '';
  chart.innerHTML = '<svg viewBox="0 0 ' + width + ' ' + height + '" role="img" aria-label="Graf zobrazení a kliknutí"><line x1="' + padding.left + '" y1="' + (padding.top + innerHeight) + '" x2="' + (padding.left + innerWidth) + '" y2="' + (padding.top + innerHeight) + '" class="chart-axis"/><polygon points="' + area + '" class="chart-area"/><polyline points="' + points('views') + '" class="chart-line chart-views"/><polyline points="' + points('clicks') + '" class="chart-line chart-clicks"/><text x="' + padding.left + '" y="' + (height - 8) + '" class="chart-label">' + safeText(first) + '</text><text x="' + (padding.left + innerWidth) + '" y="' + (height - 8) + '" text-anchor="end" class="chart-label">' + safeText(last) + '</text></svg>';
}
function renderLinks(rows) {
  const target = document.getElementById('analytics-links');
  target.innerHTML = rows.length ? rows.map((link, index) => '<div class="analytics-row"><span class="analytics-rank">' + (index + 1) + '</span><div><strong>' + safeText(link.title || 'Odkaz') + '</strong><small>' + fmt(link.clicks_period) + ' kliknutí v tomto období</small></div><b>' + fmt(link.click_count) + '<small> celkem</small></b></div>').join('') : '<div class="analytics-empty compact"><i class="ph ph-link"></i><strong>Zatím tu nejsou žádná kliknutí.</strong><span>Sdílejte svou stránku a výsledky se ukážou tady.</span></div>';
}
function renderActivity(rows) {
  const target = document.getElementById('analytics-activity');
  target.innerHTML = rows.length ? rows.map(row => '<div class="analytics-row activity-row"><span class="activity-icon"><i class="ph ph-cursor-click"></i></span><div><strong>Kliknutí na ' + safeText(row.title || 'odkaz') + '</strong><small>' + safeText(row.source || 'Přímý odkaz') + ' · ' + safeText(formatActivityTime(row.created_at)) + '</small></div></div>').join('') : '<div class="analytics-empty compact"><i class="ph ph-cursor-click"></i><strong>Zatím žádná kliknutí.</strong><span>Jakmile někdo otevře váš odkaz, uvidíte ho zde.</span></div>';
}
async function loadAnalytics() {
  const response = await fetch('/profile/api/analytics.php?period=' + encodeURIComponent(period.value), {credentials: 'include'});
  const data = await response.json();
  if (!response.ok) throw new Error(data.error || 'Analytiku se nepodařilo načíst.');
  const analytics = data.analytics || {};
  document.getElementById('period-label').textContent = periodLabels[period.value] || 'Vybrané období';
  document.getElementById('metric-views').textContent = fmt(analytics.views_period);
  document.getElementById('metric-clicks').textContent = fmt(analytics.clicks_period);
  document.getElementById('metric-contacts').textContent = fmt(analytics.contacts_period);
  renderChart(analytics.trend || []);
  renderLinks(Array.isArray(analytics.links) ? analytics.links : []);
  renderActivity(Array.isArray(analytics.click_activity) ? analytics.click_activity : []);
}
function showError(error) {
  const notice = document.getElementById('analytics-notice');
  notice.className = 'notice show error';
  notice.textContent = error.message;
}
period.addEventListener('change', () => loadAnalytics().catch(showError));
loadAnalytics().catch(showError);
</script>
<?php
endif;
dashboard_render_end();

