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

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

interface FlashProps {
  success?: string | null;
  error?: string | null;
  warning?: string | null;
  info?: string | null;
}

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

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

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

  const { props } = usePage<{ flash?: FlashProps }>();

  return (
    <>
      <Flash
        success={props.flash?.success}
        error={props.flash?.error}
        warning={props.flash?.warning}
        info={props.flash?.info}
      />

    <div className={styles.wrapper}>
      
      {/* ✅ SAME AS REGISTER */}
      <div className={styles.logo}>
        <img src="/logo.png" alt="Censers Church Logo" />
      </div>

      <div className={styles.card}>
        {/* HEADER */}
        <div className={styles.header}>
          <h1>Welcome Back</h1>
          <p>Log in to your account to continue</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>

          {/* PASSWORD */}
          <div className={styles.inputGroup}>
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
              }}
            >
              <label>Password</label>

              <span style={{ fontSize: ".9rem" }}
                className={styles.forgot}
                onClick={() => router.visit(route("password.request"))}
              >
                Forgot password?
              </span>
            </div>

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

              <input
                type={showPassword ? "text" : "password"}
                placeholder="Enter your 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>

          {/* BUTTON */}
          <button
            type="submit"
            disabled={processing}
            className={styles.button}
          >
            {processing ? "Logging in..." : "Log in"}
          </button>
        </form>

        {/* REGISTER LINK */}
        <div className={styles.register}>
          <p style={{ textAlign: "center", fontSize: ".95rem" }}>
            Don’t have an account?{" "}
            <span onClick={() => router.visit("/register")}>
              Create account
            </span>
          </p>
        </div>

        {/* FOOTER */}
        <div className={styles.footer}>
          <p>Secure • Fast • Trusted</p>
        </div>
      </div>
    </div>
    </>
  );
}