import Link from "next/link";
import { registerAction } from "@/server/actions/auth";
import { prisma } from "@/lib/prisma";

export default async function RegisterPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const sp = await searchParams;
  const categories = await prisma.category.findMany();

  return (
    <div className="mx-auto max-w-md">
      <div className="card">
        <h1 className="text-2xl font-semibold">Crear cuenta</h1>
        {sp.error && (
          <p className="mt-3 rounded-lg bg-red-500/15 px-3 py-2 text-sm text-red-300">
            {sp.error}
          </p>
        )}
        <form action={registerAction} className="mt-6 space-y-4">
          <div>
            <label className="label">Nombre</label>
            <input className="input" name="name" required />
          </div>
          <div>
            <label className="label">Email</label>
            <input className="input" name="email" type="email" required />
          </div>
          <div>
            <label className="label">Password (min 6)</label>
            <input className="input" name="password" type="password" minLength={6} required />
          </div>
          <div>
            <label className="label">Ciudad</label>
            <input className="input" name="city" placeholder="San Juan" />
          </div>
          <div>
            <label className="label">Rol</label>
            <select className="input" name="role" defaultValue="client">
              <option value="client">Cliente</option>
              <option value="contractor">Contratista</option>
            </select>
          </div>
          <div>
            <label className="label">Categoria (si contratista)</label>
            <select className="input" name="category" defaultValue="Plomeria">
              {categories.map((c) => (
                <option key={c.id} value={c.name}>
                  {c.name}
                </option>
              ))}
            </select>
          </div>
          <label className="flex items-center gap-2 text-sm text-white/70">
            <input type="checkbox" name="founder" />
            Unirme al Founder&apos;s Club
          </label>
          <button type="submit" className="btn-primary w-full">
            Crear cuenta
          </button>
        </form>
        <p className="mt-4 text-center text-sm text-white/60">
          ¿Ya tienes cuenta?{" "}
          <Link href="/login" className="text-[var(--lime)]">
            Inicia sesion
          </Link>
        </p>
      </div>
    </div>
  );
}