import type { ReleaseRow, RepositoryRow } from "../../db/index.ts";
import { formatDate } from "../../lib/formatDate.ts";
import type { SessionUser } from "../../middleware/session.ts";
import {
    markdownToPlaintext,
    renderMarkdown,
} from "../../services/markdown.ts";
import { Layout } from "../layout.tsx";
import { Pagination, type PaginationInfo } from "../Pagination.tsx";
import { RepoHeader } from "../repos/RepoHeader.tsx";
import { RepoNav } from "../repos/RepoNav.tsx";

interface ReleaseListProps {
    user: SessionUser | null;
    repo: RepositoryRow;
    releases: (ReleaseRow & { asset_count: number })[];
    pagination: PaginationInfo;
}

function NotesPreview({ notes }: { notes: string }) {
    const plaintext = markdownToPlaintext(notes);
    return (
        <details class="notes-expand">
            <summary class="notes-toggle">
                <div class="notes-preview" safe>
                    {plaintext}
                </div>
                <span class="notes-toggle-label" />
            </summary>
            <div class="notes-full markdown-body">{renderMarkdown(notes) as "safe"}</div>
        </details>
    );
}

export function ReleaseList({
    user,
    repo,
    releases,
    pagination,
}: ReleaseListProps) {
    return (
        <Layout user={user} title={`Releases — ${repo.name}`}>
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="releases" user={user} />
                <div class="list-header">
                    <h2 class="list-heading">Releases</h2>
                    {user?.isAdmin && (
                        <a
                            href={`/${repo.name}/releases/new`}
                            class="btn btn-primary btn-sm"
                        >
                            New release
                        </a>
                    )}
                </div>
                {releases.length === 0 ? (
                    <div class="empty-state">
                        <p>No releases yet.</p>
                    </div>
                ) : (
                    <ul class="issue-list">
                        {releases.map((release) => (
                            <li class="issue-item">
                                <div class="release-item-header">
                                    <div class="release-item-main">
                                        <a
                                            href={`/${repo.name}/releases/${release.id}`}
                                            class="release-item-title"
                                            style={`view-transition-name: release-title-${release.id}`}
                                            safe
                                        >
                                            {release.name}
                                        </a>
                                        <div class="release-item-meta">
                                            {release.asset_count > 0 && (
                                                <span>
                                                    {release.asset_count} asset
                                                    {release.asset_count !== 1
                                                        ? "s"
                                                        : ""}
                                                </span>
                                            )}
                                            {release.include_source_code ===
                                                1 && (
                                                <span>source archives</span>
                                            )}
                                        </div>
                                    </div>
                                    <div class="release-item-date">
                                        {!!release.tag_name && (
                                            <a
                                                href={`/${repo.name}/tree/${release.tag_name}`}
                                                class="badge"
                                                safe
                                            >
                                                {release.tag_name}
                                            </a>
                                        )}
                                        <time datetime={release.created_at} safe>
                                            {formatDate(release.created_at)}
                                        </time>
                                    </div>
                                </div>
                                {!!release.notes && (
                                    <div class="release-notes-section">
                                        <p class="release-notes-label">
                                            Release Notes
                                        </p>
                                        <NotesPreview notes={release.notes} />
                                    </div>
                                )}
                            </li>
                        ))}
                    </ul>
                )}
                <Pagination {...pagination} />
            </div>
        </Layout>
    );
}