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

import { useEffect, useState } from "react"

import styles from "./account.module.scss"

import PageIntro from "@/components/dashboard/PageIntro"

import UserDashboardLayout from "@/layouts/user_dashboard_layout"

import Profile from "@/components/dashboard/Account/profile"
import ChangePassword from "@/components/dashboard/Account/change-password"
import { usePage } from "@inertiajs/react"
// import TransactionPin from "@/components/dashboard/Account/transaction-pin"
// import WithdrawalSettings from "@/components/dashboard/Account/withdrawal-settings"

const Account = ({ user }: any) => {
  const { auth } = usePage().props as any;
  const [activeTab, setActiveTab] =
    useState(1)

  useEffect(() => {
    const params =
      new URLSearchParams(
        window.location.search
      )

    if (
      params.get("page") ===
      "change-password"
    ) {
      setActiveTab(2)
    }

    if (
      params.get("page") ===
      "transaction-pin"
    ) {
      setActiveTab(3)
    }

    if (
      params.get("page") ===
      "payment-settings"
    ) {
      setActiveTab(4)
    }
  }, [])

  const getInitials = (name = "") => {
    return name
      .trim()
      .split(" ")
      .filter(Boolean)
      .slice(0, 2)
      .map((word) => word[0])
      .join("")
      .toUpperCase();
  };

  return (
    <div className={styles.account}>
      <PageIntro
        title="Account Settings"
        description="Manage your profile, security settings and account preferences."
      />

      {/* ============================
          PROFILE HERO
      ============================ */}

      <div
        className={styles.account__hero}
      >
        <div
          className={
            styles.account__heroAvatar
          }
        >
          {getInitials(auth?.user?.name)}
        </div>

        <div
          className={
            styles.account__heroContent
          }
        >
          <span
            className={
              styles.account__heroBadge
            }
          >
            Member
          </span>

          <h2>
            {user?.full_name ||
              user?.name}
          </h2>

          <p>{user?.email}</p>
        </div>
      </div>

      {/* ============================
          TABS
      ============================ */}

      <div
        className={styles.account__tabs}
      >
        <button
          onClick={() =>
            setActiveTab(1)
          }
          className={
            activeTab === 1
              ? styles.account__tabActive
              : styles.account__tab
          }
        >
          Account Profile
        </button>

        <button
          onClick={() =>
            setActiveTab(2)
          }
          className={
            activeTab === 2
              ? styles.account__tabActive
              : styles.account__tab
          }
        >
          Change Password
        </button>

        {/* <button
          onClick={() =>
            setActiveTab(3)
          }
          className={
            activeTab === 3
              ? styles.account__tabActive
              : styles.account__tab
          }
        >
          Transaction Pin
        </button> */}

        {/* <button
          onClick={() =>
            setActiveTab(4)
          }
          className={
            activeTab === 4
              ? styles.account__tabActive
              : styles.account__tab
          }
        >
          Payment Settings
        </button> */}
      </div>

      {/* ============================
          CONTENT
      ============================ */}

      <div
        className={styles.account__content}
      >
        {activeTab === 1 && (
          <Profile user={user} />
        )}

        {activeTab === 2 && (
          <ChangePassword />
        )}
{/* 
        {activeTab === 3 && (
          <TransactionPin />
        )}

        {activeTab === 4 && (
          <WithdrawalSettings />
        )} */}
      </div>
    </div>
  )
}

Account.layout = (
  page: React.ReactNode
) => (
  <UserDashboardLayout
    title="Account Settings"
  >
    {page}
  </UserDashboardLayout>
)

export default Account