/* eslint-disable @typescript-eslint/no-empty-object-type */
/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { JSX, useState } from "react";
import DashboardLayout from "@/layouts/dashboard";
import DashboardHeader from "@/components/shared/DashPageHeader";
import DashStatsCard from "@/components/shared/DashStatsCard";
import ProjectOverview from "@/components/dashboard/project-overview";
import ProjectFinancials from "@/components/dashboard/project-financials";
import ProjectDonations from "@/components/dashboard/project-donations";
import ProgramChecklist from "@/components/dashboard/program-checklist";
import { FiUsers, FiFileText, FiBarChart2 } from "react-icons/fi";
import { IoIosWarning } from "react-icons/io";
import styles from "./program.module.scss";

interface ProgramPageProps {
  program: any;
  totalProgramsCount: number;
  pendingProgramsCount: number;
  completedProgramsCount: number;
}

interface ProgramPageFC<P = {}> extends React.FC<P> {
  layout?: (page: React.ReactNode) => JSX.Element;
}

const ProgramPage: ProgramPageFC<ProgramPageProps> = ({
  program,
  totalProgramsCount,
  pendingProgramsCount,
  completedProgramsCount,
}) => {
  const [activeTab, setActiveTab] = useState(1);

  const stats = [
    { title: "Total Programs", description: "All programs", value: totalProgramsCount, icon: <FiUsers /> },
    { title: "Pending Programs", description: "Programs yet to be completed", value: pendingProgramsCount, icon: <FiFileText /> },
    { title: "Completed Programs", description: "Programs successfully completed", value: completedProgramsCount, icon: <FiBarChart2 /> },
  ];

  return (
    <div className={styles.programPage}>
      {/* Dashboard Header */}
      <DashboardHeader
        title={program.name}
        description="Gain insights and manage this program seamlessly"
        actionButton={{ label: "Edit Program", onClick: () => console.log("Edit clicked") }}
      />

      {/* Hero Banner */}
      {program.banner && (
        <div className={styles.heroBanner}>
          <img src={program.banner} alt={program.name} />
          <div className={styles.overlay}>
            <h1>{program.name}</h1>
            <p>{program.description}</p>
          </div>
        </div>
      )}

      {/* Optional Notice */}
      <div className={styles.noticeBox}>
        <div className={styles.noticeHeader}>
          <IoIosWarning size="1.3rem" />
          <h1>Important Notice</h1>
        </div>
        <div className={styles.noticeBody}>
          <p>
            Please note that there is a relationship between this project and all its associated donors and expenses records. Deleting this project will also delete those records.
          </p>
        </div>
      </div>

      {/* Stats */}
      <div className={styles.statsWrapper}>
        <DashStatsCard stats={stats} />
      </div>

      {/* Tabs */}
      <div className={styles.tabsWrapper}>
        {["Program Overview", "Program Financials", "Donations & Supports", "Todos Checklist"].map((label, index) => (
          <div
            key={index}
            className={activeTab === index + 1 ? `${styles.tab} ${styles.active}` : styles.tab}
            onClick={() => setActiveTab(index + 1)}
          >
            {label}
          </div>
        ))}
      </div>

      {/* Tab Content */}
      <div className={styles.tabContent}>
        {activeTab === 1 && <ProjectOverview project={program} />}
        {activeTab === 2 && <ProjectFinancials project={program} />}
        {activeTab === 3 && <ProjectDonations project={program} />}
        {activeTab === 4 && <ProgramChecklist program={program} />}
      </div>
    </div>
  );
};

// Layout wrapper
ProgramPage.layout = (page: React.ReactNode) => <DashboardLayout title="Manage Program">{page}</DashboardLayout>;

export default ProgramPage;