import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useForm } from 'react-hook-form'
import { useAuthStore } from '../stores/authStore'
import { api } from '../services/api'
import type { LoginRequest } from '@skillmate/shared'

export default function Login() {
  const navigate = useNavigate()
  const { login } = useAuthStore()
  const [error, setError] = useState('')
  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<LoginRequest>()

  const onSubmit = async (data: LoginRequest) => {
    try {
      setError('')
      const response = await api.post('/auth/login', data)
      
      if (response.data.success) {
        const { user, token } = response.data.data
        login(user, token.accessToken)
        navigate('/')
      }
    } catch (err: any) {
      setError(err.response?.data?.error?.message || 'Anmeldung fehlgeschlagen')
    }
  }

  return (
    <div className="min-h-screen bg-bg-main flex items-center justify-center px-4">
      <div className="max-w-md w-full">
        <div className="card">
          <div className="text-center mb-8">
            <h1 className="text-title-lg font-poppins font-bold text-primary">
              SkillMate Admin
            </h1>
            <p className="text-body text-tertiary mt-2">
              Melden Sie sich an, um fortzufahren
            </p>
          </div>

          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
            {error && (
              <div className="bg-error-bg text-error px-4 py-3 rounded-input text-sm">
                {error}
              </div>
            )}

            <div>
              <label htmlFor="username" className="block text-body font-medium text-secondary mb-2">
                Benutzername
              </label>
              <input
                {...register('username', { required: 'Benutzername ist erforderlich' })}
                type="text"
                id="username"
                className="input-field w-full"
                placeholder="admin"
              />
              {errors.username && (
                <p className="text-error text-sm mt-1">{errors.username.message}</p>
              )}
            </div>

            <div>
              <label htmlFor="password" className="block text-body font-medium text-secondary mb-2">
                Passwort
              </label>
              <input
                {...register('password', { required: 'Passwort ist erforderlich' })}
                type="password"
                id="password"
                className="input-field w-full"
                placeholder="••••••••"
              />
              {errors.password && (
                <p className="text-error text-sm mt-1">{errors.password.message}</p>
              )}
            </div>

            <button
              type="submit"
              disabled={isSubmitting}
              className="btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isSubmitting ? 'Anmeldung läuft...' : 'Anmelden'}
            </button>
          </form>

          <div className="mt-6 text-center">
            <p className="text-small text-tertiary">
              Standard-Login: admin / admin123
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}
