"use client";
/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./admin-banner.module.scss";
import { Link, usePage } from "@inertiajs/react";
import { FaEyeSlash, FaRegEye, FaUserGroup } from "react-icons/fa6";
import { IoWallet } from "react-icons/io5";
import { BsSendFill } from "react-icons/bs";
import { useState, useEffect } from "react";
import currencyData from "../../../../data/countries-currencies.json";

const AdminHeaderBanner: React.FC = ({ totals }: any) => {
  const { appSettings } = usePage().props as any;
  const [loading, setLoading] = useState(true);
  const [hideAmount, setHideAmount] = useState(false);

  const currency = currencyData.find(
    (item) => item.currency_code === appSettings?.base_currency
  )

   // Format numbers: only if >= 500,000 -> K
  const formatBalance = (value: number) => {
    if (value >= 500_000) {
      return `${(value / 1000).toFixed(value % 1000 === 0 ? 0 : 1)}K`;
    }
    return value.toLocaleString(); // show full number with commas
  };

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

  const toggleHideAmount = () => setHideAmount((prev) => !prev);

  const Skeleton = () => (
    <div className={styles.card}>
      <div className={styles.card__left}>
        <div className={styles.skeleton} style={{ width: "120px", height: "20px", marginBottom: "8px" }} />
        <div className={styles.skeleton} style={{ width: "200px", height: "36px" }} />
      </div>
      <div className={styles.card__right}>
        {[...Array(3)].map((_, i) => (
          <div key={i} className={styles.skeleton} style={{ width: "100px", height: "36px", marginBottom: "8px" }} />
        ))}
      </div>
    </div>
  );

  if (loading) return <Skeleton />;

  return (
    <div className={styles.card}>
      {/* LEFT: Wallet Balance */}
      <div className={styles.card__left}>
        <div className={styles.card__title}>
          <h4>Wallet</h4>
          <span onClick={toggleHideAmount} title={hideAmount ? "Show balance" : "Hide balance"}>
            {hideAmount ? <FaRegEye /> : <FaEyeSlash />}
          </span>
        </div>
        <div className={styles.balanceWrapper}>
          {hideAmount ? (
            <h2 className={styles.card__amount}>*********</h2>
          ) : (
            <h2 className={styles.card__amount}>
              <span className={styles.currency}>{currency?.currency_symbol}</span>
              <span className={styles.value}>{formatBalance(totals?.deposits ?? 0)}</span>
            </h2>
          )}
        </div>
      </div>

      {/* RIGHT: Admin Links */}
      <div className={styles.card__right}>
        <Link href="/admin/users" className={`${styles.actionBtn} ${styles.fund}`}>
          <FaUserGroup /> All Users
        </Link>
        <Link href="/admin/deposits" className={`${styles.actionBtn} ${styles.withdraw} ${styles.hideOnMobile}`}>
          <IoWallet /> Deposits
        </Link>
        <Link href="/admin/withdrawals" className={`${styles.actionBtn} ${styles.transfer} ${styles.hideOnMobile}`}>
          <BsSendFill /> Withdrawals
        </Link>
      </div>
    </div>
  );
};

export default AdminHeaderBanner;