dawarich/app/views/users/digests/show.html.erb

<% content_for :title, "#{@digest.year} Year in Review" %>

<div class="max-w-xl mx-auto my-5">
  <!-- Header -->
  <div class="hero text-white rounded-lg shadow-lg mb-8" style="background: linear-gradient(135deg, #0f766e, #0284c7);">
    <div class="hero-content text-center py-12 relative w-full">
      <div class="max-w-lg">
        <h1 class="text-4xl font-bold"><%= @digest.year %> Year in Review</h1>
        <p class="py-4">Your journey, by the numbers</p>
        <button class="btn btn-outline btn-sm text-neutral border-neutral hover:bg-white hover:text-primary"
                onclick="sharing_modal.showModal()">
          <%= icon 'share' %> Share
        </button>
      </div>
    </div>
  </div>

  <!-- Distance Card -->
  <div class="card bg-base-200 shadow-xl mb-8">
    <div class="card-body text-center items-center">
      <div class="stat-title flex items-center gap-2">
        <%= icon 'map' %> Distance Traveled
      </div>
      <div class="stat-value text-primary text-4xl my-4">
        <%= distance_with_unit(@digest.distance, @distance_unit) %>
      </div>
      <p class="text-gray-600"><%= distance_comparison_text(@digest.distance) %></p>
      <% if @digest.yoy_distance_change %>
        <p class="mt-2 font-semibold <%= yoy_change_class(@digest.yoy_distance_change) %>">
          <%= yoy_change_text(@digest.yoy_distance_change) %> compared to <%= @digest.previous_year %>
        </p>
      <% end %>
    </div>
  </div>

  <!-- Stats Row -->
  <div class="stats shadow w-full mb-8 bg-base-200">
    <div class="stat place-items-center">
      <div class="stat-title flex items-center gap-1">
        <%= icon 'globe' %> Countries
      </div>
      <div class="stat-value text-secondary"><%= @digest.countries_count %></div>
      <div class="stat-desc font-medium flex items-center gap-1 <%= @digest.first_time_countries.any? ? 'text-success' : 'invisible' %>">
        <%= icon 'star' %> <%= @digest.first_time_countries.any? ? "#{@digest.first_time_countries.count} first time" : '0 first time' %>
      </div>
    </div>

    <div class="stat place-items-center">
      <div class="stat-title flex items-center gap-1">
        <%= icon 'building' %> Cities
      </div>
      <div class="stat-value text-accent"><%= @digest.cities_count %></div>
      <div class="stat-desc font-medium flex items-center gap-1 <%= @digest.first_time_cities.any? ? 'text-success' : 'invisible' %>">
        <%= icon 'star' %> <%= @digest.first_time_cities.any? ? "#{@digest.first_time_cities.count} first time" : '0 first time' %>
      </div>
    </div>
  </div>

  <!-- First Time Visits -->
  <% if @digest.first_time_countries.any? || @digest.first_time_cities.any? %>
    <div class="card bg-base-200 shadow-xl mb-8">
      <div class="card-body text-center items-center">
        <h2 class="card-title">
          <%= icon 'star' %> First Time Visits
        </h2>

        <% if @digest.first_time_countries.any? %>
          <div class="mb-4">
            <h3 class="font-semibold mb-2">New Countries</h3>
            <div class="flex flex-wrap gap-2 justify-center">
              <% @digest.first_time_countries.each do |country| %>
                <span class="badge badge-success badge-lg"><%= country %></span>
              <% end %>
            </div>
          </div>
        <% end %>

        <% if @digest.first_time_cities.any? %>
          <div>
            <h3 class="font-semibold mb-2">New Cities</h3>
            <div class="flex flex-wrap gap-2 justify-center">
              <% @digest.first_time_cities.take(10).each do |city| %>
                <span class="badge badge-outline"><%= city %></span>
              <% end %>
              <% if @digest.first_time_cities.count > 10 %>
                <span class="badge badge-ghost">+<%= @digest.first_time_cities.count - 10 %> more</span>
              <% end %>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  <% end %>

  <!-- Monthly Distance Chart -->
  <% if @digest.monthly_distances.present? %>
    <div class="card bg-base-200 shadow-xl mb-8">
      <div class="card-body text-center items-center">
        <h2 class="card-title">
          <%= icon 'activity' %> Your Year, Month by Month
        </h2>
        <div class="w-full h-64 bg-base-100 rounded-lg p-4">
          <%= column_chart(
            @digest.monthly_distances.sort.map { |month, distance_meters|
              [Date::ABBR_MONTHNAMES[month.to_i], Users::Digest.convert_distance(distance_meters.to_i, @distance_unit).round]
            },
            height: '250px',
            suffix: " #{@distance_unit}",
            xtitle: 'Month',
            ytitle: 'Distance',
            colors: [
              '#397bb5', '#5A4E9D', '#3B945E',
              '#7BC96F', '#FFD54F', '#FFA94D',
              '#FF6B6B', '#FF8C42', '#C97E4F',
              '#8B4513', '#5A2E2E', '#265d7d'
            ]
          ) %>
        </div>
      </div>
    </div>
  <% end %>

  <!-- Top Countries by Time Spent -->
  <% if @digest.top_countries_by_time.any? %>
    <div class="card bg-base-200 shadow-xl mb-8">
      <div class="card-body text-center items-center">
        <h2 class="card-title">
          <%= icon 'map-pin' %> Where You Spent the Most Time
        </h2>
        <div class="space-y-4 w-full">
          <% @digest.top_countries_by_time.take(5).each_with_index do |country, index| %>
            <div class="flex justify-between items-center p-3 bg-base-100 rounded-lg">
              <div class="flex items-center gap-3">
                <span class="badge badge-lg <%= ['badge-primary', 'badge-secondary', 'badge-accent', 'badge-info', 'badge-success'][index] %>">
                  <%= index + 1 %>
                </span>
                <span class="font-semibold">
                  <span class="mr-1"><%= country_flag(country['name']) %></span>
                  <%= country['name'] %>
                </span>
              </div>
              <span class="text-gray-600"><%= format_time_spent(country['minutes']) %></span>
            </div>
          <% end %>
        </div>
      </div>
    </div>
  <% end %>

  <!-- All Countries & Cities -->
  <div class="card bg-base-200 shadow-xl mb-8">
    <div class="card-body text-center items-center">
      <h2 class="card-title">
        <%= icon 'earth' %> Countries & Cities
      </h2>
      <div class="space-y-4 w-full">
        <% if @digest.toponyms.present? %>
          <% max_cities = @digest.toponyms.map { |country| country['cities']&.length || 0 }.max %>
          <% progress_colors = ['progress-primary', 'progress-secondary', 'progress-accent', 'progress-info', 'progress-success', 'progress-warning'] %>

          <% @digest.toponyms.each_with_index do |country, index| %>
            <% cities_count = country['cities']&.length || 0 %>
            <% progress_value = max_cities&.positive? ? (cities_count.to_f / max_cities * 100).round : 0 %>
            <% color_class = progress_colors[index % progress_colors.length] %>

            <div class="space-y-2">
              <div class="flex justify-between items-center">
                <span class="font-semibold">
                  <span class="mr-1"><%= country_flag(country['country']) %></span>
                  <%= country['country'] %>
                </span>
                <span class="text-sm">
                  <%= pluralize(cities_count, 'city') %>
                </span>
              </div>
              <progress class="progress <%= color_class %> w-full" value="<%= progress_value %>" max="100"></progress>
            </div>
          <% end %>
        <% else %>
          <p class="text-gray-500">No location data available</p>
        <% end %>
      </div>
    </div>
  </div>

  <!-- All-Time Stats Footer -->
  <div class="card bg-slate-800 text-white shadow-xl mb-8">
    <div class="card-body text-center items-center">
      <h2 class="card-title text-white">
        <%= icon 'trophy' %> All-Time Stats
      </h2>
      <div class="grid grid-cols-2 gap-4 mt-4">
        <div class="stat place-items-center">
          <div class="stat-title text-gray-400">Countries visited</div>
          <div class="stat-value text-white"><%= @digest.total_countries_all_time %></div>
        </div>
        <div class="stat place-items-center">
          <div class="stat-title text-gray-400">Cities explored</div>
          <div class="stat-value text-white"><%= @digest.total_cities_all_time %></div>
        </div>
      </div>
      <div class="stat place-items-center mt-2">
        <div class="stat-title text-gray-400">Total distance</div>
        <div class="stat-value text-white"><%= distance_with_unit(@digest.total_distance_all_time, @distance_unit) %></div>
      </div>
    </div>
  </div>

  <!-- Action Buttons -->
  <div class="flex flex-wrap gap-4 justify-center">
    <%= link_to users_digests_path, class: 'btn btn-outline' do %>
      Back to All Digests
    <% end %>
    <button class="btn btn-outline" onclick="sharing_modal.showModal()">
      <%= icon 'share' %> Share
    </button>
  </div>
</div>

<!-- Sharing Modal -->
<dialog id="sharing_modal" class="modal">
  <div class="modal-box">
    <form method="dialog">
      <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
    </form>

    <h3 class="font-bold text-lg mb-4 flex items-center gap-2">
      <%= icon 'link' %> Sharing Settings
    </h3>

    <div data-controller="sharing-modal"
         data-sharing-modal-url-value="<%= sharing_users_digest_path(year: @digest.year) %>">

      <!-- Enable/Disable Sharing Toggle -->
      <div class="form-control mb-4">
        <label class="label cursor-pointer">
          <span class="label-text font-medium">Enable public access</span>
          <input type="checkbox"
                 name="enabled"
                 <%= 'checked' if @digest.sharing_enabled? %>
                 class="toggle toggle-primary"
                 data-action="change->sharing-modal#toggleSharing"
                 data-sharing-modal-target="enableToggle" />
        </label>
        <div class="label">
          <span class="label-text-alt text-gray-500">Allow others to view this year-end digest • Auto-saves on change</span>
        </div>
      </div>

      <!-- Expiration Settings (shown when enabled) -->
      <div data-sharing-modal-target="expirationSettings"
           class="<%= 'hidden' unless @digest.sharing_enabled? %>">

        <div class="form-control mb-4">
          <label class="label">
            <span class="label-text font-medium">Link expiration</span>
          </label>
          <select name="expiration"
                  class="select select-bordered w-full"
                  data-sharing-modal-target="expirationSelect"
                  data-action="change->sharing-modal#expirationChanged">
            <%= options_for_select([
                  ['1 hour', '1h'],
                  ['12 hours', '12h'],
                  ['24 hours', '24h'],
                  ['1 week', '1w'],
                  ['1 month', '1m']
                ], @digest&.sharing_settings&.dig('expiration') || '24h') %>
          </select>
        </div>

        <!-- Sharing Link Display -->
        <div class="form-control mb-4">
          <label class="label">
            <span class="label-text font-medium">Sharing link</span>
          </label>
          <div class="join w-full">
            <input type="text"
                   readonly
                   class="input input-bordered join-item flex-1"
                   data-sharing-modal-target="sharingLink"
                   value="<%= @digest.sharing_enabled? ? shared_users_digest_url(@digest.sharing_uuid) : '' %>" />
            <button type="button"
                    class="btn btn-outline join-item"
                    data-action="click->sharing-modal#copyLink">
              <%= icon 'copy' %> Copy
            </button>
          </div>
          <div class="label">
            <span class="label-text-alt text-gray-500">Share this link to allow others to view your year-end digest</span>
          </div>
        </div>
      </div>

      <!-- Privacy Notice -->
      <div class="alert alert-info mb-4">
        <%= icon 'info' %>
        <div>
          <h3 class="font-bold">Privacy Protection</h3>
          <div class="text-sm">
            • Exact coordinates are hidden<br>
            • Personal information is not included
          </div>
        </div>
      </div>

      <!-- Form Actions -->
      <div class="modal-action">
        <button type="button"
                class="btn btn-primary"
                onclick="sharing_modal.close()">
          Done
        </button>
      </div>
    </div>
  </div>
</dialog>