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

export function ForgotPasswordPage() {
  const [email, setEmail] = useState('')
  const [sent, setSent] = useState(false)
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)

  const submit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')
    setLoading(true)
    try {
      await api.post('/auth/password-reset', { email })
      setSent(true)
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : 'Fehler')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className='min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4'>
      <div className='w-full max-w-sm bg-white rounded-2xl shadow-lg p-8'>
        <div className='flex items-center gap-2 mb-6'>
          <div className='w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center'>
            <span className='text-white font-bold text-sm'>TM</span>
          </div>
          <span className='text-lg font-bold text-gray-800'>TimeMaster</span>
        </div>

        {sent ? (
          <div>
            <h1 className='text-xl font-semibold text-gray-800 mb-2'>E-Mail verschickt</h1>
            <p className='text-sm text-gray-500 mb-6'>
              Falls <strong>{email}</strong> bei uns registriert ist, erhältst du in Kürze einen
              Link zum Zurücksetzen deines Passworts. Der Link ist 1 Stunde gültig.
            </p>
            <Link to='/login' className='text-sm text-blue-600 hover:underline'>
              ← Zurück zur Anmeldung
            </Link>
          </div>
        ) : (
          <>
            <h1 className='text-xl font-semibold text-gray-800 mb-1'>Passwort vergessen?</h1>
            <p className='text-sm text-gray-500 mb-6'>
              Gib deine E-Mail-Adresse ein. Du erhältst einen Reset-Link, sofern ein lokales Konto existiert.
            </p>
            <form onSubmit={submit} className='space-y-4'>
              <label className='block'>
                <span className='text-sm font-medium text-gray-700'>E-Mail-Adresse</span>
                <input
                  type='email'
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                  required
                  autoFocus
                  placeholder='max@muster-gmbh.de'
                  className='mt-1 w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400'
                />
              </label>

              {error && (
                <div className='text-sm text-red-700 bg-red-50 border border-red-200 rounded-lg px-3 py-2.5'>
                  {error}
                </div>
              )}

              <button
                type='submit'
                disabled={loading}
                className='w-full py-2.5 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50'
              >
                {loading ? 'Sende…' : 'Reset-Link anfordern'}
              </button>
            </form>
            <p className='text-center text-sm text-gray-500 mt-4'>
              <Link to='/login' className='text-blue-600 hover:underline'>← Zurück zur Anmeldung</Link>
            </p>
          </>
        )}
      </div>
    </div>
  )
}