// components/members/RoleSelector.tsx
import React, { useState } from "react"
import { Users, Shield, ChevronDown } from "lucide-react"

interface RoleSelectorProps {
  selectedRole: "admin" | "member"
  onChange: (role: "admin" | "member") => void
  disabled?: boolean
}

export const RoleSelector: React.FC<RoleSelectorProps> = ({
  selectedRole,
  onChange,
  disabled = false,
}) => {
  const [isOpen, setIsOpen] = useState(false)

  const roles = [
    {
      value: "member" as const,
      label: "Member",
      icon: <Users size={16} />,
      description: "Can view repository data",
      color: "text-gray-700 dark:text-gray-300",
      bgColor: "bg-gray-50 dark:bg-gray-800/50",
      borderColor: "border-gray-300 dark:border-gray-700",
      hoverBg: "hover:bg-gray-100 dark:hover:bg-gray-800",
    },
    {
      value: "admin" as const,
      label: "Admin",
      icon: <Shield size={16} />,
      description: "Can manage members and settings",
      color: "text-blue-700 dark:text-blue-300",
      bgColor: "bg-blue-50 dark:bg-blue-900/20",
      borderColor: "border-blue-300 dark:border-blue-700",
      hoverBg: "hover:bg-blue-100 dark:hover:bg-blue-900/30",
    },
  ]

  const selectedRoleData = roles.find(r => r.value === selectedRole)

  return (
    <div className="relative">
      <button
        type="button"
        onClick={() => !disabled && setIsOpen(!isOpen)}
        disabled={disabled}
        className={`w-full sm:w-auto min-w-[160px] flex items-center justify-between gap-3 px-4 py-3 rounded-xl border-2 transition-all duration-200 ${
          selectedRoleData?.bgColor
        } ${selectedRoleData?.borderColor} ${selectedRoleData?.color} ${
          disabled
            ? "opacity-50 cursor-not-allowed"
            : "hover:shadow-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
        }`}
      >
        <div className="flex items-center gap-2">
          {selectedRoleData?.icon}
          <span className="font-medium text-sm">{selectedRoleData?.label}</span>
        </div>
        <ChevronDown
          size={16}
          className={`transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
        />
      </button>

      {isOpen && !disabled && (
        <>
          <div className="fixed inset-0 z-10" onClick={() => setIsOpen(false)} />
          <div className="absolute top-full left-0 right-0 mt-2 z-20 bg-card border border-border rounded-xl shadow-lg overflow-hidden animate-in slide-in-from-top-2">
            {roles.map(role => (
              <button
                key={role.value}
                type="button"
                onClick={() => {
                  onChange(role.value)
                  setIsOpen(false)
                }}
                className={`w-full flex items-start gap-3 px-4 py-3 transition-colors ${
                  selectedRole === role.value ? `${role.bgColor} ${role.color}` : role.hoverBg
                } ${selectedRole === role.value ? "cursor-default" : "cursor-pointer"}`}
              >
                <div className="flex-shrink-0 mt-0.5">{role.icon}</div>
                <div className="flex-1 text-left">
                  <div className="font-medium text-sm">{role.label}</div>
                  <div className="text-xs text-muted-foreground mt-0.5">{role.description}</div>
                </div>
              </button>
            ))}
          </div>
        </>
      )}
    </div>
  )
}
