"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { signOut } from "next-auth/react"

interface SidebarProps {
  role: string
}

export default function Sidebar({ role }: SidebarProps) {
  const pathname = usePathname()

  const adminLinks = [
    { href: "/admin", label: "Dashboard", icon: "📊" },
    { href: "/admin/teams", label: "Teams", icon: "👥" },
    { href: "/admin/workers", label: "Workers", icon: "👷" },
    { href: "/admin/managers", label: "Shift Managers", icon: "👔" },
    { href: "/admin/machines", label: "Machines", icon: "⚙️" },
  ]

  const managerLinks = [
    { href: "/shift-manager", label: "Dashboard", icon: "📊" },
    { href: "/shift-manager/shifts", label: "Shifts", icon: "🕐" },
    { href: "/shift-manager/create-shift", label: "Create Shift", icon: "➕" },
  ]

  const operatorLinks = [
    { href: "/operator", label: "Active Shifts", icon: "🔄" },
    { href: "/operator/archive", label: "Shifts Archive", icon: "📁" },
  ]

  const links = role === "admin" ? adminLinks : role === "shift_manager" ? managerLinks : operatorLinks

  return (
    <aside className="w-64 bg-gray-900 text-white min-h-screen flex flex-col">
      <div className="p-6 border-b border-gray-800">
        <h1 className="text-2xl font-bold">Müller</h1>
        <p className="text-sm text-gray-400 mt-1">Production System</p>
      </div>

      <nav className="flex-1 p-4">
        <ul className="space-y-2">
          {links.map((link) => (
            <li key={link.href}>
              <Link
                href={link.href}
                className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
                  pathname === link.href
                    ? "bg-blue-600 text-white"
                    : "text-gray-300 hover:bg-gray-800"
                }`}
              >
                <span className="text-xl">{link.icon}</span>
                <span>{link.label}</span>
              </Link>
            </li>
          ))}
        </ul>
      </nav>

      <div className="p-4 border-t border-gray-800">
        <button
          onClick={() => signOut({ callbackUrl: "/login" })}
          className="w-full flex items-center gap-3 px-4 py-3 rounded-lg text-gray-300 hover:bg-red-600 hover:text-white transition-colors"
        >
          <span className="text-xl">🚪</span>
          <span>Logout</span>
        </button>
      </div>
    </aside>
  )
}