'use client';
import { useState, useEffect, CSSProperties, ChangeEvent } from 'react';

/* Стили с анимациями и эффектами */
const wrapper: CSSProperties = {
  position: 'fixed',
  inset: 0,
  background: 'rgba(0,0,0,.7)',
  backdropFilter: 'blur(12px)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  padding: 20,
  zIndex: 1000,
  transition: 'all 0.3s ease',
};

const modal: CSSProperties = {
  position: 'relative',
  background: 'linear-gradient(145deg, #0a0a0a, #1a1a1a)',
  border: '2px solid #ff7f27',
  borderRadius: 24,
  padding: 36,
  width: '100%',
  maxWidth: 760,
  color: '#ff7f27',
  boxShadow: '0 8px 40px rgba(255,127,39,.25), 0 0 0 1px rgba(255,127,39,0.1)',
  transformOrigin: 'center',
  transition: 'transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
  animation: 'settingsCardAppear 0.4s forwards',
};

const closeBtn: CSSProperties = {
  position: 'absolute',
  top: 16,
  right: 16,
  background: 'rgba(0,0,0,0.4)',
  border: '1px solid rgba(255,127,39,0.3)',
  fontSize: 20,
  color: '#ff7f27',
  cursor: 'pointer',
  width: 36,
  height: 36,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: '50%',
  transition: 'all 0.2s',
};

const lblStyle: CSSProperties = { 
  fontSize: 14, 
  marginTop: 10, 
  marginBottom: 6, 
  fontWeight: 'bold',
  color: 'rgba(255,255,255,0.9)',
  letterSpacing: '0.5px',
};

const input: CSSProperties = {
  width: '100%',
  padding: '12px 16px',
  border: '1px solid rgba(255,127,39,0.6)',
  borderRadius: 12,
  background: 'rgba(0,0,0,0.2)',
  color: '#fff',
  fontSize: 14,
  outline: 'none',
  transition: 'all 0.2s',
  boxShadow: 'inset 0 1px 3px rgba(0,0,0,0.2)',
};

const sectionTitle: CSSProperties = {
  fontSize: 17,
  marginTop: 24,
  marginBottom: 12,
  fontWeight: 'bold',
  borderBottom: '1px solid rgba(255,127,39,.3)',
  paddingBottom: 6,
  background: 'linear-gradient(to right, #ff7f27, #ff5500)',
  WebkitBackgroundClip: 'text',
  WebkitTextFillColor: 'transparent',
  textShadow: '0 2px 10px rgba(255,127,39,0.2)',
};

// Сообщение об успехе
const successMsg: CSSProperties = {
  color: '#4caf50',
  fontSize: 12,
  marginTop: 6,
  opacity: 1,
  transition: 'opacity 0.3s, transform 0.3s',
  animation: 'fadeIn 0.3s forwards',
  background: 'rgba(76,175,80,0.1)',
  padding: '4px 8px',
  borderRadius: 4,
  boxShadow: '0 0 10px rgba(76,175,80,0.2)',
};

// Разделитель
const divider: CSSProperties = {
  height: 2,
  background: 'linear-gradient(to right, transparent, rgba(255,127,39,0.5), transparent)',
  margin: '24px 0',
  borderRadius: 2,
};

// Исправленный стиль контейнера аватарки
const avatarContainer: CSSProperties = {
  position: 'relative',
  width: 120,
  height: 120,
  margin: '0 auto',
  borderRadius: '50%',
  background: 'linear-gradient(145deg, #ff7f27, #f9560b)',
  boxShadow: '0 5px 15px rgba(255, 127, 39, 0.3)',
  animation: 'pulseGlow 3s infinite',
  cursor: 'pointer',
  overflow: 'hidden', // Важно: предотвращает выход изображения за пределы круга
};

const styles = `
@keyframes settingsCardAppear {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 5px rgba(255,127,39,0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(255,127,39,0.5);
  }
  100% {
    box-shadow: 0 0 5px rgba(255,127,39,0.3);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

input:focus {
  border-color: #ff7f27;
  box-shadow: 0 0 0 2px rgba(255,127,39,0.2), inset 0 1px 3px rgba(0,0,0,0.2);
}
`;


type User = { login: string; full_name: string; avatar: string; email: string };

export default function SettingsModal({
  user,
  onClose,
  onUpdate,
}: {
  user: User;
  onClose: () => void;
  onUpdate: (p: Partial<User>) => void;
}) {
  // Состояние для полей формы
  const [avatar, setAvatar] = useState(user.avatar);
  const [login, setLogin] = useState(user.login);
  const [email, setEmail] = useState(user.email || '');
  const [surname, setSurname] = useState('');
  const [name, setName] = useState('');  
  const [patronymic, setPatr] = useState('');

  // Пароль
  const [oldPass, setOldPass] = useState('');
  const [newPass, setNewPass] = useState('');
  
  // Состояние для API данных
  const [loadingData, setLoadingData] = useState(true);
  
  // Состояния для UI
  const [busy, setBusy] = useState<Record<string, boolean>>({});
  const [success, setSuccess] = useState<Record<string, boolean>>({});

  // Авторизация
  const token = document.cookie.match(/JWT_token=([^;]+)/)?.[1] || '';
  const auth = { Authorization: `Bearer ${token}` };
  
  // Получение ID пользователя из cookie
  const userId = document.cookie
    .split('; ')
    .find(row => row.startsWith('id='))
    ?.split('=')[1];
    
  // Загрузка данных пользователя при инициализации формы
  useEffect(() => {
    if (userId) {
      fetchUserData(userId);
    } else {
      setLoadingData(false);
    }
  }, [userId]);
  
  // Функция загрузки данных пользователя
  const fetchUserData = async (id: string) => {
    try {
      const response = await fetch(`http://localhost:8000/user/${id}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
        credentials: 'include',
      });
      
      if (response.ok) {
        const data = await response.json();
        console.log("Получены данные пользователя:", data);
        //        setUserData(data); // Removed as setUserData is not defined
        
        // Заполняем форму данными из API
        setLogin(data.login);
        setEmail(data.email);
        setSurname(data.last_name || '');
        setName(data.first_name || '');
        setPatr(data.middle_name || '');
        if (data.avatar) setAvatar(data.avatar);
      } else {
        console.error("Ошибка при получении данных пользователя");
      }
    } catch (error) {
      console.error("Ошибка запроса:", error);
    } finally {
      setLoadingData(false);
    }
  };

  // Эффект для отображения сообщения об успехе
  useEffect(() => {
    const timers: NodeJS.Timeout[] = [];
    
    Object.keys(success).forEach(key => {
      if (success[key]) {
        const timer = setTimeout(() => {
          setSuccess(prev => ({ ...prev, [key]: false }));
        }, 3000);
        timers.push(timer);
      }
    });
    
    return () => timers.forEach(timer => clearTimeout(timer));
  }, [success]);

  // Функция для отправки запросов на сервер
  const sendRequest = async (
    url: string,
    body: Record<string, unknown>,
    key: string,
    updateData?: Partial<User>
  ) => {
    setBusy(prev => ({ ...prev, [key]: true }));
    
    try {
      const response = await fetch(`http://localhost:8000/${url}`, {
        method: 'POST',
        headers: { 
          'Content-Type': 'application/json', 
          ...auth 
        },
        body: JSON.stringify(body),
        credentials: 'include',
      });
      
      if (response.ok) {
        const data = await response.json();
        console.log("Успешный ответ от сервера:", data);
        
        if (updateData) {
          onUpdate(updateData);
        }
        
        setSuccess(prev => ({ ...prev, [key]: true }));
        
        window.dispatchEvent(
          new CustomEvent('user-update', { 
            detail: updateData || {} 
          })
        );
        
        if (key === 'firstName' || key === 'lastName' || key === 'patronymic') {
          const fullName = `${surname} ${name} ${patronymic}`.trim();
          document.cookie = `full_name=${encodeURIComponent(fullName)}; path=/`;
        }
        
        setTimeout(() => {
          console.log("Текущие куки:", document.cookie);
        }, 100);
        
        return true;
      } else {
        const errorText = await response.text();
        console.error(`Ошибка запроса ${url}:`, errorText);
        return false;
      }
    } catch (error) {
      console.error(`Ошибка запроса ${url}:`, error);
      return false;
    } finally {
      setBusy(prev => ({ ...prev, [key]: false }));
    }
  };

  // Функции для обновления отдельных полей
  const updateLogin = () => sendRequest(
    'change_username', 
    { new_login: login }, 
    'login',
    { login }
  );
  
  const updateEmail = () => sendRequest(
    'change_email', 
    { new_email: email }, 
    'email',
    { email }
  );
  
  const updateLastName = () => sendRequest(
    'change_last_name', 
    { new_last_name: surname }, 
    'lastName',
    { full_name: `${surname} ${name} ${patronymic}`.trim() }
  );
  
  const updateFirstName = () => sendRequest(
    'change_name', 
    { new_first_name: name }, 
    'firstName',
    { full_name: `${surname} ${name} ${patronymic}`.trim() }
  );
  
  const updateMiddleName = () => sendRequest(
    'change_middle_name', 
    { new_middle_name: patronymic }, 
    'patronymic',
    { full_name: `${surname} ${name} ${patronymic}`.trim() }
  );
  
  const updatePassword = () => {
    if (!oldPass || !newPass) return;
    
    sendRequest(
      'change_password',
      { old_password: oldPass, new_password: newPass },
      'password'
    ).then(success => {
      if (success) {
        setOldPass('');
        setNewPass('');
      }
    });
  };

  // Обновление аватарки
  const handleAvatarChange = async (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    
    setBusy(prev => ({ ...prev, avatar: true }));
    const formData = new FormData();
    formData.append('file', file);
    
    try {
      const response = await fetch('http://localhost:8000/upload_avatar', {
        method: 'POST',
        headers: auth,
        body: formData,
        credentials: 'include',
      });
      
      if (response.ok) {
        const { file_url } = await response.json();
        setAvatar(file_url);
        onUpdate({ avatar: file_url });
        setSuccess(prev => ({ ...prev, avatar: true }));
        
        window.dispatchEvent(
          new CustomEvent('user-update', { 
            detail: { avatar: file_url } 
          })
        );
      }
    } catch (error) {
      console.error('Ошибка при обновлении аватара:', error);
    } finally {
      setBusy(prev => ({ ...prev, avatar: false }));
    }
  };

  // Обработчик закрытия модального окна
  const handleClose = (e?: React.MouseEvent) => {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }
    onClose();
  };

  // Обработка клика вне модального окна
  const handleWrapperClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      handleClose();
    }
  };

  return (
    <div className="settings-modal-wrapper" style={wrapper} onClick={handleWrapperClick}>
      <style>{styles}</style>
      <div className="settings-modal-content" style={modal}>
        {/* Заголовок и кнопка закрытия */}
        <button 
          className="close-button"
          type="button" 
          onClick={handleClose} 
          style={closeBtn} 
          aria-label="Закрыть"
          onMouseOver={(e) => {
            e.currentTarget.style.background = 'rgba(255,127,39,0.2)';
            e.currentTarget.style.transform = 'scale(1.1)';
          }}
          onMouseOut={(e) => {
            e.currentTarget.style.background = 'rgba(0,0,0,0.4)';
            e.currentTarget.style.transform = 'scale(1)';
          }}
        >
          ✕
        </button>

        <h3 style={{
          textAlign: 'center',
          fontSize: 28,
          marginBottom: 24,
          fontWeight: 'bold',
          textShadow: '0 2px 10px rgba(255,127,39,0.3)',
          background: 'linear-gradient(to right, #ff7f27, #ff5500)',
          WebkitBackgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
        }}>
          Настройки профиля
        </h3>

        {/* Разделяем на две колонки для оптимизации пространства */}
        <div style={{ display: 'flex', gap: 30 }}>
          {/* Левая колонка - Аватарка и логин/email */}
          <div style={{ flex: 1 }}>
            {/* Аватарка */}
            <div style={{ 
              display: 'flex', 
              flexDirection: 'column',
              alignItems: 'center', 
              marginBottom: 24
            }}>
              <div 
                style={avatarContainer}
                onClick={() => document.getElementById('avatar-upload')?.click()}
              >
                <img
                  src={avatar}
                  alt="Аватар пользователя"
                  style={{
                    width: '100%',
                    height: '100%',
                    objectFit: 'cover',
                    transition: 'transform 0.3s',
                    filter: busy.avatar ? 'brightness(0.7)' : 'none',
                  }}
                  onMouseOver={e => { e.currentTarget.style.transform = 'scale(1.05)' }}
                  onMouseOut={e => { e.currentTarget.style.transform = 'scale(1)' }}
                />
                {busy.avatar && (
                  <div style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    background: 'rgba(0,0,0,0.5)',
                    color: 'white',
                    fontSize: 14,
                    borderRadius: '50%',
                  }}>
                    Загрузка...
                  </div>
                )}
                <input
                  id="avatar-upload"
                  type="file"
                  accept="image/*"
                  style={{ display: 'none' }}
                  onChange={handleAvatarChange}
                  disabled={busy.avatar}
                />
              </div>
              {success.avatar && (
                <div style={{...successMsg, textAlign: 'center', marginTop: 12}}>
                  Аватар успешно обновлен
                </div>
              )}
              <p style={{ 
                fontSize: 13, 
                marginTop: 12,
                color: 'rgba(255,255,255,0.7)'
              }}>
                Нажмите на изображение, чтобы изменить аватар
              </p>
            </div>

            {/* Учетные данные */}
            <h4 style={sectionTitle}>Учетные данные</h4>
            
            <div style={{ marginBottom: 20 }}>
              <label style={lblStyle}>Логин</label>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <input
                  value={login}
                  onChange={(e) => setLogin(e.target.value)}
                  style={{ ...input, flex: 1 }}
                />
                <HoverButton
                  label="Сохранить"
                  filled
                  onClick={updateLogin}
                  disabled={busy.login}
                  small
                />
              </div>
              {success.login && (
                <div style={successMsg}>Логин успешно изменен</div>
              )}
            </div>

            <div style={{ marginBottom: 16 }}>
              <label style={lblStyle}>Почта</label>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  style={{ ...input, flex: 1 }}
                />
                <HoverButton
                  label="Сохранить"
                  filled
                  onClick={updateEmail}
                  disabled={busy.email}
                  small
                />
              </div>
              {success.email && (
                <div style={successMsg}>Email успешно изменен</div>
              )}
            </div>
          </div>

          {/* Правая колонка - Персональные данные и смена пароля */}
          <div style={{ flex: 1 }}>
            {/* Персональные данные */}
            <h4 style={sectionTitle}>Персональные данные</h4>

            <div style={{ marginBottom: 16 }}>
              <label style={lblStyle}>Фамилия</label>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <input
                  value={surname}
                  onChange={(e) => setSurname(e.target.value)}
                  style={{ ...input, flex: 1 }}
                />
                <HoverButton
                  label="Сохранить"
                  filled
                  onClick={updateLastName}
                  disabled={busy.lastName}
                  small
                />
              </div>
              {success.lastName && (
                <div style={successMsg}>Фамилия успешно изменена</div>
              )}
            </div>

            <div style={{ marginBottom: 16 }}>
              <label style={lblStyle}>Имя</label>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <input
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  style={{ ...input, flex: 1 }}
                />
                <HoverButton
                  label="Сохранить"
                  filled
                  onClick={updateFirstName}
                  disabled={busy.firstName}
                  small
                />
              </div>
              {success.firstName && (
                <div style={successMsg}>Имя успешно изменено</div>
              )}
            </div>

            <div style={{ marginBottom: 16 }}>
              <label style={lblStyle}>Отчество</label>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <input
                  value={patronymic}
                  onChange={(e) => setPatr(e.target.value)}
                  style={{ ...input, flex: 1 }}
                />
                <HoverButton
                  label="Сохранить"
                  filled
                  onClick={updateMiddleName}
                  disabled={busy.patronymic}
                  small
                />
              </div>
              {success.patronymic && (
                <div style={successMsg}>Отчество успешно изменено</div>
              )}
            </div>

            <div style={divider}></div>

            {/* Смена пароля */}
            <h4 style={sectionTitle}>Смена пароля</h4>

            <div style={{ marginBottom: 16 }}>
              <label style={lblStyle}>Текущий пароль</label>
              <input
                type="password"
                placeholder="Введите текущий пароль"
                value={oldPass}
                onChange={(e) => setOldPass(e.target.value)}
                style={input}
              />
            </div>

            <div style={{ marginBottom: 20 }}>
              <label style={lblStyle}>Новый пароль</label>
              <input
                type="password"
                placeholder="Введите новый пароль"
                value={newPass}
                onChange={(e) => setNewPass(e.target.value)}
                style={input}
              />
            </div>

            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <HoverButton
                label="Сменить пароль"
                filled
                onClick={updatePassword}
                disabled={busy.password || !oldPass || !newPass}
              />
            </div>
            {success.password && (
              <div style={{...successMsg, textAlign: 'right', marginTop: 8}}>
                Пароль успешно изменен
              </div>
            )}
          </div>
        </div>
        
        {/* Показываем loader при загрузке данных */}
        {loadingData && (
          <div style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            background: 'rgba(0,0,0,0.7)',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            borderRadius: 24,
            zIndex: 5
          }}>
            <div style={{
              color: '#ff7f27',
              fontSize: 18,
              textAlign: 'center'
            }}>
              Загрузка данных...
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* Вспомогательные компоненты */
function HoverButton({
  label,
  filled = false,
  onClick,
  disabled = false,
  small = false,
}: {
  label: string;
  filled?: boolean;
  onClick?: () => void;
  disabled?: boolean;
  small?: boolean;
}) {
  const [state, setState] = useState<'idle' | 'hover' | 'active'>('idle');

  const base: CSSProperties = {
    padding: small ? '8px 12px' : '10px 18px',
    borderRadius: 12,
    fontWeight: 'bold',
    fontSize: small ? 12 : 14,
    cursor: disabled ? 'default' : 'pointer',
    transition: 'all .3s',
    border: '1px solid #ff7f27',
    whiteSpace: 'nowrap',
    boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
  };

  const filledBg =
    state === 'active' ? '#cc5e00' : state === 'hover' ? '#e96c00' : 'linear-gradient(145deg, #ff7f27, #ff5500)';

  const style: CSSProperties = filled
    ? { 
        ...base, 
        background: filledBg, 
        color: '#000', 
        border: 0,
        boxShadow: state === 'hover' ? '0 4px 15px rgba(255,127,39,0.4)' : '0 2px 10px rgba(255,127,39,0.3)',
        transform: state === 'hover' ? 'translateY(-2px)' : 'translateY(0)',
      }
    : {
        ...base,
        background:
          state === 'active'
            ? 'rgba(255,127,39,.2)'
            : state === 'hover'
            ? 'rgba(255,127,39,.1)'
            : 'transparent',
        color: '#fff',
        transform: state === 'hover' ? 'translateY(-1px)' : 'translateY(0)',
      };

  return (
    <button
      disabled={disabled}
      style={{ ...style, opacity: disabled ? 0.5 : 1 }}
      onMouseEnter={() => setState('hover')}
      onMouseLeave={() => setState('idle')}
      onMouseDown={() => setState('active')}
      onMouseUp={() => setState('hover')}
      onClick={disabled ? undefined : onClick}
    >
      {label}
    </button>
  );
}