---
import Avatar from './Avatar.astro';
import { getLatestPublishedDispatches } from '../lib/db';
import {
  dispatchSlug, dispatchKindLabel, dispatchKindPigment,
  dispatchExcerptParas, relativeTime,
} from '../lib/format';

interface Props {
  limit?: number;
}

const { limit = 4 } = Astro.props;
const dispatches = getLatestPublishedDispatches(limit);

const featured = dispatches[0] ?? null;
const earlier  = dispatches.slice(1);
---
{featured && (
  <section class="d-card" aria-label="Latest from the studio">
    <header class="d-head">
      <p class="label-sm d-eyebrow">Latest from the studio</p>
      <a href="/dispatches" class="d-all">All dispatches →</a>
    </header>

    <article class="d-featured">
      <header class="d-byline">
        <Avatar id={featured.author_id} name={featured.author_name} size={26} />
        <span class="d-byline-name">{featured.author_name}</span>
        {featured.author_title && <span class="d-byline-title">· {featured.author_title}</span>}
        <span class="d-byline-time label-sm">{relativeTime(featured.published_at ?? featured.created_at)}</span>
        <span class="d-kind-pill" style={`--pill: ${dispatchKindPigment(featured.kind)}`}>
          {dispatchKindLabel(featured.kind)}
        </span>
      </header>

      <h3 class="d-title">{featured.title}</h3>

      {(() => {
        const { lead, trail } = dispatchExcerptParas(featured);
        return (
          <div class="d-excerpt">
            <p class="d-lead">{lead}</p>
            {trail && <p class="d-trail">{trail}</p>}
          </div>
        );
      })()}

      <a href={`/dispatches/${dispatchSlug(featured)}`} class="d-read">Read the full dispatch →</a>
    </article>

    {earlier.length > 0 && (
      <>
        <hr class="d-divider" />
        <p class="label-sm d-eyebrow d-earlier-label">Earlier</p>
        <ul class="d-earlier-list">
          {earlier.map(d => (
            <li class="d-earlier-row">
              <a href={`/dispatches/${dispatchSlug(d)}`} class="d-earlier-link">
                <Avatar id={d.author_id} name={d.author_name} size={22} />
                <span class="d-earlier-title">{d.title}</span>
                <span class="d-earlier-time label-sm">{relativeTime(d.published_at ?? d.created_at)}</span>
              </a>
            </li>
          ))}
        </ul>
      </>
    )}
  </section>
)}

<style>
  .d-card {
    background: var(--surface-card);
    border: 0.5px solid var(--surface-card-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .d-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .d-eyebrow {
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin: 0;
  }

  .d-all {
    font-family: var(--font-sans);
    font-size: var(--text-label-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--pigment-terracotta);
    text-decoration: none;
    border-bottom: none;
  }
  .d-all:hover {
    color: var(--pigment-terracotta);
    border-bottom: none;
    opacity: 0.85;
  }

  .d-featured {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .d-byline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--text-body-sm);
  }
  .d-byline-name {
    font-weight: 600;
    color: var(--on-surface);
  }
  .d-byline-title {
    color: var(--on-surface-variant);
  }
  .d-byline-time {
    color: var(--on-surface-muted);
    letter-spacing: var(--tracking-wide);
    margin-left: auto;
  }

  .d-kind-pill {
    background: color-mix(in oklab, var(--pill) 14%, transparent);
    color: var(--pill);
    padding: 2px 9px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: var(--text-label-sm);
    letter-spacing: var(--tracking-wide);
    font-weight: 600;
  }

  .d-title {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--on-surface);
    margin: 0;
  }

  .d-excerpt {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .d-lead {
    margin: 0;
    color: var(--on-surface);
    line-height: var(--leading-relaxed);
  }
  .d-trail {
    margin: 0;
    color: var(--secondary);
    line-height: var(--leading-relaxed);
  }

  .d-read {
    align-self: flex-start;
    font-family: var(--font-sans);
    font-size: var(--text-label-md);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--pigment-terracotta);
    text-decoration: none;
    border-bottom: none;
  }
  .d-read:hover { color: var(--pigment-terracotta); opacity: 0.85; border-bottom: none; }

  .d-divider {
    height: 1px;
    background: var(--surface-card-border);
    border: none;
    margin: var(--space-3) 0 var(--space-2);
  }

  .d-earlier-label { margin-bottom: var(--space-2); }

  .d-earlier-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .d-earlier-row {
    padding: 0;
  }

  .d-earlier-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--on-surface);
    text-decoration: none;
    border-bottom: none;
    transition: opacity var(--duration-fast) var(--ease-standard);
  }
  .d-earlier-link:hover {
    opacity: 0.7;
    border-bottom: none;
  }

  .d-earlier-title {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-body-md);
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .d-earlier-time {
    color: var(--on-surface-muted);
    letter-spacing: var(--tracking-wide);
  }
</style>
