---
import { getCollection, render } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import VegaChart from '../../components/VegaChart.astro';
import Citations from '../../components/Citations.astro';
import ShareLink from '../../components/ShareLink.astro';
import { getChartSpec, severityUnits, tagModifier } from '../../lib/charts';
import { href } from '../../lib/url';

export async function getStaticPaths() {
  const sins = await getCollection('sins', ({ data }) => !data.draft);
  return sins.map((sin) => ({
    params: { slug: sin.id },
    props: { sin },
  }));
}

const { sin } = Astro.props;
const { Content } = await render(sin);

const badSpec = getChartSpec(sin.data.badChart);
const fixedSpec = getChartSpec(sin.data.fixedChart);

// Canonical, shareable URL for this sin — the thing you paste into a thread.
const pageUrl = new URL(href(`sins/${sin.id}/`), Astro.site).toString();
const ogImage = new URL(href(`og/${sin.id}.png`), Astro.site).toString();
---

<BaseLayout title={`${sin.data.title} — Chart Sins`} description={sin.data.poke} image={ogImage}>
  <article class="wrap sin">
    <nav class="breadcrumb"><a href={href()}>All sins</a> / {sin.data.title}</nav>

    <header class="sin__head">
      <div class="sin__meta">
        <span class={`tag tag--${tagModifier(sin.data.category)}`}>{sin.data.category}</span>
        <span class="severity" aria-label={`Severity ${sin.data.severity} of 5`}>
          <span class="severity__meter" aria-hidden="true">
            {severityUnits(sin.data.severity).map((on) => (
              <span class={`severity__unit${on ? ' severity__unit--on' : ''}`} />
            ))}
          </span>
          Severity {sin.data.severity}/5
        </span>
      </div>
      <h1 class="sin__title expressive-heading">{sin.data.title}</h1>
      <p class="sin__poke">{sin.data.poke}</p>
      <div class="sin__tags">
        {sin.data.tags.map((t) => <span class="tag">{t}</span>)}
      </div>
    </header>

    <div class="compare">
      <div class="panel panel--bad">
        <p class="panel__label">The Sin</p>
        <VegaChart spec={badSpec} title={`Misleading chart: ${sin.data.title}`} />
      </div>
      <div class="panel panel--good">
        <p class="panel__label">The Fix</p>
        <VegaChart spec={fixedSpec} title={`Honest chart: ${sin.data.title}`} />
      </div>
    </div>
    <p class="compare__note">Same numbers, both charts. Only the design changed.</p>

    <div class="prose">
      <Content />
    </div>

    <Citations citations={sin.data.citations} />

    <ShareLink url={pageUrl} />

    <p class="more-refs">
      Building a case? See <a href={href('references/')}>every source we cite →</a>
    </p>
  </article>
</BaseLayout>