/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

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

import DashboardLayout from "@/layouts/dashboard";
import DashboardHeader from "@/components/shared/DashPageHeader";
import BusinessCard from "@/components/members/member-business-card";
import MemberSearch from "@/components/members/member-search";
import NoResults from "@/components/dashboard/no-results";
import FilterBar from "@/components/shared/FilterBar";
import Pagination from "@/components/dashboard/pagination";
import { usePaginatedData } from "@/hooks/usePaginatedData";
import DashStatsCard from "@/components/shared/DashStatsCard";

import { FiCheckCircle, FiClock, FiXCircle, FiLayers } from "react-icons/fi";

import styles from "./businesses.module.scss";

const Businesses = ({
  businesses,
  stats,
//   analytics,
  filters = {},
  perPage: initialPerPage = 30,
}: any) => {
  /* ================= STATE ================= */
  const [status, setStatus] = useState(filters?.status || "all");
  const [category, setCategory] = useState(filters?.category || "all");
  const [search, setSearch] = useState(filters?.search || "");

  const [loading, setLoading] = useState(true);

  const { handlePageChange } = usePaginatedData(initialPerPage);

  const statsData = [
  {
    title: "Total Businesses",
    value: stats?.total ?? 0,
    icon: <FiLayers size={16} />,
    description: "All businesses in this branch",
  },
  {
    title: "Approved",
    value: stats?.approved ?? 0,
    icon: <FiCheckCircle size={16} />,
    positive: true,
    description: "Verified and visible",
  },
  {
    title: "Pending",
    value: stats?.pending ?? 0,
    icon: <FiClock size={16} />,
    description: "Awaiting approval",
  },
  {
    title: "Rejected",
    value: stats?.rejected ?? 0,
    icon: <FiXCircle size={16} />,
    positive: false,
    description: "Declined listings",
  },
];

  /* ================= FAKE LOADING ================= */
  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 800);
    return () => clearTimeout(timer);
  }, []);

  /* ================= FILTER ================= */
  const applyFilters = () => {
    router.get(
      "/dashboard/businesses",
      { search, status, category },
      { preserveState: true, replace: true }
    );
  };

  const clearFilters = () => {
    setStatus("all");
    setCategory("all");
    setSearch("");

    router.get(
      "/dashboard/businesses",
      {},
      { preserveState: true, replace: true }
    );
  };

  /* ================= SEARCH ================= */
  const handleSearch = (value: string) => {
    setSearch(value);

    router.get(
      "/dashboard/businesses",
      {
        search: value,
        status,
        category,
      },
      { preserveState: true, replace: true }
    );
  };


  return (
    <div className={styles.page}>
      {/* ================= HEADER ================= */}
      <DashboardHeader
        title="Business Directory"
        description="Manage and oversee all member businesses"
      />

      {/* ================= STATS ================= */}
      <div className={ styles.stats }>
        <DashStatsCard stats={statsData} />
      </div>


      {/* ================= CONTENT ================= */}
      <div className={styles.content}>
        {/* FILTER BAR */}
       <div className={styles.filterWrapper}>
        <FilterBar
            searchComponent={
            <MemberSearch
                placeholder="Search businesses or owners..."
                value={search}
                onChange={handleSearch}
            />
            }
            filters={
            <div className={styles.filterFields}>
                {/* STATUS */}
                <select
                value={status}
                onChange={(e) => setStatus(e.target.value)}
                >
                <option value="all">All Status</option>
                <option value="approved">Approved</option>
                <option value="pending">Pending</option>
                <option value="rejected">Rejected</option>
                </select>

                {/* CATEGORY */}
                <select
                value={category}
                onChange={(e) => setCategory(e.target.value)}
                >
                <option value="all">All Categories</option>
                <option value="product_vendor">Product Vendor</option>
                <option value="service_provider">Service Provider</option>
                </select>
            </div>
            }
            onApply={applyFilters}
            onClear={clearFilters}
        />
        </div>

        {/* GRID */}
        {loading ? (
          <div className={styles.businessGrid}>
            {[...Array(6)].map((_, i) => (
              <BusinessCard key={i} loading />
            ))}
          </div>
        ) : businesses?.data?.length > 0 ? (
          <>
            <div className={styles.businessGrid}>
              {businesses.data.map((biz: any) => (
                <BusinessCard key={biz.id} business={biz} />
              ))}
            </div>

            {businesses?.links?.length > 0 && (
              <div className={styles.pagination}>
                <Pagination
                  links={businesses?.links}
                  onChange={handlePageChange}
                />
              </div>
            )}
          </>
        ) : (
          <div className={styles.fullWidthEmpty}>
            <NoResults
              title="No Businesses Found"
              remark="No businesses match your filters."
            />
          </div>
        )}
      </div>
    </div>
  );
};

Businesses.layout = (page: any) => (
  <DashboardLayout title="Businesses">{page}</DashboardLayout>
);

export default Businesses;