import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../../contexts/AuthContext';
import Stepper from '../../components/reactbits/Components/Stepper/Stepper';

const RegisterPage = () => {
  const navigate = useNavigate();
  const { register } = useAuth();
  const [currentStep, setCurrentStep] = useState(0);
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: '',
    confirmPassword: '',
    avatar: null
  });
  const [error, setError] = useState('');

  const steps = [
    {
      title: 'Основная информация',
      content: (
        <div className="space-y-4">
          <div>
            <label className="block text-campfire-light mb-2">Имя пользователя</label>
            <input
              type="text"
              value={formData.username}
              onChange={(e) => setFormData({ ...formData, username: e.target.value })}
              className="w-full p-2 rounded bg-campfire-darker text-campfire-light border border-campfire-ash"
            />
          </div>
          <div>
            <label className="block text-campfire-light mb-2">Email</label>
            <input
              type="email"
              value={formData.email}
              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
              className="w-full p-2 rounded bg-campfire-darker text-campfire-light border border-campfire-ash"
            />
          </div>
        </div>
      )
    },
    {
      title: 'Безопасность',
      content: (
        <div className="space-y-4">
          <div>
            <label className="block text-campfire-light mb-2">Пароль</label>
            <input
              type="password"
              value={formData.password}
              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
              className="w-full p-2 rounded bg-campfire-darker text-campfire-light border border-campfire-ash"
            />
          </div>
          <div>
            <label className="block text-campfire-light mb-2">Подтвердите пароль</label>
            <input
              type="password"
              value={formData.confirmPassword}
              onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
              className="w-full p-2 rounded bg-campfire-darker text-campfire-light border border-campfire-ash"
            />
          </div>
        </div>
      )
    },
    {
      title: 'Аватар',
      content: (
        <div className="space-y-4">
          <div>
            <label className="block text-campfire-light mb-2">Загрузите аватар</label>
            <input
              type="file"
              accept="image/*"
              onChange={(e) => setFormData({ ...formData, avatar: e.target.files[0] })}
              className="w-full p-2 rounded bg-campfire-darker text-campfire-light border border-campfire-ash"
            />
          </div>
        </div>
      )
    }
  ];

  const handleSubmit = async () => {
    try {
      if (formData.password !== formData.confirmPassword) {
        setError('Пароли не совпадают');
        return;
      }

      await register(formData.username, formData.email, formData.password, formData.avatar);
      navigate('/');
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <div className="min-h-screen bg-campfire-charcoal flex items-center justify-center py-12">
      <div className="w-full max-w-md p-8 bg-campfire-darker rounded-lg shadow-lg">
        <h1 className="text-2xl font-bold text-campfire-light mb-8 text-center">Регистрация</h1>
        
        <Stepper
          steps={steps}
          currentStep={currentStep}
          onStepChange={setCurrentStep}
          onComplete={handleSubmit}
          className="mb-8"
          activeColor="#f59e0b"
          completedColor="#f59e0b"
          inactiveColor="#4b5563"
          lineColor="#4b5563"
          showNumbers={true}
          showTitles={true}
          showContent={true}
          showNavigation={true}
          showProgress={true}
          showSteps={true}
          showStepContent={true}
          showStepTitle={true}
          showStepNumber={true}
          showStepIcon={true}
          showStepLine={true}
          showStepProgress={true}
          showStepNavigation={true}
          showStepComplete={true}
          showStepError={true}
          showStepWarning={true}
          showStepInfo={true}
          showStepSuccess={true}
          showStepDisabled={true}
          showStepHidden={true}
          showStepOptional={true}
          showStepRequired={true}
          showStepValidation={true}
          showStepValidationError={true}
          showStepValidationWarning={true}
          showStepValidationInfo={true}
          showStepValidationSuccess={true}
          showStepValidationDisabled={true}
          showStepValidationHidden={true}
          showStepValidationOptional={true}
          showStepValidationRequired={true}
        />

        {error && (
          <div className="text-red-500 text-center mb-4">{error}</div>
        )}
      </div>
    </div>
  );
};

export default RegisterPage; 