import type { RepositoryRow } from "../../db/index.ts";
import type { SessionUser } from "../../middleware/session.ts";
import { Layout } from "../layout.tsx";
import { RepoHeader } from "./RepoHeader.tsx";
import { RepoNav } from "./RepoNav.tsx";

interface RepoSettingsProps {
    user: SessionUser;
    repo: RepositoryRow;
    branches: string[];
    success?: string;
    error?: string;
}

export function RepoSettings({
    user,
    repo,
    branches,
    success,
    error,
}: RepoSettingsProps) {
    return (
        <Layout user={user} title={`Settings — ${repo.name}`}>
            <div class="container container-narrow">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="settings" user={user} />
                {success && <p class="form-success">{success}</p>}
                {error && <p class="form-error">{error}</p>}
                <form
                    method="POST"
                    action={`/${repo.name}/settings`}
                    class="form-card"
                >
                    <div class="form-group">
                        <label for="description">Description</label>
                        <input
                            id="description"
                            name="description"
                            type="text"
                            value={repo.description ?? ""}
                            placeholder="A short description"
                        />
                    </div>
                    <div class="form-group">
                        <label for="default_branch">Default branch</label>
                        {branches.length > 0 ? (
                            <select
                                id="default_branch"
                                name="default_branch"
                                class="branch-select"
                            >
                                {branches.map((b) => (
                                    <option
                                        value={b}
                                        selected={
                                            b === repo.default_branch
                                                ? true
                                                : undefined
                                        }
                                    >
                                        {b}
                                    </option>
                                ))}
                            </select>
                        ) : (
                            <p class="form-hint">
                                No branches yet — push your first commit to set
                                the default branch.
                            </p>
                        )}
                    </div>
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input
                                type="checkbox"
                                name="is_private"
                                value="1"
                                checked={repo.is_private === 1}
                            />
                            Private repository
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary">
                        Save settings
                    </button>
                </form>
                <div class="danger-zone">
                    <h2 class="section-title danger-title">Danger zone</h2>
                    <div class="form-card danger-card">
                        <div class="danger-item">
                            <div>
                                <strong>Delete this repository</strong>
                                <p class="text-muted">
                                    Once deleted, there is no going back.
                                </p>
                            </div>
                            <details class="confirm-details">
                                <summary class="btn btn-danger">
                                    Delete repository
                                </summary>
                                <div class="confirm-popup">
                                    Delete {repo.name}? This cannot be undone.
                                    <form
                                        method="POST"
                                        action={`/${repo.name}/settings/delete`}
                                        class="inline-form"
                                    >
                                        <button
                                            type="submit"
                                            class="btn btn-danger"
                                        >
                                            Yes, delete
                                        </button>
                                    </form>
                                </div>
                            </details>
                        </div>
                    </div>
                </div>
            </div>
        </Layout>
    );
}