'use client'

import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { roles, getRoleById, getStoredRole, storeRole, RoleId } from '@/lib/roles'

interface RoleIndicatorProps {
  collapsed?: boolean
  onRoleChange?: () => void
}

export function RoleIndicator({ collapsed, onRoleChange }: RoleIndicatorProps) {
  const router = useRouter()
  const [currentRole, setCurrentRole] = useState<RoleId | null>(null)
  const [showDropdown, setShowDropdown] = useState(false)

  useEffect(() => {
    const role = getStoredRole()
    setCurrentRole(role)
  }, [])

  const handleRoleChange = (roleId: RoleId) => {
    storeRole(roleId)
    setCurrentRole(roleId)
    setShowDropdown(false)
    onRoleChange?.()
    router.refresh()
  }

  const role = currentRole ? getRoleById(currentRole) : null

  if (!role) {
    return null
  }

  const roleIcons: Record<RoleId, React.ReactNode> = {
    developer: (
      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
      </svg>
    ),
    ops: (
      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
      </svg>
    ),
  }

  return (
    <div className="relative">
      <button
        onClick={() => setShowDropdown(!showDropdown)}
        className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-slate-300 hover:bg-slate-800 transition-colors ${
          collapsed ? 'justify-center' : ''
        }`}
        title={collapsed ? `Rolle: ${role.name}` : undefined}
      >
        {currentRole && roleIcons[currentRole]}
        {!collapsed && (
          <>
            <span className="flex-1 text-left">Rolle: {role.name}</span>
            <svg
              className={`w-4 h-4 transition-transform ${showDropdown ? 'rotate-180' : ''}`}
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
            </svg>
          </>
        )}
      </button>

      {showDropdown && (
        <div className={`absolute ${collapsed ? 'left-full ml-2' : 'left-0 right-0'} bottom-full mb-2 bg-slate-800 rounded-lg shadow-lg border border-slate-700 overflow-hidden`}>
          {roles.map((r) => (
            <button
              key={r.id}
              onClick={() => handleRoleChange(r.id)}
              className={`w-full flex items-center gap-2 px-3 py-2 text-sm transition-colors ${
                r.id === currentRole
                  ? 'bg-primary-600 text-white'
                  : 'text-slate-300 hover:bg-slate-700'
              }`}
            >
              {roleIcons[r.id]}
              <span>{r.name}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  )
}
