/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState, useRef } from "react";
import styles from "./finance.module.scss";
import DashboardLayout from "@/layouts/dashboard";
import ServicesTypes from "@/components/dashboard/services-types";
import IncomeTypes from "@/components/dashboard/income-types";
import DashStatsCard from "@/components/shared/DashStatsCard";
import DashboardHeader from "@/components/shared/DashPageHeader";
import {  
  MdOutlineLoyalty, 
  MdPendingActions, 
} from "react-icons/md";
import CreateProgramModal from "@/components/modals/create-program-modal";
import AddServiceTypeModal from "@/components/modals/add-service-type-modal";
import { GrNotes } from "react-icons/gr";
import Transactions from "@/components/dashboard/transactions";

const Finance = ({ services, programs }: any) => {
  const [activeState, setActiveState] = useState(1);
  const [programModal, setProgramModal] = useState(false);
  const [serviceModal, setServiceModal] = useState(false);

  const [flash, setFlash] = useState<{ type: "success" | "error"; message: string } | null>(null);
  const flashTimer = useRef<NodeJS.Timeout | null>(null);

  const showFlash = (type: "success" | "error", message: string) => {
    const newFlash = { type, message };
    setFlash(newFlash);

    if (flashTimer.current) clearTimeout(flashTimer.current);

    flashTimer.current = setTimeout(() => {
      setFlash(null);
      flashTimer.current = null;
    }, 4000);
  };

  const toggleActiveState = (key: number) => setActiveState(key);
  const toggleAddProgramModal = () => setProgramModal(!programModal);
  const toggleServiceModal = () => setServiceModal(!serviceModal);

  // ✅ NEW STATS DATA (replacing AttendanceStatsCard)
  const stats = [
    {
      title: "Total Income",
      value: 50,
      description: "All income records",
      icon: <MdPendingActions />,
      positive: true,
    },
    {
      title: "Total Expenses",
      value: 5,
      description: "All expenses recorded",
      icon: <GrNotes />,
      positive: true,
    },
  ];

  return (
    <>
      {/* FLASH */}
      {flash && (
        <div className={flash.type === "success" ? "alert-success" : "alert-error"}>
          {flash.type === "success" ? "✅ " : "❌ "} {flash.message}
        </div>
      )}

      {programModal && (
        <CreateProgramModal type="add" closeModal={toggleAddProgramModal} />
      )}

      {serviceModal && (
        <AddServiceTypeModal type="add" closeModal={toggleServiceModal} />
      )}

      {/* PAGE */}
      <div className={styles.finance}>
        <div className={styles.content}>

          {/* HEADER */}
         <DashboardHeader
          title="Accounting & Finance"
          description="Manage and gain functional insights into finances and general accounting"
          actionButton={{
            label: "Create Transaction",
            // onClick: () => setCreateAttendanceModal(true),
          }}
        />

          {/* STATS */}
          <div className={styles["finance__content--stats"]}>
            {/* ✅ REPLACED HERE */}
            <DashStatsCard stats={stats} />
          </div>

          {/* QUICK ACTIONS */}
          <div className={styles["finance__content__todos"]}>
            <div className={styles["finance__content__todos--text"]}>
              <h1>Quick Actions</h1>
              <p>Perform finance related actions seamlessly</p>
            </div>

            <div className={styles["finance__content__todos__grid"]}>
              <div className={styles["finance__content__todos__grid--item1"]}>
                <div className={styles["finance__content__todos__grid--item1--left"]}>
                  <span>
                    <MdOutlineLoyalty />
                  </span>
                </div>
                <div>
                  <h1>Create Transaction</h1>
                  <p>Add a new transaction record today</p>
                </div>
              </div>

              <div className={styles["finance__content__todos__grid--item2"]}>
                <div className={styles["finance__content__todos__grid--item2--left"]}>
                  <span>
                    <MdOutlineLoyalty />
                  </span>
                </div>
                <div>
                  <h1>Create Income Type</h1>
                  <p>Add a new income type or category</p>
                </div>
              </div>

              <div className={styles["finance__content__todos__grid--item3"]}>
                <div className={styles["finance__content__todos__grid--item3--left"]}>
                  <span>
                    <MdOutlineLoyalty />
                  </span>
                </div>
                <div>
                  <h1>Create Expenses Type</h1>
                  <p>Add a new expenses type or category</p>
                </div>
              </div>
            </div>
          </div>

          {/* TABS */}
          <div className={styles["finance__content__tab"]}>
            <div
              onClick={() => toggleActiveState(1)}
              className={
                activeState === 1
                  ? styles["finance__content__tab--active"]
                  : styles["finance__content__tab--item"]
              }
            >
              Transactions
            </div>

            <div
              onClick={() => toggleActiveState(2)}
              className={
                activeState === 2
                  ? styles["finance__content__tab--active"]
                  : styles["finance__content__tab--item"]
              }
            >
              Income Categories
            </div>

            <div
              onClick={() => toggleActiveState(3)}
              className={
                activeState === 3
                  ? styles["finance__content__tab--active"]
                  : styles["finance__content__tab--item"]
              }
            >
              Expenses Categories
            </div>
          </div>

          {/* DETAILS */}
          <div className={styles["finance__content__details"]}>
            {activeState === 1 && <Transactions />}

            {activeState === 2 && (
              <IncomeTypes
                programs={programs?.data}
                links={services?.links}
                onSuccess={(msg: string) => showFlash("success", msg)}
              />
            )}

            {activeState === 3 && (
              <ServicesTypes
                services={services?.data}
                links={services?.links}
                onSuccess={(msg: string) => showFlash("success", msg)}
              />
            )}
          </div>

        </div>
      </div>
    </>
  );
};

Finance.layout = (page: any) => (
  <DashboardLayout title="Financing and Accounting">
    {page}
  </DashboardLayout>
);

export default Finance;