"use client"

import { AdminRole } from "@/types/roles"
import { cn } from "@/lib/utils"
import { Filter } from "lucide-react"
import i18n from "@/lib/i18n";

interface RoleListPanelProps {
  roles: AdminRole[]
  activeRoleId: string
  onSelectRole: (roleId: string) => void
}

export function RoleListPanel({ roles, activeRoleId, onSelectRole }: RoleListPanelProps) {
  return (
    <div className="bg-card border border-border rounded-lg overflow-hidden flex flex-col h-[700px] sticky top-24 shadow-sm shadow-slate-200/20">
      <div className="p-4 border-b border-border bg-muted/30 flex justify-between items-center">
        <h3 className="text-[12px] font-semibold uppercase tracking-wider text-muted-foreground">{i18n.t('components.admin.roles.RoleListPanel.text_1')}</h3>
        <button className="text-muted-foreground hover:text-foreground transition-colors">
          <Filter className="h-4 w-4" />
        </button>
      </div>
      <div className="flex-1 overflow-y-auto">
        <ul className="divide-y divide-border/50">
          {roles.map((role) => {
            const isActive = role.id === activeRoleId
            return (
              <li key={role.id}>
                <button
                   onClick={() => onSelectRole(role.id)}
                   className={cn(
                     "w-full text-left p-4 transition-colors flex justify-between items-center group border-l-4",
                     isActive
                       ? "bg-accent/50 border-primary"
                       : "border-transparent hover:bg-muted/30"
                   )}
                >
                  <div className="flex-1 min-w-0 pr-4">
                    <div className="text-[14px] font-semibold text-foreground mb-1 truncate">
                      {i18n.language === "ar" ? (role.name_ar || role.name) : (role.name_en || role.name || role.name_ar || role.code)}
                    </div>
                    <div className={cn(
                      "text-[12px] transition-colors truncate",
                      isActive ? "text-foreground" : "text-muted-foreground group-hover:text-foreground"
                    )}>
                      {role.description}
                    </div>
                  </div>
                  <span className="bg-background text-muted-foreground border border-border px-2 py-0.5 rounded-full text-[10px] font-semibold whitespace-nowrap">
                    {role.user_count} {i18n.t('components.admin.roles.RoleListPanel.text_2')}</span>
                </button>
              </li>
            )
          })}
        </ul>
      </div>
    </div>
  )
}
