'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?.()
    // Refresh the page to update navigation
    router.refresh()
  }

  const role = currentRole ? getRoleById(currentRole) : null

  if (!role) {
    return null
  }

  // Role icons
  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>
    ),
    manager: (
      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
      </svg>
    ),
    auditor: (
      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
      </svg>
    ),
    dsb: (
      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
      </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>

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