"use client";

import { update } from "@/routes/password";
import { Form, router } from "@inertiajs/react";
import styles from "./activate-account.module.scss";
import { useState } from "react";
import { FiLock, FiEye, FiEyeOff } from "react-icons/fi";

import InputError from "@/components/input-error";

interface ResetPasswordProps {
  token: string;
  email: string;
}

export default function ResetPassword({
  token,
  email,
}: ResetPasswordProps) {
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

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

      <div className={styles.card}>
        {/* HEADER */}
        <div className={styles.header}>
          <h1>Reset Password</h1>
          <p>Enter your new password below</p>
        </div>

        <Form
          {...update.form()}
          transform={(data) => ({ ...data, token, email })}
          resetOnSuccess={["password", "password_confirmation"]}
        >
          {({ processing, errors }) => (
            <div className={styles.form}>
              {/* EMAIL */}
              <div className={styles.inputGroup}>
                <label>Email Address</label>

                <div className={styles.inputWrapper}>
                  <input type="email" value={email} readOnly />
                </div>

                <InputError message={errors.email} />
              </div>

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

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

                  <input
                    type={showPassword ? "text" : "password"}
                    name="password"
                    placeholder="Enter new password"
                  />

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

                <InputError message={errors.password} />
              </div>

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

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

                  <input
                    type={showConfirmPassword ? "text" : "password"}
                    name="password_confirmation"
                    placeholder="Confirm password"
                  />

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

                <InputError message={errors.password_confirmation} />
              </div>

              {/* BUTTON */}
              <button
                type="submit"
                disabled={processing}
                className={styles.button}
              >
                {processing ? "Resetting..." : "Reset Password"}
              </button>
            </div>
          )}
        </Form>

        {/* 🔥 BACK TO LOGIN */}
        <div className={styles.register}>
          <p>
            Remember your password?{" "}
            <span onClick={() => router.visit("/login")}>
              Back to login
            </span>
          </p>
        </div>
      </div>
    </div>
  );
}