"use client"

import { Shield, User, Layout, ListFilter, GitBranch, Layers } from "lucide-react"
import { useGetProfileQuery } from "@/api/rtk"
import { useAuthToken } from "@/hooks/use-auth-token"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { SettingsHeader } from "@/components/settings/settings-header"
import { RolePermissionsTab } from "@/components/settings/role-permissions-tab"
import { ProfileTab } from "@/components/settings/profile-tab"
import { LeadsMetaTab } from "@/components/settings/leads-meta-tab"
import { PipelineSettingsTab } from "@/components/settings/pipeline-settings-tab"
import { useSession } from "next-auth/react"
import { NoDataFound } from "@/components/ui/no-data-found"
import React from "react"
import { useSearchParams, useRouter, usePathname } from "next/navigation"
import { hasPermission, isAdminUser, getRoleName } from "@/lib/permissions"

const TABS = [
    "profile",
    "pipelines",
    "pipeline-stages",
    "role-permissions",
    "extra-content",
] as const
type Tab = (typeof TABS)[number]

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

    const canReadSettings = hasPermission(permissionSource, ["READ", "UPDATE"], "SETTINGS")

    const canManagePipelines =
        canReadSettings &&
        hasPermission(permissionSource, ["READ", "CREATE", "UPDATE"], "PIPELINE")

    const canManageRoles = React.useMemo(() => {
        if (isAdminUser(permissionSource)) return true
        const role = getRoleName(permissionSource)?.toLowerCase()
        return role === "ceo" || role === "coo"
    }, [permissionSource])

    const canManageExtraContent = hasPermission(permissionSource, ["READ", "CREATE", "UPDATE", "DELETE"], "EXTRA_CONTENT")

    const searchParams = useSearchParams()
    const router = useRouter()
    const pathname = usePathname()

    const initialTab = searchParams.get("tab") as Tab
    const [tab, setTabState] = React.useState<Tab>(
        TABS.includes(initialTab) ? initialTab : "profile"
    )

    const setTab = React.useCallback(
        (newTab: Tab) => {
            setTabState(newTab)
            const params = new URLSearchParams(searchParams.toString())
            params.set("tab", newTab)
            router.replace(`${pathname}?${params.toString()}`)
        },
        [searchParams, pathname, router]
    )

    React.useEffect(() => {
        if (
            (tab === "pipelines" || tab === "pipeline-stages") &&
            !canManagePipelines
        ) {
            void setTab("profile")
        }
    }, [tab, canManagePipelines, setTab])

    React.useEffect(() => {
        if (tab === "role-permissions" && !canManageRoles) {
            void setTab("profile")
        }
    }, [tab, canManageRoles, setTab])

    // If they can't even read settings (general permission), show no data.
    // However, we allow everyone to see their own profile.
    if (!canReadSettings) {
        return (
            <div className="flex h-full items-center justify-center p-4">
                <NoDataFound
                    message="Settings access required"
                    description="You do not have permission to manage system settings."
                />
            </div>
        )
    }

    return (
        <div className="flex flex-col h-full gap-5 p-1 sm:p-2 md:p-4 animate-in fade-in duration-500 overflow-y-auto scrollbar-themed">
            <SettingsHeader profile={profile} />

            <Tabs
                value={tab}
                onValueChange={(v) => setTab(v as Tab)}
                orientation="vertical"
                className="flex-1 min-h-0 flex flex-col md:flex-row gap-5"
            >
                <TabsList className="w-full md:w-56 shrink-0 h-fit flex-col items-stretch p-2 rounded-2xl">
                    <TabsTrigger value="profile" className="justify-start gap-2.5 px-3 py-2.5 text-[13px]">
                        <User size={15} />
                        <span className="hidden md:block">My Profile</span>
                    </TabsTrigger>
                    {canManagePipelines && (
                        <>
                            <TabsTrigger value="pipelines" className="justify-start gap-2.5 px-3 py-2.5 text-[13px]">
                                <GitBranch size={15} />
                                <span className="hidden md:block">Pipelines</span>
                            </TabsTrigger>
                            <TabsTrigger value="pipeline-stages" className="justify-start gap-2.5 px-3 py-2.5 text-[13px]">
                                <Layers size={15} />
                                <span className="hidden md:block">Stages</span>
                            </TabsTrigger>
                        </>
                    )}
                    {canManageRoles && (
                        <TabsTrigger value="role-permissions" className="justify-start gap-2.5 px-3 py-2.5 text-[13px]">
                            <Shield size={15} />
                            <span className="hidden md:block">Role Permissions</span>
                        </TabsTrigger>
                    )}
                    {canManageExtraContent && (
                        <TabsTrigger value="extra-content" className="justify-start gap-2.5 px-3 py-2.5 text-[13px]">
                            <Layout size={15} />
                            <span className="hidden md:block">Extra Content</span>
                        </TabsTrigger>
                    )}
                </TabsList>

                <div className="flex-1 min-w-0 pb-4">
                    <TabsContent value="profile">
                        {profile && <ProfileTab profile={profile} />}
                    </TabsContent>
                    {canManagePipelines && (
                        <TabsContent value="pipelines">
                            <PipelineSettingsTab tab={tab} setTab={setTab as any} />
                        </TabsContent>
                    )}
                    {canManagePipelines && (
                        <TabsContent value="pipeline-stages">
                            <PipelineSettingsTab tab={tab} setTab={setTab as any} />
                        </TabsContent>
                    )}
                    {canManageRoles && (
                        <TabsContent value="role-permissions">
                            <RolePermissionsTab />
                        </TabsContent>
                    )}
                    {canManageExtraContent && (
                        <TabsContent value="extra-content">
                            <div className="space-y-6">
                                <div className="flex items-center gap-3 mb-6">
                                    <div className="h-9 w-9 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-500">
                                        <ListFilter size={18} />
                                    </div>
                                    <div>
                                        <h2 className="text-[18px] font-extrabold text-gray-900 font-['Lexend'] tracking-tight">Lead &amp; Deal Meta Fields</h2>
                                        <p className="text-[12px] text-gray-400">Configure dynamic dropdown values, including deal types, for leads and deals.</p>
                                    </div>
                                </div>
                                <LeadsMetaTab />
                            </div>
                        </TabsContent>
                    )}
                </div>
            </Tabs>
        </div>
    )
}