import { useState } from 'react'
import { useNavigate, Link } from 'react-router-dom'
import { api, setToken } from '../api/client'

const PLANS = [
  { value: 'free', label: 'Free', desc: '1 база знаний, до 100 тикетов, без AI-генерации' },
  { value: 'starter', label: 'Starter', desc: '5 баз знаний, до 1000 тикетов, AI-ответы' },
  { value: 'pro', label: 'Pro', desc: 'Безлимитные базы знаний, 10 000+ тикетов, AI + приоритет' },
]

export default function Register() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [plan, setPlan] = useState('free')
  const [error, setError] = useState('')
  const navigate = useNavigate()

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    try {
      const res = await api.register(email, password, plan)
      setToken(res.access_token)
      navigate('/dashboard')
    } catch (err: any) {
      setError(err.message)
    }
  }

  return (
    <div style={{ maxWidth: 500, margin: '60px auto', padding: 20 }}>
      <h1 style={{ textAlign: 'center' }}>Регистрация</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <input
            type="email"
            placeholder="Email"
            value={email}
            onChange={e => setEmail(e.target.value)}
            required
            style={{ width: '100%', padding: 8, marginBottom: 8, boxSizing: 'border-box' }}
          />
        </div>
        <div>
          <input
            type="password"
            placeholder="Пароль"
            value={password}
            onChange={e => setPassword(e.target.value)}
            required
            style={{ width: '100%', padding: 8, marginBottom: 12, boxSizing: 'border-box' }}
          />
        </div>

        <p style={{ fontWeight: 600, marginBottom: 8 }}>Выберите тариф:</p>
        {PLANS.map(p => (
          <label
            key={p.value}
            style={{
              display: 'block',
              border: `2px solid ${plan === p.value ? '#1976d2' : '#ddd'}`,
              borderRadius: 8,
              padding: 12,
              marginBottom: 8,
              cursor: 'pointer',
              background: plan === p.value ? '#e3f2fd' : '#fff',
            }}
          >
            <input
              type="radio"
              name="plan"
              value={p.value}
              checked={plan === p.value}
              onChange={e => setPlan(e.target.value)}
              style={{ marginRight: 8 }}
            />
            <strong>{p.label}</strong>
            <span style={{ marginLeft: 8, color: '#666', fontSize: 13 }}>{p.desc}</span>
          </label>
        ))}

        {error && <p style={{ color: 'red' }}>{error}</p>}
        <button type="submit" style={{ width: '100%', padding: 10, marginTop: 8 }}>
          Зарегистрироваться
        </button>
      </form>
      <p style={{ marginTop: 12, textAlign: 'center' }}>
        Уже есть аккаунт? <Link to="/login">Войти</Link>
      </p>
    </div>
  )
}
