'use client';

import { motion } from 'framer-motion';
import Link from 'next/link';
import { Home, Building, Briefcase, ArrowLeft } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import InteractiveBackground from '@/app/components/Animation/Background';

export default function ChooseRolePage() {
  const { t, i18n } = useTranslation();
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
        delayChildren: 0.3
      }
    }
  };

  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: { type: 'spring', stiffness: 100 }
    }
  };

  const floatingAnimation = {
    y: [0, -10, 0],
    transition: {
      duration: 3,
      repeat: Infinity,
      ease: "easeInOut"
    }
  };

  return (
    <div dir={i18n.language === 'ar' ? 'rtl' : 'ltr'} className="min-h-screen  flex items-center justify-center p-4 relative overflow-hidden">
     <InteractiveBackground/>
      <div className="absolute inset-0 overflow-hidden">
        {[...Array(20)].map((_, i) => (
          <motion.div
            key={i}
            className="absolute rounded-full bg-amber-500/10"
            style={{
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              width: Math.random() * 100 + 50,
              height: Math.random() * 100 + 50,
            }}
            animate={{
              x: [0, Math.random() * 50 - 25, 0],
              y: [0, Math.random() * 50 - 25, 0],
            }}
            transition={{
              duration: Math.random() * 10 + 10,
              repeat: Infinity,
              ease: "linear"
            }}
          />
        ))}
      </div>

      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="relative z-10 w-full max-w-4xl"
      >
        <motion.div
          variants={itemVariants}
          className="absolute -top-16 left-0"
        >
          <Link
            href="/"
            className="group flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
          >
            <motion.div whileHover={{ x: -5 }}>
              <ArrowLeft className="w-4 h-4" />
            </motion.div>
            <span>{t('backToHome')}</span>
          </Link>
        </motion.div>

        <motion.div
          variants={itemVariants}
          className="text-center mb-12"
        >
          <motion.h1
            className="text-4xl md:text-5xl font-bold text-amber-50 mb-4"
            animate={floatingAnimation}
          >
            {t('chooseRole.welcomeToSweetHome')}
          </motion.h1>
          <p className="text-xl text-gray-400">
            {t('chooseRole.subtitle')}
          </p>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <motion.div
            variants={itemVariants}
            whileHover={{ scale: 1.05, y: -5 }}
            whileTap={{ scale: 0.95 }}
            className="group cursor-pointer"
          >
            <Link href="/register/owner">
              <div className="bg-gradient-to-br from-amber-500 to-amber-600 rounded-3xl p-8 text-white shadow-2xl shadow-amber-500/20 relative overflow-hidden">
                <motion.div
                  className="absolute -top-20 -right-20 w-40 h-40 bg-white/10 rounded-full"
                  animate={{
                    scale: [1, 1.2, 1],
                    rotate: [0, 90, 0],
                  }}
                  transition={{ duration: 8, repeat: Infinity }}
                />
                
                <div className="relative z-10">
                  <motion.div
                    className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center mb-6 backdrop-blur-sm"
                    whileHover={{ rotate: 360 }}
                    transition={{ duration: 0.5 }}
                  >
                    <Building className="w-10 h-10 text-white" />
                  </motion.div>
                  
                  <h2 className="text-3xl font-bold mb-3">{t('chooseRole.owner')}</h2>
                  <p className="text-amber-100 mb-6">
                    {t('chooseRole.ownerDesc')}
                  </p>
                  
                  <ul className="space-y-2 text-sm text-amber-100">
                    <li className="flex items-center gap-2">
                      <span className="w-1.5 h-1.5 bg-white rounded-full" />
                      {t('chooseRole.ownerFeature1')}
                    </li>
                    <li className="flex items-center gap-2">
                      <span className="w-1.5 h-1.5 bg-white rounded-full" />
                      {t('chooseRole.ownerFeature2')}
                    </li>
                    <li className="flex items-center gap-2">
                      <span className="w-1.5 h-1.5 bg-white rounded-full" />
                      {t('chooseRole.ownerFeature3')}
                    </li>
                  </ul>
                  
                  <motion.button
                    className="mt-8 w-full bg-white text-amber-600 py-3 rounded-xl font-bold hover:bg-amber-50 transition-colors"
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    {t('chooseRole.createOwnerAccount')}
                  </motion.button>
                </div>
              </div>
            </Link>
          </motion.div>

          <motion.div
            variants={itemVariants}
            whileHover={{ scale: 1.05, y: -5 }}
            whileTap={{ scale: 0.95 }}
            className="group cursor-pointer"
          >
            <Link href="/register/tenant">
              <div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-3xl p-8 text-white shadow-2xl shadow-blue-500/20 relative overflow-hidden">
                <motion.div
                  className="absolute -bottom-20 -left-20 w-40 h-40 bg-white/10 rounded-full"
                  animate={{
                    scale: [1, 1.2, 1],
                    rotate: [0, -90, 0],
                  }}
                  transition={{ duration: 8, repeat: Infinity }}
                />
                
                <div className="relative z-10">
                  <motion.div
                    className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center mb-6 backdrop-blur-sm"
                    whileHover={{ rotate: 360 }}
                    transition={{ duration: 0.5 }}
                  >
                    <Home className="w-10 h-10 text-white" />
                  </motion.div>
                  
                  <h2 className="text-3xl font-bold mb-3">{t('chooseRole.tenant')}</h2>
                  <p className="text-blue-100 mb-6">
                    {t('chooseRole.tenantDesc')}
                  </p>
                  
                  <ul className="space-y-2 text-sm text-blue-100">
                    <li className="flex items-center gap-2">
                      <span className="w-1.5 h-1.5 bg-white rounded-full" />
                      {t('chooseRole.tenantFeature1')}
                    </li>
                    <li className="flex items-center gap-2">
                      <span className="w-1.5 h-1.5 bg-white rounded-full" />
                      {t('chooseRole.tenantFeature2')}
                    </li>
                    <li className="flex items-center gap-2">
                      <span className="w-1.5 h-1.5 bg-white rounded-full" />
                      {t('chooseRole.tenantFeature3')}
                    </li>
                  </ul>
                  
                  <motion.button
                    className="mt-8 w-full bg-white text-blue-600 py-3 rounded-xl font-bold hover:bg-blue-50 transition-colors"
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    {t('chooseRole.createTenantAccount')}
                  </motion.button>
                </div>
              </div>
            </Link>
          </motion.div>

          <motion.div
            variants={itemVariants}
            whileHover={{ scale: 1.05, y: -5 }}
            whileTap={{ scale: 0.95 }}
            className="group cursor-pointer"
          >
            <Link href="/register/agent">
              <div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-3xl p-8 text-white shadow-2xl shadow-purple-500/20 relative overflow-hidden">
                <motion.div
                  className="absolute -top-20 -right-20 w-40 h-40 bg-white/10 rounded-full"
                  animate={{
                    scale: [1, 1.2, 1],
                    rotate: [0, 90, 0],
                  }}
                  transition={{ duration: 8, repeat: Infinity }}
                />
                
                <div className="relative z-10">
                  <motion.div
                    className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center mb-6 backdrop-blur-sm"
                    whileHover={{ rotate: 360 }}
                    transition={{ duration: 0.5 }}
                  >
                    <Briefcase className="w-10 h-10 text-white" />
                  </motion.div>
                  
                  <h2 className="text-3xl font-bold mb-3">{t('chooseRole.agent')}</h2>
                  <p className="text-purple-100 mb-6">
                    {t('chooseRole.agentDesc')}
                  </p>
                  
                  <ul className="space-y-2 text-sm text-purple-100">
                    <li className="flex items-center gap-2">
                      <span className="w-1.5 h-1.5 bg-white rounded-full" />
                      {t('chooseRole.agentFeature1')}
                    </li>
                    <li className="flex items-center gap-2">
                      <span className="w-1.5 h-1.5 bg-white rounded-full" />
                      {t('chooseRole.agentFeature2')}
                    </li>
                    <li className="flex items-center gap-2">
                      <span className="w-1.5 h-1.5 bg-white rounded-full" />
                      {t('chooseRole.agentFeature3')}
                    </li>
                  </ul>
                  
                  <motion.button
                    className="mt-8 w-full bg-white text-purple-600 py-3 rounded-xl font-bold hover:bg-purple-50 transition-colors"
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    {t('chooseRole.createAgentAccount')}
                  </motion.button>
                </div>
              </div>
            </Link>
          </motion.div>
        </div>

        <motion.p
          variants={itemVariants}
          className="text-center text-gray-400 mt-8"
        >
          {t('chooseRole.alreadyHaveAccount')}{' '}
          <Link
            href="/login"
            className="text-amber-400 hover:text-amber-300 font-medium transition-colors"
          >
            {t('login')}
          </Link>
        </motion.p>
      </motion.div>
    </div>
  );
}