<Layouts.flash_group flash={@flash} />

<div class="min-h-screen bg-(--crit-bg-page) text-(--crit-fg-primary) font-sans flex flex-col">
  <Layouts.dashboard_header
    authenticated={@authenticated}
    current_scope={@current_scope}
    show_overview_link={true}
    current_page={:overview}
    orgs={assigns[:orgs] || []}
  />

  <div class="max-w-7xl mx-auto w-full px-8 my-10 max-sm:px-4">
    <div class="flex justify-between items-baseline mb-6 pb-4 border-b border-(--crit-border)">
      <h1 class="text-3xl font-extrabold tracking-tight">Overview</h1>
      <span class="text-xs text-(--crit-fg-muted) max-sm:hidden">Last 30 days</span>
    </div>

    <%!-- Stats cards --%>
    <%!-- Desktop: 3 separate cards. Mobile: single unified strip with dividers. --%>
    <div class="sm:grid sm:grid-cols-3 sm:gap-4 hidden">
      <div class="border border-(--crit-border) bg-(--crit-bg-card) rounded-lg p-5">
        <div class="text-xs uppercase tracking-wider text-(--crit-fg-muted)">Reviews</div>
        <div class="text-3xl font-bold text-(--crit-fg-primary) mt-1 tabular-nums">
          {@stats.total_reviews}
        </div>
        <div class="text-xs text-(--crit-green) mt-1">
          +{@stats.reviews_this_week} this week
        </div>
      </div>
      <div class="border border-(--crit-border) bg-(--crit-bg-card) rounded-lg p-5">
        <div class="text-xs uppercase tracking-wider text-(--crit-fg-muted)">Comments</div>
        <div class="text-3xl font-bold text-(--crit-fg-primary) mt-1 tabular-nums">
          {@stats.total_comments}
        </div>
        <div class="text-xs text-(--crit-fg-muted) mt-1">
          ~{Float.round(@stats.avg_comments_per_review, 1)} per review
        </div>
      </div>
      <div class="border border-(--crit-border) bg-(--crit-bg-card) rounded-lg p-5">
        <div class="text-xs uppercase tracking-wider text-(--crit-fg-muted)">Files</div>
        <div class="text-3xl font-bold text-(--crit-fg-primary) mt-1 tabular-nums">
          {@stats.total_files}
        </div>
        <div class="text-xs text-(--crit-fg-muted) mt-1">
          {format_bytes(@stats.total_storage_bytes)} total
        </div>
      </div>
    </div>
    <%!-- Mobile strip --%>
    <div class="flex sm:hidden border border-(--crit-border) bg-(--crit-bg-card) rounded-lg overflow-hidden">
      <div class="flex-1 px-4 py-3">
        <div class="text-xs uppercase tracking-wider text-(--crit-fg-muted) mb-1">Reviews</div>
        <div class="text-2xl font-bold text-(--crit-fg-primary) tabular-nums">
          {@stats.total_reviews}
        </div>
        <div class="text-xs text-(--crit-green) mt-0.5">+{@stats.reviews_this_week} wk</div>
      </div>
      <div class="w-px bg-(--crit-border)"></div>
      <div class="flex-1 px-4 py-3">
        <div class="text-xs uppercase tracking-wider text-(--crit-fg-muted) mb-1">Comments</div>
        <div class="text-2xl font-bold text-(--crit-fg-primary) tabular-nums">
          {@stats.total_comments}
        </div>
        <div class="text-xs text-(--crit-fg-muted) mt-0.5">
          ~{Float.round(@stats.avg_comments_per_review, 1)}/review
        </div>
      </div>
      <div class="w-px bg-(--crit-border)"></div>
      <div class="flex-1 px-4 py-3">
        <div class="text-xs uppercase tracking-wider text-(--crit-fg-muted) mb-1">Files</div>
        <div class="text-2xl font-bold text-(--crit-fg-primary) tabular-nums">
          {@stats.total_files}
        </div>
        <div class="text-xs text-(--crit-fg-muted) mt-0.5">
          {format_bytes(@stats.total_storage_bytes)}
        </div>
      </div>
    </div>

    <%!-- Activity chart --%>
    <div class="border border-(--crit-border) bg-(--crit-bg-card) rounded-lg p-5 mt-4">
      <div class="text-xs uppercase tracking-wider text-(--crit-fg-muted) mb-3">
        Activity &middot; Last 30 days
      </div>
      <div class="flex items-end gap-[3px] h-16">
        <div
          :for={{_date, count} <- @chart_data}
          class="flex-1 rounded-sm min-h-[2px]"
          style={"height: #{if @max_count > 0, do: max(round(count / @max_count * 100), 3), else: 3}%; background: color-mix(in srgb, var(--crit-brand) #{if @max_count > 0, do: max(round(count / @max_count * 100), 15), else: 15}%, transparent);"}
          title={"#{count} reviews"}
        />
      </div>
    </div>

    <%!-- Review list or login prompt --%>
    <%= if not @authenticated do %>
      <div
        id="login"
        class="border border-(--crit-border) bg-(--crit-bg-card) rounded-lg p-8 mt-6 text-center"
      >
        <div class="text-(--crit-fg-muted) text-sm mb-4">
          <.icon name="hero-lock-closed" class="size-4 inline-block mr-1 -mt-0.5" />
          Sign in to view and manage reviews
        </div>
        <Layouts.sign_in_button return_to="/overview" />
      </div>
    <% else %>
      <div class="mt-10 pt-6 border-t border-(--crit-border)">
        <div class="flex justify-between items-baseline mb-6">
          <h2 class="text-2xl font-extrabold tracking-tight">
            All Reviews
            <span class="text-(--crit-fg-muted) font-normal ml-2">{@review_count}</span>
          </h2>
          <span class="text-xs text-(--crit-fg-muted) max-sm:hidden">
            Sorted by recent activity
          </span>
        </div>

        <%= if @review_count == 0 do %>
          <div class="border border-(--crit-border) bg-(--crit-bg-card) rounded-lg p-12 text-center text-(--crit-fg-muted) text-sm">
            No reviews yet. Share a review from the Crit CLI to see it here.
          </div>
        <% else %>
          <div
            id="reviews-list"
            class="flex flex-col gap-7"
            phx-update="stream"
            phx-hook=".SnippetHighlight"
          >
            <script :type={Phoenix.LiveView.ColocatedHook} name=".SnippetHighlight">
              import hljs from "highlight.js"
              export default {
                mounted() { this.run() },
                updated() { this.run() },
                run() {
                  this.el.querySelectorAll('[data-snippet-line]:not([data-hl])').forEach(el => {
                    const lang = el.dataset.lang
                    if (lang && hljs.getLanguage(lang)) {
                      try {
                        el.innerHTML = hljs.highlight(el.textContent, { language: lang, ignoreIllegals: true }).value
                      } catch (_) {}
                    }
                    el.setAttribute('data-hl', '1')
                  })
                }
              }
            </script>
            <article
              :for={{dom_id, review} <- @streams.reviews}
              id={dom_id}
              class="group"
            >
              <div class="mb-2 px-0.5">
                <.review_listing_header
                  path={review.first_file_path}
                  last_activity_at={review.last_activity_at}
                  file_count={review.file_count}
                  comment_count={review.comment_count}
                  link_to={~p"/r/#{review.token}"}
                  author={
                    if review.author_name || review.author_email || review.author_avatar_url do
                      %{
                        name: review.author_name,
                        email: review.author_email,
                        avatar_url: review.author_avatar_url
                      }
                    end
                  }
                />
              </div>
              <.review_snippet path={review.first_file_path} content={review.first_file_content} />
            </article>
          </div>
        <% end %>
      </div>
    <% end %>
  </div>
</div>
