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

interface FileTreeProps {
    user: SessionUser | null;
    repo: RepositoryRow;
    ref: string;
    subpath: string;
    entries: TreeEntry[];
    branches: string[];
    readmeHtml?: string | null;
}

export function FileTree({
    user,
    repo,
    ref: treeRef,
    subpath,
    entries,
    branches,
    readmeHtml,
}: FileTreeProps) {
    const parts = subpath ? subpath.split("/") : [];
    return (
        <Layout
            user={user}
            title={`${repo.name}${subpath ? `/${subpath}` : ""}`}
        >
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="code" user={user} />
                <div class="tree-toolbar">
                    <BranchSelector
                        repoName={repo.name}
                        branches={branches}
                        currentRef={treeRef}
                        view="tree"
                        path={subpath}
                    />
                </div>
                {subpath && (
                    <div class="breadcrumb">
                        <a href={`/${repo.name}/tree/${treeRef}`}>
                            {repo.name}
                        </a>
                        {parts.map((part, i) => {
                            const partPath = parts.slice(0, i + 1).join("/");
                            return (
                                <>
                                    <span class="breadcrumb-sep">/</span>
                                    <a
                                        href={`/${repo.name}/tree/${treeRef}/${partPath}`}
                                    >
                                        {part}
                                    </a>
                                </>
                            );
                        })}
                    </div>
                )}
                <FileTreeTable
                    repoName={repo.name}
                    treeRef={treeRef}
                    subpath={subpath}
                    entries={entries}
                />
                {readmeHtml && (
                    <div class="readme-section">
                        <div class="readme-header">README</div>
                        <div class="markdown-body">{readmeHtml}</div>
                    </div>
                )}
            </div>
        </Layout>
    );
}