"use client";

import { useForm } from "@inertiajs/react";
import styles from "./activate-account.module.scss";
import { FiUser, FiMail, FiLock, FiEye, FiEyeOff } from "react-icons/fi";
import { useState } from "react";
import { router } from "@inertiajs/react";

export default function Register() {
  const { data, setData, post, processing, errors, reset } = useForm({
    first_name: "",
    last_name: "",
    email: "",
    password: "",
    password_confirmation: "",
  });

  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

  const passwordsMatch =
  data.password &&
  data.password_confirmation &&
  data.password === data.password_confirmation;

const showPasswordMatchState =
  data.password_confirmation.length > 0;

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

    post(route("register"), {
      onError: () => reset("password", "password_confirmation"),
    });
  };

  return (
    <div className={styles.wrapper}>
      <div className={styles.logo}>
        <img src="/logo.png" alt="Censers Church Logo" />
      </div>

      <div className={styles.card}>
        {/* HEADER */}
        <div className={styles.header}>
          <h1>Create Account</h1>
          <p>Join the church community and get started</p>
        </div>

        {/* FORM */}
        <form onSubmit={handleSubmit} className={styles.form}>
          <div className={styles.grid}>
            {/* FIRST NAME */}
            <div className={styles.inputGroup}>
              <label>First Name</label>
              <div className={styles.inputWrapper}>
                <FiUser />
                <input
                  type="text"
                  value={data.first_name}
                  onChange={(e) => setData("first_name", e.target.value)}
                  placeholder="First name"
                />
              </div>
              {errors.first_name && (
                <small className={styles.error}>{errors.first_name}</small>
              )}
            </div>

            {/* LAST NAME */}
            <div className={styles.inputGroup}>
              <label>Last Name</label>
              <div className={styles.inputWrapper}>
                <FiUser />
                <input
                  type="text"
                  value={data.last_name}
                  onChange={(e) => setData("last_name", e.target.value)}
                  placeholder="Last name"
                />
              </div>
              {errors.last_name && (
                <small className={styles.error}>{errors.last_name}</small>
              )}
            </div>

            {/* EMAIL */}
            <div className={styles.inputGroup}>
              <label>Email Address</label>
              <div className={styles.inputWrapper}>
                <FiMail />
                <input
                  type="email"
                  value={data.email}
                  onChange={(e) => setData("email", e.target.value)}
                  placeholder="email@example.com"
                />
              </div>
              {errors.email && (
                <small className={styles.error}>{errors.email}</small>
              )}
            </div>

            {/* PASSWORD */}
            <div className={styles.inputGroup}>
              <label>Password</label>
              <div className={styles.inputWrapper}>
                <FiLock />
                <input
                  type={showPassword ? "text" : "password"}
                  value={data.password}
                  onChange={(e) => setData("password", e.target.value)}
                  placeholder="Enter password"
                />
                <span
                  className={styles.toggle}
                  onClick={() => setShowPassword((prev) => !prev)}
                >
                  {showPassword ? <FiEyeOff /> : <FiEye />}
                </span>
              </div>
              {errors.password && (
                <small className={styles.error}>{errors.password}</small>
              )}
            </div>

            {/* CONFIRM PASSWORD */}
              <div className={styles.inputGroup}>
                <label>Confirm Password</label>

                <div className={styles.inputWrapper}>
                  <FiLock />

                  <input
                    type={showConfirmPassword ? "text" : "password"}
                    value={data.password_confirmation}
                    onChange={(e) =>
                      setData("password_confirmation", e.target.value)
                    }
                    placeholder="Confirm password"
                  />

                  <span
                    className={styles.toggle}
                    onClick={() => setShowConfirmPassword((prev) => !prev)}
                  >
                    {showConfirmPassword ? <FiEyeOff /> : <FiEye />}
                  </span>
                </div>

                {/* 🔥 LIVE MATCH FEEDBACK */}
                {showPasswordMatchState && (
                  <small
                    className={
                      passwordsMatch ? styles.successText : styles.errorText
                    }
                  >
                    {passwordsMatch
                      ? "Passwords match ✅"
                      : "Passwords do not match"}
                  </small>
                )}

                {errors.password_confirmation && (
                  <small className={styles.error}>
                    {errors.password_confirmation}
                  </small>
                )}
              </div>
          </div>

          {/* BUTTON */}
          <button
            type="submit"
            disabled={processing}
            className={styles.button}
          >
            {processing ? "Creating..." : "Create Account"}
          </button>
        </form>

        {/* FOOTER */}
        <div className={styles.footer}>
          <p style={{ fontSize: ".9rem" }}>
            Already have an account?{" "}
            <span onClick={() => router.visit(route("login"))}>
              Log in
            </span>
          </p>
        </div>
      </div>
    </div>
  );
}