import config from "../../config.ts";
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 { BranchSelector } from "./BranchSelector.tsx";
import { FileTreeTable } from "./FileTreeTable.tsx";
import { RepoHeader } from "./RepoHeader.tsx";
import { RepoNav } from "./RepoNav.tsx";

interface RepoHomeProps {
    user: SessionUser | null;
    repo: RepositoryRow;
    entries: TreeEntry[];
    readmeHtml: string | null;
    readmePath?: string;
    hasContent: boolean;
    branches: string[];
    tags?: string[];
}

export function RepoHome({
    user,
    repo,
    entries,
    readmeHtml,
    readmePath,
    hasContent,
    branches,
    tags,
}: RepoHomeProps) {
    return (
        <Layout user={user} title={repo.name}>
            <div class="container">
                <RepoHeader repo={repo} />
                {!!repo.description && (
                    <p class="repo-description" safe>
                        {repo.description}
                    </p>
                )}
                <RepoNav repo={repo} active="code" user={user} />
                {!hasContent ? (
                    <div class="empty-state">
                        <h2>This repository is empty.</h2>
                        <p>Push your first commit to get started:</p>
                        <pre class="code-setup">
                            <code safe>{`git clone ${httpUrl(repo.name)}${
                                config.SSH_DISABLED
                                    ? ""
                                    : `\n# or: git clone ${sshUrl(repo.name)}`
                            }
cd ${repo.name}
echo "# ${repo.name}" > README.md
git add .
git commit -m "Initial commit"
git push origin main`}</code>
                        </pre>
                    </div>
                ) : (
                    <>
                        <div class="tree-toolbar">
                            <BranchSelector
                                repoName={repo.name}
                                branches={branches}
                                tags={tags}
                                currentRef={repo.default_branch}
                                view="tree"
                            />
                            <div class="tree-toolbar-actions">
                                {branches.includes(repo.default_branch) &&
                                    user?.isAdmin && (
                                        <a
                                            href={`/${repo.name}/new-file/${repo.default_branch}`}
                                            class="btn btn-sm btn-primary"
                                        >
                                            New file
                                        </a>
                                    )}
                                <details class="clone-popup-details">
                                    <summary class="btn btn-sm btn-primary">
                                        Clone
                                    </summary>
                                    <div class="clone-popup">
                                        <div class="clone-url-row">
                                            <span class="clone-url-label">
                                                HTTP
                                            </span>
                                            <input
                                                type="text"
                                                readonly
                                                value={httpUrl(repo.name)}
                                                class="clone-url-input"
                                            />
                                        </div>
                                        {!config.SSH_DISABLED && (
                                            <div class="clone-url-row">
                                                <span class="clone-url-label">
                                                    SSH
                                                </span>
                                                <input
                                                    type="text"
                                                    readonly
                                                    value={sshUrl(repo.name)}
                                                    class="clone-url-input"
                                                />
                                            </div>
                                        )}
                                    </div>
                                </details>
                            </div>
                        </div>
                        <FileTreeTable
                            repoName={repo.name}
                            treeRef={repo.default_branch}
                            subpath=""
                            entries={entries}
                        />
                        {!!readmeHtml && (
                            <div class="readme-section">
                                <div class="readme-header">
                                    <span>README</span>
                                    {!!readmePath && (
                                        <a
                                            href={`/${repo.name}/raw/${repo.default_branch}/${readmePath}`}
                                            class="btn btn-sm"
                                        >
                                            Raw
                                        </a>
                                    )}
                                </div>
                                <div class="markdown-body">
                                    {readmeHtml as "safe"}
                                </div>
                            </div>
                        )}
                    </>
                )}
            </div>
        </Layout>
    );
}

function httpUrl(name: string) {
    return `${config.BASE_URL}/${name}.git`;
}

function sshUrl(name: string) {
    const host = new URL(config.BASE_URL).hostname;
    return `ssh://git@${host}:${config.SSH_PORT}/${name}.git`;
}