---
import { Image } from 'astro:assets';
import CopyPageButton from './CopyPageButton.astro';
import { getFile } from '../lib/content';
import { formatDate } from '../lib/utils';

const { title, description, file, collection } = Astro.props;

const isEssay = !!file && collection === 'essays';

let byline = null;

const teamImages = import.meta.glob('/src/assets/img/team/*.{png,jpg,jpeg,webp}', {eager: true});

if (isEssay) {
    const fm = file.frontmatter;
    const teamFile = await getFile('team.yaml');
    const team = teamFile?.frontmatter || [];

    const authors = (fm.authors || []).map((name) => {
        const member = team.find((m) => m.name === name);
        const image = member?.image ? (teamImages[member.image]?.default ?? member.image) : undefined;
        return { name, url: member?.url, image };
    });

    const created = fm.created ? (fm.created instanceof Date ? fm.created : new Date(fm.created)) : undefined;
    const modified = fm.modified ? (fm.modified instanceof Date ? fm.modified : new Date(fm.modified)) : undefined;

    const essayRaw = import.meta.glob('/src/content/essays/*.{md,mdx}', { query: '?raw', import: 'default', eager: true });
    let readingMinutes;
    const raw = essayRaw[`/src/content/${file.path}`];
    if (raw) {
        const body = raw.replace(/^---[\s\S]*?---/, '');
        readingMinutes = Math.max(1, Math.round(body.trim().split(/\s+/).length / 250));
    }

    byline = { authors, created, modified, readingMinutes };
}

const showModified = byline?.modified && byline?.created &&
    byline.modified.toDateString() !== byline.created.toDateString();

const primaryAuthor = byline?.authors[0];
---

<header class="not-prose page-header">
    <div class="title-row">
        <h1 set:html={title} />
        {file && (
            <div class="actions">
                <CopyPageButton file={file} />
            </div>
        )}
    </div>

    {byline ? (
        <div class="byline">
            {primaryAuthor?.image ? (
                <div class="avatar">
                    <Image
                        src={primaryAuthor.image}
                        alt=""
                        width={80}
                        height={80}
                        loading="eager"
                    />
                </div>
            ) : byline.authors.length > 0 && (
                <div class="avatar placeholder">
                    <i class="icon-[mdi--account-outline]" aria-hidden="true"></i>
                </div>
            )}

            <div class:list={["meta", byline.authors.length > 0 && "has-avatar"]}>
                {byline.authors.length > 0 && (
                    <span class="authors">
                        {byline.authors.map((author, i) => (
                            <>
                                {i > 0 && ", "}
                                {author.url ? (
                                    <a href={author.url}
                                       target="_blank"
                                       rel="author noopener noreferrer">
                                        {author.name}
                                    </a>
                                ) : (
                                    <span>{author.name}</span>
                                )}
                            </>
                        ))}
                    </span>
                )}

                {byline.created && (
                    <span class="dates">
                        {byline.readingMinutes && (
                            <span>{byline.readingMinutes} min read · </span>
                        )}
                        <time datetime={byline.created.toISOString().slice(0, 10)}>
                            {formatDate(byline.created, 'long')}
                        </time>
                        {showModified && (
                            <span>
                                {" · updated "}
                                <time datetime={byline.modified.toISOString().slice(0, 10)}>
                                    {formatDate(byline.modified, 'long')}
                                </time>
                            </span>
                        )}
                    </span>
                )}
            </div>
        </div>
    ) : description && (
        <p class="description">{description}</p>
    )}
</header>

<style>
    .page-header {
        margin-top: 1rem;
        margin-bottom: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.875rem;

        @media (min-width: 640px) {
            margin-top: 1.5rem;
            margin-bottom: 2rem;
            gap: 1rem;
        }
    }

    .title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        flex-wrap: wrap;

        @media (min-width: 640px) { gap: 0.75rem; }
    }

    h1 {
        flex: 1;
        min-width: 0;
        font-family: var(--font-chicago);
        font-size: 1.5rem;
        font-weight: 700;
        color: light-dark(var(--color-neutral-900), var(--color-neutral-100));

        @media (min-width: 640px) { font-size: 2em; line-height: 3rem; }
    }

    .actions {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        flex-shrink: 0;

        @media (min-width: 640px) { gap: 0.5rem; }
    }

    .byline {
        display: flex;
        align-items: center;
    }

    .avatar {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 9999px;
        overflow: hidden;
        flex-shrink: 0;
        background: light-dark(var(--color-neutral-200), var(--color-neutral-800));

        :global(img) {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        &.placeholder {
            display: flex;
            align-items: center;
            justify-content: center;

            i {
                width: 1.25rem;
                height: 1.25rem;
                color: light-dark(var(--color-neutral-400), var(--color-neutral-600));
            }
        }
    }

    .meta {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;

        &.has-avatar { margin-inline-start: 1rem; }
    }

    .authors {
        font-family: var(--font-chicago);
        font-size: 0.875rem;
        color: light-dark(var(--color-neutral-900), var(--color-neutral-100));

        a {
            text-underline-offset: 0.25em;

            @media (hover: hover) {
                &:hover {
                    color: light-dark(var(--color-blue-600), var(--color-blue-300));
                    text-decoration: underline;
                }
            }

            &:is(:focus-visible, :active) {
                color: light-dark(var(--color-blue-600), var(--color-blue-300));
                text-decoration: underline;
            }
        }
    }

    .dates {
        font-size: 0.75rem;
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
        color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
    }

    .description {
        font-weight: 300;
        font-size: 1rem;
        color: light-dark(var(--color-neutral-650), var(--color-neutral-350));

        @media (min-width: 640px) { font-size: 1.125rem; }
        @media (min-width: 1024px) { font-size: 1.25rem; }
    }
</style>
