import React, { useState } from 'react';
import { login, changePassword } from '../services/auth';
import { User, Language } from '../types';
import { Dumbbell, ArrowRight, Lock, Mail, Globe } from 'lucide-react';
import { t } from '../services/i18n';

interface LoginProps {
  onLogin: (user: User) => void;
  language: Language;
  onLanguageChange: (lang: Language) => void;
}

const Login: React.FC<LoginProps> = ({ onLogin, language, onLanguageChange }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  
  // Force Password Change State
  const [needsChange, setNeedsChange] = useState(false);
  const [tempUser, setTempUser] = useState<User | null>(null);
  const [newPassword, setNewPassword] = useState('');

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    const res = login(email, password);
    if (res.success && res.user) {
      if (res.user.isFirstLogin) {
        setTempUser(res.user);
        setNeedsChange(true);
      } else {
        onLogin(res.user);
      }
    } else {
      setError(res.error || t('login_error', language));
    }
  };

  const handleChangePassword = () => {
    if (tempUser && newPassword.length >= 4) {
      changePassword(tempUser.id, newPassword);
      const updatedUser = { ...tempUser, isFirstLogin: false };
      onLogin(updatedUser);
    } else {
        setError(t('login_password_short', language));
    }
  };

  if (needsChange) {
      return (
        <div className="h-screen bg-surface flex items-center justify-center p-4">
            <div className="w-full max-w-sm bg-surface-container p-8 rounded-[28px] shadow-elevation-2">
                <h2 className="text-2xl text-on-surface mb-2">{t('change_pass_title', language)}</h2>
                <p className="text-sm text-on-surface-variant mb-6">{t('change_pass_desc', language)}</p>
                
                <div className="space-y-4">
                    <div className="bg-surface-container-high rounded-t-lg border-b border-outline-variant px-4 py-2">
                        <label className="text-[10px] text-on-surface-variant font-medium">{t('change_pass_new', language)}</label>
                        <input 
                            type="password"
                            className="w-full bg-transparent text-lg text-on-surface focus:outline-none pt-1"
                            value={newPassword}
                            onChange={(e) => setNewPassword(e.target.value)}
                        />
                    </div>
                    <button 
                        onClick={handleChangePassword}
                        className="w-full py-3 bg-primary text-on-primary rounded-full font-medium"
                    >
                        {t('change_pass_save', language)}
                    </button>
                </div>
            </div>
        </div>
      )
  }

  return (
    <div className="h-screen bg-surface flex flex-col items-center justify-center p-6 relative">
      
      {/* Language Toggle */}
      <div className="absolute top-6 right-6 flex items-center bg-surface-container rounded-full px-3 py-1 gap-2 border border-outline-variant/20">
          <Globe size={16} className="text-on-surface-variant" />
          <select 
            value={language}
            onChange={(e) => onLanguageChange(e.target.value as Language)}
            className="bg-transparent text-sm text-on-surface focus:outline-none appearance-none"
          >
              <option value="en">English</option>
              <option value="ru">Русский</option>
          </select>
      </div>

      <div className="flex flex-col items-center mb-12">
        <div className="w-20 h-20 bg-primary-container rounded-2xl flex items-center justify-center text-on-primary-container mb-4 shadow-elevation-2 transform rotate-3">
            <Dumbbell size={40} />
        </div>
        <h1 className="text-3xl font-normal text-on-surface tracking-tight">{t('login_title', language)}</h1>
      </div>

      <form onSubmit={handleLogin} className="w-full max-w-sm space-y-6">
        <div className="space-y-4">
            <div className="group bg-surface-container-high rounded-t-lg border-b border-outline-variant focus-within:border-primary transition-colors">
                <div className="flex items-center px-4 pt-4">
                    <Mail size={16} className="text-on-surface-variant mr-2" />
                    <label className="text-xs text-on-surface-variant font-medium">{t('login_email', language)}</label>
                </div>
                <input 
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="w-full bg-transparent px-4 pb-3 pt-1 text-lg text-on-surface focus:outline-none"
                    placeholder="user@gymflow.ai"
                />
            </div>

            <div className="group bg-surface-container-high rounded-t-lg border-b border-outline-variant focus-within:border-primary transition-colors">
                <div className="flex items-center px-4 pt-4">
                    <Lock size={16} className="text-on-surface-variant mr-2" />
                    <label className="text-xs text-on-surface-variant font-medium">{t('login_password', language)}</label>
                </div>
                <input 
                    type="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="w-full bg-transparent px-4 pb-3 pt-1 text-lg text-on-surface focus:outline-none"
                />
            </div>
        </div>

        {error && <div className="text-error text-sm text-center bg-error-container/10 p-2 rounded-lg">{error}</div>}

        <button 
            type="submit"
            className="w-full py-4 bg-primary text-on-primary rounded-full font-medium text-lg shadow-elevation-1 flex items-center justify-center gap-2 hover:shadow-elevation-2 transition-all"
        >
            {t('login_btn', language)} <ArrowRight size={20} />
        </button>
      </form>
      
      <p className="mt-8 text-xs text-on-surface-variant text-center max-w-xs">
          {t('login_contact_admin', language)}
      </p>
    </div>
  );
};

export default Login;