import { MAX_BRANCH_NAME_LENGTH } from "../../constants.ts";
import type { RepositoryRow } from "../../db/index.ts";
import { formatDateTime } from "../../lib/formatDate.ts";
import type { SessionUser } from "../../middleware/session.ts";
import type { BranchInfo } from "../../services/git.ts";
import { Layout } from "../layout.tsx";
import { Pagination } from "../Pagination.tsx";
import { RepoHeader } from "./RepoHeader.tsx";
import { RepoNav } from "./RepoNav.tsx";

interface BranchListProps {
    user: SessionUser | null;
    repo: RepositoryRow;
    branches: BranchInfo[];
    page: number;
    totalPages: number;
    success?: string;
    error?: string;
}

export function BranchList({
    user,
    repo,
    branches,
    page,
    totalPages,
    success,
    error,
}: BranchListProps) {
    return (
        <Layout user={user} title={`Branches — ${repo.name}`}>
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="branches" user={user} />
                {!!success && (
                    <p class="form-success" safe>
                        {success}
                    </p>
                )}
                {!!error && (
                    <p class="form-error" safe>
                        {error}
                    </p>
                )}
                <div class="list-header">
                    <h2 class="list-heading">Branches</h2>
                    {user?.isAdmin && (
                        <details class="confirm-details">
                            <summary class="btn btn-primary btn-sm">
                                New branch
                            </summary>
                            <div class="confirm-popup confirm-popup-form">
                                <form
                                    method="POST"
                                    action={`/${repo.name}/branches/create`}
                                    class="popup-form"
                                >
                                    <div class="form-group">
                                        <label for="new-branch-name">
                                            Branch name
                                        </label>
                                        <input
                                            id="new-branch-name"
                                            name="name"
                                            type="text"
                                            required
                                            placeholder="feature/my-branch"
                                            maxlength={MAX_BRANCH_NAME_LENGTH}
                                        />
                                    </div>
                                    <div class="form-group">
                                        <label for="new-branch-source">
                                            From
                                        </label>
                                        <input
                                            id="new-branch-source"
                                            name="source_ref"
                                            type="text"
                                            required
                                            value={repo.default_branch}
                                            placeholder="branch, tag, or commit"
                                            maxlength={MAX_BRANCH_NAME_LENGTH}
                                        />
                                    </div>
                                    <button
                                        type="submit"
                                        class="btn btn-primary btn-sm"
                                    >
                                        Create branch
                                    </button>
                                </form>
                            </div>
                        </details>
                    )}
                </div>
                {branches.length === 0 ? (
                    <div class="empty-state">
                        <p>No branches yet.</p>
                    </div>
                ) : (
                    <ul class="ref-list">
                        {branches.map((b) => (
                            <li class="ref-item">
                                <div class="ref-name-row">
                                    <a
                                        href={`/${repo.name}/tree/${b.name}`}
                                        class="ref-name"
                                        safe
                                    >
                                        {b.name}
                                    </a>
                                    {b.name === repo.default_branch && (
                                        <span class="badge">default</span>
                                    )}
                                </div>
                                <div class="ref-meta-row">
                                    {!!b.authorName && (
                                        <span class="ref-author" safe>
                                            {b.authorName}
                                        </span>
                                    )}
                                    {!!b.shortHash && (
                                        <a
                                            href={`/${repo.name}/commit/${b.shortHash}`}
                                            class="ref-hash mono"
                                            safe
                                        >
                                            {b.shortHash}
                                        </a>
                                    )}
                                    {!!b.subject && (
                                        <span class="ref-subject" safe>
                                            {b.subject}
                                        </span>
                                    )}
                                    {!!b.date && (
                                        <time
                                            class="ref-date"
                                            datetime={b.date}
                                            safe
                                        >
                                            {formatDateTime(b.date)}
                                        </time>
                                    )}
                                    {user?.isAdmin && (
                                        <span class="ref-actions">
                                            <details class="confirm-details confirm-details-inline">
                                                <summary class="btn btn-sm">
                                                    Rename
                                                </summary>
                                                <div class="confirm-popup">
                                                    <form
                                                        method="POST"
                                                        action={`/${repo.name}/branches/rename`}
                                                        class="popup-form"
                                                    >
                                                        <input
                                                            type="hidden"
                                                            name="old_name"
                                                            value={b.name}
                                                        />
                                                        <input
                                                            name="new_name"
                                                            type="text"
                                                            required
                                                            placeholder="new-name"
                                                            value={b.name}
                                                            maxlength={
                                                                MAX_BRANCH_NAME_LENGTH
                                                            }
                                                        />
                                                        <button
                                                            type="submit"
                                                            class="btn btn-sm btn-primary"
                                                        >
                                                            Rename
                                                        </button>
                                                    </form>
                                                </div>
                                            </details>
                                            {b.name !== repo.default_branch && (
                                                <details class="confirm-details confirm-details-inline">
                                                    <summary class="btn btn-sm btn-danger">
                                                        Delete
                                                    </summary>
                                                    <div class="confirm-popup">
                                                        Delete branch{" "}
                                                        <strong safe>
                                                            {b.name}
                                                        </strong>
                                                        ?
                                                        <form
                                                            method="POST"
                                                            action={`/${repo.name}/branches/delete`}
                                                            class="inline-form"
                                                        >
                                                            <input
                                                                type="hidden"
                                                                name="name"
                                                                value={b.name}
                                                            />
                                                            <button
                                                                type="submit"
                                                                class="btn btn-sm btn-danger"
                                                            >
                                                                Yes, delete
                                                            </button>
                                                        </form>
                                                    </div>
                                                </details>
                                            )}
                                        </span>
                                    )}
                                </div>
                            </li>
                        ))}
                    </ul>
                )}
                <Pagination
                    page={page}
                    totalPages={totalPages}
                    pageUrlTemplate={`/${repo.name}/branches?page={page}`}
                />
            </div>
        </Layout>
    );
}