"use client";

import { useState } from "react";
import { linkDiscordId } from "@/actions/link-discord";

export function DiscordVerifyForm() {
	const [discordId, setDiscordId] = useState("");
	const [error, setError] = useState<string | null>(null);
	const [isPending, setIsPending] = useState(false);
	const [success, setSuccess] = useState(false);

	async function handleSubmit(e: React.FormEvent) {
		e.preventDefault();
		setError(null);
		setSuccess(false);
		setIsPending(true);
		try {
			const result = await linkDiscordId(discordId);
			if (result === null) {
				setSuccess(true);
			} else {
				setError(result);
			}
		} catch {
			setError("Er is een fout opgetreden");
		} finally {
			setIsPending(false);
		}
	}

	if (success) {
		return (
			<div
				className="rounded-md p-4 text-center"
				style={{ backgroundColor: "#14532d", color: "white" }}
			>
				<p className="text-lg font-bold mb-1">Geverifieerd!</p>
				<p className="text-sm opacity-90">
					Je Discord account is gekoppeld en je account is geverifieerd.
				</p>
			</div>
		);
	}

	return (
		<form onSubmit={handleSubmit} className="flex flex-col gap-3">
			{error && (
				<div
					className="p-3 rounded-md text-sm"
					style={{ backgroundColor: "#ef4444", color: "white" }}
				>
					{error}
				</div>
			)}

			<p
				className="text-sm"
				style={{
					color: "var(--color-text-muted-readable, var(--color-text-muted))",
				}}
			>
				Open Discord, ga naar{" "}
				<strong>Instellingen → Geavanceerd → Ontwikkelaarsmodus</strong> (aan).
				Klik met rechts op je eigen naam en kies <strong>ID kopiëren</strong>.
				Plak dat hier:
			</p>

			<div className="flex gap-2">
				<input
					type="text"
					placeholder="Plak je Discord ID hier"
					value={discordId}
					onChange={(e) => setDiscordId(e.target.value)}
					className="flex-1 focus:ring-0 border-4 rounded text-sm px-3 py-2"
					style={{
						backgroundColor: "var(--color-background)",
						color: "var(--color-text-readable, var(--color-text))",
						borderColor:
							"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
					}}
					required
				/>
				<button
					type="submit"
					disabled={isPending}
					className="rounded px-4 py-2 text-white font-semibold whitespace-nowrap"
					style={{ backgroundColor: "#5865F2", border: "2px solid #7983F5" }}
				>
					{isPending ? "Bezig..." : "Verifiëren"}
				</button>
			</div>
		</form>
	);
}