"use client"

import * as React from "react"
import { Layers } from "lucide-react"
import { useSession } from "next-auth/react"
import { useGetProfileQuery } from "@/api/rtk/auth-api"
import { useAuthToken } from "@/hooks/use-auth-token"
import { hasPermission } from "@/lib/permissions"
import { NoDataFound } from "@/components/ui/no-data-found"
import { DivisionsManager } from "./divisions-manager"
import { useGetDivisionsQuery } from "@/api/rtk/deal-meta-api"

export default function DivisionsPage() {
  const { token } = useAuthToken()
  const { data: session } = useSession()
  const { data: profile } = useGetProfileQuery(undefined, { skip: !token })
  const permissionSource =
    (session as { backendUser?: unknown } | null)?.backendUser ?? profile ?? null

  const canViewDivisions = hasPermission(permissionSource, "READ", "DIVISION")
  const [totalDivisions, setTotalDivisions] = React.useState(0)

  useGetDivisionsQuery(undefined, {
    skip: !token || !canViewDivisions,
  })

  if (!canViewDivisions) {
    return (
      <div className="flex h-full items-center justify-center p-4">
        <NoDataFound
          message="Divisions access required"
          description="You need READ permission on DIVISION to view this page."
        />
      </div>
    )
  }

  return (
    <div className="flex flex-col h-full gap-4.5 p-1 sm:p-2 md:p-4 animate-in fade-in duration-500 overflow-y-auto scrollbar-themed">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 rounded-2xl border border-white/40 bg-white/50 dark:bg-white/10 backdrop-blur-[15px] shadow-[0px_2px_20px_0px_rgba(0,0,0,0.06)] p-4 md:p-5">
        <div className="flex items-start gap-3">
          <div className="h-10 w-10 rounded-xl bg-[#6C63FF]/10 flex items-center justify-center text-[#6C63FF] shrink-0">
            <Layers size={20} />
          </div>
          <div className="flex flex-col shrink-0">
            <h1 className="text-[25px] font-extrabold text-text font-['Lexend'] tracking-tight leading-none">
              Divisions
            </h1>
            <p className="text-[12px] text-gray-500 mt-2 font-['Lexend_Deca'] uppercase tracking-wider">
              <span className="font-bold text-text/80">{totalDivisions} divisions</span>
              <span className="mx-1 opacity-50">·</span>
              <span>Group teams and assign division heads</span>
            </p>
          </div>
        </div>
      </div>

      <DivisionsManager layout="standalone" onTotalChange={setTotalDivisions} />
    </div>
  )
}