"use client";

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

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

import AdminLayout from "@/layouts/admin-layout";
import DashboardHeader from "@/components/shared/DashPageHeader";
import DashStatsCard from "@/components/shared/DashStatsCard";
import NewDataTable, { Column, Action } from "@/components/shared/NewDataTable";
import PageIntro from "@/components/dashboard/page-intro";
import Pagination from "@/components/dashboard/pagination";
import NoResults from "@/components/dashboard/no-results";

import RemittanceTrendChart from "@/components/dashboard/remittance-trend-chart";
import ViewBranchRemittanceModal from "@/components/modals/view-branch-remittance-modal";

import FilterBar from "@/components/shared/FilterBar";
import ConfirmModal from "@/components/modals/confirmation-modal";

import styles from "./admin-remittances.module.scss";

import {
  FiLayers,
  FiDollarSign,
  FiTrendingUp,
  FiBarChart2,
} from "react-icons/fi";

import { capitalizeFirstLetter, formatDateReadable } from "@/lib/utils";

export default function AdminRemittances() {
  const { props }: any = usePage();

  const remittances = props.remittances?.data || [];
  const links = props.remittances?.links || [];
  const statsData = props.statistics || {};
  const chartData = props.trends || [];
  const branches = props.branches || [];
  const filters = props.filters || {};

  const [selected, setSelected] = useState<any>(null);

  const [branch, setBranch] = useState(filters.branch || "all");
  const [status, setStatus] = useState(filters.status || "all");

  const [confirmModal, setConfirmModal] = useState(false);

  const [targetRemittance, setTargetRemittance] =
  useState<any>(null);

  /* ================= APPLY FILTER ================= */
  const applyFilters = () => {
    router.get(route("admin.remittances.index"), {
      branch,
      status,
    }, { preserveState: true });
  };

  const clearFilters = () => {
    setBranch("all");
    setStatus("all");

    router.get(route("admin.remittances.index"), {}, { preserveState: true });
  };

  /* ================= STATS ================= */
  const stats = [
    {
      title: "Total Records",
      value: statsData.total_count || 0,
      icon: <FiLayers />,
    },
    {
      title: "Total Amount",
      value: `₦${Number(statsData.total_amount || 0).toLocaleString("en-NG")}`,
      icon: <FiDollarSign />,
    },
    {
      title: "Highest",
      value: `₦${Number(statsData.highest || 0).toLocaleString("en-NG")}`,
      icon: <FiTrendingUp />,
    },
    {
      title: "Lowest",
      value: `₦${Number(statsData.lowest || 0).toLocaleString("en-NG")}`,
      icon: <FiBarChart2 />,
    },
  ];

  /* ================= TABLE ================= */
  const columns: Column<any>[] = [
    { header: "Date Paid", accessor: "date" },
    { header: "Amount", accessor: "amount" },
    { header: "Branch", accessor: "branch" },
    { header: "Mode", accessor: "mode" },
    { header: "Status", accessor: "status" },
  ];

  const actions: Action<any>[] = [
    {
      label: "See More",
      variant: "view",
      onClick: (row) => setSelected(row.raw),
    },

    {
    label: "Validate",

    variant: "update",

    onClick: (row) => {
      if (row.raw.status === "approved") {
        return;
      }

      setTargetRemittance(row.raw);

      setConfirmModal(true);
    },
  },
  ];

  const tableData = remittances.map((r: any) => ({
    id: r.id,
    date: formatDateReadable(r.date_paid),
    amount: `₦${Number(r.amount).toLocaleString("en-NG")}`,
    branch: r.branch?.name,
    mode: capitalizeFirstLetter(r.payment_method.replace("_", " ")),
    status: capitalizeFirstLetter(r.status),
    raw: r,
  }));

  const handleConfirmRemittance = () => {

  if (!targetRemittance) return;

  router.put(
    route(
      "admin.remittances.update.status",
      targetRemittance.id
    ),
    {
      status: "approved",
    },
    {
      preserveScroll: true,

      onSuccess: () => {
        setConfirmModal(false);
        setTargetRemittance(null);
      },
    }
  );
};

  return (
    <>
      {/* MODAL */}
      {selected && (
        <ViewBranchRemittanceModal
          remittance={selected}
          onClose={() => setSelected(null)}
        />
      )}

      {confirmModal && (
        <ConfirmModal
          isOpen
          title="Confirm Remittance"
          message="You are about to confirm the remittance of this branch. Be sure before you proceed."
          onConfirm={handleConfirmRemittance}
          onCancel={() => {
            setConfirmModal(false);
            setTargetRemittance(null);
          }}
        />
      )}

      <div className={styles.page}>
        <DashboardHeader
          title="Admin Remittances"
          description="Monitor all branch remittances"
        />

        <div className={styles.content}>
          {/* HEADER */}
          <div className={styles.header}>
            <PageIntro
              title="Overview"
              description="Monitor remittance performance across branches"
            />

            {/* FILTERS */}
            <FilterBar
              searchComponent={
                <></>
              }
              filters={
                <>
                  {/* BRANCH FILTER */}
                  <select
                    value={branch}
                    onChange={(e) =>
                      setBranch(e.target.value)
                    }
                  >
                    <option value="all">
                      All Branches
                    </option>

                    {branches.map((b: any) => (
                      <option
                        key={b.id}
                        value={b.id}
                      >
                        {b.name}
                      </option>
                    ))}
                  </select>

                  {/* STATUS FILTER */}
                  <select
                    value={status}
                    onChange={(e) =>
                      setStatus(e.target.value)
                    }
                  >
                    <option value="all">
                      All Status
                    </option>

                    <option value="pending">
                      Pending
                    </option>

                    <option value="approved">
                      Approved
                    </option>

                    <option value="rejected">
                      Rejected
                    </option>
                  </select>
                </>
              }
              onApply={applyFilters}
              onClear={clearFilters}
            />
          </div><br />

          {/* STATS */}
          <DashStatsCard stats={stats} />

          {/* CHART */}
          <RemittanceTrendChart data={chartData} />

          {/* TABLE */}
          <div className={styles.tableSection}>
            <PageIntro
              title="Remittance Records"
              description="All branch remittances"
            />

            {tableData.length > 0 ? (
              <>
                <NewDataTable
                  data={tableData}
                  columns={columns}
                  actions={actions}
                />

                <div className={styles.pagination}>
                  <Pagination links={links} />
                </div>
              </>
            ) : (
              <NoResults
                title="No Remittances"
                remark="No remittance data found for selected filters"
              />
            )}
          </div>
        </div>
      </div>
    </>
  );
}

AdminRemittances.layout = (page: any) => (
  <AdminLayout title="Remittances">{page}</AdminLayout>
);