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

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

export const Route = createFileRoute('/staff/team')({
  component: StaffTeam,
  beforeLoad: async () => {
    const staffUser = await getCurrentStaffUser()
    if (!staffUser) {
      throw redirect({ to: '/staff/login' })
    }
    if (staffUser.role !== 'admin') {
      throw redirect({ to: '/staff' })
    }
    return { staffUser }
  },
  loader: async ({ context }) => {
    const members = await listStaffMembers()
    return { staffUser: context.staffUser, members }
  },
})

type StaffMember = Awaited<ReturnType<typeof listStaffMembers>>[number]

type FormState = {
  name: string
  email: string
  password: string
  role: 'admin' | 'user'
}

function emptyForm(): FormState {
  return { name: '', email: '', password: '', role: 'user' }
}

function StaffTeam() {
  const router = useRouter()
  const { staffUser, members } = Route.useLoaderData()

  const [form, setForm] = useState<FormState>(emptyForm)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState<string | null>(null)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [busyId, setBusyId] = useState<string | null>(null)

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

    const { error: createError } = await authClient.admin.createUser({
      name: form.name,
      email: form.email,
      password: form.password,
      role: form.role,
    })

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

    setSuccess('Mitarbeiter wurde angelegt.')
    setForm(emptyForm())
    setIsSubmitting(false)
    await router.invalidate()
  }

  async function handleRemove(member: StaffMember) {
    if (!window.confirm(`Zugang für ${member.name} wirklich entfernen?`)) {
      return
    }

    setBusyId(member.id)
    setError(null)
    setSuccess(null)

    const { error: removeError } = await authClient.admin.removeUser({ userId: member.id })

    if (removeError) {
      setError(removeError.message ?? 'Etwas ist schiefgelaufen')
    } else {
      setSuccess('Zugang wurde entfernt.')
      await router.invalidate()
    }

    setBusyId(null)
  }

  async function handleToggleRole(member: StaffMember) {
    const nextRole = member.role === 'admin' ? 'user' : 'admin'
    setBusyId(member.id)
    setError(null)
    setSuccess(null)

    const { error: roleError } = await authClient.admin.setRole({ userId: member.id, role: nextRole })

    if (roleError) {
      setError(roleError.message ?? 'Etwas ist schiefgelaufen')
    } else {
      setSuccess('Rolle wurde aktualisiert.')
      await router.invalidate()
    }

    setBusyId(null)
  }

  async function handleToggleBan(member: StaffMember) {
    setBusyId(member.id)
    setError(null)
    setSuccess(null)

    const { error: banError } = member.banned
      ? await authClient.admin.unbanUser({ userId: member.id })
      : await authClient.admin.banUser({ userId: member.id })

    if (banError) {
      setError(banError.message ?? 'Etwas ist schiefgelaufen')
    } else {
      setSuccess(member.banned ? 'Zugang wurde reaktiviert.' : 'Zugang wurde gesperrt.')
      await router.invalidate()
    }

    setBusyId(null)
  }

  async function handleSetPassword(member: StaffMember) {
    const newPassword = window.prompt(`Neues Passwort für ${member.name} (mind. 8 Zeichen):`)

    if (!newPassword) {
      return
    }

    setBusyId(member.id)
    setError(null)
    setSuccess(null)

    const { error: passwordError } = await authClient.admin.setUserPassword({
      userId: member.id,
      newPassword,
    })

    if (passwordError) {
      setError(passwordError.message ?? 'Etwas ist schiefgelaufen')
    } else {
      setSuccess(`Passwort für ${member.name} wurde geändert.`)
    }

    setBusyId(null)
  }

  return (
    <div className="staff-page">
      <header className="staff-topbar">
        <Link className="wordmark" to="/">
          Steakhaus <span>bei Mirko</span>
        </Link>
        <div className="staff-topbar-right">
          <Link className="btn btn-secondary" to="/staff">
            Zu den Reservierungen
          </Link>
          <span>Angemeldet als {staffUser.name}</span>
        </div>
      </header>

      <main className="page staff-main">
        <h1 className="section-heading">Mitarbeiter</h1>

        <section className="staff-form-section">
          <h2 className="section-heading staff-subheading">Neuer Mitarbeiter</h2>

          <form className="reservation-form" onSubmit={handleCreate}>
            <div className="form-row">
              <label>
                Name
                <input
                  type="text"
                  value={form.name}
                  onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
                  required
                />
              </label>

              <label>
                E-Mail
                <input
                  type="email"
                  value={form.email}
                  onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
                  required
                />
              </label>
            </div>

            <div className="form-row">
              <label>
                Passwort
                <input
                  type="password"
                  value={form.password}
                  onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))}
                  minLength={8}
                  required
                />
              </label>

              <label>
                Rolle
                <select
                  value={form.role}
                  onChange={(e) => setForm((f) => ({ ...f, role: e.target.value as FormState['role'] }))}
                >
                  <option value="user">Mitarbeiter</option>
                  <option value="admin">Admin</option>
                </select>
              </label>
            </div>

            <button type="submit" disabled={isSubmitting}>
              {isSubmitting ? 'Wird angelegt …' : 'Anlegen'}
            </button>

            {error && <p className="message message-error">{error}</p>}
            {success && <p className="message message-success">{success}</p>}
          </form>
        </section>

        <section className="staff-table-section">
          <div className="table-scroll">
            <table className="reservations-table">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>E-Mail</th>
                  <th>Rolle</th>
                  <th>Status</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {members.map((member) => (
                  <tr key={member.id}>
                    <td>{member.name}</td>
                    <td>{member.email}</td>
                    <td>{member.role === 'admin' ? 'Admin' : 'Mitarbeiter'}</td>
                    <td>{member.banned ? 'Gesperrt' : 'Aktiv'}</td>
                    <td className="table-actions">
                      <button
                        type="button"
                        className="btn btn-secondary"
                        disabled={busyId === member.id}
                        onClick={() => handleToggleRole(member)}
                      >
                        {member.role === 'admin' ? 'Zu Mitarbeiter machen' : 'Zu Admin machen'}
                      </button>
                      <button
                        type="button"
                        className="btn btn-secondary"
                        disabled={busyId === member.id}
                        onClick={() => handleSetPassword(member)}
                      >
                        Passwort setzen
                      </button>
                      <button
                        type="button"
                        className="btn btn-secondary"
                        disabled={busyId === member.id || member.id === staffUser.id}
                        onClick={() => handleToggleBan(member)}
                      >
                        {member.banned ? 'Entsperren' : 'Sperren'}
                      </button>
                      <button
                        type="button"
                        className="btn btn-danger"
                        disabled={busyId === member.id || member.id === staffUser.id}
                        onClick={() => handleRemove(member)}
                      >
                        Entfernen
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>
      </main>
    </div>
  )
}