EpicNext-Cms/src/app/admin/studio/sync/catalog-git-configuration.tsx

"use client";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { adminFetch } from "@/lib/admin-fetch";

interface Configuration {
	provider: string;
	enabled: boolean;
	remote: string;
	branch: string;
	username: string;
	hasToken: boolean;
}
export function CatalogGitConfiguration({ onSaved }: { onSaved: () => void }) {
	const [config, setConfig] = useState<Configuration | null>(null),
		[token, setToken] = useState(""),
		[busy, setBusy] = useState(false),
		[error, setError] = useState(""),
		[message, setMessage] = useState("");
	useEffect(() => {
		const abort = new AbortController();
		void (async () => {
			try {
				const res = await adminFetch("/api/admin/catalog-export/config", {
					signal: abort.signal,
					cache: "no-store",
				});
				if (!res.ok)
					throw new Error(
						"Unable to read Git settings. Settings edit permission is required.",
					);
				const data = await res.json();
				if (!abort.signal.aborted) setConfig(data);
			} catch (error) {
				if (!abort.signal.aborted) setError((error as Error).message);
			}
		})();
		return () => abort.abort();
	}, []);
	async function submit(action: "save" | "test") {
		if (!config || busy) return;
		setBusy(true);
		setError("");
		setMessage("");
		try {
			const res = await adminFetch("/api/admin/catalog-export/config", {
				method: "POST",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify({ ...config, token, action }),
			});
			const data = await res.json();
			if (!res.ok)
				throw new Error(data.error || "Git configuration request failed");
			if (action === "save") {
				setConfig(data);
				setToken("");
				setMessage("Gitea configuration saved.");
				onSaved();
			} else setMessage(data.message);
		} catch (error) {
			setError((error as Error).message);
		} finally {
			setBusy(false);
		}
	}
	return (
		<details
			className="rounded-lg border border-[var(--admin-border)] p-3"
			open
		>
			<summary className="cursor-pointer font-semibold">
				Gitea connection settings
			</summary>
			<p className="my-3 text-sm text-[var(--admin-text-muted)]">
				Connect your self-hosted Gitea repository over HTTPS. The CMS manages
				its own checkout; no Git-specific .env settings are needed.
			</p>
			{config && (
				<fieldset disabled={busy} className="space-y-3">
					<p className="text-sm">
						Provider: <strong>Gitea self-hosted</strong>
					</p>
					<label htmlFor="catalog-git-1" className="block text-sm">
						Repository URL
						<Input
							id="catalog-git-1"
							type="url"
							value={config.remote}
							onChange={(event) =>
								setConfig({ ...config, remote: event.target.value })
							}
						/>
					</label>
					<div className="grid gap-3 sm:grid-cols-2">
						<label htmlFor="catalog-git-2" className="block text-sm">
							Branch
							<Input
								id="catalog-git-2"
								value={config.branch}
								onChange={(event) =>
									setConfig({ ...config, branch: event.target.value })
								}
							/>
						</label>
						<label htmlFor="catalog-git-3" className="block text-sm">
							Gitea username
							<Input
								id="catalog-git-3"
								autoComplete="off"
								value={config.username}
								onChange={(event) =>
									setConfig({ ...config, username: event.target.value })
								}
							/>
						</label>
					</div>
					<label htmlFor="catalog-git-4" className="block text-sm">
						Gitea access token
						<Input
							id="catalog-git-4"
							type="password"
							autoComplete="new-password"
							value={token}
							placeholder={
								config.hasToken
									? "Token saved — leave blank to keep it"
									: "Enter a token with repository write access"
							}
							onChange={(event) => setToken(event.target.value)}
						/>
					</label>
					<p className="text-xs text-[var(--admin-text-muted)]">
						The token is stored encrypted and is never returned to the browser.
						Changing repository or username requires entering the token again.
					</p>
					<label className="flex items-center gap-2 text-sm">
						<input
							type="checkbox"
							checked={config.enabled}
							onChange={(event) =>
								setConfig({ ...config, enabled: event.target.checked })
							}
						/>
						Automatically export catalog changes
					</label>
					<div className="flex flex-wrap gap-2">
						<Button variant="outline" onClick={() => void submit("test")}>
							Test connection
						</Button>
						<Button onClick={() => void submit("save")}>
							{busy ? "Working…" : "Save Gitea settings"}
						</Button>
					</div>
				</fieldset>
			)}
			{error && (
				<p role="alert" className="mt-3 text-sm text-[var(--admin-warning)]">
					{error}
				</p>
			)}
			{message && (
				<p role="status" className="mt-3 text-sm">
					{message}
				</p>
			)}
		</details>
	);
}