// ❌ Uncontrolled - React kennt den Wert nicht
function UncontrolledForm() {
  const inputRef = useRef()

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(inputRef.current.value) // Wert aus DOM holen
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} />
    </form>
  )
}

// ✅ Controlled - React kontrolliert den Wert
function ControlledForm() {
  const [value, setValue] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(value) // Wert aus State
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </form>
  )
}

function LoginForm() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')

  const handleSubmit = async (e) => {
    e.preventDefault()
    setError('')

    // Validation
    if (!email || !password) {
      setError('Bitte alle Felder ausfüllen')
      return
    }

    // Submit
    try {
      await login(email, password)
    } catch (err) {
      setError(err.message)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="error">{error}</div>}

      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
      />

      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        required
      />

      <button type="submit">Login</button>
    </form>
  )
}

function RegistrationForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: '',
    confirmPassword: '',
    agreeToTerms: false
  })

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target

    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }))
  }

  const handleSubmit = (e) => {
    e.preventDefault()

    // Validation
    if (formData.password !== formData.confirmPassword) {
      alert('Passwörter stimmen nicht überein!')
      return
    }

    if (!formData.agreeToTerms) {
      alert('Bitte AGB akzeptieren')
      return
    }

    console.log('Submit:', formData)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="username"
        value={formData.username}
        onChange={handleChange}
        placeholder="Username"
      />

      <input
        name="email"
        type="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />

      <input
        name="password"
        type="password"
        value={formData.password}
        onChange={handleChange}
        placeholder="Password"
      />

      <input
        name="confirmPassword"
        type="password"
        value={formData.confirmPassword}
        onChange={handleChange}
        placeholder="Confirm Password"
      />

      <label>
        <input
          name="agreeToTerms"
          type="checkbox"
          checked={formData.agreeToTerms}
          onChange={handleChange}
        />
        Ich akzeptiere die AGB
      </label>

      <button type="submit">Registrieren</button>
    </form>
  )
}

function ValidatedForm() {
  const [email, setEmail] = useState('')
  const [errors, setErrors] = useState({})

  const validateEmail = (value) => {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return regex.test(value)
  }

  const handleEmailChange = (e) => {
    const value = e.target.value
    setEmail(value)

    // Live Validation
    if (value && !validateEmail(value)) {
      setErrors(prev => ({
        ...prev,
        email: 'Ungültige Email-Adresse'
      }))
    } else {
      setErrors(prev => {
        const newErrors = { ...prev }
        delete newErrors.email
        return newErrors
      })
    }
  }

  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={handleEmailChange}
        className={errors.email ? 'error' : ''}
      />
      {errors.email && (
        <span className="error-message">{errors.email}</span>
      )}
    </div>
  )
}

function FormInputTypes() {
  const [country, setCountry] = useState('de')
  const [gender, setGender] = useState('other')

  return (
    <form>
      {/* Select Dropdown */}
      <select
        value={country}
        onChange={(e) => setCountry(e.target.value)}
      >
        <option value="de">Deutschland</option>
        <option value="at">Österreich</option>
        <option value="ch">Schweiz</option>
      </select>

      {/* Radio Buttons */}
      <div>
        <label>
          <input
            type="radio"
            value="male"
            checked={gender === 'male'}
            onChange={(e) => setGender(e.target.value)}
          />
          Männlich
        </label>

        <label>
          <input
            type="radio"
            value="female"
            checked={gender === 'female'}
            onChange={(e) => setGender(e.target.value)}
          />
          Weiblich
        </label>

        <label>
          <input
            type="radio"
            value="other"
            checked={gender === 'other'}
            onChange={(e) => setGender(e.target.value)}
          />
          Divers
        </label>
      </div>
    </form>
  )
}

import { useForm } from 'react-hook-form'

function HookFormExample() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm()

  const onSubmit = (data) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register('email', {
          required: 'Email ist erforderlich',
          pattern: {
            value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
            message: 'Ungültige Email'
          }
        })}
      />
      {errors.email && <span>{errors.email.message}</span>}

      <input
        {...register('password', {
          required: 'Password ist erforderlich',
          minLength: {
            value: 8,
            message: 'Mindestens 8 Zeichen'
          }
        })}
        type="password"
      />
      {errors.password && <span>{errors.password.message}</span>}

      <button type="submit">Submit</button>
    </form>
  )
}