import React from 'react'
import { motion } from 'framer-motion'
import { FaEye, FaUsers, FaCrown } from 'react-icons/fa'
import { useStoreActions, useStoreState } from '@/store/store'
import { useNavigate } from 'react-router-dom'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { Helmet } from 'react-helmet'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Role } from '@/proxy/videoroom/models'

const Dashboard: React.FC = () => {
  const navigate = useNavigate()
  const { translate } = useLocalization()
  const { user } = useStoreState((state) => state.auth)
  const { setUser } = useStoreActions((actions) => actions.auth.user)

  const handleRoleSelect = (role: Role) => {
    setUser({
      ...user,
      role,
    })

    navigate(ROUTES_ENUM.protected.admin.videoroom.roomList, { replace: true })
  }

  return (
    <>
      <Helmet
        titleTemplate="%s | Erp Platform"
        title={translate('::' + 'App.Videoroom.Dashboard')}
        defaultTitle="Erp Platform"
      ></Helmet>
      <div className="flex items-center justify-center p-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center w-full max-w-4xl"
        >
          <p className="text-lg sm:text-xl text-gray-600 mb-8 sm:mb-12">
            {translate('::' + 'App.Videoroom.RoleSelector')}
          </p>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => handleRoleSelect('teacher')}
              className="bg-white rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-blue-500"
            >
              <FaCrown size={48} className="mx-auto text-blue-600 mb-4 sm:mb-4" />
              <h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2">
                {translate('::' + 'App.Videoroom.Host')}
              </h2>
              <p className="text-gray-600 text-sm sm:text-base">
                {translate('::' + 'App.Videoroom.HostDescription')}
              </p>
            </motion.button>

            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => handleRoleSelect('student')}
              className="bg-white rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-green-500"
            >
              <FaUsers size={48} className="mx-auto text-green-600 mb-4 sm:mb-4" />
              <h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2">
                {translate('::' + 'App.Videoroom.Participant')}
              </h2>
              <p className="text-gray-600 text-sm sm:text-base">
                {translate('::' + 'App.Videoroom.ParticipantDescription')}
              </p>
            </motion.button>

            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => handleRoleSelect('observer')}
              className="bg-white rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-purple-500 md:col-span-2 lg:col-span-1"
            >
              <FaEye size={48} className="mx-auto text-purple-600 mb-4 sm:mb-4" />
              <h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2">
                {translate('::' + 'App.Videoroom.Observer')}
              </h2>
              <p className="text-gray-600 text-sm sm:text-base">
                {translate('::' + 'App.Videoroom.ObserverDescription')}
              </p>
            </motion.button>
          </div>
        </motion.div>
      </div>
    </>
  )
}

export default Dashboard