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

import { ReservationConfirmedModal } from '#/components/reservation-confirmed-modal'
import { ReservationDateTimeField } from '#/components/reservation-datetime-field'
import { SiteFooter } from '#/components/site-footer'
import { SiteHeader } from '#/components/site-header'
import { formatDateOnly } from '#/lib/datetime'
import {
  generateTimeOptions,
  getNextAvailableSlot,
  getOpeningHoursForDisplay,
  getOpeningRangesForWeekday,
  getTodayLabelBerlin,
} from '#/lib/opening-hours'
import { createReservation, getReservationAvailability, getTables } from '#/lib/reservations'
import { getReservationSettings } from '#/lib/settings'

export const Route = createFileRoute('/')({
  component: Home,
  loader: async () => {
    const [tables, settings, availability] = await Promise.all([
      getTables(),
      getReservationSettings(),
      getReservationAvailability(),
    ])
    return { tables, settings, availability }
  },
})

const OPENING_HOURS = getOpeningHoursForDisplay()

const confirmedDateFormatter = new Intl.DateTimeFormat('de-DE', { dateStyle: 'full' })
const confirmedTimeFormatter = new Intl.DateTimeFormat('de-DE', { timeStyle: 'short' })

const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
// Also used as the phone input's `pattern` attribute below, so the two stay in sync.
const PHONE_PATTERN_SOURCE = String.raw`[+]?[0-9()\-.\s]{6,30}`
const PHONE_PATTERN = new RegExp(`^${PHONE_PATTERN_SOURCE}$`)

type ConfirmedReservation = {
  customerName: string
  customerEmail: string
  tableName: string
  date: string
  startTime: string
  endTime: string
  partySize: number
}

function FlameIcon() {
  return (
    <svg className="hero-flame" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path
        d="M12 2c1 3-3 4-3 7.5A3.5 3.5 0 0 0 12 13a3.5 3.5 0 0 0 3-5.3c1.5 1 2.5 3 2.5 5a5.5 5.5 0 1 1-11 0C6.5 8.5 9.5 6 12 2Z"
        stroke="currentColor"
        strokeWidth="1.4"
        strokeLinejoin="round"
      />
    </svg>
  )
}

function Home() {
  const router = useRouter()
  const { tables, settings, availability } = Route.useLoaderData()

  const [tableId, setTableId] = useState<number | string>(tables[0]?.id ?? '')
  const [customerName, setCustomerName] = useState('')
  const [customerEmail, setCustomerEmail] = useState('')
  const [customerPhone, setCustomerPhone] = useState('')
  const [message, setMessage] = useState('')
  const [partySize, setPartySize] = useState(2)
  const [acceptsTerms, setAcceptsTerms] = useState(false)
  const [reservationTime, setReservationTime] = useState(() => {
    const slot = getNextAvailableSlot(
      new Date(Date.now() + settings.minLeadTimeMinutes * 60_000),
      settings.reservationIntervalMinutes,
      settings.reservationDurationMinutes,
    )
    return slot ? `${slot.date}T${slot.time}` : ''
  })
  const [error, setError] = useState<string | null>(null)
  const [confirmedReservation, setConfirmedReservation] = useState<ConfirmedReservation | null>(null)
  const [isSubmitting, setIsSubmitting] = useState(false)

  const todayName = getTodayLabelBerlin()
  const selectedTable = tables.find((table) => String(table.id) === String(tableId))

  const [selectedDate] = reservationTime.split('T')
  const otherReservationsOnSelection = availability.filter(
    (r) => String(r.tableId) === String(tableId) && formatDateOnly(new Date(r.reservationTime)) === selectedDate,
  )
  // `minLeadTimeMinutes` is reused here as a table turnover buffer, extending each
  // existing reservation's taken window on both sides so back-to-back bookings on the
  // same table always leave that much of a gap.
  const turnoverBufferMs = settings.minLeadTimeMinutes * 60_000
  const bookedTimesForForm = selectedDate
    ? generateTimeOptions(
        getOpeningRangesForWeekday(new Date(`${selectedDate}T00:00`).getDay()),
        settings.reservationIntervalMinutes,
        settings.reservationDurationMinutes,
      ).filter((option) => {
        const slotStart = new Date(`${selectedDate}T${option}`).getTime()
        return otherReservationsOnSelection.some((r) => {
          const otherStart = new Date(r.reservationTime).getTime() - turnoverBufferMs
          const otherEnd = otherStart + r.durationMinutes * 60_000 + 2 * turnoverBufferMs
          return slotStart >= otherStart && slotStart < otherEnd
        })
      })
    : []

  // Mirrors the fields' own `required`/`type`/`pattern`/`min`/`max` constraints, so
  // the submit button is disabled until they'd all actually pass — instead of only
  // catching a missing table/time/consent on submit and leaving everything else to
  // the browser's native validation popup.
  const isFormValid =
    Boolean(tableId) &&
    customerName.trim().length > 0 &&
    EMAIL_PATTERN.test(customerEmail) &&
    PHONE_PATTERN.test(customerPhone) &&
    partySize >= 1 &&
    partySize <= 20 &&
    Boolean(reservationTime.split('T')[1]) &&
    acceptsTerms

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

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

    if (!reservationTime.split('T')[1]) {
      setError('Bitte wählen Sie eine gültige Uhrzeit aus')
      return
    }

    if (!acceptsTerms) {
      setError('Bitte stimmen Sie der Verarbeitung Ihrer Daten zu')
      return
    }

    setIsSubmitting(true)
    try {
      const created = await createReservation({
        data: {
          tableId: Number(tableId),
          customerName,
          customerEmail,
          customerPhone,
          message,
          partySize: Number(partySize),
          reservationTime: new Date(reservationTime).toISOString(),
        },
      })

      const start = new Date(created.reservationTime)
      const end = new Date(start.getTime() + created.durationMinutes * 60_000)
      setConfirmedReservation({
        customerName: created.customerName,
        customerEmail: created.customerEmail,
        tableName: selectedTable?.name ?? '',
        date: confirmedDateFormatter.format(start),
        startTime: confirmedTimeFormatter.format(start),
        endTime: confirmedTimeFormatter.format(end),
        partySize: created.partySize,
      })
      setCustomerName('')
      setCustomerEmail('')
      setCustomerPhone('')
      setMessage('')
      setPartySize(2)
      setAcceptsTerms(false)
      await router.invalidate()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Etwas ist schiefgelaufen')
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <>
      <SiteHeader />

      <section className="hero" id="top">
        <FlameIcon />
        <h1>
          Vom Feuer verwöhnt, <span>mit Liebe serviert</span>
        </h1>
        <p>
          Dicke Steaks, knisterndes Holzkohlefeuer und Gelächter am Nachbartisch – so schmeckt ein
          guter Abend mitten in Meppen. Reservieren Sie Ihren Tisch, wir legen schon auf.
        </p>
        <div className="hero-actions">
          <a className="btn btn-primary" href="#reservieren">
            Tisch reservieren
          </a>
          <a className="btn btn-secondary" href="#oeffnungszeiten">
            Öffnungszeiten
          </a>
        </div>
      </section>

      <main className="page">
        <section className="section" id="oeffnungszeiten">
          <div className="section-grid">
            <div>
              <span className="section-kicker">Wann wir für Sie da sind</span>
              <h2 className="section-heading">Öffnungszeiten</h2>
            </div>
            <ul className="hours-list">
              {OPENING_HOURS.map(({ day, hours }) => (
                <li key={day} className={day === todayName ? 'today' : undefined}>
                  <span className="day">{day}</span>
                  {hours ? (
                    <span>{hours.join(' · ')}</span>
                  ) : (
                    <span className="hours-closed">geschlossen</span>
                  )}
                </li>
              ))}
            </ul>
          </div>
        </section>

        <section className="section" id="reservieren">
          <div className="section-grid">
            <div>
              <span className="section-kicker">Wir freuen uns auf Sie</span>
              <h2 className="section-heading">Tisch reservieren</h2>
            </div>

            <form className="reservation-form" onSubmit={handleSubmit}>
              <label>
                Tisch
                <select value={tableId} onChange={(e) => setTableId(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>

              {settings.tableDisplayMode === 'overview' ? (
                settings.tableOverviewImageUrl && (
                  <div className="table-overview-wrap">
                    <img className="table-overview-image" src={settings.tableOverviewImageUrl} alt="Übersicht unserer Tische" />
                    {tables
                      .filter((table) => table.markerX !== null && table.markerY !== null)
                      .map((table) => (
                        <button
                          key={table.id}
                          type="button"
                          className={`table-marker${String(table.id) === String(tableId) ? ' is-selected' : ''}`}
                          style={{ left: `${table.markerX}%`, top: `${table.markerY}%` }}
                          onClick={() => setTableId(table.id)}
                          aria-label={`${table.name} auswählen`}
                        >
                          <span className="table-marker-label">{table.tableNumber ?? '?'}</span>
                        </button>
                      ))}
                  </div>
                )
              ) : (
                selectedTable?.imageUrl && (
                  <img
                    className="table-preview"
                    src={selectedTable.imageUrl}
                    alt={`Ansicht von ${selectedTable.name}`}
                  />
                )
              )}

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

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

              <div className="form-row">
                <label>
                  Telefon
                  <input
                    type="tel"
                    inputMode="tel"
                    pattern={PHONE_PATTERN_SOURCE}
                    title="Nur Ziffern, Leerzeichen und + ( ) - ."
                    value={customerPhone}
                    onChange={(e) => setCustomerPhone(e.target.value)}
                    required
                  />
                </label>

                <label>
                  Anzahl Personen
                  <input
                    type="number"
                    inputMode="numeric"
                    min={1}
                    max={20}
                    value={partySize}
                    onChange={(e) => setPartySize(Number(e.target.value))}
                    required
                  />
                </label>
              </div>

              <label>
                Datum &amp; Uhrzeit
                <ReservationDateTimeField
                  value={reservationTime}
                  onChange={setReservationTime}
                  bookedTimes={bookedTimesForForm}
                  intervalMinutes={settings.reservationIntervalMinutes}
                  minLeadTimeMinutes={settings.minLeadTimeMinutes}
                  durationMinutes={settings.reservationDurationMinutes}
                  maxLeadTimeDays={settings.maxLeadTimeDays}
                />
              </label>

              <label>
                Nachricht (optional)
                <textarea
                  rows={3}
                  maxLength={500}
                  placeholder="Allergien, ein besonderer Anlass, Sitzwünsche …"
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                />
              </label>

              <p className="field-hint">
                Verfügbare Uhrzeiten richten sich nach unseren{' '}
                <a href="#oeffnungszeiten">Öffnungszeiten</a>.
              </p>

              <label className="radio-option consent-option">
                <input
                  type="checkbox"
                  checked={acceptsTerms}
                  onChange={(e) => setAcceptsTerms(e.target.checked)}
                  required
                />
                <span>
                  Ich stimme der Verarbeitung meiner Daten gemäß der{' '}
                  <a href="/impressum#datenschutz" target="_blank" rel="noopener noreferrer">
                    Datenschutzerklärung
                  </a>{' '}
                  zu.
                </span>
              </label>

              <button type="submit" disabled={isSubmitting || !isFormValid}>
                {isSubmitting ? 'Wird gebucht …' : 'Jetzt reservieren'}
              </button>

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

        <section className="section" id="kontakt">
          <div className="section-grid">
            <div>
              <span className="section-kicker">Hier finden Sie uns</span>
              <h2 className="section-heading">Kontakt</h2>
            </div>
            <ul className="contact-list">
              <li>
                <span className="label">Adresse</span>
                <span>
                  Meppener Straße 8
                  <br />
                  49716 Meppen
                </span>
              </li>
              <li>
                <span className="label">Telefon</span>
                <a href="tel:+49593112750">05931 - 12750</a>
              </li>
              <li>
                <span className="label">E-Mail</span>
                <a href="mailto:info@steakhaus-meppen.de">info@steakhaus-meppen.de</a>
              </li>
            </ul>
          </div>
        </section>
      </main>

      <SiteFooter />

      {confirmedReservation && (
        <ReservationConfirmedModal
          open
          customerName={confirmedReservation.customerName}
          customerEmail={confirmedReservation.customerEmail}
          tableName={confirmedReservation.tableName}
          date={confirmedReservation.date}
          startTime={confirmedReservation.startTime}
          endTime={confirmedReservation.endTime}
          partySize={confirmedReservation.partySize}
          onClose={() => setConfirmedReservation(null)}
        />
      )}
    </>
  )
}