'use client'

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

// Role icons
const roleIcons: Record<RoleId, string> = {
  developer: '👨‍💻',
  manager: '📊',
  auditor: '🔍',
  dsb: '🛡️',
}

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

  useEffect(() => {
    // Check if role is already stored
    const storedRole = getStoredRole()
    if (storedRole) {
      // Redirect to dashboard
      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>
    )
  }

  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-3xl w-full">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-white mb-4">
            Willkommen im Admin Center
          </h1>
          <p className="text-lg text-slate-300">
            Waehlen Sie Ihre Rolle fuer eine optimierte Ansicht:
          </p>
        </div>

        {/* Role Cards */}
        <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.slice(0, 3).map((cat) => (
                      <span
                        key={cat}
                        className="px-2 py-1 bg-slate-700/50 rounded text-xs text-slate-300"
                      >
                        {cat === 'compliance' && 'DSGVO & Compliance'}
                        {cat === 'ai' && 'KI & Automatisierung'}
                        {cat === 'infrastructure' && 'Infrastruktur'}
                        {cat === 'education' && 'Bildung'}
                        {cat === 'communication' && 'Kommunikation'}
                        {cat === 'development' && 'Entwicklung'}
                      </span>
                    ))}
                    {role.visibleCategories.length > 3 && (
                      <span className="px-2 py-1 bg-slate-700/50 rounded text-xs text-slate-300">
                        +{role.visibleCategories.length - 3} mehr
                      </span>
                    )}
                  </div>
                </div>
              </div>
            </button>
          ))}
        </div>

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