/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState } from "react";
import styles from "./project.module.scss";
import DashboardLayout from "@/layouts/dashboard";
import { FaCodeBranch } from "react-icons/fa";
import FinanceAnalyticsStatCard from "@/components/dashboard/finance-analytics-card";
import { GiReceiveMoney, GiCash } from "react-icons/gi";
import { FaMoneyBillTrendUp } from "react-icons/fa6";
import ProjectOverview from "@/components/dashboard/project-overview";
import ProjectFinancials from "@/components/dashboard/project-financials";
import ProjectDonations from "@/components/dashboard/project-donations";

const Project = ({ project }:any) => {
  const { name } = project
  const [activeState, setActiveState] = useState(1);

  const toggleActiveState = (key: number) => setActiveState(key);

  return (
    <>

      {/* Page Content */}
      <div className={styles.project}>
        <div className={styles.project__content}>
          {/* Header */}
          <div className={styles["project__content--header"]}>
            <div className={styles["project__content--header--left"]}>
              <div className={styles["project__content--header--left--icon"]}>
                <span>
                  <FaCodeBranch size="1.2rem" />
                </span>
              </div>
              <div className={styles["project__content--header--left--text"]}>
                <h1>{ name }</h1>
                <p>Gain insights into the project and manage the project seamlessly</p>
              </div>
            </div>
          </div>

          {/* Stats Cards */}
          <div className={styles["project__content--stats"]}>
            <h1>Project Statistics</h1>
            <p>See a summary of the project statistics at a glance.</p>
            <div className={styles["project__content--stats--cards"]}>
              <div className={styles["project__content--stats--cards"]}>
                <FinanceAnalyticsStatCard 
                  title="Project Budget"
                  amount={5000000}
                  icon={<GiCash color="#4E46C3" />}
                />

                <FinanceAnalyticsStatCard 
                  title="Total Donations"
                  amount={5000000}
                  icon={<GiReceiveMoney color="#2EAB5B" />}
                />

                <FinanceAnalyticsStatCard 
                  title="Total Expenses"
                  amount={5000000}
                  icon={<FaMoneyBillTrendUp color="#721C23" />}
                />

                </div>
            </div>
          </div>

          <div className={styles["project__content__details"]}>
              {/* Tabs */}
          <div className={styles.project__content__details__tab}>
            <div
              onClick={() => toggleActiveState(1)}
              className={
                activeState === 1
                  ? styles["project__content__details__tab--active"]
                  : styles["project__content__details__tab--item"]
              }
            >
              Project Overview
            </div>

             <div
              onClick={() => toggleActiveState(2)}
              className={
                activeState === 2
                  ? styles["project__content__details__tab--active"]
                  : styles["project__content__details__tab--item"]
              }
            >
              Project Financials
            </div>

             <div
              onClick={() => toggleActiveState(3)}
              className={
                activeState === 3
                  ? styles["project__content__details__tab--active"]
                  : styles["project__content__details__tab--item"]
              }
            >
              Specical Donations/Supports
            </div>
          </div>

          {/* Tab Content */}
          <div className={styles.project__content__details__details}>
           { activeState === 1 ? <ProjectOverview project={project} /> : null }

           { activeState === 2 ? <ProjectFinancials project={project} /> : null }

           { activeState === 3 ? <ProjectDonations project={project} /> : null }
          </div>
          </div>
        </div>
      </div>
    </>
  );
};

// Layout
Project.layout = (page: any) => (
  <DashboardLayout title="Manage selected project">{page}</DashboardLayout>
);

export default Project;