"use client"

import * as React from "react"
import { useSearchParams } from "next/navigation"
import { useUrlPagination } from "@/hooks/use-url-pagination"
import { Team, TeamStats } from "./types"
import { TeamListView } from "./team-list-view"
import { Search, Plus, Users, TrendingUp, Award, Pencil, Trash2, ArrowUpAz, ArrowDownAz } from "lucide-react"
import { toast } from "sonner"
import { Loading } from "@/components/ui/loading"
import { NoDataFound } from "@/components/ui/no-data-found"
import { KPICard } from "@/components/ui/kpi-card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useAppSelector } from "@/store/hooks"
import { useAuthToken } from "@/hooks/use-auth-token"
import { useGetTeamsQuery, useDeleteTeamMutation } from "@/api/rtk/teams-api"
import { useInvalidateTeamsListCache } from "@/hooks/use-teams-query"
import { useGetUsersQuery } from "@/api/rtk/users-api"
import { CreateTeamModal } from "./create-team-modal"
import { EditTeamModal } from "./edit-team-modal"
import { DeleteDialog } from "@/components/ui/delete-dialog"
import { TeamViewDialog } from "./team-view-dialog"
import { useSession } from "next-auth/react"
import { hasPermission } from "@/lib/permissions"
import { Can } from "@/components/providers/ability-provider"
import { useGetProfileQuery } from "@/api/rtk/auth-api"

const TEAM_PAGE_SIZE = 10

export default function TeamsPage() {
    const { token } = useAuthToken()
    const { data: session } = useSession()
    const { data: profile } = useGetProfileQuery(undefined, { skip: !token })
    const backendUser = (session as { backendUser?: unknown } | null)?.backendUser
    const permissionSource =
        (backendUser && typeof backendUser === "object" ? backendUser : null) ??
        profile ??
        null
    const canUpdateTeam = hasPermission(permissionSource, "UPDATE", "TEAM")
    const canDeleteTeam = hasPermission(permissionSource, ["DELETE", "UPDATE"], "TEAM")
    const searchParams = useSearchParams()
    const { page, setPage, limit: pageSize } = useUrlPagination(TEAM_PAGE_SIZE)
    const [search, setSearch] = React.useState(searchParams.get("search") || "")
    const [sortCol, setSortCol] = React.useState(searchParams.get("sort") || "name")
    const [sortDir, setSortDir] = React.useState(() => {
        const d = searchParams.get("dir")
        return d ? parseInt(d, 10) || 1 : 1
    })

    // Local input value — debounced before hitting the API
    const [inputValue, setInputValue] = React.useState(search ?? "")
    const [selectedTeamId, setSelectedTeamId] = React.useState<string | null>(null)
    React.useEffect(() => {
        const timer = setTimeout(() => {
            setSearch(inputValue || null)
            setPage(1)
            setSelectedTeamId(null)
        }, 300)
        return () => clearTimeout(timer)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [inputValue])
    const [editingTeam, setEditingTeam] = React.useState<Team | null>(null)
    const [isCreateModalOpen, setIsCreateModalOpen] = React.useState(false)
    const [isEditModalOpen, setIsEditModalOpen] = React.useState(false)
    const [isDeleteDialogOpen, setIsDeleteDialogOpen] = React.useState(false)
    const [deletingTeam, setDeletingTeam] = React.useState<Team | null>(null)
    const [viewingTeam, setViewingTeam] = React.useState<Team | null>(null)

    const isSearchActive = (search ?? "").trim().length > 0

    // Server-side search with query params
    const { data: teams, isLoading, isFetching } = useGetTeamsQuery(
        { search: (search || "").trim() || undefined },
        { skip: !token, refetchOnMountOrArgChange: true }
    )
    const { data: usersResponse } = useGetUsersQuery(undefined, { skip: !token })
    const [deleteTeam, { isLoading: isDeleting }] = useDeleteTeamMutation()
    const invalidateTeamsList = useInvalidateTeamsListCache()

    const allUsers = React.useMemo(() => usersResponse?.data ?? [], [usersResponse?.data])

    const teamsWithStats: Team[] = React.useMemo(() => {
        return (teams ?? []).map(team => ({
            ...team,
            memberCount: team.memberCount ?? (team.members?.length ?? 0),
            dealCount: (team as any).dealCount ?? 0,
            revenue: (team as any).revenue ?? 0,
            totalBudget: (team as any).totalBudget ?? 0,
        }))
    }, [teams])

    // Client-side filtering is now only for sorting since search is server-side
    const filteredTeams = teamsWithStats

    const sortedTeams = [...filteredTeams].sort((a, b) => {
        const av =
            sortCol === "division"
                ? (a.division?.name ?? "")
                : (a[sortCol as keyof Team] ?? "")
        const bv =
            sortCol === "division"
                ? (b.division?.name ?? "")
                : (b[sortCol as keyof Team] ?? "")
        const aStr = typeof av === "string" ? av.toLowerCase() : av
        const bStr = typeof bv === "string" ? bv.toLowerCase() : bv
        return aStr < bStr ? -sortDir : aStr > bStr ? sortDir : 0
    })

    const totalTeams = sortedTeams.length
    const totalPages = Math.max(1, Math.ceil(totalTeams / pageSize))
    const paginatedTeams = sortedTeams.slice((page - 1) * pageSize, page * pageSize)

    const stats: TeamStats = {
        totalTeams: teamsWithStats.length,
        totalMembers: teamsWithStats.reduce((sum, t) => sum + (t.memberCount ?? 0), 0),
        activeTeams: teamsWithStats.filter(t => (t.memberCount ?? 0) > 0).length,
        avgTeamSize: teamsWithStats.length ? Math.round(teamsWithStats.reduce((sum, t) => sum + (t.memberCount ?? 0), 0) / teamsWithStats.length) : 0
    }

    const selectedTeam = selectedTeamId ? paginatedTeams.find(t => t.id === selectedTeamId) : null

    const handleEditTeam = (team: Team) => {
        setEditingTeam(team)
        setIsEditModalOpen(true)
    }

    const handleDeleteTeam = async () => {
        if (!deletingTeam) return
        try {
            await deleteTeam(deletingTeam.id).unwrap()
            await invalidateTeamsList()
            toast.success("Team deleted successfully")
            setSelectedTeamId(null)
        } catch (error: unknown) {
            const err = error as { data?: { message?: string } }
            toast.error(err?.data?.message || "Failed to delete team")
            throw error
        }
    }

    const handleCloseEditModal = () => {
        setIsEditModalOpen(false)
        setEditingTeam(null)
        setSelectedTeamId(null)
    }

    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">
            {/* Header Section - Glassmorphism */}
            <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 flex-col shrink-0">
                    <h1 className="text-[25px] font-extrabold text-text font-['Lexend'] tracking-tight leading-none">
                        Teams
                    </h1>
                    <p className="text-[12px] text-gray-500 mt-2 font-['Lexend_Deca'] uppercase tracking-wider">
                        <span className="font-bold text-text/80">{totalTeams} teams</span> <span className="mx-1 opacity-50">·</span> <span className="font-bold text-accent/90">Page {page} of {totalPages}</span>
                    </p>
                </div>

                <div className="flex flex-row items-center gap-2 w-full md:w-auto md:justify-end min-w-0">
                    <div className="relative flex-1 min-w-[150px] md:flex-none md:w-[200px]">
                        <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" />
                        <Input
                            type="search"
                            placeholder="Search teams..."
                            className="pl-9 pr-3 h-10 text-[13px] bg-white/60 dark:bg-white/10 backdrop-blur-[15px] border border-white/60 rounded-xl w-full font-['Lexend_Deca'] shadow-[0px_2px_15px_0px_rgba(0,0,0,0.06)]"
                            value={inputValue}
                            onChange={(e) => setInputValue(e.target.value)}
                        />
                    </div>

                    <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => setSortDir(sortDir === 1 ? -1 : 1)}
                        className="h-10 w-10 p-0 hover:bg-white/40 border border-white/20 shadow-sm rounded-xl shrink-0"
                        title={sortDir === 1 ? "Sort Ascending" : "Sort Descending"}
                    >
                        {sortDir === 1 ? (
                            <ArrowUpAz size={18} className="text-[#6C63FF]" />
                        ) : (
                            <ArrowDownAz size={18} className="text-[#6C63FF]" />
                        )}
                    </Button>

                    {/* When search is active: only Edit and Delete; otherwise Add Team */}
                    <div className="flex items-center gap-2">
                        {isSearchActive ? (
                            <>
                                <Can action="update" subject="team">
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        disabled={!selectedTeam}
                                        onClick={() => selectedTeam && handleEditTeam(selectedTeam)}
                                        className="gap-1.5 bg-white/60 backdrop-blur-md border-white/60 hover:bg-white/80"
                                    >
                                        <Pencil size={14} /> Edit
                                    </Button>
                                </Can>
                                <Can action="delete" subject="team">
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        disabled={!selectedTeam}
                                        onClick={() => {
                                            if (selectedTeam) {
                                                setDeletingTeam(selectedTeam)
                                                setIsDeleteDialogOpen(true)
                                            }
                                        }}
                                        className="gap-1.5 bg-white/60 backdrop-blur-md border-white/60 hover:bg-red-50 hover:border-red-200 hover:text-red-600"
                                    >
                                        <Trash2 size={14} /> Delete
                                    </Button>
                                </Can>
                            </>
                        ) : (
                            <Can action="create" subject="team">
                                <Button
                                    size="sm"
                                    onClick={() => setIsCreateModalOpen(true)}
                                    className="gap-2"
                                >
                                    <Plus size={16} className="stroke-[1px]" /> Add Team
                                </Button>
                            </Can>
                        )}
                    </div>
                </div>
            </div>

            {/* Stats Strip - Glassmorphism */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-3.5 mb-1.5 overflow-x-auto scrollbar-themed">
                <KPICard label="Total Teams" value={stats.totalTeams.toString()} subtext="created" icon={<Users size={16} />} className="bg-white/50 dark:bg-white/10 backdrop-blur-[15px] border border-white/40 shadow-[0px_2px_20px_0px_rgba(0,0,0,0.06)] py-4" />
                <KPICard label="Total Members" value={stats.totalMembers.toString()} subtext="across teams" icon={<TrendingUp size={16} />} className="bg-white/50 dark:bg-white/10 backdrop-blur-[15px] border border-white/40 shadow-[0px_2px_20px_0px_rgba(0,0,0,0.06)] py-4" />
                <KPICard label="Active Teams" value={stats.activeTeams.toString()} subtext="with members" icon={<Award size={16} />} className="bg-white/50 dark:bg-white/10 backdrop-blur-[15px] border border-white/40 shadow-[0px_2px_20px_0px_rgba(0,0,0,0.06)] py-4" />
                <KPICard label="Avg Team Size" value={stats.avgTeamSize.toString()} subtext="members" icon={<Users size={16} />} className="bg-white/50 dark:bg-white/10 backdrop-blur-[15px] border border-white/40 shadow-[0px_2px_20px_0px_rgba(0,0,0,0.06)] py-4" />
            </div>

            {/* Main Content Area */}
            <div className="flex-1 min-h-0">
                <div className="pr-1 pb-4">
                    {isLoading || isFetching ? (
                        <Loading message="Loading teams..." className="h-64" />
                    ) : totalTeams > 0 ? (
                        <>
                            <TeamListView
                                teams={paginatedTeams}
                                users={allUsers}
                                onOpen={(t) => setViewingTeam(t)}
                                onEdit={canUpdateTeam ? handleEditTeam : undefined}
                                onDelete={canDeleteTeam ? (t) => {
                                    setDeletingTeam(t)
                                    setIsDeleteDialogOpen(true)
                                } : undefined}
                                sortCol={sortCol || "name"}
                                sortDir={sortDir as 1 | -1}
                                onSort={(col) => {
                                    if (sortCol === col) setSortDir(sortDir === 1 ? -1 : 1)
                                    else { setSortCol(col); setSortDir(1); }
                                    setPage(1)
                                }}
                                isSearchActive={isSearchActive}
                                selectedId={selectedTeamId}
                                onSelectId={setSelectedTeamId}
                            />
                            {totalPages > 1 && (
                                <div className="flex flex-col sm:flex-row items-center justify-between gap-4 py-3 border-t border-border/40 mt-4">
                                    <div className="flex items-center gap-3">
                                        <p className="text-[12px] text-gray-600 font-['Lexend_Deca']">
                                            Showing {(page - 1) * pageSize + 1}–{Math.min(page * pageSize, totalTeams)} of {totalTeams}
                                        </p>
                                    </div>
                                    <div className="flex items-center gap-2">
                                        <Button variant="outline" size="pagination" onClick={() => setPage(Math.max(1, page - 1))} disabled={page <= 1}>
                                            Previous
                                        </Button>
                                        <span className="text-[12px] font-semibold px-2">Page {page} of {totalPages}</span>
                                        <Button variant="outline" size="pagination" onClick={() => setPage(Math.min(totalPages, page + 1))} disabled={page >= totalPages}>
                                            Next
                                        </Button>
                                    </div>
                                </div>
                            )}
                        </>
                    ) : (
                        <NoDataFound
                            message="No teams found"
                            description="No teams match your filters. Create your first team to get started."
                        />
                    )}
                </div>
            </div>

            {/* Create Team Modal */}
            <CreateTeamModal
                isOpen={isCreateModalOpen}
                onClose={() => setIsCreateModalOpen(false)}
            />

            {/* Edit Team Modal */}
            <EditTeamModal
                team={editingTeam}
                isOpen={isEditModalOpen}
                onClose={handleCloseEditModal}
            />

            {/* Delete Dialog */}
            <DeleteDialog
                open={isDeleteDialogOpen}
                onOpenChange={(val) => {
                    if (!val) {
                        setIsDeleteDialogOpen(false)
                        setDeletingTeam(null)
                        setSelectedTeamId(null)
                    }
                }}
                onConfirm={handleDeleteTeam}
                title="Delete Team"
                description={`Are you sure you want to delete "${deletingTeam?.name}"? This action cannot be undone.`}
                isLoading={isDeleting}
            />

            {/* View Team Dialog */}
            <TeamViewDialog
                team={viewingTeam}
                isOpen={!!viewingTeam}
                onClose={() => setViewingTeam(null)}
                users={allUsers}
            />
        </div>
    )
}