/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"

import { useEffect, useState } from "react"
import { useForm } from "@inertiajs/react"
import styles from "./admins.module.scss"
import AdminDashboardLayout from "@/layouts/admin_layout"
import PageIntro from "@/components/dashboard/PageIntro"
import NoResults from "@/components/dashboard/NoResults"
import Pagination from "@/components/shared/Pagination"
import { usePaginatedData } from "@/hooks/use-paginated-data"
import AdminTableRow from "@/components/admin/AdminTableRow"
import { FaEye, FaEyeSlash } from "react-icons/fa"
import { router } from "@inertiajs/react";

interface Admin {
  id: number | string
  name: string
  email: string
  username: string
  phone?: string
  password?: string
}

interface AdminsProps {
  admins: {
    data: Admin[]
    links: any[]
  }
  perPage?: number
}

interface FormData {
  id?: string
  name: string
  username?: string
  phone?: string
  email: string
  password?: string
  password_confirmation?: string
  role: string
  is_account_active: boolean
}

const Admins = ({ admins, perPage: initialPerPage = 10 }: AdminsProps) => {
  const { loading: isLoading, setLoading, handlePageChange } =
    usePaginatedData(initialPerPage)

//  console.log("Returned admins", admins)

  const [showAddModal, setShowAddModal] = useState(false)
  const [editAdmin, setEditAdmin] = useState<Admin | null>(null)
  const [deleteAdmin, setDeleteAdmin] = useState<any>(null)
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [showEditPassword, setShowEditPassword] = useState(false)

  const addForm = useForm<FormData>({
    name: "",
    username: "",
    phone: "",
    email: "",
    password: "",
    password_confirmation: "",
    role: "admin",
    is_account_active: true,
  })

  const editForm = useForm<FormData>({
    id: "",
    name: "",
    username: "",
    phone: "",
    email: "",
    password: "",
    password_confirmation: "",
    role: "admin",
    is_account_active: true,
  })

  useEffect(() => {
    setLoading(true)
    const timer = setTimeout(() => setLoading(false), 1000)
    return () => clearTimeout(timer)
  }, [])

  const TableSkeleton = () => (
    <div className={styles["admins__children"]}>
      {[...Array(5)].map((_, i) => (
        <div key={i} className={styles["skeleton__row"]}>
          {[...Array(6)].map((_, j) => (
            <div key={j} className={styles["skeleton__cell"]} />
          ))}
        </div>
      ))}
    </div>
  )

  const handleAddAdmin = () =>
    addForm.post("/admin/admins", {
      onSuccess: () => {
        setShowAddModal(false)
        addForm.reset()
        setShowPassword(false)
      },
    })

  const handleEditAdmin = () =>
    editForm.put(`/admin/admins/${editForm.data.id}`, {
      onSuccess: () => {
        setEditAdmin(null)
        editForm.reset()
        setShowEditPassword(false)
      },
    })

  const handleDeleteAdmin = () => {
    if (!deleteAdmin) return;

    router.delete(
      route(
        "admins.destroy",
        deleteAdmin.id
      ),
      {
        preserveScroll: true,

        onSuccess: () => {
          setDeleteAdmin(null);
        },

        onError: () => {
          setDeleteAdmin(null);
        },
      }
    );
  };

  const openEditModal = (admin: Admin) => {
    setEditAdmin(admin)
    editForm.setData({
      id: String(admin.id),
      name: admin.name,
      email: admin.email,
      username: admin.username,
      phone: admin.phone || "",
      password: admin.password || "",
      password_confirmation: "",
    })
  }

  const openDeleteModal = (admin: Admin) => setDeleteAdmin(admin)

  return (
    <>
      <div className={styles.admins}>
        <PageIntro
          title="Manage Administrators"
          description="View, edit, and manage all system administrators here."
        />

        <div className={styles["admins__actions"]}>
          <button className={styles["admins__add-btn"]} onClick={() => setShowAddModal(true)}>
            + Add Admin
          </button>
        </div>

        <div className={styles["admins__content"]}>
          <div className={styles["admins__table-wrapper"]}>
            <div className={styles["admins__table"]}>
              <span>Name</span>
              <span>Email</span>
              <span>Role</span>
              <span>Date Created</span>
              <span>Status</span>
              <span>Actions</span>
            </div>

            <div className={styles["admins__children"]}>
              {isLoading ? (
                <TableSkeleton />
              ) : admins?.data?.length === 0 ? (
                <NoResults
                  title="No Admins Found"
                  description="There are no administrators in the system yet."
                />
              ) : (
                admins.data.map((admin) => (
                  <AdminTableRow
                    key={admin.id}
                    admin={admin}
                    onEdit={openEditModal}
                    onDelete={openDeleteModal}
                  />
                ))
              )}
            </div>
          </div>
        </div>

        <div className={styles.pagination}>
          {admins?.links?.length > 0 && (
            <Pagination links={admins.links} onChange={handlePageChange} />
          )}
        </div>
      </div>

      {/* ===================== Add Admin Modal ===================== */}
      {showAddModal && (
        <div className={styles.modalOverlay}>
          <div className={styles.modal}>
            <h3>Add New Admin</h3>
            <p>You are about to create a new admin with full privileges.</p>

            <label>Name</label>
            <input
              type="text"
              placeholder="Enter full name"
              value={addForm.data.name}
              onChange={(e) => addForm.setData("name", e.target.value)}
            />

            <label>Username</label>
            <input
              type="text"
              placeholder="Enter username"
              value={addForm.data.username}
              onChange={(e) => addForm.setData("username", e.target.value)}
            />

            <label>Phone</label>
            <input
              type="text"
              placeholder="Enter phone number"
              value={addForm.data.phone}
              onChange={(e) => addForm.setData("phone", e.target.value)}
            />

            <label>Email</label>
            <input
              type="email"
              placeholder="Enter email"
              value={addForm.data.email}
              onChange={(e) => addForm.setData("email", e.target.value)}
            />

            <label>Password</label>
            <div className={styles.passwordWrapper}>
              <input
                type={showPassword ? "text" : "password"}
                placeholder="Enter password"
                value={addForm.data.password}
                onChange={(e) => addForm.setData("password", e.target.value)}
              />
              <span
                className={styles.passwordToggle}
                onClick={() => setShowPassword(!showPassword)}
              >
                {showPassword ? <FaEyeSlash /> : <FaEye />}
              </span>
            </div>

            <label>Confirm Password</label>
            <div className={styles.passwordWrapper}>
            <input
              type={showConfirmPassword ? "text" : "password"}
              placeholder="Confirm password"
              value={addForm.data.password_confirmation}
              onChange={(e) => addForm.setData("password_confirmation", e.target.value)}
            />
            <span
                className={styles.passwordToggle}
                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
              >
                {showConfirmPassword ? <FaEyeSlash /> : <FaEye />}
              </span>
            </div>

            <div className={styles.modal__actions}>
              <button className={styles["edit-btn"]} onClick={handleAddAdmin}>
                Add
              </button>
              <button
                className={styles["delete-btn"]}
                onClick={() => setShowAddModal(false)}
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ===================== Edit Admin Modal ===================== */}
      {editAdmin && (
        <div className={styles.modalOverlay}>
          <div className={styles.modal}>
            <h3>Edit Admin</h3>

            <label>Name</label>
            <input
              type="text"
              value={editForm.data.name}
              onChange={(e) => editForm.setData("name", e.target.value)}
            />

            <label>Username</label>
            <input
              type="text"
              value={editForm.data.username}
              onChange={(e) => editForm.setData("username", e.target.value)}
            />

            <label>Phone</label>
            <input
              type="text"
              value={editForm.data.phone}
              onChange={(e) => editForm.setData("phone", e.target.value)}
            />

            <label>Email</label>
            <input
              type="email"
              value={editForm.data.email}
              onChange={(e) => editForm.setData("email", e.target.value)}
            />

            <label>Password (leave blank to keep current)</label>
            <div className={styles.passwordWrapper}>
              <input
                type={showEditPassword ? "text" : "password"}
                placeholder="Enter new password"
                value={editForm.data.password}
                onChange={(e) => editForm.setData("password", e.target.value)}
              />
              <span
                className={styles.passwordToggle}
                onClick={() => setShowEditPassword(!showEditPassword)}
              >
                {showEditPassword ? <FaEyeSlash /> : <FaEye />}
              </span>
            </div>

            <label>Confirm Password</label>
            <input
              type="password"
              placeholder="Confirm new password"
              value={editForm.data.password_confirmation}
              onChange={(e) =>
                editForm.setData("password_confirmation", e.target.value)
              }
            />

            <div className={styles.modal__actions}>
              <button className={styles["edit-btn"]} onClick={handleEditAdmin}>
                Update
              </button>
              <button
                className={styles["delete-btn"]}
                onClick={() => setEditAdmin(null)}
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ===================== Delete Admin Modal ===================== */}
      {deleteAdmin && (
        <div className={styles.modalOverlay}>
          <div className={styles.modal}>
            <h3>Delete Admin</h3>
            <p>
              Are you sure you want to delete <strong>{deleteAdmin.name}</strong>? He/she will loss admin privileges. Be sure before you proceed.
            </p>
            <div className={styles.modal__actions}>
              <button
                className={styles["delete-btn"]}
                onClick={handleDeleteAdmin}
              >
                Delete
              </button>
              <button
                className={styles["edit-btn"]}
                onClick={() => setDeleteAdmin(null)}
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  )
}

Admins.layout = (page: React.ReactNode) => (
  <AdminDashboardLayout title="Manage Administrators">{page}</AdminDashboardLayout>
)

export default Admins