import { auth } from "@/server/auth";
import { redirect } from "next/navigation";
import { createGroup } from "@/server/actions/groups";

export default async function NewGroupPage() {
  const session = await auth();
  if (!session?.user?.id) redirect("/login");

  return (
    <div className="min-h-screen bg-zinc-50 text-zinc-900">
      <div className="mx-auto max-w-lg px-6 py-16">
        <h1 className="text-2xl font-semibold tracking-tight">Create a group</h1>
        <p className="mt-2 text-sm text-zinc-600">
          Example: “Family”, “Brother’s friends”, “Cousins”.
        </p>

        <form
          action={async (formData) => {
            "use server";
            await createGroup(formData);
          }}
          className="mt-8 space-y-4 rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm"
        >
          <div>
            <label className="block text-sm font-medium">Group name</label>
            <input
              name="name"
              required
              className="mt-2 w-full rounded-xl border border-zinc-300 px-3 py-2 outline-none focus:border-zinc-900"
              placeholder="Family"
            />
          </div>

          <div>
            <label className="block text-sm font-medium">Slug</label>
            <input
              name="slug"
              required
              pattern="^[a-z0-9-]+$"
              className="mt-2 w-full rounded-xl border border-zinc-300 px-3 py-2 outline-none focus:border-zinc-900"
              placeholder="family"
            />
            <p className="mt-2 text-xs text-zinc-500">
              Lowercase letters, numbers, and dashes only.
            </p>
          </div>

          <button
            type="submit"
            className="w-full rounded-xl bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-800"
          >
            Create group
          </button>
        </form>
      </div>
    </div>
  );
}