"use client";

import Link from "next/link";
import { type FormEvent, useState } from "react";
import { Loader2, ShieldAlert } from "lucide-react";
import { authErrorMessage, useSubmitUnbanRequest } from "@/hooks/use-auth";

export default function UnbanRequestPage() {
  const submitMutation = useSubmitUnbanRequest();
  const [message, setMessage] = useState("");
  const [submitted, setSubmitted] = useState(false);

  const onSubmit = async (event: FormEvent) => {
    event.preventDefault();
    try {
      await submitMutation.mutateAsync({ message: message.trim() || undefined });
      setSubmitted(true);
    } catch {
      // Surfaced via submitMutation.isError below.
    }
  };

  return (
    <main className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-12">
      <div className="w-full max-w-sm animate-fade-in overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
        <div className="h-1.5 bg-gradient-to-r from-brand-500 via-brand-600 to-brand-700" />
        <div className="p-8">
          <div className="flex items-center gap-3">
            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-50 text-brand-600">
              <ShieldAlert className="h-4.5 w-4.5" aria-hidden />
            </span>
            <div>
              <h1 className="text-xl font-semibold text-slate-900">Request an unban</h1>
              <p className="text-sm text-slate-600">
                Your network address was blocked after repeated failed attempts.
              </p>
            </div>
          </div>

          {submitted ? (
            <p className="mt-6 animate-fade-in rounded-md bg-green-50 px-3 py-2 text-sm text-green-700">
              Request received - an admin will review it. You can send another request in 24
              hours if this one doesn&apos;t go through.
            </p>
          ) : (
            <form onSubmit={onSubmit} className="mt-6 space-y-4" noValidate>
              <div>
                <label htmlFor="unban-message" className="block text-sm font-medium text-slate-700">
                  Message (optional)
                </label>
                <textarea
                  id="unban-message"
                  rows={4}
                  maxLength={2000}
                  value={message}
                  onChange={(event) => setMessage(event.target.value)}
                  className="focus-ring mt-1 block w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm"
                  placeholder="Tell us why you think this was a mistake."
                />
              </div>

              {submitMutation.isError && (
                <p className="animate-fade-in text-sm text-red-600" role="alert">
                  {authErrorMessage(submitMutation.error)}
                </p>
              )}

              <button
                type="submit"
                disabled={submitMutation.isPending}
                className="focus-ring inline-flex w-full items-center justify-center gap-2 rounded-md bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition-colors duration-200 hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-60"
              >
                {submitMutation.isPending && (
                  <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
                )}
                {submitMutation.isPending ? "Sending…" : "Send request"}
              </button>
            </form>
          )}

          <p className="mt-6 text-center text-sm text-slate-600">
            <Link
              href="/login"
              className="font-medium text-brand-600 transition-colors duration-150 hover:text-brand-700"
            >
              Back to sign in
            </Link>
          </p>
        </div>
      </div>
    </main>
  );
}