"use client";

/* eslint-disable @typescript-eslint/no-explicit-any */

import { usePage, router } from "@inertiajs/react";
import { useMemo, useState } from "react";

import DashboardLayout from "@/layouts/dashboard";
import DashboardHeader from "@/components/shared/DashPageHeader";
import MembersPageIntro from "@/components/members/members-page-intro";
import NewDataTable, { Column } from "@/components/shared/NewDataTable";
import Badge from "@/components/shared/HomePageBadge";

import DonationFundModal from "@/components/modals/donate-fund-modal";
import DeleteModal from "@/components/modals/delete-modal";
import AddPledgeModal from "@/components/modals/add-pledge-modal";

import styles from "./show-donation-fund.module.scss";
import NoResults from "@/components/dashboard/no-results";

import { FiAward, FiEdit, FiTrash2, FiPlus } from "react-icons/fi";
import { formatDateReadable, capitalizeFirstLetter } from "@/lib/utils";

import {
  PieChart,
  Pie,
  Cell,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";

/* ================= COLORS ================= */
const COLORS = ["#5e3817", "#7a4b20", "#c8a27a"];

/* ================= HELPERS ================= */
const safeNumber = (val: any) => Number(val || 0);

const formatCurrency = (num: any) =>
  `₦${safeNumber(num).toLocaleString("en-NG")}`;

type Pledge = {
  id: string;
  name: string;
  amount_pledged: number;
  amount_paid: number;
  amount_left: number;
  created_at: string;
  status: string;
};

const ShowDonationFund = () => {
  const {
    fund,
    pledges = [],
    leaderboard = [],
    statistics = {},
    members = [],
  } = usePage().props as any;

  const [openEdit, setOpenEdit] = useState(false);
  const [openDelete, setOpenDelete] = useState(false);

  // 🔥 NEW
  const [openAddPledge, setOpenAddPledge] = useState(false);

  /* ================= SAFE CALCULATIONS ================= */
  const totalRaised = safeNumber(fund?.amount_raised);
  const totalTarget = safeNumber(fund?.target_amount);
  const remaining = Math.max(totalTarget - totalRaised, 0);

  const percent =
    totalTarget > 0
      ? Math.min(Math.round((totalRaised / totalTarget) * 100), 100)
      : 0;

  /* ================= CHART DATA ================= */
  const chartData = useMemo(() => {
    const data = statistics?.gender || [];

    return data.map((item: any) => ({
      name:
        item.name.charAt(0).toUpperCase() + item.name.slice(1),
      value: Number(item.percentage ?? item.total ?? 0),
    }));
  }, [statistics]);

  /* ================= TABLE ================= */
  const columns: Column<Pledge>[] = [
    {
      header: "Date",
      accessor: (row) => formatDateReadable(row.created_at),
    },
    { header: "Member", accessor: (row) => row?.name },
    {
      header: "Status",
      accessor: (row) => capitalizeFirstLetter(row.status),
    },
    {
      header: "Pledged",
      accessor: (row) => formatCurrency(row.amount_pledged),
    },
    // {
    //   header: "Paid",
    //   accessor: (row) => formatCurrency(row.amount_paid),
    // },
    {
      header: "Balance",
      accessor: (row) => formatCurrency(row.amount_left),
    },
  ];

  const actions = [
    {
      label: "See Details",
      onClick: (row: any) =>
        router.visit(`/dashboard/pledges/${row.id}/remittances`),
      variant: "view",
    },
    // {
    //   label: "Update",
    //   onClick: (row: any) =>
    //     console.log("Open Add Modal", row),
    //   variant: "custom",
    // },
  ];

  return (
    <>
    { openAddPledge && (
        <AddPledgeModal
          members={members}
          fund={fund}
          onClose={() => setOpenAddPledge(false)}
        />
      )}

      <div className={styles.page}>
      {/* HEADER */}
      <DashboardHeader
        title={fund?.title || "Donation Fund"}
        description="Track pledges, contributions and performance"
      />

      <div className={styles.content}>
        {/* ================= HERO ================= */}
        <div className={styles.hero}>
          <div className={styles.heroHeader}>
            <div>
              <Badge text="Pledges & Remittances" />
              <h2>{fund?.title}</h2>

              <div className={styles.meta}>
                Created on{" "}
                {fund?.created_at
                  ? formatDateReadable(fund.created_at)
                  : "-"}
              </div>
            </div>

            <p>{fund?.description}</p>

            {/* ACTION BUTTONS */}
            <div className={styles.heroActions}>
              <button
                className={styles.addBtn}
                onClick={() => setOpenAddPledge(true)}
              >
                <FiPlus /> Add Pledge
              </button>

              <button
                className={styles.editBtn}
                onClick={() => setOpenEdit(true)}
              >
                <FiEdit /> Update
              </button>

              <button
                className={styles.deleteBtn}
                onClick={() => setOpenDelete(true)}
              >
                <FiTrash2 /> Delete
              </button>
            </div>
          </div>
        </div>

        {/* ================= SUMMARY ================= */}
        <div className={styles.summaryCard}>
          <div className={styles.summaryTop}>
            <h3>Funding Progress</h3>
            <span>{percent}% pledged</span>
          </div>

          <div className={styles.progressBar}>
            <div style={{ width: `${percent}%` }} />
          </div>

          <div className={styles.statsGrid}>
            <div className={`${styles.statCard} ${styles.raised}`}>
              <span>Pledged</span>
              <h4>{formatCurrency(totalRaised)}</h4>
            </div>

            <div className={`${styles.statCard} ${styles.target}`}>
              <span>Target</span>
              <h4>{formatCurrency(totalTarget)}</h4>
            </div>

            <div className={`${styles.statCard} ${styles.remaining}`}>
              <span>Remaining</span>
              <h4>{formatCurrency(remaining)}</h4>
            </div>
          </div>
        </div>

        {/* ================= CHART ================= */}
        <div className={styles.section}>
          <MembersPageIntro
            title="Pledge Distribution"
            description="See which gender is contributing more to this fund"
          />

          <div className={styles.chartCard}>
            {chartData.length > 0 ? (
              <ResponsiveContainer width="100%" height={260}>
                <PieChart>
                  <Pie
                    data={chartData}
                    dataKey="value"
                    outerRadius={90}
                    innerRadius={50}
                    paddingAngle={3}
                    label={({ value }) => `${value}%`}
                  >
                    {chartData.map((_: any, i: number) => (
                      <Cell
                        key={i}
                        fill={COLORS[i % COLORS.length]}
                        stroke="#fff"
                        strokeWidth={2}
                      />
                    ))}
                  </Pie>

                  <Tooltip formatter={(value: any) => `${value}%`} />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            ) : (
              <NoResults
                title="No Pledges"
                remark="No pledges have been made for this fund."
              />
            )}
          </div>
        </div>

        {/* ================= LEADERBOARD ================= */}
        <div className={styles.section}>
          <MembersPageIntro
            title="Top Pledgers (By Amount)"
            description="Members with the highest pledges"
          />

          <div className={styles.leaderboard}>
            {leaderboard.length > 0 ? (
              leaderboard.map((p: any, i: number) => (
                <div
                  key={i}
                  className={`${styles.leaderItem} ${
                    i === 0
                      ? styles.gold
                      : i === 1
                      ? styles.silver
                      : i === 2
                      ? styles.bronze
                      : ""
                  }`}
                >
                  <div className={styles.left}>
                    <div className={styles.rank}>
                      #{i + 1}
                    </div>

                    <div className={styles.meta}>
                      <div>
                        <h4>{p.name || "Anonymous"}</h4>
                        <h4>{p.phone || "-"}</h4>
                      </div>

                      {i === 0 && (
                        <span className={styles.badge}>
                          <FiAward /> Top Contributor
                        </span>
                      )}
                    </div>
                  </div>

                  <div className={styles.right}>
                    <span className={styles.amount}>
                      {formatCurrency(p.amount_pledged)}
                    </span>

                    <span className={styles.percent}>
                      {p.completion_percent || 0}% Completed
                    </span>
                  </div>
                </div>
              ))
            ) : (
              <NoResults
                title="No Data"
                remark="No pledges have been made for this fund."
              />
            )}
          </div>
        </div>

        {/* ================= TABLE ================= */}
        <div className={styles.section}>
          <MembersPageIntro
            title="All Pledges"
            description="Track all pledges and remittances"
          />

          <NewDataTable
            data={pledges}
            columns={columns}
            actions={actions}
          />
        </div>
      </div>

      {/* ================= MODALS ================= */}
      {openEdit && (
        <DonationFundModal
          fund={fund}
          onClose={() => setOpenEdit(false)}
        />
      )}

      {openDelete && (
        <DeleteModal
          closeModal={() => setOpenDelete(false)}
          deleteUrl={route(
            "dashboard.donation.funds.destroy",
            fund.id
          )}
          message="This will permanently delete this donation fund and all it's associated data. Please be sure before you proceed."
        />
      )}

      {/* 🔥 ADD PLEDGE MODAL (YOU WILL BUILD THIS) */}
      {/* {openAddPledge && (
        <AddPledgeModal
          fund={fund}
          onClose={() => setOpenAddPledge(false)}
        />
      )} */}
    </div>
    </>
  );
};

ShowDonationFund.layout = (page: any) => (
  <DashboardLayout title="Donation Fund Details">
    {page}
  </DashboardLayout>
);

export default ShowDonationFund;