"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 } from "lucide-react"
import { getCurrentUser } from "@/lib/auth"

const adminItems = [
    {
        title: "Dashboard",
        href: "/dashboard",
        icon: LayoutDashboard,
    },
    {
        title: "Vagas",
        href: "/dashboard/jobs",
        icon: Briefcase,
    },
    {
        title: "Candidatos",
        href: "/dashboard/candidates",
        icon: Users,
    },
    {
        title: "Usuários",
        href: "/dashboard/users",
        icon: Users,
    },
    {
        title: "Empresas",
        href: "/dashboard/companies",
        icon: Building2,
    },
    {
        title: "Mensagens",
        href: "/dashboard/messages",
        icon: MessageSquare,
    },
]

const companyItems = [
    {
        title: "Dashboard",
        href: "/dashboard",
        icon: LayoutDashboard,
    },
    {
        title: "Minhas Vagas",
        href: "/dashboard/my-jobs",
        icon: Briefcase,
    },
    {
        title: "Candidaturas",
        href: "/dashboard/applications",
        icon: Users,
    },
]

const candidateItems = [
    {
        title: "Dashboard",
        href: "/dashboard",
        icon: LayoutDashboard,
    },
    {
        title: "Vagas",
        href: "/jobs", // Public search
        icon: Briefcase,
    },
    {
        title: "Minhas Candidaturas",
        href: "/dashboard/my-applications",
        icon: FileText,
    },
]

export function Sidebar() {
    const pathname = usePathname()
    const user = getCurrentUser()

    let items = candidateItems
    if (user?.role === "admin" || user?.roles?.includes("superadmin")) {
        items = adminItems
    } 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">
            {/* Branding Header with CORRECT Padding (pl-6) */}
            <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>

            {/* Navigation */}
            <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>

            {/* Footer / User Info could go here */}
            <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>
    )
}
