import type {
    ReleaseAssetRow,
    ReleaseRow,
    RepositoryRow,
} from "../../db/index.ts";
import type { SessionUser } from "../../middleware/session.ts";
import { Layout } from "../layout.tsx";
import { RepoHeader } from "../repos/RepoHeader.tsx";
import { RepoNav } from "../repos/RepoNav.tsx";

function formatBytes(bytes: number): string {
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

interface SourceArchive {
    format: string;
    filename: string;
    size: number;
}

interface ReleaseDetailProps {
    user: SessionUser | null;
    repo: RepositoryRow;
    release: ReleaseRow;
    notesHtml: string;
    assets: ReleaseAssetRow[];
    sourceArchives: SourceArchive[];
    sourceArchivesPending?: boolean;
}

export function ReleaseDetail({
    user,
    repo,
    release,
    notesHtml,
    assets,
    sourceArchives,
    sourceArchivesPending,
}: ReleaseDetailProps) {
    const hasDownloads =
        sourceArchives.length > 0 || assets.length > 0 || sourceArchivesPending;

    return (
        <Layout
            user={user}
            title={`${release.name || release.tag_name} — ${repo.name}`}
        >
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="releases" user={user} />
                <div class="release-detail">
                    <div class="release-header">
                        <div class="release-item-header">
                            <div class="release-item-main">
                                <h2
                                    class="page-title"
                                    style={`view-transition-name: release-title-${release.id}`}
                                >
                                    {release.name || release.tag_name}
                                </h2>
                                <div class="release-item-meta">
                                    <a
                                        href={`/${repo.name}/tree/${release.commit_hash}`}
                                        class="monospace"
                                    >
                                        {release.commit_hash.slice(0, 8)}
                                    </a>
                                </div>
                            </div>
                            <div class="release-item-date">
                                <span class="badge">{release.tag_name}</span>
                                <time datetime={release.created_at}>
                                    {new Date(
                                        release.created_at,
                                    ).toLocaleDateString()}
                                </time>
                            </div>
                        </div>
                    </div>

                    {notesHtml && (
                        <div class="markdown-body release-notes">
                            {notesHtml}
                        </div>
                    )}

                    {hasDownloads && (
                        <div class="release-assets">
                            <h3 class="release-assets-heading">Downloads</h3>
                            <ul class="asset-list">
                                {assets.map((asset) => (
                                    <li class="asset-item">
                                        <a
                                            href={`/${repo.name}/releases/${release.id}/assets/${asset.filename}`}
                                            class="asset-name"
                                        >
                                            {asset.filename}
                                        </a>
                                        <span class="asset-size">
                                            {formatBytes(asset.size)}
                                        </span>
                                    </li>
                                ))}
                                {sourceArchives.map((archive) => (
                                    <li class="asset-item">
                                        <a
                                            href={`/${repo.name}/releases/${release.id}/source/${archive.filename}`}
                                            class="asset-name"
                                        >
                                            {archive.filename}
                                        </a>
                                        <span class="asset-meta">
                                            Source code ({archive.format})
                                        </span>
                                        <span class="asset-size">
                                            {formatBytes(archive.size)}
                                        </span>
                                    </li>
                                ))}
                                {sourceArchivesPending &&
                                    (
                                        [
                                            ["zip", ".zip"],
                                            ["tar.gz", ".tar.gz"],
                                            ["tar.zst", ".tar.zst"],
                                        ] as const
                                    ).map(([format, ext]) => (
                                        <li class="asset-item asset-item-pending">
                                            <span class="asset-name asset-name-pending">
                                                {`${repo.name}-${release.commit_hash.slice(0, 8)}${ext}`}
                                            </span>
                                            <span class="asset-meta">
                                                Source code ({format}) —
                                                generating…
                                            </span>
                                        </li>
                                    ))}
                            </ul>
                        </div>
                    )}

                    <div class="release-back">
                        <a
                            href={`/${repo.name}/releases`}
                            class="btn btn-secondary btn-sm"
                        >
                            ← All releases
                        </a>
                        {user?.isAdmin && (
                            <details class="confirm-details">
                                <summary class="btn btn-sm btn-danger">
                                    Delete release
                                </summary>
                                <div class="confirm-popup">
                                    Permanently delete this release and all its
                                    files?
                                    <form
                                        method="POST"
                                        action={`/${repo.name}/releases/${release.id}/delete`}
                                        class="inline-form"
                                    >
                                        <button
                                            type="submit"
                                            class="btn btn-sm btn-danger"
                                        >
                                            Yes, delete
                                        </button>
                                    </form>
                                </div>
                            </details>
                        )}
                    </div>
                </div>
            </div>
        </Layout>
    );
}