'use client'

import { useState } from 'react'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { Button } from 'components/ui/button'
import { registerSchema, type RegisterForm as RegisterFormType } from 'lib/validations/auth'

export function RegisterForm() {
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)

  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<RegisterFormType>({
    resolver: zodResolver(registerSchema)
  })

  const onSubmit = async (data: RegisterFormType) => {
    try {
      setLoading(true)
      setError(null)

      const response = await fetch('/api/auth/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      })

      const result = await response.json()

      if (!response.ok) {
        setError(result.error || 'Registrace se nezdařila')
        return
      }

      setSuccess(true)
    } catch {
      setError('Došlo k neočekávané chybě')
    } finally {
      setLoading(false)
    }
  }

  if (success) {
    return (
      <div className="text-center space-y-4">
        <div className="p-4 bg-green-50 rounded-lg">
          <h3 className="text-lg font-medium text-green-800">Registrace úspěšná!</h3>
          <p className="text-green-600 mt-2">
            Zkontrolujte svůj email a klikněte na ověřovací odkaz.
          </p>
        </div>
      </div>
    )
  }

  return (
    <form id="form-registration" action="#" method="post" className="form" onSubmit={handleSubmit(onSubmit)}>
      {error ? (
        <div
          className="error"
          style={{
            marginBottom: 12,
            padding: '10px 12px',
            background: '#FEE2E2',
            color: '#991B1B',
            borderRadius: 8,
            fontWeight: 600
          }}
        >
          {error}
        </div>
      ) : null}

      <div className="input">
        <div className="text">Jméno</div>
        <div className="insert">
          <input
            {...register('fname')}
            type="text"
            maxLength={255}
            placeholder="Tvoje jméno"
            autoComplete="given-name"
          />
          <div className="error">{errors.fname?.message}</div>
        </div>
      </div>

      <div className="input">
        <div className="text">Příjmení</div>
        <div className="insert">
          <input
            {...register('sname')}
            type="text"
            maxLength={255}
            placeholder="Tvoje příjmení"
            autoComplete="family-name"
          />
          <div className="error">{errors.sname?.message}</div>
        </div>
      </div>

      <div className="input">
        <div className="text">E-mail</div>
        <div className="insert">
          <input
            {...register('email')}
            type="email"
            maxLength={255}
            placeholder="E-mailová adresa"
            autoComplete="email"
          />
          <div className="error">{errors.email?.message}</div>
        </div>
      </div>

      <div className="input">
        <div className="text">Heslo</div>
        <div className="insert">
          <input
            {...register('password')}
            type="password"
            maxLength={255}
            placeholder="Heslo k přihlášení"
            autoComplete="new-password"
          />
          <div className="error">{errors.password?.message}</div>
          <div className="visible" data-input="password"></div>
        </div>
      </div>

      <div className="input">
        <div className="text">Heslo znovu</div>
        <div className="insert">
          <input
            {...register('confirmPassword')}
            type="password"
            maxLength={255}
            placeholder="Heslo pro kontrolu"
            autoComplete="new-password"
          />
          <div className="error">{errors.confirmPassword?.message}</div>
          <div className="visible" data-input="confirmPassword"></div>
        </div>
      </div>

      <div className="input">
        <div className="text">Pohlaví</div>
        <div className="insert">
          <div className="line">
            <label className="radio">
              <input type="radio" {...register('sex')} value="female" />
              <span className="text">Žena</span>
            </label>
            <label className="radio">
              <input type="radio" {...register('sex')} value="male" />
              <span className="text">Muž</span>
            </label>
          </div>
          <div className="error"></div>
        </div>
      </div>

      {error ? <div className="error" style={{ marginBottom: 12 }}>{error}</div> : null}

      <div className="input">
        <div className="text"></div>
        <div className="insert">
          <input type="submit" value="Registrovat" disabled={loading} />
        </div>
      </div>
    </form>
  )
}