import { useState } from 'react'
import { createFileRoute, Link, redirect, useRouter } from '@tanstack/react-router'

import { getCurrentStaffUser } from '#/lib/auth'
import { authClient } from '#/lib/auth-client'

function ArrowLeftIcon() {
  return (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" aria-hidden="true">
      <path
        d="M19 12H5M11 6l-6 6 6 6"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

export const Route = createFileRoute('/staff/login')({
  component: StaffLogin,
  beforeLoad: async () => {
    const staffUser = await getCurrentStaffUser()
    if (staffUser) {
      throw redirect({ to: '/staff' })
    }
  },
})

function StaffLogin() {
  const router = useRouter()

  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState<string | null>(null)
  const [isSubmitting, setIsSubmitting] = useState(false)

  async function handleSubmit(event: React.FormEvent) {
    event.preventDefault()
    setError(null)
    setIsSubmitting(true)

    const { error: signInError } = await authClient.signIn.email({ email, password })

    if (signInError) {
      setError(signInError.message ?? 'Etwas ist schiefgelaufen')
      setIsSubmitting(false)
      return
    }

    await router.navigate({ to: '/staff' })
  }

  return (
    <div className="staff-page staff-login-page">
      <form className="reservation-form staff-login-form" onSubmit={handleSubmit}>
        <Link className="back-link" to="/">
          <ArrowLeftIcon />
          Zurück zur Startseite
        </Link>

        <div className="staff-login-heading">
          <span className="section-kicker">Mitarbeiterbereich</span>
          <h1 className="section-heading">Anmelden</h1>
        </div>

        <label>
          E-Mail
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            autoFocus
            required
          />
        </label>

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

        <button type="submit" disabled={isSubmitting}>
          {isSubmitting ? 'Wird geprüft …' : 'Anmelden'}
        </button>

        {error && <p className="message message-error">{error}</p>}
      </form>
    </div>
  )
}