"use client";

import styles from "./analytics-summary.module.scss";
import { Link } from "@inertiajs/react";
import { FaEyeSlash, FaRegEye } from "react-icons/fa6";
import { IoWallet } from "react-icons/io5";
import { useState, useEffect } from "react";

const Skeleton = () => (
  <div className={styles.card}>
    <div className={styles.headerRow}>
      <div className={styles.skeletonTop}></div>
      <div className={styles.skeletonButton}></div>
    </div>

    <div className={styles.center}>
      <div className={styles.skeletonAmount}></div>
    </div>
  </div>
);

interface summaryProps {
  path: string
}

const AnalyticsSummaryBanner:React.FC<summaryProps> = ({ path }) => {
  const [hidden, setHidden] = useState(false);
  const [displayValue, setDisplayValue] = useState("₦1,250,000.00");
  const [animating, setAnimating] = useState(false);
  const [loading, setLoading] = useState(true);

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

  const toggleBalance = () => {
    if (animating) return;

    setAnimating(true);

    setHidden((prev) => {
      const next = !prev;

      setTimeout(() => {
        setDisplayValue(next ? "••••••••" : "₦1,250,000.00");
      }, 150);

      return next;
    });

    setTimeout(() => setAnimating(false), 300);
  };

  if (loading) return <Skeleton />;

  return (
    <div className={styles.card}>
      {/* 🔥 HEADER ROW (NEW) */}
      <div className={styles.headerRow}>
        <div className={styles.titleRow}>
          <span>Total Givings</span>

          <button
            type="button"
            className={styles.eye}
            onClick={toggleBalance}
          >
            {hidden ? <FaRegEye /> : <FaEyeSlash />}
          </button>
        </div>

        {/* BUTTON (moves on mobile) */}
        <Link href={ `${ path }` } className={styles.button}>
          <IoWallet />
          <span>Manage Finance</span>
        </Link>
      </div>

      {/* BALANCE */}
      <div
        className={`${styles.balance} ${
          animating ? styles.animating : ""
        }`}
      >
        {displayValue}
      </div>
    </div>
  );
};

export default AnalyticsSummaryBanner;