'use client'

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

const roleIcons: Record<RoleId, string> = {
  developer: '\u{1F468}\u200D\u{1F4BB}',
  ops: '\u{1F6E0}\uFE0F',
}

export default function RoleSelectPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const storedRole = getStoredRole()
    if (storedRole) {
      router.replace('/dashboard')
    } else {
      setLoading(false)
    }
  }, [router])

  const handleRoleSelect = (roleId: RoleId) => {
    storeRole(roleId)
    router.push('/dashboard')
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-slate-50 flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
      </div>
    )
  }

  const categoryLabels: Record<string, string> = {
    communication: 'Kommunikation',
    infrastructure: 'Infrastruktur',
    development: 'Entwicklung',
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center p-8">
      <div className="max-w-2xl w-full">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-white mb-4">
            BreakPilot Core Admin
          </h1>
          <p className="text-lg text-slate-300">
            Waehlen Sie Ihre Rolle fuer eine optimierte Ansicht:
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
          {roles.map((role) => (
            <button
              key={role.id}
              onClick={() => handleRoleSelect(role.id)}
              className="group bg-slate-800/50 hover:bg-slate-700/50 border border-slate-700 hover:border-primary-500 rounded-2xl p-6 text-left transition-all duration-200 hover:scale-[1.02] hover:shadow-xl"
            >
              <div className="flex items-start gap-4">
                <span className="text-4xl">{roleIcons[role.id]}</span>
                <div>
                  <h3 className="text-xl font-semibold text-white group-hover:text-primary-400 transition-colors">
                    {role.name}
                  </h3>
                  <p className="text-slate-400 mt-1">{role.description}</p>
                  <div className="mt-3 flex flex-wrap gap-2">
                    {role.visibleCategories.map((cat) => (
                      <span
                        key={cat}
                        className="px-2 py-1 bg-slate-700/50 rounded text-xs text-slate-300"
                      >
                        {categoryLabels[cat] || cat}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            </button>
          ))}
        </div>

        <div className="text-center">
          <p className="text-sm text-slate-500">
            Sie koennen Ihre Rolle jederzeit in der Sidebar aendern.
          </p>
        </div>
      </div>
    </div>
  )
}