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

interface NewReleaseProps {
    user: SessionUser;
    repo: RepositoryRow;
    error?: string;
    values?: {
        tag_name?: string;
        name?: string;
        notes?: string;
        commit_hash?: string;
        include_source_code?: boolean;
    };
}

export function NewRelease({ user, repo, error, values }: NewReleaseProps) {
    return (
        <Layout user={user} title={`New Release — ${repo.name}`}>
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="releases" user={user} />
                <div class="form-page">
                    <h2 class="page-title">New Release</h2>
                    {error && <div class="flash flash-error">{error}</div>}
                    <form
                        method="post"
                        action={`/${repo.name}/releases`}
                        enctype="multipart/form-data"
                        class="form"
                    >
                        <div class="form-group">
                            <label class="form-label" for="tag_name">
                                Tag name <span class="form-required">*</span>
                            </label>
                            <input
                                type="text"
                                id="tag_name"
                                name="tag_name"
                                class="form-input"
                                required
                                value={values?.tag_name ?? ""}
                                placeholder="v1.0.0"
                            />
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="name">
                                Release title
                            </label>
                            <input
                                type="text"
                                id="name"
                                name="name"
                                class="form-input"
                                value={values?.name ?? ""}
                                placeholder="Optional display name"
                            />
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="commit_hash">
                                Commit hash <span class="form-required">*</span>
                            </label>
                            <input
                                type="text"
                                id="commit_hash"
                                name="commit_hash"
                                class="form-input monospace"
                                required
                                value={values?.commit_hash ?? ""}
                                placeholder="Full or abbreviated commit SHA"
                            />
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="notes">
                                Release notes
                            </label>
                            <textarea
                                id="notes"
                                name="notes"
                                class="form-input form-textarea"
                                rows="8"
                            >
                                {values?.notes ?? ""}
                            </textarea>
                        </div>
                        <div class="form-group">
                            <label class="checkbox-label">
                                <input
                                    type="checkbox"
                                    name="include_source_code"
                                    value="on"
                                    checked={
                                        values?.include_source_code ?? false
                                    }
                                />
                                <span>
                                    Include source code archives (zip, tar.gz,
                                    tar.zst)
                                </span>
                            </label>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="files">
                                Attach files
                            </label>
                            <input
                                type="file"
                                id="files"
                                name="files"
                                class="form-input"
                                multiple
                            />
                            <p class="form-hint">
                                You can attach multiple files to this release.
                            </p>
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                                Create release
                            </button>
                            <a
                                href={`/${repo.name}/releases`}
                                class="btn btn-secondary"
                            >
                                Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </Layout>
    );
}