"use client"

import Link from "next/link"
import Image from "next/image"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { LayoutDashboard, Briefcase, Users, MessageSquare, Building2, FileText, HelpCircle, Ticket } from "lucide-react"
import { getCurrentUser, isAdminUser } from "@/lib/auth"
import { useTranslation } from "@/lib/i18n"

const Sidebar = () => {
    const { t } = useTranslation()
    const pathname = usePathname()
    const user = getCurrentUser()
    const isSuperadmin = user?.role === "superadmin"

    const adminItems = [
        {
            title: t('sidebar.dashboard'),
            href: "/dashboard",
            icon: LayoutDashboard,
        },
        {
            title: t('sidebar.jobs'),
            href: "/dashboard/jobs",
            icon: Briefcase,
        },
        {
            title: t('sidebar.candidates'),
            href: "/dashboard/candidates",
            icon: Users,
        },
        {
            title: t('sidebar.users'),
            href: "/dashboard/users",
            icon: Users,
        },
        {
            title: t('sidebar.companies'),
            href: "/dashboard/companies",
            icon: Building2,
        },
        {
            title: t('sidebar.backoffice'),
            href: "/dashboard/backoffice",
            icon: FileText,
        },
        {
            title: t('sidebar.messages'),
            href: "/dashboard/messages",
            icon: MessageSquare,
        },
        {
            title: t('sidebar.tickets'),
            href: "/dashboard/tickets",
            icon: Ticket,
        },
    ]

    const companyItems = [
        {
            title: t('sidebar.dashboard'),
            href: "/dashboard",
            icon: LayoutDashboard,
        },
        {
            title: t('sidebar.my_jobs'),
            href: "/dashboard/my-jobs",
            icon: Briefcase,
        },
        {
            title: t('sidebar.applications'),
            href: "/dashboard/applications",
            icon: Users,
        },
        {
            title: t('sidebar.messages'),
            href: "/dashboard/messages",
            icon: MessageSquare,
        },
        {
            title: t('sidebar.support'),
            href: "/dashboard/support",
            icon: HelpCircle,
        },
    ]

    const candidateItems = [
        {
            title: t('sidebar.dashboard'),
            href: "/dashboard",
            icon: LayoutDashboard,
        },
        {
            title: t('sidebar.jobs'),
            href: "/jobs",
            icon: Briefcase,
        },
        {
            title: t('sidebar.my_applications'),
            href: "/dashboard/my-applications",
            icon: FileText,
        },
        {
            title: t('sidebar.support'),
            href: "/dashboard/support/tickets",
            icon: HelpCircle,
        },
    ]

    let items = candidateItems
    if (isAdminUser(user)) {
        items = isSuperadmin
            ? adminItems
            : adminItems.filter(item => item.href !== "/dashboard/backoffice" && item.href !== "/dashboard/companies")
    } else if (user?.role === "company") {
        items = companyItems
    }

    return (
        <aside className="w-64 shrink-0 border-r border-border bg-muted/30 min-h-screen flex flex-col">
            <div className="flex h-16 shrink-0 items-center px-6 gap-3 border-b border-border">
                <Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
                    <Image
                        src="/logohorse.png"
                        alt="GoHorse Jobs"
                        width={40}
                        height={40}
                        className="rounded-lg"
                    />
                    <span className="font-bold text-lg text-foreground">GoHorse Jobs</span>
                </Link>
            </div>

            <nav className="flex-1 p-4 space-y-2 overflow-y-auto">
                {items.map((item) => {
                    const Icon = item.icon
                    const isActive = pathname === item.href

                    return (
                        <Link
                            key={item.href}
                            href={item.href}
                            className={cn(
                                "flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors",
                                isActive
                                    ? "bg-primary text-primary-foreground shadow-sm"
                                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
                            )}
                        >
                            <Icon className="h-5 w-5" />
                            {item.title}
                        </Link>
                    )
                })}
            </nav>

            <div className="p-4 border-t border-border mt-auto">
                <div className="text-xs text-muted-foreground text-center">
                    v1.0.0
                </div>
            </div>
        </aside>
    )
}

export { Sidebar }