---
import BaseLayout from '../layouts/BaseLayout.astro';
import { parseChangelog } from '../lib/parse-changelog';

const entries = parseChangelog();

const sectionColors: Record<string, string> = {
  added: 'text-positive border-positive/30 bg-positive/5',
  changed: 'text-primary border-primary/30 bg-primary/5',
  fixed: 'text-warning border-warning/30 bg-warning/5',
  security: 'text-danger border-danger/30 bg-danger/5',
  'backwards compatible': 'text-accent border-accent/30 bg-accent/5',
};

const sectionLabels: Record<string, string> = {
  added: 'Added',
  changed: 'Changed',
  fixed: 'Fixed',
  security: 'Security',
  'backwards compatible': 'Backwards Compatible',
};
---

<BaseLayout title="Changelog — pr-to-spec" description="All notable changes to pr-to-spec, following Keep a Changelog format.">
  <section class="max-w-4xl mx-auto px-6 pt-16 pb-8">
    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-border bg-surface-2/50 text-xs font-mono text-text-2 mb-4">
      Changelog
    </div>
    <h1 class="text-3xl md:text-4xl font-bold tracking-tight mb-4">What's New</h1>
    <p class="text-lg text-text-2">
      All notable changes, following <a href="https://keepachangelog.com" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">Keep a Changelog</a>.
    </p>
  </section>

  <section class="max-w-4xl mx-auto px-6 pb-16">
    <div class="space-y-8">
      {entries.map((entry, i) => (
        <article class:list={[
          'rounded-xl border bg-card p-6 md:p-8',
          i === 0 ? 'border-primary/40 ring-1 ring-primary/10' : 'border-border',
        ]}>
          <div class="flex flex-wrap items-center gap-3 mb-6">
            <h2 class="text-xl font-bold font-mono">
              {entry.version === 'Unreleased' ? 'Unreleased' : `v${entry.version}`}
            </h2>
            {entry.date && (
              <span class="text-sm text-text-3 font-mono">{entry.date}</span>
            )}
            {i === 0 && (
              <span class="px-2 py-0.5 rounded text-xs font-semibold bg-primary/10 text-primary">Latest</span>
            )}
          </div>

          <div class="space-y-5">
            {Object.entries(entry.sections).map(([key, items]) => (
              <div>
                <h3 class:list={[
                  'inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider mb-3',
                  sectionColors[key]?.split(' ')[0] || 'text-text-2',
                ]}>
                  <span class:list={[
                    'w-1.5 h-1.5 rounded-full',
                    sectionColors[key]?.split(' ')[0]?.replace('text-', 'bg-') || 'bg-text-2',
                  ]}></span>
                  {sectionLabels[key] || key}
                </h3>
                <ul class="space-y-1.5">
                  {(items as string[]).map(item => (
                    <li class="text-sm text-text-2 pl-4 relative before:content-[''] before:absolute before:left-0 before:top-2.5 before:w-1 before:h-1 before:rounded-full before:bg-text-3">
                      <Fragment set:html={item
                        .replace(/\*\*([^*]+)\*\*/g, '<strong class="text-text font-medium">$1</strong>')
                        .replace(/`([^`]+)`/g, '<code class="px-1 py-0.5 rounded bg-surface-2 text-primary-light text-xs font-mono">$1</code>')
                      } />
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </article>
      ))}
    </div>
  </section>
</BaseLayout>
