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

import { ConfirmDialog } from '#/components/confirm-dialog'
import { StaffMemberDetailDialog } from '#/components/staff-member-detail-dialog'
import { StaffTabs } from '#/components/staff-tabs'
import { getCurrentStaffUser } from '#/lib/auth'
import { authClient } from '#/lib/auth-client'
import { phoneSchema } from '#/lib/phone'
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
  phone: string
  password: string
  role: 'admin' | 'user'
}

function emptyForm(): FormState {
  return { name: '', email: '', phone: '', 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)
  const [viewingMember, setViewingMember] = useState<StaffMember | null>(null)
  const [pendingRemove, setPendingRemove] = useState<StaffMember | null>(null)

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

    const phoneResult = phoneSchema.safeParse(form.phone)
    if (!phoneResult.success) {
      setError('Bitte geben Sie eine gültige Telefonnummer an')
      return
    }

    setIsSubmitting(true)

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

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

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

  async function confirmRemove() {
    const member = pendingRemove
    if (!member) return

    setPendingRemove(null)
    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 handleLogout() {
    await authClient.signOut()
    await router.navigate({ to: '/staff/login' })
    await router.invalidate()
  }

  async function handleSetPhone(member: StaffMember) {
    const newPhone = window.prompt(`Telefonnummer für ${member.name}:`, member.phone ?? '')

    if (newPhone === null) {
      return
    }

    const phoneResult = phoneSchema.safeParse(newPhone)
    if (!phoneResult.success) {
      setError('Bitte geben Sie eine gültige Telefonnummer an')
      return
    }

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

    const { error: phoneError } = await authClient.admin.updateUser({
      userId: member.id,
      data: { phone: phoneResult.data },
    })

    if (phoneError) {
      setError(phoneError.message ?? 'Etwas ist schiefgelaufen')
    } else {
      setSuccess(`Telefonnummer für ${member.name} wurde aktualisiert.`)
      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">
      <div className="staff-nav">
        <header className="staff-topbar">
          <Link className="wordmark" to="/">
            Steakhaus <span>bei Mirko</span>
          </Link>
          <div className="staff-topbar-right">
            <span>Angemeldet als {staffUser.name}</span>
            <button type="button" className="btn btn-secondary" onClick={handleLogout}>
              Abmelden
            </button>
          </div>
        </header>

        <div className="staff-tabs-bar">
          <StaffTabs role={staffUser.role} />
        </div>
      </div>

      <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>

            <label>
              Telefon
              <input
                type="tel"
                inputMode="tel"
                pattern="[+]?[0-9()\-.\s]{6,30}"
                title="Nur Ziffern, Leerzeichen und + ( ) - ."
                value={form.phone}
                onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))}
                required
              />
            </label>

            <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 reservations-table-clickable">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>E-Mail</th>
                  <th>Telefon</th>
                  <th>Rolle</th>
                  <th>Status</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {members.map((member) => (
                  <tr key={member.id} onClick={() => setViewingMember(member)}>
                    <td>{member.name}</td>
                    <td>{member.email}</td>
                    <td>{member.phone || <span className="muted">—</span>}</td>
                    <td>{member.role === 'admin' ? 'Admin' : 'Mitarbeiter'}</td>
                    <td>{member.banned ? 'Gesperrt' : 'Aktiv'}</td>
                    <td onClick={(event) => event.stopPropagation()}>
                      <div 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={() => handleSetPhone(member)}
                        >
                          Telefon bearbeiten
                        </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={() => setPendingRemove(member)}
                        >
                          Entfernen
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>
      </main>

      <StaffMemberDetailDialog member={viewingMember} onClose={() => setViewingMember(null)} />

      <ConfirmDialog
        open={pendingRemove !== null}
        title="Zugang entfernen"
        message={pendingRemove && <>Zugang für <strong>{pendingRemove.name}</strong> wirklich entfernen?</>}
        warning="Diese Aktion kann nicht rückgängig gemacht werden."
        confirmLabel="Entfernen"
        danger
        onConfirm={confirmRemove}
        onCancel={() => setPendingRemove(null)}
      />
    </div>
  )
}