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

import { useState } from "react"
import styles from "./branch.module.scss"
import { SearchIcon, ArrowRight } from "lucide-react"
import BranchCard from "@/components/dashboard/branch-card"
import { usePage } from "@inertiajs/react"
import CreateBranchModal from "@/components/modals/create-branch"

const Branches = ({ branches }: any) => {
  const { auth } = usePage().props as any;
  const [createModal, setCreateModal] = useState(false)
  console.log("Logged in user", auth)
  console.log("Branches", branches)

  const toggleCreateModal = () => {
    setCreateModal(!createModal)
  }

  const [search, setSearch] = useState("")

  const filtered = branches?.data.filter((branch: any) => {
    const q = search.toLowerCase()
    return (
      branch.name.toLowerCase().includes(q) ||
      branch.address.toLowerCase().includes(q)
    )
  })

  return (
    <>
    { createModal ? <CreateBranchModal type="add" closeModal={toggleCreateModal} /> : null }
    <div className={ styles["branches"] }>
      <div className={ styles["branches__header"] }>
          <div className={ styles["branches__header--left"] }>
              <h3>The Censers Church</h3>
          </div>
      </div>

      <div className={ styles["branches__intro"] }>
        <h1>Select A Branch</h1>
        <p>Choose the branch you want to manage and be redirected to it's dashboard respectively</p>
      </div>

      <form className={ styles["branches__form"] }>
        <div className={ styles["branches__form__input"] }>
          <SearchIcon size={"1.2rem"} color="#9CA3AF" />
            <input 
              type="text" 
              placeholder="Search by branch name or location...."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
        </div>
        <div className={ styles["branches__form--btn"] } onClick={toggleCreateModal}>Add New Branch <ArrowRight /></div>
      </form>

      <div className={ styles["branches__grid"] }>
          { filtered.length > 0 ? (
            filtered.map((branch: any) => (
              <BranchCard key={branch.id} branch={branch} />
            ))
          ) : (
            <div className={styles["no-results"]}>
              <div className={styles["no-results__icon"]}>🔍</div>
                <h3>No Branch Found</h3>
                <p>Try searching with a different name or location.</p>
            </div>

          )}
      </div>
    </div>
    </>
  )
}

export default Branches