"use client";

import { use, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";

export default function AcceptInvitationPage({
  params,
}: {
  params: Promise<{ token: string }>;
}) {
  const { token } = use(params);
  const router = useRouter();
  const [error, setError] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);

  async function handleAccept() {
    setError(null);
    setSubmitting(true);

    try {
      const res = await fetch(`/api/invitations/${token}/accept`, {
        method: "POST",
      });

      if (res.status === 401) {
        router.push(`/login?next=${encodeURIComponent(`/invitations/${token}`)}`);
        return;
      }

      const data = (await res.json().catch(() => null)) as
        | { membershipId?: string; trahId?: string | null; error?: string }
        | null;

      if (res.ok && data?.trahId) {
        router.push(`/trahs/${data.trahId}`);
        return;
      }

      setError("This invitation is invalid or has expired.");
    } catch {
      setError("Something went wrong. Please try again.");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <main style={{ maxWidth: 420, margin: "0 auto", padding: "2rem 1rem" }}>
      <h1>Join a Trah</h1>
      <p>You&apos;ve been invited to join a family Trah.</p>
      {error && (
        <p role="alert" style={{ color: "crimson" }}>
          {error}
        </p>
      )}
      <button type="button" disabled={submitting} onClick={handleAccept}>
        {submitting ? "Joining…" : "Accept invitation"}
      </button>
      <p>
        Don&apos;t have an account yet? <Link href="/register">Register</Link> first, then come
        back to this link.
      </p>
    </main>
  );
}