/* eslint-disable @typescript-eslint/no-explicit-any */
import { useEffect, useState, useMemo } from "react";
import AdminLayout from "@/layouts/admin-layout";
import Pagination from "@/components/dashboard/pagination";
import { usePaginatedData } from "@/hooks/usePaginatedData";
import DashboardHeader from "@/components/shared/DashPageHeader";
import DashStatsCard from "@/components/shared/DashStatsCard";
import NewDataTable, { Action, Column } from "@/components/shared/NewDataTable";
import MemberSearch from "@/components/members/member-search";
import styles from "./admin-branches.module.scss";
import { FiUsers, FiCheckCircle, FiXCircle } from "react-icons/fi";
import CreateBranchModal from "@/components/modals/create-branch";
import DeleteModal from "@/components/modals/delete-modal";
import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
import { router } from "@inertiajs/react";
import MembersPageIntro from "@/components/members/members-page-intro";


/* ================= TYPES ================= */

type Branch = {
  id: string;
  name: string;
  address: string;
  pastor_in_charge: string;
  is_active: boolean; // ✅ FIXED
  state: string;
  branch_code: string;
};

/* ================= COLORS ================= */

const COLORS = [
  "#00c18b",
  "#36A2EB",
  "#FFCE56",
  "#FF6384",
  "#9966FF",
  "#FF9F40",
  "#4BC0C0",
  "#E83E8C",
];

/* ================= COMPONENT ================= */

const AdminBranches = ({
  branches,
  statistics,
  perPage: initialPerPage = 10,
}: any) => {

  const [distributionMode, setDistributionMode] =
    useState<"percentage" | "count">("percentage");

    console.log("All branches", branches)

  const [loading, setLoading] = useState(true);
  const { handlePageChange } = usePaginatedData(initialPerPage);

  const [createBranchModal, setCreateBranchModal] = useState(false);
  const [updateBranchModal, setUpdateBranchModal] = useState(false);
  const [branchToUpdate, setBranchToUpdate] = useState<Branch | null>(null);

  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [branchToDelete, setBranchToDelete] = useState<Branch | null>(null);

  const toggleCreateModal = () => {
    setCreateBranchModal(!createBranchModal);
  };

  /* ================= DISTRIBUTION ================= */

  const chartData = useMemo(() => {
    const map: Record<string, number> = {};

    branches?.data?.forEach((b: any) => {
      if (!b.state) return;
      map[b.state] = (map[b.state] || 0) + 1;
    });

    const total = branches?.data?.length || 1;

    return Object.entries(map).map(([state, count]) => ({
      name: state,
      count,
      percentage: Number(((count / total) * 100).toFixed(1)),
    }));
  }, [branches]);

  /* ================= STATS ================= */

  const stats = [
    {
      title: "Total Branches",
      value: statistics?.total_branches,
      icon: <FiUsers />,
    },
    {
      title: "Active Branches",
      value: statistics?.active_branches,
      icon: <FiCheckCircle />,
      color: "#00c18b",
    },
    {
      title: "Inactive Branches",
      value: statistics?.inactive_branches,
      icon: <FiXCircle />,
      color: "#f44336",
    },
  ];

  /* ================= TABLE ================= */

  const columns: Column<Branch>[] = [
    { header: "Branch Code", accessor: "branch_code" },
    { header: "Name", accessor: "name" },
    { header: "Pastor", accessor: "pastor_in_charge" },
    {
      header: "Status",
      accessor: (row) => (row.is_active ? "Active" : "Inactive"), // ✅ FIXED
    },
  ];

  const actions: Action<Branch>[] = [
    {
      label: "View", // ✅ CHANGED
       onClick: (row: any) => {
        router.post(
          route("admin.switch-branch", row.id),
          {},
          {
            preserveScroll: true,
            onStart: () => {
              // 👇 temporary flash (before backend response)
              window.dispatchEvent(
                new CustomEvent("flash", {
                  detail: { type: "info", message: "Switching branch..." },
                })
              );
            },
          }
        );
      },
      variant: "view",
    },
    {
      label: "Update",
      onClick: (row) => {
        setBranchToUpdate(row);
        setUpdateBranchModal(true);
      },
      variant: "update",
    },
    {
      label: "Delete",
      onClick: (row) => {
        setBranchToDelete(row);
        setShowDeleteModal(true);
      },
      variant: "delete",
    },
  ];

  /* ================= EFFECT ================= */

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 500);
    return () => clearTimeout(timer);
  }, []);

  /* ================= RENDER ================= */

  return (
    <>
      {/* Create Modal */}
      {createBranchModal && (
        <CreateBranchModal type="add" closeModal={toggleCreateModal} />
      )}

      {/* Update Modal */}
      {updateBranchModal && branchToUpdate && (
        <CreateBranchModal
          type="update"
          closeModal={() => setUpdateBranchModal(false)}
          branch={branchToUpdate}
        />
      )}

      {/* Delete Modal */}
      {showDeleteModal && branchToDelete && (
        <DeleteModal
          message={`Are you sure you want to delete "${branchToDelete.name}"? This action cannot be undone.`}
          deleteUrl={`/api/branches/${branchToDelete.id}`}
          closeModal={() => setShowDeleteModal(false)}
        />
      )}

      <div className={styles.branches}>
        <DashboardHeader
          title="Manage Branches"
          description="View & manage all branches seamlessly all from one dashboard"
          actionButton={{
            label: "Create New Branch",
            onClick: () => toggleCreateModal(),
          }}
        />

        <div className={styles.content}>
          {/* ================= STATS ================= */}
         <div className={styles.headerContent}>
           <MembersPageIntro title="Branch Statistics" description="Overview of your branch activity" />
            <DashStatsCard stats={stats} />
         </div>

          {/* ================= DISTRIBUTION ================= */}
          <div className={styles.chartSection}>
            <h2 className={styles.statsTitle}>Distribution by State</h2>
            <p className={styles.statsDesc}>
              See how branches are spread across Nigeria
            </p>

            <div className={styles.toggle}>
              <button
                className={distributionMode === "percentage" ? styles.active : ""}
                onClick={() => setDistributionMode("percentage")}
              >
                Percentage
              </button>

              <button
                className={distributionMode === "count" ? styles.active : ""}
                onClick={() => setDistributionMode("count")}
              >
                Count
              </button>
            </div>

            <div className={styles.chartGrid}>
              <ResponsiveContainer width="100%" height={280}>
                <PieChart>
                  <Pie
                    data={chartData}
                    dataKey={
                      distributionMode === "percentage"
                        ? "percentage"
                        : "count"
                    }
                    nameKey="name"
                    outerRadius={100}
                    label={({ name, value }) =>
                      distributionMode === "percentage"
                        ? `${name}: ${value}%`
                        : `${name}: ${value}`
                    }
                  >
                    {chartData.map((_, i) => (
                      <Cell key={i} fill={COLORS[i % COLORS.length]} />
                    ))}
                  </Pie>

                  <Tooltip />
                </PieChart>
              </ResponsiveContainer>

              <div className={styles.legend}>
                {chartData.map((item, i) => (
                  <div key={i} className={styles.legendItem}>
                    <span
                      className={styles.dot}
                      style={{ background: COLORS[i % COLORS.length] }}
                    />
                    <div>
                      <p>{item.name}</p>
                      <small>
                        {distributionMode === "percentage"
                          ? `${item.percentage}%`
                          : `${item.count} branches`}
                      </small>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* ================= TABLE ================= */}
          <div className={styles.tableSection}>
            <div className={styles.tableHeader}>
              <MembersPageIntro title="All Church Branches" description="See all the listed branches at the moment" />
              <MemberSearch
                placeholder="Search by branch, pastor or address..."
                url={""}
              />
            </div>

            <NewDataTable<Branch>
              data={branches?.data}
              columns={columns}
              actions={actions}
            />

            {!loading && branches?.data?.length > 0 && (
              <div className={styles.paginate}>
                <Pagination links={branches?.links} onChange={handlePageChange} />
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
};

AdminBranches.layout = (page: any) => (
  <AdminLayout title="Manage branches">{page}</AdminLayout>
);

export default AdminBranches;