import styles from "./transactions.module.scss";
import { useEffect, useState } from "react";
import { LuRefreshCcw } from "react-icons/lu";
import NewDataTable, { Action, Column } from "@/components/shared/NewDataTable";
import MemberSearch from "@/components/members/member-search";

interface Transaction {
  id: number;
  date: string;
  description: string;
  category: string;
  amount: number;
  type: "Credit" | "Debit";
}

const Transactions = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [isFading, setIsFading] = useState(false);
  const [filter, setFilter] = useState("All");

  // ✅ Sample Data
  const transactions: Transaction[] = [
    { id: 1, date: "2025-10-10", description: "Tithe Offering", category: "Regular", amount: 5000, type: "Credit" },
    { id: 2, date: "2025-10-11", description: "Church Maintenance", category: "Project", amount: 2000, type: "Debit" },
    { id: 3, date: "2025-10-12", description: "Thanksgiving Donation", category: "Regular", amount: 12000, type: "Credit" },
    { id: 4, date: "2025-10-13", description: "Media Equipment", category: "Project", amount: 8000, type: "Debit" },
  ];

  // ✅ Filter logic
  const filteredData = transactions.filter((t) => {
    if (filter === "All") return true;
    if (filter === "Credit" || filter === "Debit") return t.type === filter;
    if (filter === "Regular" || filter === "Project") return t.category === filter;
    return true;
  });

  // ✅ Simulate loading
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsFading(true);
      setTimeout(() => setIsLoading(false), 400);
    }, 1500);
    return () => clearTimeout(timer);
  }, []);

  const triggerReload = () => {
    setIsLoading(true);
    setIsFading(false);

    setTimeout(() => {
      setIsFading(true);
      setTimeout(() => setIsLoading(false), 400);
    }, 1500);
  };

  // ✅ Table columns
  const columns: Column<Transaction>[] = [
    { header: "Date", accessor: "date" },
    { header: "Description", accessor: "description" },
    { header: "Category", accessor: "category" },
    {
      header: "Amount",
      accessor: (row) => `₦${row.amount.toLocaleString()}`,
    },
    { header: "Type", accessor: "type" },
  ];

  // ✅ Actions
  const actions: Action<Transaction>[] = [
    {
      label: "View",
      onClick: (row) => console.log("View", row),
      variant: "view",
    },
    {
      label: "Delete",
      onClick: (row) => console.log("Delete", row),
      variant: "delete",
    },
  ];

  return (
    <div className={styles.trans}>
      {/* HEADER TOOLBAR */}
      <div className={styles["trans__toolbar"]}>
        <div className={styles["trans__toolbar--left"]}>
          <MemberSearch url="/transactions" placeholder="Search transactions..." />
        </div>

        <div className={styles["trans__toolbar--right"]}>
          <button onClick={triggerReload}>
            <LuRefreshCcw /> Refresh
          </button>

          <select value={filter} onChange={(e) => setFilter(e.target.value)}>
            <option value="All">All</option>
            <option value="Credit">Credit</option>
            <option value="Debit">Debit</option>
            <option value="Regular">Regular</option>
            <option value="Project">Project</option>
          </select>
        </div>
      </div>

      {/* TABLE */}
      <div className={styles["trans__table"]}>
        {isLoading ? (
          <div
            className={`${styles.loader} ${
              isFading ? styles.fadeOut : ""
            }`}
          >
            <p>Loading transactions...</p>
          </div>
        ) : (
          <div className={styles.fadeIn}>
            <NewDataTable data={filteredData} columns={columns} actions={actions} />
          </div>
        )}
      </div>
    </div>
  );
};

export default Transactions;