"use client";

import { FormEvent, useState } from "react";

export function InviteForm() {
  const [inviteUrl, setInviteUrl] = useState("");
  const [status, setStatus] = useState("");

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const response = await fetch("/api/invites", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email: form.get("email") })
    });
    const payload = await response.json();
    if (!response.ok) {
      setStatus(payload.error ?? "Could not create invite.");
      return;
    }
    setInviteUrl(`${window.location.origin}${payload.url}`);
    if (payload.email?.delivered) {
      setStatus("Invite email sent.");
    } else if (payload.email?.devInviteUrl) {
      setStatus("Invite created. Dev email logged locally.");
    } else {
      setStatus("");
    }
  }

  return (
    <form className="grid gap-3 rounded-lg border border-brand-secondary/20 bg-white p-5 shadow-sm" onSubmit={submit}>
      <h2 className="text-lg font-semibold">Generate invite</h2>
      <input className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="email" placeholder="Optional email restriction" />
      <button className="brand-button-secondary" type="submit">Create invite link</button>
      {inviteUrl ? <p className="break-all rounded-lg bg-brand-mist p-3 text-sm text-brand-secondary dark:bg-slate-900">{inviteUrl}</p> : null}
      {status ? <p className="text-sm text-brand-primary">{status}</p> : null}
    </form>
  );
}