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

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

export default function ForgotPassword({ status }: any) {
  const { data, setData, post, processing, errors } = useForm({
    email: "",
  });

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

  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>Forgot Password</h1>
          <p>Enter your email to receive a reset link</p>
        </div>

        {/* STATUS */}
        {status && (
          <div className={styles.emailBox}>
            <span>{status}</span>
          </div>
        )}

        {/* FORM */}
        <form onSubmit={handleSubmit} className={styles.form}>
          {/* EMAIL */}
          <div className={styles.inputGroup}>
            <label>Email Address</label>

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

              <input
                type="email"
                placeholder="email@example.com"
                value={data.email}
                onChange={(e) => setData("email", e.target.value)}
              />
            </div>

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

          {/* BUTTON */}
          <button
            type="submit"
            disabled={processing}
            className={styles.button}
          >
            {processing ? "Sending..." : "Send Reset Link"}
          </button>
        </form>

        {/* FOOTER ACTION */}
        <div className={styles.footer}>
          <p>
            Remember your password?{" "}
            <span
              onClick={() => router.visit(route("login"))}
              className={styles.forgot}
            >
              Back to login
            </span>
          </p>
        </div>
      </div>
    </div>
  );
}