import type { LabelRow, RepositoryRow } from "../../db/index.ts";

interface SecretSummary {
    id: number;
    name: string;
    description: string | null;
    created_at: string;
}

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[];
    secrets: SecretSummary[];
    success?: string;
    error?: string;
}

export function RepoSettings({
    user,
    repo,
    branches,
    labels,
    secrets,
    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" safe>
                        {success}
                    </p>
                )}
                {!!error && (
                    <p class="form-error" safe>
                        {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
                                        }
                                        safe
                                    >
                                        {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"
                            safe
                        >
                            {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"
                            safe
                        >
                            {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" safe>
                                        {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="form-card">
                    <h2 class="section-title">CI Secrets</h2>
                    <p
                        class="text-muted"
                        style="font-size: var(--text-sm); margin-bottom: var(--space-3)"
                    >
                        Secrets are injected as environment variables into
                        pipeline runs and masked in logs. Values are write-only
                        — they cannot be retrieved after saving.
                    </p>
                    {secrets.length > 0 && (
                        <div class="label-settings-list">
                            {secrets.map((secret) => (
                                <div class="label-settings-item">
                                    <span class="label-settings-name">
                                        <code safe>{secret.name}</code>
                                    </span>
                                    {!!secret.description && (
                                        <span class="text-muted" safe>
                                            {secret.description}
                                        </span>
                                    )}
                                    <span class="text-muted">●●●●●●</span>
                                    <form
                                        method="POST"
                                        action={`/${repo.name}/settings/ci-secrets/delete`}
                                    >
                                        <input
                                            type="hidden"
                                            name="id"
                                            value={String(secret.id)}
                                        />
                                        <button
                                            class="btn btn-danger btn-sm"
                                            type="submit"
                                        >
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            ))}
                        </div>
                    )}
                    <form
                        method="POST"
                        action={`/${repo.name}/settings/ci-secrets`}
                        class="label-add-form"
                    >
                        <input
                            class="form-input label-name-input"
                            type="text"
                            name="name"
                            placeholder="SECRET_NAME"
                            pattern="[A-Za-z_][A-Za-z0-9_]*"
                            required
                        />
                        <input
                            class="form-input label-name-input"
                            type="password"
                            name="value"
                            placeholder="Value"
                            autocomplete="off"
                            required
                        />
                        <input
                            class="form-input label-name-input"
                            type="text"
                            name="description"
                            placeholder="Description (optional)"
                        />
                        <button type="submit" class="btn btn-secondary btn-sm">
                            Save secret
                        </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 class="danger-item-info">
                                <strong>Rename this repository</strong>
                                <p class="text-muted">
                                    Changing the name breaks existing clone URLs
                                    and links to this repo. Collaborators will
                                    need to update their remotes.
                                </p>
                            </div>
                            <form
                                method="POST"
                                action={`/${repo.name}/settings/rename`}
                                class="danger-form"
                            >
                                <div class="form-group">
                                    <label for="new_name">New name</label>
                                    <input
                                        id="new_name"
                                        name="new_name"
                                        type="text"
                                        required
                                        pattern="[A-Za-z0-9._\-]+"
                                        autocomplete="off"
                                    />
                                </div>
                                <details class="confirm-details">
                                    <summary class="btn btn-danger">
                                        Rename repository
                                    </summary>
                                    <div class="confirm-popup">
                                        Rename <span safe>{repo.name}</span>?
                                        <button
                                            type="submit"
                                            class="btn btn-danger"
                                        >
                                            Yes, rename
                                        </button>
                                    </div>
                                </details>
                            </form>
                        </div>
                        <div class="danger-item">
                            <div class="danger-item-info">
                                <strong>Delete this repository</strong>
                                <p class="text-muted">
                                    Once deleted, there is no going back.
                                </p>
                            </div>
                            <form
                                method="POST"
                                action={`/${repo.name}/settings/delete`}
                                class="danger-form"
                            >
                                <div class="form-group">
                                    <label for="confirm_delete">
                                        Type <code safe>{repo.name}</code> to
                                        confirm deletion
                                    </label>
                                    <input
                                        id="confirm_delete"
                                        name="confirm_name"
                                        type="text"
                                        required
                                        pattern={repo.name.replace(
                                            /[.*+?^${}()|[\]\\]/g,
                                            "\\$&",
                                        )}
                                        autocomplete="off"
                                    />
                                </div>
                                <details class="confirm-details">
                                    <summary class="btn btn-danger">
                                        Delete repository
                                    </summary>
                                    <div class="confirm-popup">
                                        Delete <span safe>{repo.name}</span>?
                                        This cannot be undone.
                                        <button
                                            type="submit"
                                            class="btn btn-danger"
                                        >
                                            Yes, delete
                                        </button>
                                    </div>
                                </details>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </Layout>
    );
}