import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useLang } from '../../../core/infrastructure/i18n';
import { MessageSquare } from 'lucide-react';
import LoginForm from './components/LoginForm';
import RegisterForm from './components/RegisterForm';
import { AuthApi } from '../infrastructure/authApi';

export default function AuthPage() {
  const [isLogin, setIsLogin] = useState(true);
  const { lang, setLang } = useLang();
  const [enableRegistration, setEnableRegistration] = useState(true);

  useEffect(() => {
    AuthApi.getConfig()
      .then(data => {
        if (data && typeof data.enableRegistration === 'boolean') {
          setEnableRegistration(data.enableRegistration);
          if (!data.enableRegistration) setIsLogin(true);
        }
      })
      .catch(() => {});
  }, []);

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="h-full flex flex-col items-center justify-center relative overflow-hidden bg-surface-container-lowest"
    >
      {/* Language Switcher */}
      <div className="absolute top-12 left-1/2 -translate-x-1/2 flex items-center gap-1 p-1 bg-surface-container-low rounded-full border border-outline-variant/10 shadow-lg z-50 slide-on-ice">
        <button onClick={() => setLang('en')} className={`px-4 py-1.5 rounded-full text-xs font-black tracking-widest transition-all ${lang === 'en' ? 'bg-primary text-on-primary' : 'text-on-surface-variant/40 hover:text-on-surface'}`}>EN</button>
        <button onClick={() => setLang('ru')} className={`px-4 py-1.5 rounded-full text-xs font-black tracking-widest transition-all ${lang === 'ru' ? 'bg-primary text-on-primary' : 'text-on-surface-variant/40 hover:text-on-surface'}`}>RU</button>
      </div>

      {/* Карточка авторизации */}
      <motion.div
        initial={{ scale: 0.98, opacity: 0, y: 10 }}
        animate={{ scale: 1, opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
        className="relative z-10 w-full max-w-[440px] mx-4"
      >
        <div className="knot-card p-10 shadow-none border-none">

          {/* Header */}
          <div className="flex flex-col items-center mb-12">
            <motion.div
              initial={{ rotate: -10, scale: 0.9 }}
              animate={{ rotate: 0, scale: 1 }}
              transition={{ duration: 0.8, type: 'spring' }}
              className="w-20 h-20 rounded-3xl bg-primary/10 flex items-center justify-center mb-6 shadow-none border-2 border-primary/20 slide-on-ice group"
            >
              <span className="material-symbols-outlined text-4xl text-primary group-hover:scale-110 transition-transform">hub</span>
            </motion.div>
            <h1 className="text-3xl font-black font-headline text-on-surface tracking-tighter mb-1">Knot</h1>
            <p className="text-on-surface-variant/40 text-[11px] tracking-[0.2em] uppercase font-black">
              {isLogin ? (lang === 'ru' ? 'authorization' : 'authorization') : (lang === 'ru' ? 'registration' : 'registration')}
            </p>
          </div>

          <AnimatePresence mode="wait">
            <motion.div
              key={isLogin ? 'login' : 'register'}
              initial={{ opacity: 0, x: isLogin ? -20 : 20 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: isLogin ? 20 : -20 }}
              transition={{ duration: 0.2 }}
            >
              {isLogin ? (
                <LoginForm 
                  enableRegistration={enableRegistration} 
                  onRegisterClick={() => setIsLogin(false)} 
                />
              ) : (
                <RegisterForm 
                  enableRegistration={enableRegistration} 
                  onLoginClick={() => setIsLogin(true)} 
                />
              )}
            </motion.div>
          </AnimatePresence>
        </div>
      </motion.div>
    </motion.div>
  );
}
