/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-unused-vars */
"use client"

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

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

import DashStatsCard from "@/components/shared/DashStatsCard"
import NewDataTable, { Column } from "@/components/shared/NewDataTable"
import Pagination from "@/components/dashboard/pagination"
import MemberSearch from "@/components/members/member-search"
import DashboardHeader from "@/components/shared/DashPageHeader"
import styles from "./members.module.scss"
import { usePaginatedData } from "@/hooks/usePaginatedData"
import { capitalizeFirstLetter, formatLabel } from "@/lib/utils"

import {
  FiUsers,
  FiUserCheck,
  FiUserX,
} from "react-icons/fi"

import {
  PieChart,
  Pie,
  Cell,
  Legend,
  Tooltip,
  ResponsiveContainer,
} from "recharts"

import DashboardLayout from "@/layouts/dashboard"

// ------------------- TYPES -------------------
type RawMember = {
  id: string
  first_name: string
  last_name: string
  email: string
  phone?: string
  branch: { name: string }
  state: string
  gender: string
  marital_status: string
  occupation: string
  age_range: string
  status: string
}

type TableMember = {
  id: string
  name: string
  email: string
  gender: string
  phone?: string
  occupation: string
  age_range: string
  state: string
}

const COLORS = ["#5e3817", "#7a4b20", "#c8a27a", "#e6d3b3"]

const Members = ({ perPage: initialPerPage = 10 }) => {
  const { members, stats, filters } = usePage().props as any
  const { handlePageChange } = usePaginatedData(initialPerPage)

  // ✅ STATE SYNCED WITH BACKEND
  const [searchTerm, setSearchTerm] = useState<string>(filters?.search || "")
  const [selectedState, setSelectedState] = useState<string>(filters?.state || "")
  const [selectedGender, setSelectedGender] = useState<string>(filters?.gender || "")
  const [selectedAge, setSelectedAge] = useState<string>(filters?.age_range || "")

  const [isLoading, setIsLoading] = useState(false)

  const [chartType, setChartType] = useState<string>("age")
  const [viewType, setViewType] = useState<"count" | "percentage">("count")

  // ================= AUTO FETCH =================
  useEffect(() => {
  setIsLoading(true)

  const delay = setTimeout(() => {
    router.get(
      "/dashboard/members",
      {
        search: searchTerm || undefined,
        state: selectedState || undefined,
        gender: selectedGender || undefined,
        age_range: selectedAge || undefined,
      },
      {
        preserveState: true,
        replace: true,
        onFinish: () => setIsLoading(false),
      }
    )
  }, 400)

  return () => clearTimeout(delay)
}, [selectedState, selectedGender, selectedAge])

//Clear Filters
const clearFilters = () => {
  setSearchTerm("")
  setSelectedState("")
  setSelectedGender("")
  setSelectedAge("")

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

  // ================= TRANSFORM =================
  const tableData: TableMember[] = useMemo(() => {
    return members.data.map((p: RawMember) => ({
      id: p.id,
      name: `${p.first_name} ${p.last_name}`,
      email: p.email,
      gender: capitalizeFirstLetter(p.gender ?? "") || "Unassigned",
      phone: p.phone,
      occupation: formatLabel(p.occupation ?? ""),
      age_range: formatLabel(p.age_range),
      // state: p.state,
    }))
  }, [members])

  // ================= STATS =================
  const statCards = [
    { title: "Total Members", value: stats.total, icon: <FiUsers /> },
    { title: "Active", value: stats.active, icon: <FiUserCheck />, positive: true },
    { title: "Inactive", value: stats.inactive, icon: <FiUserX />, positive: false },
  ]

  // ================= NORMALIZE =================
  const normalize = (arr: any[] = []) =>
    arr.map((i) => ({
      name: formatLabel(i.name),
      value: Number(i.total || 0),
    }))

  // ================= CHART =================
  const chartData = useMemo(() => {
    let data: any[] = []

    switch (chartType) {
      case "gender":
        data = normalize(stats.gender)
        break
      case "marital status":
        data = normalize(stats.marital)
        break
      case "occupation":
        data = normalize(stats.degree)
        break
      case "state":
        data = normalize(stats.state)
        break
      case "age":
        data = normalize(stats.age)
        break
    }

    if (viewType === "percentage") {
      const total = data.reduce((sum, d) => sum + d.value, 0)
      return data.map((d) => ({
        ...d,
        value: total ? Number(((d.value / total) * 100).toFixed(1)) : 0,
      }))
    }

    return data
  }, [chartType, viewType, stats])

  // ================= OPTIONS =================
  const genders = ["Male", "Female"]

  const nigeriaStates = [
    "Abia","Adamawa","Akwa Ibom","Anambra","Bauchi","Bayelsa","Benue","Borno",
    "Cross River","Delta","Ebonyi","Edo","Ekiti","Enugu","Gombe","Imo","Jigawa",
    "Kaduna","Kano","Katsina","Kebbi","Kogi","Kwara","Lagos","Nasarawa","Niger",
    "Ogun","Ondo","Osun","Oyo","Plateau","Rivers","Sokoto","Taraba","Yobe",
    "Zamfara","FCT (Abuja)"
  ]

  // ================= TABLE =================
  const columns: Column<TableMember>[] = [
    { header: "Name", accessor: "name" },
    { header: "Email", accessor: "email" },
    // { header: "State", accessor: "state" },
    { header: "Phone", accessor: "phone" },
    { header: "Gender", accessor: "gender" },
    { header: "Occupation", accessor: "occupation" },
    { header: "Age Range", accessor: "age_range" },
  ]

  return (
    <div className={styles.page}>
      <DashboardHeader title="Manage Members" description="View & manage all members" />

      <div className={styles.content}>
        <h2 className={styles.statsTitle}>Member Statistics</h2>
        <p className={styles.statsDesc}>Overview of member statistics</p>

        <DashStatsCard stats={statCards} />

        {/* CHART */}
        <div className={styles.chartSection}>
          <div className={styles.chartTabs}>
            {["Age", "Gender", "Occupation", "Marital Status"].map((type) => (
              <button
                key={type}
                className={chartType === type.toLowerCase() ? styles.activeChart : ""}
                onClick={() => setChartType(type.toLowerCase())}
              >
                {type}
              </button>
            ))}
          </div>

          <ResponsiveContainer width="100%" height={300}>
            <PieChart>
              <Pie data={chartData} dataKey="value" outerRadius={100}>
                {chartData.map((_, i) => (
                  <Cell key={i} fill={COLORS[i % COLORS.length]} />
                ))}
              </Pie>
              <Tooltip />
              <Legend />
            </PieChart>
          </ResponsiveContainer>
        </div>

        {/* 🔥 FILTER SECTION */}
        <div className={styles.filterBar}>
          <MemberSearch
            placeholder="Search name, email or phone..."
            value={searchTerm}
            onChange={(val: string) => setSearchTerm(val)}
            url="/dashboard/members"
          />

          <select value={selectedState} onChange={(e) => setSelectedState(e.target.value)}>
            <option value="" disabled>
              State of Origin
            </option>
            <option value="">All States</option>
            {nigeriaStates.map((s) => (
              <option key={s}>{s}</option>
            ))}
          </select>

          <select value={selectedGender} onChange={(e) => setSelectedGender(e.target.value)}>
            <option value="">All Gender</option>
            {genders.map((g) => (
              <option key={g}>{g}</option>
            ))}
          </select>

          <select value={selectedAge} onChange={(e) => setSelectedAge(e.target.value)}>
            <option value="">All Age</option>
            {(stats?.age || []).map((a: any) => (
              <option key={a.name} value={a.name}>
                {formatLabel(a.name)}
              </option>
            ))}
          </select>

          {/* 🔥 CLEAR FILTER BUTTON */}
          <button
            onClick={clearFilters}
            className={styles.clearBtn}
            disabled={isLoading}
          >
            Clear
          </button>
        </div>

        {/* 🔥 FILTER CHIPS */}
        <div className={styles.filterChips}>
          {searchTerm && (
            <div className={styles.chip}>
              Search: {searchTerm}
              <button onClick={() => setSearchTerm("")}>×</button>
            </div>
          )}

          {selectedState && (
            <div className={styles.chip}>
              {selectedState}
              <button onClick={() => setSelectedState("")}>×</button>
            </div>
          )}

          {selectedGender && (
            <div className={styles.chip}>
              {selectedGender}
              <button onClick={() => setSelectedGender("")}>×</button>
            </div>
          )}

          {selectedAge && (
            <div className={styles.chip}>
              {formatLabel(selectedAge)}
              <button onClick={() => setSelectedAge("")}>×</button>
            </div>
          )}
        </div>

        {/* TABLE */}
        <div className={styles.tableSection}>
          {isLoading && <div className={styles.loadingOverlay}>Filtering...</div>}

          <NewDataTable data={tableData} columns={columns} />

          <Pagination
            links={members.links}
            onChange={handlePageChange}
          />
        </div>
      </div>
    </div>
  )
}

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

export default Members