"use client";

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

import styles from "./donation-fund-card.module.scss";
import { router } from "@inertiajs/react";
import { FiTrendingUp, FiUsers } from "react-icons/fi";

interface Props {
  fund?: any;
  loading?: boolean;
  route?: (fund: any) => string;
}

export default function DonationFundCard({ fund, loading, route }: Props) {
  if (loading) {
    return (
      <div className={styles.card}>
        <div className={styles.headerSkeleton} />

        <div className={styles.body}>
          <div className={styles.progressSection}>
            <div className={`${styles.skeletonLine} ${styles.wide}`} />
            <div className={`${styles.progressBar} ${styles.skeleton}`} />
            <div className={`${styles.skeletonLine} ${styles.small}`} />
          </div>

          <div className={`${styles.skeletonLine} ${styles.titleSkel}`} />
          <div className={`${styles.skeletonLine} ${styles.small}`} />

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

  const percent = fund.progress_percent ?? 0;
  const amountLeft = fund.amount_left ?? 0;

  // 🔥 NEW: pledger count
  const pledgersCount =
    fund.pledges_count ??
    fund.total_pledgers ??
    fund.pledgers_count ??
    0;

  const format = (num: number) =>
    new Intl.NumberFormat("en-NG").format(num);

  const clippedDesc =
    fund.description?.length > 60
      ? fund.description.slice(0, 200) + "..."
      : fund.description;

  return (
    <div className={styles.card}>
      {/* HEADER */}
      <div className={styles.header}>
        <span className={ percent == 100 ? `${styles.status} ${ styles.closed }`: `${styles.status} ${styles.active}`  }>
          {percent == 100 ? "Completed" : "Ongoing"}
        </span>
      </div>

      {/* BODY */}
      <div className={styles.body}>
        {/* PROGRESS */}
        <div className={styles.progressSection}>
          <div className={styles.progressTop}>
            <span>₦{format(fund.amount_raised)}</span>
            <span>₦{format(fund.target_amount)}</span>
          </div>

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

          <div className={styles.progressBottom}>
            <span>{percent}% Funded</span>
            <span>
              ₦{format(amountLeft)} {amountLeft > 0 ? "Left" : "excess"}
            </span>
          </div>
        </div>

        {/* 🔥 NEW: PLEDGER COUNT */}
        <div className={styles.pledgers}>
          <FiUsers />
          <span>
            {pledgersCount}{" "}
            {pledgersCount === 1 ? "Person" : "People"} pledged
          </span>
        </div>

        {/* TITLE */}
        <h3 className={styles.title}>{fund.title}</h3>

        {/* DESCRIPTION */}
        <div className={styles.description}>
          <FiTrendingUp />
          <p>{clippedDesc}</p>
        </div>

        {/* CTA */}
        <button
          className={styles.cardBtn}
          onClick={() => {
            const target = route ? route(fund) : "";
            router.visit(target);
          }}
        >
          View Fund →
        </button>
      </div>
    </div>
  );
}