/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState } from "react"
import { router } from "@inertiajs/react"
import styles from "./notifications.module.scss"
import UserDashboardLayout from "@/layouts/user_dashboard_layout"
import PageIntro from "@/components/dashboard/PageIntro"
import NoResults from "@/components/dashboard/NoResults"
import Notification from "./Notification"
import Pagination from "@/components/shared/Pagination"
import { usePaginatedData } from "@/hooks/use-paginated-data"
import { capitalizeFirstLetter } from "@/lib/utils/capitalise-first-letter"

const Notifications = ({ notifications, tab }: any) => {
  const [activeTab, setActiveTab] = useState<"all" | "new" | "read">(tab || "all")

  const {
    handlePageChange
  } = usePaginatedData()

  const perPage = notifications.per_page || 20

  // Handle tab switch: refetch page from backend
  const handleTabChange = (tab: "new" | "read" | "all") => {
    setActiveTab(tab)
    router.get(
      route("getNotifications"),
      { tab, perPage },
      { preserveState: true, replace: true }
    )
  }

  return (
    <div className={styles.notifications}>
      <PageIntro
        title="Notifications"
        description="See all your notifications as they happen so you are updated"
      />

      {/* Tabs */}
      <div className={styles.notifications__tabs}>
        {["all", "new", "read"].map((t) => (
          <div
            key={t}
            className={`${styles.notifications__tabItem} ${activeTab === t ? styles.active : ""}`}
            onClick={() => handleTabChange(t as any)}
          >
            {t.charAt(0).toUpperCase() + t.slice(1)}
          </div>
        ))}
      </div>

      {/* Notification List */}
      <div className={styles.notifications__content}>
        {notifications.data.length === 0 ? (
          <NoResults
            title="No Notifications"
            description={`Oops! You do not have ${ capitalizeFirstLetter(activeTab) } notifications at the moment.`}
          />
        ) : (
          <div className={styles.notifications__items}>
            {notifications.data.map((notification: any) => (
              <Notification key={notification.id} notification={notification} />
            ))}
          </div>
        )}

        {/* Pagination */}
        {notifications.links && (
          <div className={styles.notifications__pagination}>
            <Pagination links={notifications?.links}
              onChange={handlePageChange}
            />
          </div>
        )}
      </div>
    </div>
  )
}

Notifications.layout = (page: any) => (
  <UserDashboardLayout children={page} title="In-App Notifications" />
)

export default Notifications