"use client";

import styles from "./analytics-summary.module.scss";
import { Link, usePage } from "@inertiajs/react";
import { FaEyeSlash, FaRegEye, FaPiggyBank } from "react-icons/fa6";
import { IoWallet } from "react-icons/io5";
import { BsSendFill } from "react-icons/bs";
import { useState, useEffect } from "react";
import { formatMoneyComplete } from "@/lib/utils/format-money";
import currencyData from "../../../../data/countries-currencies.json";

interface AuthUser {
  balance: number;
}

interface PageProps {
  auth: {
    user: AuthUser;
  };
  appSettings: {
    base_currency: string;
  };
}

const AnalyticsSummaryCard: React.FC = () => {
  const [hideAmount, setHideAmount] = useState(false);
  const [loading, setLoading] = useState(true);

  const { auth, appSettings } =
    usePage().props as unknown as PageProps;

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

  useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false);
    }, 1000);

    return () => clearTimeout(timer);
  }, []);

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


  // const formatBalance = (value: number) => {
  //   if (value >= 500_000) {
  //     return `${(value / 1000).toFixed(
  //       value % 1000 === 0 ? 0 : 1
  //     )}K`;
  //   }

  //   return value.toLocaleString();
  // };

  const Skeleton = () => (
    <div className={styles.card}>
      <div className={styles.card__left}>
        <div
          className={styles.skeleton}
          style={{
            width: "140px",
            height: "24px",
            marginBottom: "10px",
          }}
        />

        <div
          className={styles.skeleton}
          style={{
            width: "220px",
            height: "40px",
          }}
        />
      </div>

      <div className={styles.card__right}>
        <div
          className={styles.skeleton}
          style={{
            width: "110px",
            height: "40px",
          }}
        />

        <div
          className={styles.skeleton}
          style={{
            width: "110px",
            height: "40px",
          }}
        />

        <div
          className={styles.skeleton}
          style={{
            width: "110px",
            height: "40px",
          }}
        />
      </div>
    </div>
  );

  if (loading) {
    return <Skeleton />;
  }

  return (
    <div className={styles.card}>
      {/* LEFT */}
      <div className={styles.card__left}>
        <div className={styles.card__title}>
          <h4>Balance</h4>

          <button
            type="button"
            className={styles.eyeButton}
            onClick={toggleHideAmount}
            title={hideAmount ? "Show balance" : "Hide balance"}
          >
            {hideAmount ? <FaRegEye /> : <FaEyeSlash />}
          </button>
        </div>

        <h2 className={styles.card__amount}>
          {hideAmount ? (
            "********"
          ) : (
            <span className={styles.amountValue}>
              <span className={styles.currency}>
                {currency?.currency_symbol}
              </span>

              <span>
                {formatMoneyComplete(
                  auth?.user?.balance ?? 0
                )}
              </span>
            </span>
          )}
        </h2>
      </div>

      {/* RIGHT */}
      <div className={styles.card__right}>
        <Link
          href="/dashboard/deposits"
          className={`${styles.actionBtn} ${styles.fund}`}
        >
          <FaPiggyBank />
          Fund Wallet
        </Link>

        <Link
          href="/dashboard/withdrawals"
          className={`${styles.actionBtn} ${styles.withdraw}`}
        >
          <IoWallet />
          Withdraw
        </Link>

        <Link
          href="/dashboard/roi"
          className={`${styles.actionBtn} ${styles.transfer}`}
        >
          <BsSendFill />
          Returns
        </Link>
      </div>
    </div>
  );
};

export default AnalyticsSummaryCard;