import type { LabelRow, 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[];
    labels: LabelRow[];
    success?: string;
    error?: string;
}

export function RepoSettings({
    user,
    repo,
    branches,
    labels,
    success,
    error,
}: RepoSettingsProps) {
    return (
        <Layout user={user} title={`Settings — ${repo.name}`}>
            <div class="container">
                <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 (only visible to you)
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input
                                type="checkbox"
                                name="is_pinned"
                                value="1"
                                checked={repo.is_pinned === 1}
                            />
                            Pin this repository (always shown at the top of the
                            list)
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input
                                type="checkbox"
                                name="allow_user_labels"
                                value="1"
                                checked={repo.allow_user_labels === 1}
                            />
                            Allow users to add/remove labels on their own issues
                            and patches
                        </label>
                    </div>
                    <div class="form-group">
                        <label for="issue_template">
                            Issue template{" "}
                            <span class="text-muted">
                                (Markdown, prefilled when opening a new issue)
                            </span>
                        </label>
                        <textarea
                            id="issue_template"
                            name="issue_template"
                            rows="8"
                            placeholder="## Description&#10;&#10;## Steps to reproduce&#10;&#10;## Expected behavior"
                        >
                            {repo.issue_template ?? ""}
                        </textarea>
                    </div>
                    <div class="form-group">
                        <label for="patch_template">
                            Patch template{" "}
                            <span class="text-muted">
                                (Markdown, prefilled when submitting a new
                                patch)
                            </span>
                        </label>
                        <textarea
                            id="patch_template"
                            name="patch_template"
                            rows="8"
                            placeholder="## Summary&#10;&#10;## Testing"
                        >
                            {repo.patch_template ?? ""}
                        </textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">
                        Save settings
                    </button>
                </form>
                <div class="form-card">
                    <h2 class="section-title">Labels</h2>
                    {labels.length > 0 && (
                        <div class="label-settings-list">
                            {labels.map((label) => (
                                <div class="label-settings-item">
                                    <span
                                        class="label-settings-swatch"
                                        style={`background:${label.color}`}
                                    />
                                    <span class="label-settings-name">
                                        {label.name}
                                    </span>
                                    <form
                                        method="POST"
                                        action={`/${repo.name}/settings/labels/delete`}
                                    >
                                        <input
                                            type="hidden"
                                            name="id"
                                            value={String(label.id)}
                                        />
                                        <button
                                            class="btn btn-danger btn-sm"
                                            type="submit"
                                        >
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            ))}
                        </div>
                    )}
                    <form
                        method="POST"
                        action={`/${repo.name}/settings/labels`}
                        class="label-add-form"
                    >
                        <input
                            class="form-input label-name-input"
                            type="text"
                            name="name"
                            placeholder="Label name"
                            maxlength="50"
                            required
                        />
                        <label
                            class="label-color-swatch-label"
                            title="Pick a color"
                        >
                            <input
                                type="color"
                                name="color"
                                value="#808080"
                                class="label-color-input"
                            />
                        </label>
                        <button type="submit" class="btn btn-secondary btn-sm">
                            Add label
                        </button>
                    </form>
                </div>
                <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>
    );
}