import { BASE_URL, SSH_PORT } 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;
    hasContent: boolean;
    branches: string[];
}

export function RepoHome({
    user,
    repo,
    entries,
    readmeHtml,
    hasContent,
    branches,
}: RepoHomeProps) {
    return (
        <Layout user={user} title={repo.name}>
            <div class="container">
                <RepoHeader repo={repo} />
                {repo.description && (
                    <p class="repo-description">{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>{`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}
                                currentRef={repo.default_branch}
                                view="tree"
                            />
                            <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>
                                    <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>
                        <FileTreeTable
                            repoName={repo.name}
                            treeRef={repo.default_branch}
                            subpath=""
                            entries={entries}
                        />
                        {readmeHtml && (
                            <div class="readme-section">
                                <div class="readme-header">README</div>
                                <div class="markdown-body">{readmeHtml}</div>
                            </div>
                        )}
                    </>
                )}
            </div>
        </Layout>
    );
}

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

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