/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

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

export default function ActivateAccount({ token, email }: any) {
  const { data, setData, post, processing, errors } = useForm({
    token,
    password: "",
    password_confirmation: "",
  });

  const [showPassword, setShowPassword] = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    post(route("activate.complete"));
  };

  return (
    <div className={styles.wrapper}>
      <div className={styles.card}>
        {/* HEADER */}
        <div className={styles.header}>
          <h1>Activate Your Account</h1>
          <p>Secure your access and continue to your dashboard</p>
        </div>

        {/* EMAIL */}
        <div className={styles.emailBox}>
          <FiMail />
          <span>{email}</span>
        </div>

        {/* FORM */}
        <form onSubmit={handleSubmit} className={styles.form}>
          {/* PASSWORD */}
          <div className={styles.inputGroup}>
            <label>Password</label>

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

              <input
                required
                type={showPassword ? "text" : "password"}
                placeholder="Enter secure password"
                value={data.password}
                onChange={(e) => setData("password", e.target.value)}
              />

              <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
                required
                type={showConfirm ? "text" : "password"}
                placeholder="Re-enter password"
                value={data.password_confirmation}
                onChange={(e) =>
                  setData("password_confirmation", e.target.value)
                }
              />

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

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

        {/* FOOTER */}
        <div className={styles.footer}>
          <p>Protected by secure authentication</p>
        </div>
      </div>
    </div>
  );
}