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

import { ConfirmDialog } from '#/components/confirm-dialog'
import { ReservationCharts } from '#/components/reservation-charts'
import { ReservationDateTimeField } from '#/components/reservation-datetime-field'
import { StaffTabs } from '#/components/staff-tabs'
import { getCurrentStaffUser } from '#/lib/auth'
import { authClient } from '#/lib/auth-client'
import { formatDateOnly, formatDateTimeLocal } from '#/lib/datetime'
import { generateTimeOptions, getNextAvailableSlot, getOpeningRangesForWeekday } from '#/lib/opening-hours'
import {
  createReservation,
  deleteReservation,
  getReservations,
  getTables,
  updateReservation,
} from '#/lib/reservations'
import { getReservationSettings } from '#/lib/settings'

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, settings] = await Promise.all([
      getReservations(),
      getTables(),
      getReservationSettings(),
    ])
    return { staffUser: context.staffUser, reservations, tables, settings }
  },
})

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
}

type SettingsRow = Awaited<ReturnType<typeof getReservationSettings>>

function emptyForm(defaultTableId: number | string, settings: SettingsRow): FormState {
  const slot = getNextAvailableSlot(
    new Date(Date.now() + settings.minLeadTimeMinutes * 60_000),
    settings.reservationIntervalMinutes,
  )

  return {
    tableId: defaultTableId,
    customerName: '',
    customerEmail: '',
    partySize: 2,
    reservationTime: slot ? `${slot.date}T${slot.time}` : '',
  }
}

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

  const [editingId, setEditingId] = useState<number | null>(null)
  const [form, setForm] = useState<FormState>(() => emptyForm(tables[0]?.id ?? '', settings))
  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 [pendingDelete, setPendingDelete] = useState<ReservationRow | null>(null)
  const [searchQuery, setSearchQuery] = useState('')
  const [tableFilter, setTableFilter] = useState('all')
  const [timeFilter, setTimeFilter] = useState<'all' | 'today' | 'upcoming' | 'past'>('all')

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

  const filteredReservations = reservations.filter((r) => {
    if (tableFilter !== 'all' && String(r.tableId) !== tableFilter) return false

    const reservationTime = new Date(r.reservationTime)
    if (timeFilter === 'today' && !isSameDay(reservationTime, now)) return false
    if (timeFilter === 'upcoming' && reservationTime.getTime() < now.getTime()) return false
    if (timeFilter === 'past' && reservationTime.getTime() >= now.getTime()) return false

    const query = searchQuery.trim().toLowerCase()
    if (query) {
      const haystack = `${r.customerName} ${r.customerEmail} ${r.tableName}`.toLowerCase()
      if (!haystack.includes(query)) return false
    }

    return true
  })

  // Other reservations already sitting on the currently selected table + date, so the
  // time picker can block them instead of letting staff pick a slot the server will
  // just reject as double-booked. A reservation occupies its whole configured
  // duration, not just its exact start time, so every interval-grid slot that falls
  // inside that window counts as taken too.
  const [selectedDate] = form.reservationTime.split('T')
  const otherReservationsOnSelection = reservations.filter(
    (r) =>
      r.id !== editingId &&
      String(r.tableId) === String(form.tableId) &&
      formatDateOnly(new Date(r.reservationTime)) === selectedDate,
  )
  const bookedTimesForForm = selectedDate
    ? generateTimeOptions(
        getOpeningRangesForWeekday(new Date(`${selectedDate}T00:00`).getDay()),
        settings.reservationIntervalMinutes,
      ).filter((option) => {
        const slotStart = new Date(`${selectedDate}T${option}`).getTime()
        return otherReservationsOnSelection.some((r) => {
          const otherStart = new Date(r.reservationTime).getTime()
          const otherEnd = otherStart + r.durationMinutes * 60_000
          return slotStart >= otherStart && slotStart < otherEnd
        })
      })
    : []

  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 ?? '', settings))
    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
    }

    if (!form.reservationTime.split('T')[1]) {
      setError('Bitte wählen Sie eine gültige Uhrzeit 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 ?? '', settings))
      await router.invalidate()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Etwas ist schiefgelaufen')
    } finally {
      setIsSubmitting(false)
    }
  }

  async function confirmDelete() {
    const reservation = pendingDelete
    if (!reservation) return

    setPendingDelete(null)
    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">
      <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">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>

        <ReservationCharts reservations={reservations} tables={tables} />

        <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"
                  inputMode="numeric"
                  min={1}
                  max={20}
                  value={form.partySize}
                  onChange={(e) => setForm((f) => ({ ...f, partySize: Number(e.target.value) }))}
                  required
                />
              </label>

              <label>
                Datum &amp; Uhrzeit
                <ReservationDateTimeField
                  value={form.reservationTime}
                  onChange={(reservationTime) => setForm((f) => ({ ...f, reservationTime }))}
                  bookedTimes={bookedTimesForForm}
                  intervalMinutes={settings.reservationIntervalMinutes}
                  minLeadTimeMinutes={settings.minLeadTimeMinutes}
                  maxLeadTimeDays={settings.maxLeadTimeDays}
                />
              </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 && (
            <div className="table-filters">
              <input
                type="search"
                className="table-search"
                placeholder="Suche nach Name, E-Mail oder Tisch …"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                aria-label="Reservierungen durchsuchen"
              />
              <select value={tableFilter} onChange={(e) => setTableFilter(e.target.value)} aria-label="Nach Tisch filtern">
                <option value="all">Alle Tische</option>
                {tables.map((table) => (
                  <option key={table.id} value={String(table.id)}>
                    {table.name}
                  </option>
                ))}
              </select>
              <select
                value={timeFilter}
                onChange={(e) => setTimeFilter(e.target.value as typeof timeFilter)}
                aria-label="Nach Zeitraum filtern"
              >
                <option value="all">Alle Zeiträume</option>
                <option value="today">Heute</option>
                <option value="upcoming">Anstehend</option>
                <option value="past">Vergangen</option>
              </select>
            </div>
          )}

          {filteredReservations.length === 0 ? (
            <p className="empty-state">
              {reservations.length === 0
                ? 'Noch keine Reservierungen vorhanden.'
                : 'Keine Reservierungen für diese Filter gefunden.'}
            </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>
                  {filteredReservations.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>
                        <div 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={() => setPendingDelete(reservation)}
                          >
                            {deletingId === reservation.id ? 'Löschen …' : 'Löschen'}
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>
      </main>

      <ConfirmDialog
        open={pendingDelete !== null}
        title="Reservierung löschen"
        message={
          pendingDelete
            ? `Reservierung von ${pendingDelete.customerName} wirklich löschen? Der Gast erhält eine E-Mail zur Bestätigung der Stornierung. Dies kann nicht rückgängig gemacht werden.`
            : ''
        }
        confirmLabel="Löschen"
        danger
        onConfirm={confirmDelete}
        onCancel={() => setPendingDelete(null)}
      />
    </div>
  )
}