<script>
  /** @type {{ entries: import('../stores/journalStore.js').JournalEntry[] }} */
  let { entries } = $props();

  let stats = $derived.by(() => {
    if (entries.length === 0) return null;

    const totalDays = entries.reduce((s, e) => s + e.days, 0);
    const countries = [...new Set(entries.map(e => e.location.country))];
    const cities    = [...new Set(entries.map(e => e.location.city))];

    const countryCounts = {};
    for (const e of entries) countryCounts[e.location.country] = (countryCounts[e.location.country] ?? 0) + 1;
    const topCountry = Object.entries(countryCounts).sort((a, b) => b[1] - a[1])[0];

    const soloCount   = entries.filter(e => e.tripType === 'solo').length;
    const soloPct     = Math.round(soloCount / entries.length * 100);

    const years   = entries.map(e => new Date(e.date).getFullYear());
    const minYear = Math.min(...years);
    const maxYear = Math.max(...years);
    const yearRange = minYear === maxYear ? `${minYear}` : `${minYear} – ${maxYear}`;

    const latest = [...entries].sort((a, b) => b.date.localeCompare(a.date))[0];

    return { totalDays, countries, cities, topCountry, soloCount, soloPct, yearRange, latest, tripCount: entries.length };
  });
</script>

{#if stats}
<div class="summary">

  <p class="eyebrow">My Journey</p>
  <p class="year-range">{stats.yearRange}</p>

  <div class="divider"></div>

  <!-- Big stats -->
  <div class="stat-stack">
    <div class="stat-row">
      <span class="stat-num">{stats.countries.length}</span>
      <span class="stat-lbl">Countries</span>
    </div>
    <div class="stat-row">
      <span class="stat-num">{stats.cities.length}</span>
      <span class="stat-lbl">Cities</span>
    </div>
    <div class="stat-row">
      <span class="stat-num">{stats.totalDays}</span>
      <span class="stat-lbl">Days abroad</span>
    </div>
    <div class="stat-row">
      <span class="stat-num">{stats.tripCount}</span>
      <span class="stat-lbl">Trips</span>
    </div>
  </div>

  <div class="divider"></div>

  <!-- Most visited -->
  <div class="insight">
    <span class="insight-label">Most visited</span>
    <span class="insight-value">{stats.topCountry[0]}</span>
    <span class="insight-sub">{stats.topCountry[1]} {stats.topCountry[1] === 1 ? 'trip' : 'trips'}</span>
  </div>

  <!-- Latest trip -->
  <div class="insight">
    <span class="insight-label">Latest trip</span>
    <span class="insight-value">{stats.latest.location.city}</span>
    <span class="insight-sub">{stats.latest.location.country}</span>
  </div>

  <div class="divider"></div>

  <!-- Trip style bar -->
  <div class="style-section">
    <span class="insight-label">Trip style</span>
    <div class="style-bar">
      <div class="style-fill" style="width: {stats.soloPct}%"></div>
    </div>
    <div class="style-legend">
      <span><span class="dot solo-dot"></span> {stats.soloPct}% Solo</span>
      <span><span class="dot friends-dot"></span> {100 - stats.soloPct}% Friends</span>
    </div>
  </div>

</div>
{/if}

<style>
  .summary {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .eyebrow {
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
  }

  .year-range {
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--text-h);
    letter-spacing: -0.3px;
  }

  .divider {
    height: 1px;
    background: var(--border);
    margin: 20px 0;
  }

  /* Stat stack */
  .stat-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .stat-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }

  .stat-num {
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--text-h);
    letter-spacing: -1px;
    line-height: 1;
  }

  .stat-lbl {
    font-size: var(--text-xs);
    font-weight: 300;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: right;
  }

  /* Insights */
  .insight {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 16px;
  }
  .insight:last-of-type { margin-bottom: 0; }

  .insight-label {
    font-size: var(--text-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
  }

  .insight-value {
    font-size: var(--text-md);
    font-weight: 400;
    color: var(--text-h);
    line-height: 1.2;
  }

  .insight-sub {
    font-size: var(--text-sm);
    font-weight: 300;
    color: var(--text);
  }

  /* Trip style */
  .style-section { display: flex; flex-direction: column; gap: 8px; }

  .style-bar {
    height: 6px;
    border-radius: 99px;
    background: var(--lavender-bg);
    overflow: hidden;
  }
  .style-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-dark), var(--lavender));
    border-radius: 99px;
    transition: width 0.4s ease;
  }

  .style-legend {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    font-weight: 300;
    color: var(--text);
  }

  .dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
  }
  .solo-dot    { background: var(--accent-dark); }
  .friends-dot { background: var(--lavender); }
</style>
