promo_rathaus/src/routes/staff.index.tsx

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 { formatDateTimeLocal } from '#/lib/datetime'
import {
  createReservation,
  deleteReservation,
  getReservations,
  getTables,
  updateReservation,
} from '#/lib/reservations'

export const Route = createFileRoute('/staff/')({
  component: StaffDashboard,
  beforeLoad: async () => {
    const staffUser = await getCurrentStaffUser()
    if (!staffUser) {
      throw redirect({ to: '/staff/login' })
    }
    return { staffUser }
  },
  loader: async ({ context }) => {
    const [reservations, tables] = await Promise.all([getReservations(), getTables()])
    return { staffUser: context.staffUser, reservations, tables }
  },
})

const dateTimeFormatter = new Intl.DateTimeFormat('de-DE', {
  dateStyle: 'medium',
  timeStyle: 'short',
})

function isSameDay(a: Date, b: Date) {
  return (
    a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
  )
}

type ReservationRow = Awaited<ReturnType<typeof getReservations>>[number]

type FormState = {
  tableId: number | string
  customerName: string
  customerEmail: string
  partySize: number
  reservationTime: string
}

function emptyForm(defaultTableId: number | string): FormState {
  return {
    tableId: defaultTableId,
    customerName: '',
    customerEmail: '',
    partySize: 2,
    reservationTime: formatDateTimeLocal(new Date(Date.now() + 60 * 60 * 1000)),
  }
}

function StaffDashboard() {
  const router = useRouter()
  const { staffUser, reservations, tables } = Route.useLoaderData()

  const [editingId, setEditingId] = useState<number | null>(null)
  const [form, setForm] = useState<FormState>(() => emptyForm(tables[0]?.id ?? ''))
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState<string | null>(null)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [deletingId, setDeletingId] = useState<number | null>(null)

  const now = new Date()
  const todaysReservations = reservations.filter((r) => isSameDay(new Date(r.reservationTime), now))
  const guestsToday = todaysReservations.reduce((sum, r) => sum + r.partySize, 0)
  const upcoming = reservations.filter((r) => new Date(r.reservationTime).getTime() >= now.getTime())

  function startEdit(reservation: ReservationRow) {
    setEditingId(reservation.id)
    setForm({
      tableId: reservation.tableId,
      customerName: reservation.customerName,
      customerEmail: reservation.customerEmail,
      partySize: reservation.partySize,
      reservationTime: formatDateTimeLocal(new Date(reservation.reservationTime)),
    })
    setError(null)
    setSuccess(null)
  }

  function cancelEdit() {
    setEditingId(null)
    setForm(emptyForm(tables[0]?.id ?? ''))
    setError(null)
  }

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

    if (!form.tableId) {
      setError('Bitte wählen Sie einen Tisch aus')
      return
    }

    setIsSubmitting(true)
    try {
      const payload = {
        tableId: Number(form.tableId),
        customerName: form.customerName,
        customerEmail: form.customerEmail,
        partySize: Number(form.partySize),
        reservationTime: new Date(form.reservationTime).toISOString(),
      }

      if (editingId) {
        await updateReservation({ data: { id: editingId, ...payload } })
        setSuccess('Reservierung wurde aktualisiert.')
      } else {
        await createReservation({ data: payload })
        setSuccess('Reservierung wurde angelegt.')
      }

      setEditingId(null)
      setForm(emptyForm(tables[0]?.id ?? ''))
      await router.invalidate()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Etwas ist schiefgelaufen')
    } finally {
      setIsSubmitting(false)
    }
  }

  async function handleDelete(reservation: ReservationRow) {
    if (!window.confirm(`Reservierung von ${reservation.customerName} wirklich löschen?`)) {
      return
    }

    setDeletingId(reservation.id)
    setError(null)
    setSuccess(null)

    try {
      await deleteReservation({ data: { id: reservation.id } })
      if (editingId === reservation.id) {
        cancelEdit()
      }
      setSuccess('Reservierung wurde gelöscht.')
      await router.invalidate()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Etwas ist schiefgelaufen')
    } finally {
      setDeletingId(null)
    }
  }

  async function handleLogout() {
    await authClient.signOut()
    await router.navigate({ to: '/staff/login' })
    await router.invalidate()
  }

  return (
    <div className="staff-page">
      <header className="staff-topbar">
        <Link className="wordmark" to="/">
          Steakhaus <span>bei Mirko</span>
        </Link>
        <div className="staff-topbar-right">
          {staffUser.role === 'admin' && (
            <Link className="btn btn-secondary" to="/staff/team">
              Mitarbeiter
            </Link>
          )}
          <span>Angemeldet als {staffUser.name}</span>
          <button type="button" className="btn btn-secondary" onClick={handleLogout}>
            Abmelden
          </button>
        </div>
      </header>

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

        <div className="staff-stats">
          <div className="stat-card">
            <span className="stat-value">{reservations.length}</span>
            <span className="stat-label">Reservierungen gesamt</span>
          </div>
          <div className="stat-card">
            <span className="stat-value">{todaysReservations.length}</span>
            <span className="stat-label">Heute</span>
          </div>
          <div className="stat-card">
            <span className="stat-value">{guestsToday}</span>
            <span className="stat-label">Gäste heute</span>
          </div>
          <div className="stat-card">
            <span className="stat-value">{upcoming.length}</span>
            <span className="stat-label">Anstehend</span>
          </div>
        </div>

        <section className="staff-form-section">
          <h2 className="section-heading staff-subheading">
            {editingId ? 'Reservierung bearbeiten' : 'Neue Reservierung'}
          </h2>

          <form className="reservation-form" onSubmit={handleSubmit}>
            <label>
              Tisch
              <select
                value={form.tableId}
                onChange={(e) => setForm((f) => ({ ...f, tableId: e.target.value }))}
                required
              >
                <option value="" disabled>
                  Tisch auswählen
                </option>
                {tables.map((table) => (
                  <option key={table.id} value={table.id}>
                    {table.name} ({table.seats} Plätze)
                  </option>
                ))}
              </select>
            </label>

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

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

            <div className="form-row">
              <label>
                Anzahl Personen
                <input
                  type="number"
                  min={1}
                  max={20}
                  value={form.partySize}
                  onChange={(e) => setForm((f) => ({ ...f, partySize: Number(e.target.value) }))}
                  required
                />
              </label>

              <label>
                Datum &amp; Uhrzeit
                <input
                  type="datetime-local"
                  value={form.reservationTime}
                  onChange={(e) => setForm((f) => ({ ...f, reservationTime: e.target.value }))}
                  required
                />
              </label>
            </div>

            <div className="form-actions">
              <button type="submit" disabled={isSubmitting}>
                {isSubmitting ? 'Wird gespeichert …' : editingId ? 'Speichern' : 'Anlegen'}
              </button>
              {editingId && (
                <button type="button" className="btn btn-secondary" onClick={cancelEdit}>
                  Abbrechen
                </button>
              )}
            </div>

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

        <section className="staff-table-section">
          {reservations.length === 0 ? (
            <p className="empty-state">Noch keine Reservierungen vorhanden.</p>
          ) : (
            <div className="table-scroll">
              <table className="reservations-table">
                <thead>
                  <tr>
                    <th>Datum &amp; Uhrzeit</th>
                    <th>Tisch</th>
                    <th>Kunde</th>
                    <th>Personen</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {reservations.map((reservation) => (
                    <tr key={reservation.id} className={editingId === reservation.id ? 'is-editing' : undefined}>
                      <td>{dateTimeFormatter.format(new Date(reservation.reservationTime))}</td>
                      <td>{reservation.tableName}</td>
                      <td>
                        {reservation.customerName}
                        <br />
                        <span className="muted">{reservation.customerEmail}</span>
                      </td>
                      <td>{reservation.partySize}</td>
                      <td className="table-actions">
                        <button type="button" className="btn btn-secondary" onClick={() => startEdit(reservation)}>
                          Bearbeiten
                        </button>
                        <button
                          type="button"
                          className="btn btn-danger"
                          disabled={deletingId === reservation.id}
                          onClick={() => handleDelete(reservation)}
                        >
                          {deletingId === reservation.id ? 'Löschen …' : 'Löschen'}
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>
      </main>
    </div>
  )
}