import type { RepositoryRow } from "../../db/index.ts";
import type { SessionUser } from "../../middleware/session.ts";
import type { FileView } from "../../services/highlight.ts";
import { Layout } from "../layout.tsx";
import { RepoHeader } from "../repos/RepoHeader.tsx";
import { BranchSelector } from "./BranchSelector.tsx";
import { RepoNav } from "./RepoNav.tsx";

interface FileBlobProps {
    user: SessionUser | null;
    repo: RepositoryRow;
    ref: string;
    filePath: string;
    view: FileView;
    branches: string[];
    tags?: string[];
    markdownHtml?: string;
    error?: string;
}

export function FileBlob({
    user,
    repo,
    ref: blobRef,
    filePath,
    view,
    branches,
    tags,
    markdownHtml,
    error,
}: FileBlobProps) {
    const parts = filePath.split("/");
    const filename = parts[parts.length - 1] ?? filePath;
    return (
        <Layout user={user} title={`${repo.name}/${filePath}`}>
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="code" user={user} />
                {!!error && (
                    <p class="form-error" safe>
                        {error}
                    </p>
                )}
                <div class="breadcrumb">
                    <a href={`/${repo.name}/tree/${blobRef}`} safe>
                        {repo.name}
                    </a>
                    {parts.map((part, i) => {
                        const partPath = parts.slice(0, i + 1).join("/");
                        const isLast = i === parts.length - 1;
                        return (
                            <>
                                <span class="breadcrumb-sep">/</span>
                                {isLast ? (
                                    <span class="breadcrumb-current" safe>
                                        {part}
                                    </span>
                                ) : (
                                    <a
                                        href={`/${repo.name}/tree/${blobRef}/${partPath}`}
                                        safe
                                    >
                                        {part}
                                    </a>
                                )}
                            </>
                        );
                    })}
                </div>
                <div class="file-blob-header">
                    <span class="file-blob-name" safe>
                        {filename}
                    </span>
                    <div class="file-blob-actions file-blob-actions-wrap">
                        <BranchSelector
                            repoName={repo.name}
                            branches={branches}
                            tags={tags}
                            currentRef={blobRef}
                            view="blob"
                            path={filePath}
                        />
                        <a
                            href={`/${repo.name}/raw/${blobRef}/${filePath}`}
                            class="btn btn-sm"
                        >
                            Raw
                        </a>
                        {view.type === "inline" &&
                            branches.includes(blobRef) &&
                            user?.isAdmin && (
                                <a
                                    href={`/${repo.name}/edit/${blobRef}/${filePath}`}
                                    class="btn btn-sm btn-primary"
                                >
                                    Edit
                                </a>
                            )}
                        {branches.includes(blobRef) && user?.isAdmin && (
                            <details class="confirm-details">
                                <summary class="btn btn-sm btn-danger">
                                    Delete
                                </summary>
                                <div class="confirm-popup">
                                    Delete <strong safe>{filename}</strong>?
                                    <form
                                        method="POST"
                                        action={`/${repo.name}/delete-file/${blobRef}/${filePath}`}
                                        class="popup-form"
                                        style="margin-top: var(--space-2);"
                                    >
                                        <div class="form-group">
                                            <input
                                                name="message"
                                                type="text"
                                                placeholder={`Delete ${filename}`}
                                                maxlength="500"
                                            />
                                        </div>
                                        <button
                                            type="submit"
                                            class="btn btn-sm btn-danger"
                                        >
                                            Yes, delete
                                        </button>
                                    </form>
                                </div>
                            </details>
                        )}
                    </div>
                </div>
                <div class="file-blob-body">
                    {markdownHtml ? (
                        <div class="markdown-body">
                            {markdownHtml as "safe"}
                        </div>
                    ) : view.type === "inline" ? (
                        <div class="shiki-wrapper">{view.html as "safe"}</div>
                    ) : view.type === "media" ? (
                        <div class="file-media">
                            {view.mimeType.startsWith("image/") ? (
                                <img
                                    src={`/${repo.name}/raw/${blobRef}/${filePath}`}
                                    alt={filename}
                                    class="file-media-img"
                                />
                            ) : view.mimeType.startsWith("audio/") ? (
                                // biome-ignore lint/a11y/useMediaCaption: captions unavailable for arbitrary repo files
                                <audio
                                    controls=""
                                    src={`/${repo.name}/raw/${blobRef}/${filePath}`}
                                    class="file-media-audio"
                                />
                            ) : (
                                // biome-ignore lint/a11y/useMediaCaption: captions unavailable for arbitrary repo files
                                <video
                                    controls
                                    src={`/${repo.name}/raw/${blobRef}/${filePath}`}
                                    class="file-media-video"
                                />
                            )}
                        </div>
                    ) : view.type === "binary" ? (
                        <div class="file-download-notice">
                            <p safe>Binary file ({formatSize(view.size)})</p>
                            <a
                                href={`/${repo.name}/raw/${blobRef}/${filePath}`}
                                class="btn btn-primary"
                            >
                                Download
                            </a>
                        </div>
                    ) : (
                        <div class="file-download-notice">
                            <p safe>
                                File too large to display inline (
                                {formatSize(view.size)})
                            </p>
                            <a
                                href={`/${repo.name}/raw/${blobRef}/${filePath}`}
                                class="btn btn-primary"
                            >
                                Download
                            </a>
                        </div>
                    )}
                </div>
            </div>
        </Layout>
    );
}

function formatSize(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`;
}