'use client'

import React, { useState, useEffect } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import Image from 'next/image'

export default function RegisterPage() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    first_name: '',
    last_name: '',
    password: '',
    password2: ''
  })
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const router = useRouter()

  useEffect(() => {
    // Автозаполнение email из главной страницы
    const quickStartEmail = localStorage.getItem('quickStartEmail')
    if (quickStartEmail) {
      setFormData(prev => ({ ...prev, email: quickStartEmail }))
      localStorage.removeItem('quickStartEmail')
    }
  }, [])

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    })
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError(null)

    if (formData.password !== formData.password2) {
      setError('Пароли не совпадают')
      setLoading(false)
      return
    }

    try {
      const API = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'
      const response = await fetch(`${API}/api/auth/register/`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      })

      if (response.ok) {
        // Регистрация прошла успешно, перенаправляем на страницу входа
        router.push('/auth/login?message=registration_success')
      } else {
        const errorData = await response.json()
        setError(errorData.message || 'Ошибка регистрации')
      }
    } catch (err) {
      setError('Ошибка соединения с сервером')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-vh-100 d-flex align-items-center bg-light">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-md-8 col-lg-6 col-xl-5">
            <div className="card shadow-sm border-0">
              <div className="card-body p-5">
                {/* Логотип */}
                <div className="text-center mb-4">
                  <Image
                    src="/assets/img/CAT.png"
                    alt="CatLink"
                    width={64}
                    height={64}
                    className="mb-3"
                  />
                  <h2 className="fw-bold text-primary">Создать аккаунт</h2>
                  <p className="text-muted">Присоединяйтесь к CatLink сегодня</p>
                </div>

                {/* Форма регистрации */}
                <form onSubmit={handleSubmit}>
                  {error && (
                    <div className="alert alert-danger" role="alert">
                      {error}
                    </div>
                  )}

                  <div className="row">
                    <div className="col-sm-6 mb-3">
                      <label htmlFor="first_name" className="form-label">
                        Имя
                      </label>
                      <input
                        type="text"
                        className="form-control"
                        id="first_name"
                        name="first_name"
                        value={formData.first_name}
                        onChange={handleChange}
                        required
                      />
                    </div>
                    <div className="col-sm-6 mb-3">
                      <label htmlFor="last_name" className="form-label">
                        Фамилия
                      </label>
                      <input
                        type="text"
                        className="form-control"
                        id="last_name"
                        name="last_name"
                        value={formData.last_name}
                        onChange={handleChange}
                        required
                      />
                    </div>
                  </div>

                  <div className="mb-3">
                    <label htmlFor="username" className="form-label">
                      Имя пользователя
                    </label>
                    <input
                      type="text"
                      className="form-control"
                      id="username"
                      name="username"
                      value={formData.username}
                      onChange={handleChange}
                      placeholder="Только латинские буквы, цифры и _"
                      required
                    />
                  </div>

                  <div className="mb-3">
                    <label htmlFor="email" className="form-label">
                      Email
                    </label>
                    <input
                      type="email"
                      className="form-control"
                      id="email"
                      name="email"
                      value={formData.email}
                      onChange={handleChange}
                      required
                    />
                  </div>

                  <div className="mb-3">
                    <label htmlFor="password" className="form-label">
                      Пароль
                    </label>
                    <input
                      type="password"
                      className="form-control"
                      id="password"
                      name="password"
                      value={formData.password}
                      onChange={handleChange}
                      minLength={8}
                      required
                    />
                  </div>

                  <div className="mb-4">
                    <label htmlFor="password2" className="form-label">
                      Подтвердите пароль
                    </label>
                    <input
                      type="password"
                      className="form-control"
                      id="password2"
                      name="password2"
                      value={formData.password2}
                      onChange={handleChange}
                      minLength={8}
                      required
                    />
                  </div>

                  <button
                    type="submit"
                    className="btn btn-primary w-100 py-2 mb-3"
                    disabled={loading}
                  >
                    {loading ? (
                      <>
                        <span className="spinner-border spinner-border-sm me-2"></span>
                        Создание аккаунта...
                      </>
                    ) : (
                      'Создать аккаунт'
                    )}
                  </button>

                  <div className="text-center">
                    <span className="text-muted">Уже есть аккаунт? </span>
                    <Link href="/auth/login" className="text-decoration-none">
                      Войти
                    </Link>
                  </div>
                </form>
              </div>
            </div>

            {/* Дополнительная информация */}
            <div className="text-center mt-4">
              <p className="text-muted small">
                Создавая аккаунт, вы соглашаетесь с{' '}
                <Link href="/terms" className="text-decoration-none">
                  Условиями использования
                </Link>{' '}
                и{' '}
                <Link href="/privacy" className="text-decoration-none">
                  Политикой конфиденциальности
                </Link>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}