import type { RepositoryRow } from "../../db/index.ts";
import { formatDate } from "../../lib/formatDate.ts";
import type { SessionUser } from "../../middleware/session.ts";
import { Layout } from "../layout.tsx";
import { Pagination, type PaginationInfo } from "../Pagination.tsx";

interface RepoListProps {
    user: SessionUser | null;
    repos: RepositoryRow[];
    search?: string;
    sort: string;
    pagination: PaginationInfo;
}

export function RepoList({
    user,
    repos,
    search,
    sort,
    pagination,
}: RepoListProps) {
    return (
        <Layout user={user} title="Repositories">
            <div class="container">
                <div class="page-header">
                    <h1 class="page-title">Repositories</h1>
                    {user?.isAdmin && (
                        <a href="/new" class="btn btn-primary">
                            New repository
                        </a>
                    )}
                </div>
                <div class="search-row">
                    <form method="GET" action="/" class="search-form">
                        <div class="search-input-wrap">
                            <input
                                type="search"
                                name="q"
                                value={search ?? ""}
                                placeholder="Search repositories…"
                                class="search-input"
                                autocomplete="off"
                            />
                            <button type="submit" class="btn btn-sm">
                                Search
                            </button>
                        </div>
                    </form>
                    <form method="POST" action="/sort">
                        <select
                            name="sort"
                            class="repo-sort-select"
                            data-autosubmit
                        >
                            <option
                                value="created"
                                selected={sort === "created" || undefined}
                            >
                                Newest first
                            </option>
                            <option
                                value="name"
                                selected={sort === "name" || undefined}
                            >
                                Name (A–Z)
                            </option>
                        </select>
                        <noscript>
                            <button type="submit" class="btn btn-sm">
                                Go
                            </button>
                        </noscript>
                    </form>
                </div>
                {repos.length === 0 ? (
                    <div class="empty-state">
                        {search ? (
                            <p>
                                No repositories match{" "}
                                <strong safe>{search}</strong>.
                            </p>
                        ) : (
                            <p>No repositories yet.</p>
                        )}
                    </div>
                ) : (
                    <ul class="repo-list">
                        {repos.map((repo) => (
                            <li class="repo-card">
                                <div class="repo-card-main">
                                    <div class="repo-card-title">
                                        <a
                                            href={`/${repo.name}`}
                                            class="repo-name"
                                            safe
                                        >
                                            {repo.name}
                                        </a>
                                        {repo.is_pinned ? (
                                            <span class="badge badge-pinned">
                                                Pinned
                                            </span>
                                        ) : null}
                                        {repo.is_private ? (
                                            <span class="badge badge-private">
                                                Private
                                            </span>
                                        ) : null}
                                    </div>
                                    {!!repo.description && (
                                        <p class="repo-description" safe>
                                            {repo.description}
                                        </p>
                                    )}
                                </div>
                                <div class="repo-card-meta">
                                    <time
                                        class="repo-date"
                                        datetime={repo.created_at}
                                        safe
                                    >
                                        {formatDate(repo.created_at)}
                                    </time>
                                </div>
                            </li>
                        ))}
                    </ul>
                )}
                <Pagination {...pagination} />
            </div>
        </Layout>
    );
}