"use client";

/* eslint-disable @typescript-eslint/no-explicit-any */

import { useState } from "react";
import { router, usePage } from "@inertiajs/react";
import DashboardLayout from "@/layouts/dashboard";
import DashboardHeader from "@/components/shared/DashPageHeader";

import styles from "./security.module.scss";

import { FiLock, FiEye, FiEyeOff } from "react-icons/fi";

const DashboardSecurity = () => {
  const { errors }: any = usePage().props; // ✅ backend errors

  const [loading, setLoading] = useState(false);

  const [form, setForm] = useState({
    current_password: "",
    new_password: "",
    confirm_password: "",
  });

  const [show, setShow] = useState({
    current_password: false,
    new_password: false,
    confirm_password: false,
  });

  const handleChange = (key: string, value: string) => {
    setForm((prev) => ({
      ...prev,
      [key]: value,
    }));
  };

  const toggleVisibility = (key: string) => {
    setShow((prev: any) => ({
      ...prev,
      [key]: !prev[key],
    }));
  };

  const handleSubmit = () => {
    setLoading(true);

    router.post(route("member.settings.password"), form, {
      preserveScroll: true,
      onFinish: () => setLoading(false),
    });
  };

  return (
    <div className={styles.page}>
      <DashboardHeader
        title="Security Settings"
        description="Update your account password anytime you want"
      />

      <div className={styles.content}>
        <div className={styles.card}>
          <h3>Change Password</h3>
          <p>
            For your security, choose a strong password you do not use elsewhere.
          </p>

          <div className={styles.form}>
            <Input
              label="Current Password"
              value={form.current_password}
              visible={show.current_password}
              onToggle={() => toggleVisibility("current_password")}
              onChange={(v: string) =>
                handleChange("current_password", v)
              }
              error={errors.current_password}
            />

            <Input
              label="New Password"
              value={form.new_password}
              visible={show.new_password}
              onToggle={() => toggleVisibility("new_password")}
              onChange={(v: string) =>
                handleChange("new_password", v)
              }
              error={errors.new_password}
            />

            <Input
              label="Confirm Password"
              value={form.confirm_password}
              visible={show.confirm_password}
              onToggle={() => toggleVisibility("confirm_password")}
              onChange={(v: string) =>
                handleChange("confirm_password", v)
              }
              error={errors.confirm_password}
            />

            <button
              className={styles.submitBtn}
              onClick={handleSubmit}
              disabled={loading}
            >
              {loading ? "Updating..." : "Update Password"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DashboardSecurity;

DashboardSecurity.layout = (page: any) => (
  <DashboardLayout title="Security">
    {page}
  </DashboardLayout>
);

/* ================= INPUT ================= */
const Input = ({
  label,
  value,
  onChange,
  visible,
  onToggle,
  error,
}: any) => (
  <div className={styles.inputGroup}>
    <label>{label}</label>

    <div
      className={`${styles.inputWrapper} ${
        error ? styles.inputError : ""
      }`}
    >
      <FiLock />

      <input
        type={visible ? "text" : "password"}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={`Enter ${label.toLowerCase()}`}
      />

      <span className={styles.eyeIcon} onClick={onToggle}>
        {visible ? <FiEyeOff /> : <FiEye />}
      </span>
    </div>

    {/* ✅ INLINE ERROR ONLY */}
    {error && <p className={styles.errorText}>{error}</p>}
  </div>
);