<script>
  import { CONTINENTS, getContinent, continentTotals } from './continents.js';
  import { getSelected, getTotalCount } from '../layout/selection.svelte.js';
  import worldData from 'world-atlas/countries-50m.json';

  let collapsed = $state(false);

  const continentColors = {
    'Europe': '#3b82f6',
    'Asia': '#ef4444',
    'Africa': '#f97316',
    'N. America': '#22c55e',
    'S. America': '#eab308',
    'Oceania': '#a855f7'
  };

  const countryNameById = $derived.by(() => {
    const map = { XK: 'Kosovo' };
    for (const g of worldData.objects.countries.geometries) {
      map[g.id] = g.properties?.name || g.id;
    }
    return map;
  });

  let visitedCountries = $derived(
    [...getSelected()].map(id => countryNameById[id]).filter(Boolean).sort()
  );

  let visitedByContinent = $derived.by(() => {
    const map = {};
    for (const id of getSelected()) {
      const cont = getContinent(id);
      if (cont) {
        if (!map[cont]) map[cont] = [];
        map[cont].push(countryNameById[id] || id);
      }
    }
    for (const cont of Object.keys(map)) {
      map[cont].sort();
    }
    return map;
  });

  let counts = $derived.by(() => {
    const c = {};
    for (const cont of CONTINENTS) c[cont] = 0;
    for (const id of getSelected()) {
      const cont = getContinent(id);
      if (cont) c[cont]++;
    }
    return c;
  });

  let total = $derived(getSelected().size);
  let grandTotal = $derived(Object.values(continentTotals).reduce((a, b) => a + b, 0));
  let pct = $derived(grandTotal > 0 ? Math.round(total / grandTotal * 100) : 0);

  let segments = $derived.by(() => {
    if (total === 0) return [];
    const segs = [];
    let deg = 0;
    for (const cont of CONTINENTS) {
      const angle = Math.min(counts[cont] / total * 360, 359.99);
      if (angle > 0) {
        const startDeg = deg;
        const endDeg = deg + angle;
        const midDeg = (startDeg + endDeg) / 2;
        const rad = (midDeg - 90) * Math.PI / 180;
        const sr = (startDeg - 90) * Math.PI / 180;
        const er = (endDeg - 90) * Math.PI / 180;
        const cx = 90, cy = 90, outerR = 65, innerR = 30;
        const x1 = cx + outerR * Math.cos(sr);
        const y1 = cy + outerR * Math.sin(sr);
        const x2 = cx + outerR * Math.cos(er);
        const y2 = cy + outerR * Math.sin(er);
        const x3 = cx + innerR * Math.cos(er);
        const y3 = cy + innerR * Math.sin(er);
        const x4 = cx + innerR * Math.cos(sr);
        const y4 = cy + innerR * Math.sin(sr);
        const largeArc = angle > 180 ? 1 : 0;
        const path = `M ${x1} ${y1} A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2} L ${x3} ${y3} A ${innerR} ${innerR} 0 ${largeArc} 0 ${x4} ${y4} Z`;
        const lx = cx + 82 * Math.cos(rad);
        const ly = cy + 82 * Math.sin(rad);
        segs.push({ cont, color: continentColors[cont], path, lx, ly, angle });
        deg += angle;
      }
    }
    return segs;
  });
</script>

<div class="panel" class:collapsed>
  <button class="collapse-btn" onclick={() => collapsed = !collapsed} data-tip={collapsed ? 'see statistics' : 'close statistics'}>
    {collapsed ? '◀' : '▶'}
  </button>

  {#if !collapsed}
    <div class="panel-content">
      <h2 class="headline">your statistics</h2>

      <span class="bar-label">visited countries</span>
      <div class="total-bar-wrap">
        <div class="total-bar-bg">
          <div class="total-bar-fill" style="width: {pct}%"></div>
        </div>
        <span class="total-bar-text">{total} / {grandTotal}</span>
      </div>

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

      <span class="bar-label">by continent</span>
      {#each CONTINENTS as continent}
        {@const contTotal = continentTotals[continent]}
        <div class="row tooltip-wrap">
          <span class="dot" style="background: {continentColors[continent]}"></span>
          <span class="label">{continent}</span>
          <span class="value">{counts[continent]}<span class="total">/{contTotal}</span></span>
          {#if visitedByContinent[continent]?.length > 0}
            <div class="tooltip-list">
              {#each visitedByContinent[continent].slice(0, 10) as country}
                <span class="tooltip-item">{country}</span>
              {/each}
              {#if visitedByContinent[continent].length > 10}
                <span class="tooltip-item tooltip-more">...</span>
              {/if}
            </div>
          {/if}
        </div>
      {/each}

      <div class="donut-wrap">
        {#if segments.length > 0}
          <svg viewBox="0 0 180 180" class="donut-svg">
            {#each segments as seg}
              <g class="seg-group">
                <path d={seg.path} fill={seg.color} />
                <text x={seg.lx} y={seg.ly} text-anchor="middle" dominant-baseline="middle" class="donut-label" style="font-size: {seg.angle < 20 ? 12 : 15}px">{seg.cont}</text>
              </g>
            {/each}
            <circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
          </svg>
        {:else}
          <svg viewBox="0 0 180 180" class="donut-svg">
            <circle cx="90" cy="90" r="65" fill="var(--border)" />
            <circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
          </svg>
        {/if}
      </div>

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

      <div class="disclaimer">Contains all UN countries, Kosovo, Hong Kong and Taiwan</div>
    </div>
  {/if}
</div>

<style>
  .panel {
    flex: 0 0 min(360px, 25vw);
    background: var(--bg-raised);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: row;
    font-family: var(--sans);
    transition: flex-basis 0.25s ease;
  }

  .panel.collapsed {
    flex: 0 0 28px;
    border-left: none;
  }

  .panel-content {
    flex: 1;
    padding: 24px 28px;
    overflow-y: auto;
    min-width: 0;
  }

  .collapse-btn {
    flex: 0 0 auto;
    align-self: flex-start;
    background: var(--accent-bg);
    border: none;
    border-radius: 0 8px 8px 0;
    padding: 14px 5px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--accent);
    transition: background 0.15s ease, padding 0.15s ease;
    margin-top: 24px;
    position: relative;
  }

  .collapse-btn:hover {
    background: var(--lavender-bg);
    padding-right: 8px;
  }

  .collapse-btn::after {
    content: attr(data-tip);
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--text-h);
    color: var(--bg-raised);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 300;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .collapse-btn:hover::after {
    opacity: 1;
  }

  .headline {
    font-family: var(--heading);
    font-size: var(--text-sm);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin: 0 0 20px 0;
  }

  .bar-label {
    font-family: var(--sans);
    font-size: var(--text-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-sub);
    display: block;
    margin-bottom: 8px;
  }

  .total-bar-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
  }

  .total-bar-bg {
    flex: 1;
    height: 18px;
    background: var(--accent-bg);
    border-radius: 10px;
    overflow: hidden;
  }

  .total-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-dark), var(--lavender));
    border-radius: 10px;
    transition: width 0.3s ease;
    min-width: 0;
  }

  .total-bar-text {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-h);
    white-space: nowrap;
  }

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

  .row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
  }

  .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .label {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: 300;
    color: var(--text);
  }

  .value {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-h);
  }

  .total {
    font-weight: 400;
    color: var(--text-sub);
    font-size: var(--text-xs);
  }

  .donut-wrap {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }

  .donut-svg {
    width: 160px;
    height: 160px;
    filter: drop-shadow(0 2px 8px rgba(99,102,241,0.15));
  }

  .donut-label {
    fill: var(--text-h);
    font-family: var(--sans);
    font-weight: 300;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .seg-group:hover .donut-label {
    opacity: 1;
  }

  .tooltip-wrap {
    position: relative;
  }

  .tooltip-list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--text-h);
    color: var(--bg-raised);
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    z-index: 20;
    white-space: nowrap;
    min-width: 120px;
  }

  .tooltip-wrap:hover .tooltip-list {
    display: block;
  }

  .tooltip-item {
    display: block;
    padding: 2px 0;
  }

  .tooltip-item + .tooltip-item {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .disclaimer {
    font-size: var(--text-xs);
    color: var(--text-sub);
    line-height: 1.5;
    text-align: center;
  }
</style>
