'use client';

import { useState, useCallback, useEffect } from 'react';
import type { CSSProperties } from 'react';

/* Вспомогательные функции */
const readCookie = (name: string) => {
  const value = document.cookie
    .split('; ')
    .find((c) => c.startsWith(`${name}=`))
    ?.split('=')[1];
  
  if (!value) return null;
  
  // Декодируем URL-закодированное значение
  try {
    return decodeURIComponent(value);
  } catch {
    return value; // Если не URL-кодированное значение, вернуть как есть
  }
};

// Removed unused sanitizeAvatar function

// Улучшенные стили с градиентами и эффектами
const wrapper: CSSProperties = {
  position: 'fixed',
  inset: 0,
  background: 'rgba(0,0,0,.7)',
  backdropFilter: 'blur(12px)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  zIndex: 1000,
  transition: 'all 0.3s ease',
};

const modal: CSSProperties = {
  position: 'relative',
  background: 'linear-gradient(145deg, #0a0a0a, #1a1a1a)',
  border: '1px solid #ff7f27',
  borderRadius: 24,
  padding: 40,
  minWidth: 500,
  maxWidth: '90vw',
  maxHeight: '90vh',
  overflowY: 'auto',
  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: 'regCardAppear 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 input: CSSProperties = {
  width: '100%',
  padding: '12px 16px',
  margin: '8px 0 20px',
  border: '1px solid rgba(255,127,39,0.6)',
  borderRadius: 12,
  background: 'rgba(0,0,0,0.2)',
  color: '#fff',
  fontSize: 15,
  outline: 'none',
  transition: 'all 0.2s',
  boxShadow: 'inset 0 1px 3px rgba(0,0,0,0.2)',
};

const label: CSSProperties = { 
  fontSize: 14, 
  fontWeight: 'bold',
  color: 'rgba(255,255,255,0.9)',
  letterSpacing: '0.5px',
};

const offerBtn: CSSProperties = {
  background: 'none',
  border: 'none',
  color: '#ff7f27',
  textDecoration: 'underline',
  cursor: 'pointer',
  padding: 0,
  fontSize: 14,
  fontWeight: 'bold',
  marginLeft: 5,
};

const offerModal: CSSProperties = {
  position: 'fixed',
  inset: 0,
  background: 'rgba(0,0,0,.9)',
  backdropFilter: 'blur(12px)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  zIndex: 1100,
  transition: 'all 0.3s ease',
};

const offerContent: CSSProperties = {
  background: 'linear-gradient(145deg, #0a0a0a, #1a1a1a)',
  border: '1px solid #ff7f27',
  borderRadius: 24,
  padding: 30,
  width: '80%',
  maxWidth: 700,
  maxHeight: '80vh',
  overflowY: 'auto',
  color: '#fff',
  boxShadow: '0 8px 40px rgba(255,127,39,.25)',
  animation: 'fadeIn 0.3s forwards',
};

// Стили для капчи
const captchaContainer: CSSProperties = {
  marginBottom: 20,
  width: '45%',
  border: '1px solid rgba(255,127,39,0.3)',
  borderRadius: 12,
  padding: 15,
  background: 'rgba(255,127,39,0.05)',
  marginLeft: 'auto', // Добавлено для центрирования
  marginRight: 'auto', // Добавлено для центрирования
};

const captchaCanvas: CSSProperties = {
  width: '100%',
  height: 80,
  marginBottom: 10,
  borderRadius: 8,
  background: 'rgba(0,0,0,0.3)',
  border: '1px solid rgba(255,127,39,0.3)',
};

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

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

@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);
  }
}

/* Стилизация скроллбара */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  margin: 5px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(145deg, #ff7f27, #e96c00);
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(145deg, #ff9540, #ff7f27);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

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);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
`;

interface Props {
  onSuccess: (u: { login: string; avatar: string }) => void;
  onClose: () => void;
  onLoginClick: () => void;
}

export default function RegisterModal({ onSuccess, onClose, onLoginClick }: Props) {
  const [login, setLogin] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [email, setEmail] = useState('');
  const [lastName, setLastName] = useState('');
  const [firstName, setFirstName] = useState('');
  const [middleName, setMiddleName] = useState('');
  
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [showOffer, setShowOffer] = useState(false);
  const [offerAccepted, setOfferAccepted] = useState(false);
  const [offerRead, setOfferRead] = useState(false);
  
  // Капча
  const [captchaText, setCaptchaText] = useState('');
  const [userCaptcha, setUserCaptcha] = useState('');
  const [captchaValidated, setCaptchaValidated] = useState(false);
  
  // Генерация капчи при загрузке компонента
  useEffect(() => {
    generateCaptcha();
  }, []);
  
  // Функция генерации капчи
  const generateCaptcha = () => {
    const canvas = document.getElementById('captchaCanvas') as HTMLCanvasElement;
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Установка фона
    ctx.fillStyle = 'rgba(0,0,0,0.7)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Генерация случайного текста
    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
    let captchaString = '';
    
    for (let i = 0; i < 6; i++) {
      captchaString += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    
    setCaptchaText(captchaString);
    
    // Отрисовка текста
    ctx.font = 'bold 28px Arial';
    ctx.fillStyle = '#ff7f27';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Добавляем искажения для защиты
    for (let i = 0; i < captchaString.length; i++) {
      const x = (canvas.width / (captchaString.length + 1)) * (i + 1);
      const y = canvas.height / 2 + Math.random() * 10 - 5;
      const angle = Math.random() * 0.4 - 0.2;
      
      ctx.save();
      ctx.translate(x, y);
      ctx.rotate(angle);
      ctx.fillText(captchaString[i], 0, 0);
      ctx.restore();
    }
    
    // Добавляем шум
    for (let i = 0; i < 100; i++) {
      ctx.fillStyle = `rgba(255,127,39,${Math.random() * 0.3})`;
      ctx.fillRect(Math.random() * canvas.width, Math.random() * canvas.height, 2, 2);
    }
    
    // Добавляем линии
    for (let i = 0; i < 4; i++) {
      ctx.beginPath();
      ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
      ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
      ctx.strokeStyle = `rgba(255,127,39,${Math.random() * 0.5})`;
      ctx.lineWidth = 1;
      ctx.stroke();
    }
    
    // Сбрасываем ввод пользователя
    setUserCaptcha('');
    setCaptchaValidated(false);
  };
  
  // Валидация капчи
  const validateCaptcha = () => {
    if (userCaptcha.toLowerCase() === captchaText.toLowerCase()) {
      setCaptchaValidated(true);
      return true;
    } else {
      setCaptchaValidated(false);
      setError('Неверный код с картинки. Попробуйте еще раз.');
      generateCaptcha();
      return false;
    }
  };
  
  // Проверка валидности формы
  const isFormValid = () => {
    return (
      login && 
      password && 
      confirmPassword === password && 
      email && 
      lastName && 
      firstName && 
      offerAccepted && 
      captchaValidated
    );
  };
  
  // Обработчик публичной оферты
  const handleOfferScroll = (e: React.UIEvent<HTMLDivElement>) => {
    const { scrollHeight, scrollTop, clientHeight } = e.currentTarget;
    // Если прочитали до конца (или почти до конца)
    if (scrollHeight - scrollTop - clientHeight < 50) {
      setOfferRead(true);
    }
  };
  
  // Обработчик регистрации
  const handleRegister = useCallback(async () => {
    if (!isFormValid()) {
      // Проверка индивидуальных ошибок
      if (password !== confirmPassword) {
        setError('Пароли не совпадают');
        return;
      }
      if (!offerAccepted) {
        setError('Необходимо принять условия публичной оферты');
        return;
      }
      if (!captchaValidated && !validateCaptcha()) {
        // validateCaptcha уже установит сообщение об ошибке
        return;
      }
      return;
    }
    
    setLoading(true);
    setError(null);
    
    try {
      const res = await fetch('http://localhost:8000/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          login,
          password,
          email,
          last_name: lastName,
          first_name: firstName,
          middle_name: middleName || null
        }),
        credentials: 'include',
      });
      
      const data = await res.json();
      
      if (!res.ok) {
        throw new Error(data.detail || 'Ошибка при регистрации');
      }
      
      // После успешной регистрации, делаем автоматический вход
      try {
        const loginRes = await fetch('http://localhost:8000/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ login, password }),
          credentials: 'include',
        });
        
        if (loginRes.ok) {
          const loginData = await loginRes.json();
          console.log("Ответ после авто-логина:", loginData);
          
          // Проверка, сохранился ли JWT в куки
          setTimeout(() => {
            const jwtCookie = document.cookie
              .split('; ')
              .find(c => c.startsWith('JWT_token='))
              ?.split('=')[1];

            console.log("JWT токен в куки после регистрации:", 
              jwtCookie ? `${jwtCookie.substring(0, 10)}...` : "отсутствует");

            // Если JWT нет в куках, но он есть в ответе, сохраним его вручную
            if (!jwtCookie && loginData.token) {
              console.log("Сохраняем JWT вручную после регистрации");
              document.cookie = `JWT_token=${loginData.token}; path=/; max-age=${60*60*24*7}`;
            }

            const userLogin = readCookie('login') || login;
            const userAvatar = readCookie('avatar') || '/default-avatar.png';

            onSuccess({ 
              login: userLogin, 
              avatar: userAvatar
            });
            onClose();
          }, 300);
        } else {
          // Если логин не удался, просто показываем сообщение об успешной регистрации
          alert('Регистрация успешна! Теперь вы можете войти в систему.');
          onClose();
        }
      } catch (e) {
        console.error('Ошибка автоматического входа:', e);
        alert('Регистрация успешна! Теперь вы можете войти в систему.');
        onClose();
      }
    } catch (e: unknown) {
      if (e instanceof Error) {
        setError(e.message);
      } else {
        setError('Произошла неизвестная ошибка');
      }
    } finally {
      setLoading(false);
    }
  }, [login, password, confirmPassword, email, lastName, firstName, 
      middleName, offerAccepted, captchaValidated, onSuccess, onClose]);
  
  // Обработчик нажатия Enter
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && isFormValid()) {
      e.preventDefault();
      handleRegister();
    }
  };
  
  // Обработчик клика на фоне
  const handleWrapperClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };
  
  return (
    <div style={wrapper} onClick={handleWrapperClick}>
      <style>{styles}</style>
      <div style={modal}>
        <button 
          onClick={onClose} 
          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>
        
        <h2 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',
        }}>
          Регистрация
        </h2>
        
        {error && (
          <div style={{
            color: '#ff3333',
            marginBottom: 20,
            padding: '8px 12px',
            borderRadius: 8,
            background: 'rgba(255,51,51,0.1)',
            border: '1px solid rgba(255,51,51,0.3)',
            animation: 'fadeIn 0.3s forwards',
          }}>
            {error}
          </div>
        )}
        
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 20px' }}>
          <div>
            <label style={label}>Логин*</label>
            <input
              type="text"
              placeholder="Введите логин"
              style={input}
              value={login}
              onChange={(e) => setLogin(e.target.value)}
              onKeyDown={handleKeyDown}
            />
          </div>
          
          <div>
            <label style={label}>Email*</label>
            <input
              type="email"
              placeholder="Введите email"
              style={input}
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              onKeyDown={handleKeyDown}
            />
          </div>
        </div>
        
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 20px' }}>
          <div>
            <label style={label}>Пароль*</label>
            <input
              type="password"
              placeholder="Введите пароль"
              style={input}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              onKeyDown={handleKeyDown}
            />
          </div>
          
          <div>
            <label style={label}>Подтверждение пароля*</label>
            <input
              type="password"
              placeholder="Повторите пароль"
              style={input}
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              onKeyDown={handleKeyDown}
            />
          </div>
        </div>
        
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 20px' }}>
          <div>
            <label style={label}>Фамилия*</label>
            <input
              type="text"
              placeholder="Введите фамилию"
              style={input}
              value={lastName}
              onChange={(e) => setLastName(e.target.value)}
              onKeyDown={handleKeyDown}
            />
          </div>
          
          <div>
            <label style={label}>Имя*</label>
            <input
              type="text"
              placeholder="Введите имя"
              style={input}
              value={firstName}
              onChange={(e) => setFirstName(e.target.value)}
              onKeyDown={handleKeyDown}
            />
          </div>
        </div>
        
        <label style={label}>Отчество (необязательно)</label>
        <input
          type="text"
          placeholder="Введите отчество"
          style={input}
          value={middleName}
          onChange={(e) => setMiddleName(e.target.value)}
          onKeyDown={handleKeyDown}
        />
        
        {/* Капча */}
        <div style={captchaContainer}>

          
          <canvas 
            id="captchaCanvas" 
            width="300" 
            height="80" 
            style={captchaCanvas}
          />
          
          <div style={{ display: 'flex', gap: 10 }}>
            <input
              type="text"
              placeholder="Введите текст с картинки"
              style={{...input, margin: 0, flex: 1}}
              value={userCaptcha}
              onChange={(e) => setUserCaptcha(e.target.value)}
            />
            <button 
              style={{
                background: 'transparent',
                border: '1px solid #ff7f27',
                borderRadius: 8,
                color: '#ff7f27',
                cursor: 'pointer',
                padding: '0 15px'
              }}
              onClick={generateCaptcha}
              type="button"
            >
              ↻
            </button>
            <button 
              style={{
                background: 'rgba(255,127,39,0.1)',
                border: '1px solid #ff7f27',
                borderRadius: 8,
                color: '#ff7f27',
                cursor: 'pointer',
                padding: '0 15px'
              }}
              onClick={validateCaptcha}
              type="button"
            >
              Проверить
            </button>
          </div>
          
          {captchaValidated && (
            <div style={{ 
              color: '#4caf50', 
              marginTop: 10, 
              fontSize: 14,
              display: 'flex',
              alignItems: 'center',
              gap: 5
            }}>
              <span style={{
                fontSize: 16,
                fontWeight: 'bold'
              }}>✓</span>
              Проверка пройдена
            </div>
          )}
        </div>
        
        {/* Публичная оферта */}
        <div style={{ 
          margin: '20px 0',
          display: 'flex',
          alignItems: 'center',
        }}>
          <input 
            type="checkbox" 
            id="offerAccept"
            checked={offerAccepted}
            onChange={(e) => setOfferAccepted(e.target.checked)}
            disabled={!offerRead}
            style={{ marginRight: 10 }}
          />
          <label htmlFor="offerAccept" style={{
            fontSize: 14,
            color: 'rgba(255,255,255,0.9)',
          }}>
            Я принимаю условия 
            <button 
              type="button"
              style={offerBtn} 
              onClick={() => setShowOffer(true)}
            >
              публичной оферты
            </button>
          </label>
        </div>
        
        {!offerRead && (
          <div style={{
            color: '#ff7f27',
            fontSize: 12,
            marginBottom: 10
          }}>
            * Для принятия оферты необходимо ознакомиться с её содержанием
          </div>
        )}
        
        <HoverButton 
          label={loading ? "Регистрация..." : "Зарегистрироваться"} 
          filled 
          onClick={handleRegister}
          disabled={loading || !isFormValid()} 
        />
        
        <div style={{
          margin: '24px 0 8px',
          textAlign: 'center',
          fontSize: 14,
          color: 'rgba(255,255,255,0.6)',
          position: 'relative',
        }}>
          <span style={{
            background: 'linear-gradient(145deg, #0a0a0a, #1a1a1a)',
            padding: '0 10px',
            position: 'relative',
            zIndex: 1,
          }}>Уже есть аккаунт?</span>
        </div>
        
        <HoverButton 
          label="Войти" 
          onClick={() => {
            onClose();
            onLoginClick();
          }}
        />
        
        {/* Модальное окно с публичной офертой */}
        {showOffer && (
          <div style={offerModal} onClick={() => setShowOffer(false)}>
            <div 
              style={offerContent} 
              onClick={(e) => e.stopPropagation()}
            >
              <h3 style={{
                fontSize: 24,
                marginBottom: 20,
                textAlign: 'center',
                color: '#ff7f27'
              }}>
                Публичная оферта
              </h3>
              
              <div 
                style={{ 
                  height: 400, 
                  overflowY: 'auto',
                  padding: '0 10px',
                  marginBottom: 20,
                  fontSize: 14,
                  lineHeight: 1.6,
                  color: 'rgba(255,255,255,0.9)',
                  border: '1px solid rgba(255,127,39,0.3)',
                  borderRadius: 8,
                  background: 'rgba(0,0,0,0.2)',
                }}
                onScroll={handleOfferScroll}
              >
                <h4>1. ОБЩИЕ ПОЛОЖЕНИЯ</h4>
                <p>1.1. Настоящая публичная оферта (далее — Оферта) представляет собой официальное предложение , Билетопад далее именуемого «Исполнитель», адресованное любому дееспособному физическому лицу, далее именуемому «Пользователь».</p>
                <p>1.2. В соответствии с пунктом 2 статьи 437 Гражданского Кодекса Российской Федерации данный документ является публичной офертой.</p>
                <p>1.3. Акцепт Оферты осуществляется путем регистрации на сайте Исполнителя. При регистрации Пользователь обязан ознакомиться с условиями настоящей Оферты.</p>
                
                <h4>2. ПРЕДМЕТ ОФЕРТЫ</h4>
                <p>2.1. Предметом Оферты является предоставление Исполнителем Пользователю доступа к использованию сервиса Билетопад (далее – Сервис).</p>
                <p>2.2. Исполнитель предоставляет доступ к Сервису на условиях, предусмотренных настоящей Офертой.</p>
                
                <h4>3. ПРАВА И ОБЯЗАННОСТИ СТОРОН</h4>
                <p>3.1. Пользователь обязуется:</p>
                <p>3.1.1. Предоставить при регистрации достоверную информацию.</p>
                <p>3.1.2. Не передавать свои учетные данные третьим лицам.</p>
                <p>3.1.3. Не использовать Сервис для распространения информации, которая является незаконной, вредоносной, оскорбительной.</p>
                <p>3.1.4. Соблюдать авторские и смежные права Исполнителя и третьих лиц.</p>
                
                <h4>4. ОТВЕТСТВЕННОСТЬ СТОРОН</h4>
                <p>4.1. За неисполнение или ненадлежащее исполнение обязательств по настоящей Оферте Стороны несут ответственность в соответствии с законодательством Российской Федерации.</p>
                <p>4.2. Исполнитель не несет ответственности за сбои в работе Сервиса, вызванные техническими причинами.</p>
                
                <h4>5. СРОК ДЕЙСТВИЯ ОФЕРТЫ</h4>
                <p>5.1. Оферта вступает в силу с момента размещения на сайте Исполнителя и действует до момента ее отзыва Исполнителем.</p>
                <p>5.2. Исполнитель оставляет за собой право внести изменения в условия Оферты или отозвать Оферту в любой момент по своему усмотрению.</p>
                
                <h4>6. ДОПОЛНИТЕЛЬНЫЕ УСЛОВИЯ</h4>
                <p>6.1. Все споры и разногласия, которые могут возникнуть между Сторонами по вопросам, не нашедшим своего разрешения в тексте данной Оферты, будут разрешаться путем переговоров.</p>
                <p>6.2. Во всем остальном, что не предусмотрено настоящей Офертой, Стороны руководствуются действующим законодательством Российской Федерации.</p>
                
                <h4>7. ЗАКЛЮЧИТЕЛЬНЫЕ ПОЛОЖЕНИЯ</h4>
                <p>7.1. Регистрируясь на сайте, Пользователь подтверждает, что ознакомлен с условиями настоящей Оферты и полностью с ними согласен.</p>
                
                <p>Дата последнего обновления: 18 мая 2025 г.</p>
                
                {/* Дополнительный контент для обеспечения возможности прокрутки */}
                <div style={{ height: 200 }}></div>
              </div>
              
              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center'
              }}>
                {!offerRead ? (
                  <div style={{
                    color: '#ff7f27',
                    fontSize: 14
                  }}>
                    * Пожалуйста, прочитайте публичную оферту до конца
                  </div>
                ) : (
                  <div style={{
                    color: '#4caf50',
                    fontSize: 14,
                    display: 'flex',
                    alignItems: 'center',
                    gap: 5
                  }}>
                    <span style={{
                      fontSize: 16,
                      fontWeight: 'bold'
                    }}>✓</span>
                    Вы ознакомились с офертой
                  </div>
                )}
                
                <div style={{display: 'flex', gap: '10px'}}>
                  {offerRead && (
                    <button 
                      style={{
                        padding: '10px 20px',
                        background: 'linear-gradient(145deg, #ff7f27, #ff5500)',
                        color: '#000',
                        border: 'none',
                        borderRadius: 8,
                        cursor: 'pointer',
                        fontWeight: 'bold',
                        boxShadow: '0 2px 10px rgba(255,127,39,0.3)',
                        transition: 'all 0.2s',
                      }}
                      onClick={() => {
                        setOfferAccepted(true);
                        setShowOffer(false);
                      }}
                      onMouseOver={(e) => {
                        e.currentTarget.style.boxShadow = '0 4px 15px rgba(255,127,39,0.5)';
                        e.currentTarget.style.transform = 'translateY(-1px)';
                      }}
                      onMouseOut={(e) => {
                        e.currentTarget.style.boxShadow = '0 2px 10px rgba(255,127,39,0.3)';
                        e.currentTarget.style.transform = 'translateY(0)';
                      }}
                    >
                      Принять
                    </button>
                  )}
                  
                  <button 
                    style={{
                      padding: '10px 20px',
                      background: offerRead ? 'rgba(0,0,0,0.4)' : 'rgba(255,127,39,0.3)',
                      color: offerRead ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.7)',
                      border: offerRead ? '1px solid rgba(255,255,255,0.2)' : 'none',
                      borderRadius: 8,
                      cursor: 'pointer',
                      fontWeight: 'bold',
                      transition: 'all 0.2s',
                    }}
                    onClick={() => setShowOffer(false)}
                    onMouseOver={(e) => {
                      if (offerRead) {
                        e.currentTarget.style.background = 'rgba(0,0,0,0.5)';
                      }
                    }}
                    onMouseOut={(e) => {
                      if (offerRead) {
                        e.currentTarget.style.background = 'rgba(0,0,0,0.4)';
                      }
                    }}
                  >
                    {offerRead ? 'Отмена' : 'Закрыть'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

type BtnProps = { label: string; filled?: boolean; onClick?: () => void; disabled?: boolean };

function HoverButton({ label, filled = false, onClick, disabled = false }: BtnProps) {
  const [state, set] = useState<'idle' | 'hover' | 'active'>('idle');

  const base: CSSProperties = {
    width: '100%',
    padding: 14,
    borderRadius: 12,
    fontWeight: 'bold',
    fontSize: 16,
    cursor: disabled ? 'default' : 'pointer',
    transition: 'all .3s',
    marginTop: 8,
  };

  const filledBg = state === 'active' 
    ? '#cc5e00' 
    : state === 'hover' 
      ? 'linear-gradient(145deg, #ff7f27, #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' && !disabled ? 'translateY(-2px)' : 'translateY(0)',
      }
    : {
        ...base,
        background:
          state === 'active'
            ? 'rgba(255,127,39,.2)'
            : state === 'hover'
            ? 'rgba(255,127,39,.1)'
            : 'transparent',
        border: '1px solid #ff7f27',
        color: '#fff',
        transform: state === 'hover' && !disabled ? 'translateY(-1px)' : 'translateY(0)',
      };

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