kontenhumas-fe/components/form/sign-up.tsx

"use client";
import React, { useState } from "react";
import Link from "next/link";
import Cookies from "js-cookie";
import { useRouter } from "next/navigation";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import { Label } from "../ui/label";
import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
import { requestOTP, createUser } from "@/service/auth";

export default function SignUp() {
  const router = useRouter();
  const MySwal = withReactContent(Swal);
  const [step, setStep] = useState<"login" | "otp" | "form">("login");
  const [role, setRole] = useState("umum");
  const [email, setEmail] = useState("");
  const [otp, setOtp] = useState(["", "", "", "", "", ""]);
  const [membershipType, setMembershipType] = useState("");
  const [certNumber, setCertNumber] = useState("");
  const [namaTenant, setNamaTenant] = useState("");
  const [namaPerusahaan, setNamaPerusahaan] = useState("");
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [fullname, setFullname] = useState("");
  const [username, setUsername] = useState("");
  const [phoneNumber, setPhoneNumber] = useState("");
  const [address, setAddress] = useState("");
  const [dateOfBirth, setDateOfBirth] = useState("");
  const [genderType, setGenderType] = useState("male");
  const [password, setPassword] = useState("");
  const [workType, setWorkType] = useState("");

  const handleSendOtp = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!email) {
      if (!email) {
        MySwal.fire({
          icon: "error",
          title: "Error",
          text: "Email wajib diisi",
        });
        return;
      }
      return;
    }

    let name = "";
    if (role === "tenant") name = namaTenant || `${firstName} ${lastName}`;
    else if (role === "kontributor")
      name = namaPerusahaan || `${firstName} ${lastName}`;
    else if (role === "jurnalis") name = certNumber || "Jurnalis";
    else name = fullname || email;

    try {
      const res = await requestOTP({ email, name });

      if (!res?.error) {
        MySwal.fire({
          icon: "success",
          title: "Sukses",
          text: "OTP berhasil dikirim ke email anda",
        });
        setStep("otp");
      } else {
        MySwal.fire({
          icon: "error",
          title: "Gagal",
          text: res.message || "Gagal mengirim OTP",
        });
      }
    } catch (err) {
      console.error("Error send otp:", err);
      MySwal.fire({
        icon: "error",
        title: "Terjadi kesalahan server",
        text: "Gagal mengirim OTP",
      });
    }
  };

  const handleVerifyOtp = async (e: React.FormEvent) => {
    e.preventDefault();
    const code = otp.join("");
    if (code.length !== 6) {
      MySwal.fire({
        icon: "error",
        title: "OTP harus 6 digit",
        text: "error",
      });
      return;
    }
    MySwal.fire({
      icon: "success",
      title: "Sukses",
      text: "OTP diverifikasi!",
    });
    setStep("form");
  };

  const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault();

    const payload = {
      address,
      clientId: "78356d32-52fa-4dfc-b836-6cebf4e3eead",
      dateOfBirth,
      email,
      fullName: fullname,
      genderType,
      identityGroup: "",
      identityGroupNumber: "",
      identityNumber: "",
      identityType: "",
      lastEducation: "",
      password,
      phoneNumber,
      userLevelId: 1,
      userRoleId: 1,
      username,
      workType,
    };

    try {
      const res = await createUser(payload);
      if (!res?.error) {
        MySwal.fire({
          icon: "success",
          title: "Sukses",
          text: "Akun berhasil dibuat!",
        });
        router.push("/auth");
      } else {
        MySwal.fire({
          icon: "error",
          title: "Gagal",
          text: res.message || "Gagal membuat akun",
        });
      }
    } catch (err) {
      console.error("Register error:", err);
      MySwal.fire({
        icon: "error",
        title: "Gagal",
        text: "Terjadi kesalahan server",
      });
    }
  };

  const handleOtpChange = (index: number, value: string) => {
    if (!/^[0-9]?$/.test(value)) return;
    const newOtp = [...otp];
    newOtp[index] = value;
    setOtp(newOtp);
    const nextInput = document.getElementById(`otp-${index + 1}`);
    if (value && nextInput) nextInput.focus();
  };

  return (
    <div className="min-h-screen flex">
      {/* Left Side */}
      <div className="hidden lg:flex lg:w-1/2 bg-white items-center justify-center">
        <div className="text-center">
          <Link href={"/"}>
            <img src="/Group.png" alt="Logo" className="max-w-2xl h-auto" />
          </Link>
          <h2 className="text-2xl font-bold mt-4">Portal NetIdhub</h2>
        </div>
      </div>

      {/* Right Side */}
      <div className="w-full lg:w-1/2 flex items-center justify-center p-8">
        <div className="w-full max-w-md">
          {/* Step 1: Pilih Role + Email */}
          {step === "login" && (
            <form onSubmit={handleSendOtp} className="space-y-4">
              <RadioGroup
                defaultValue="umum"
                className="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-6"
                onValueChange={(val) => setRole(val)}
              >
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="umum" id="umum" />
                  <Label htmlFor="umum">Umum</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="jurnalis" id="jurnalis" />
                  <Label htmlFor="jurnalis">Jurnalis</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="kontributor" id="kontributor" />
                  <Label htmlFor="kontributor">Kontributor</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="tenant" id="tenant" />
                  <Label htmlFor="tenant">Tenant</Label>
                </div>
              </RadioGroup>

              {role === "jurnalis" && (
                <>
                  <select
                    className="w-full border rounded-md p-2"
                    value={membershipType}
                    onChange={(e) => setMembershipType(e.target.value)}
                  >
                    <option value="">Pilih jenis keanggotaan</option>
                    <option value="pwi">PWI</option>
                    <option value="ijti">IJTI</option>
                    <option value="pfi">PFI</option>
                    <option value="aji">AJI</option>
                    <option value="lainnya">Lainnya</option>
                  </select>
                  <Input
                    type="text"
                    placeholder="Nomor Sertifikasi Wartawan"
                    value={certNumber}
                    onChange={(e) => setCertNumber(e.target.value)}
                  />
                </>
              )}

              {role === "tenant" && (
                <>
                  <Input
                    type="text"
                    placeholder="Nama Tenant"
                    value={namaTenant}
                    onChange={(e) => setNamaTenant(e.target.value)}
                  />
                  <Input
                    type="text"
                    placeholder="First Name"
                    value={firstName}
                    onChange={(e) => setFirstName(e.target.value)}
                  />
                  <Input
                    type="text"
                    placeholder="Last Name"
                    value={lastName}
                    onChange={(e) => setLastName(e.target.value)}
                  />
                </>
              )}

              {role === "kontributor" && (
                <>
                  <Input
                    type="text"
                    placeholder="Nama Perusahaan"
                    value={namaPerusahaan}
                    onChange={(e) => setNamaPerusahaan(e.target.value)}
                  />
                  <Input
                    type="text"
                    placeholder="First Name"
                    value={firstName}
                    onChange={(e) => setFirstName(e.target.value)}
                  />
                  <Input
                    type="text"
                    placeholder="Last Name"
                    value={lastName}
                    onChange={(e) => setLastName(e.target.value)}
                  />
                </>
              )}

              <Input
                type="text"
                placeholder="Nama Lengkap"
                value={fullname}
                onChange={(e) => setFullname(e.target.value)}
              />
              <Input
                type="email"
                required
                placeholder="Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />

              <Button type="submit" className="w-full bg-[#B89445] text-white">
                Kirim OTP
              </Button>
            </form>
          )}

          {/* Step 2: OTP */}
          {step === "otp" && (
            <form onSubmit={handleVerifyOtp} className="space-y-4 text-center">
              <h3 className="text-base font-semibold">Masukkan OTP</h3>
              <div className="flex justify-between">
                {otp.map((value, index) => (
                  <input
                    key={index}
                    id={`otp-${index}`}
                    type="text"
                    maxLength={1}
                    value={value}
                    onChange={(e) => handleOtpChange(index, e.target.value)}
                    className="w-10 h-12 text-center border rounded-md"
                  />
                ))}
              </div>
              <Button type="submit" className="w-full bg-[#B89445] text-white">
                Lanjut
              </Button>
            </form>
          )}

          {/* Step 3: Form Lengkap */}
          {step === "form" && (
            <form onSubmit={handleRegister} className="space-y-4">
              <Input
                type="text"
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
              />
              <Input
                type="text"
                placeholder="Nomor HP"
                value={phoneNumber}
                onChange={(e) => setPhoneNumber(e.target.value)}
              />
              <Input
                type="text"
                placeholder="Alamat"
                value={address}
                onChange={(e) => setAddress(e.target.value)}
              />
              <Input
                type="date"
                placeholder="Tanggal Lahir"
                value={dateOfBirth}
                onChange={(e) => setDateOfBirth(e.target.value)}
              />
              <select
                value={genderType}
                onChange={(e) => setGenderType(e.target.value)}
                className="w-full border rounded-md p-2"
              >
                <option value="male">Laki-laki</option>
                <option value="female">Perempuan</option>
              </select>
              <Input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
              <Input
                type="text"
                placeholder="Jenis Pekerjaan"
                value={workType}
                onChange={(e) => setWorkType(e.target.value)}
              />
              <Button type="submit" className="w-full bg-green-600 text-white">
                Daftar
              </Button>
            </form>
          )}
        </div>
      </div>
    </div>
  );
}