import * as React from 'react'
import { createReservation } from '~/lib/data'

const TIME_SLOTS = [
  { value: '12:00', label: '12:00 PM - Lunch' },
  { value: '15:00', label: '3:00 PM - Afternoon' },
  { value: '19:00', label: '7:00 PM - Evening' },
  { value: '21:30', label: '9:30 PM - Late Night' },
]

const PARTY_SIZES = [
  { value: '1', label: '1 Person' },
  { value: '2', label: '2 Guests' },
  { value: '4', label: '4 Guests' },
  { value: '6', label: '6 Guests' },
  { value: '8+', label: '8+ (Large Group)' },
]

const inputClasses =
  'rounded-lg bg-surface-container-low px-space-md py-space-sm text-on-surface placeholder:text-outline/50 focus:outline-none focus:ring-1 focus:ring-primary'

export function ReservationForm() {
  const [status, setStatus] = React.useState<'idle' | 'sending' | 'done' | 'error'>('idle')
  const [errorMessage, setErrorMessage] = React.useState('')

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    const form = event.currentTarget
    const data = new FormData(form)
    setStatus('sending')
    try {
      await createReservation({
        data: {
          name: String(data.get('name') ?? ''),
          phone: String(data.get('phone') ?? ''),
          source: 'table',
          date: String(data.get('date') ?? '') || undefined,
          time: String(data.get('time') ?? '') || undefined,
          guests: String(data.get('guests') ?? '') || undefined,
          requests: String(data.get('requests') ?? '') || undefined,
        },
      })
      setStatus('done')
      form.reset()
    } catch (error) {
      setStatus('error')
      setErrorMessage(
        error instanceof Error ? error.message : 'Something went wrong — please try again.',
      )
    }
  }

  if (status === 'done') {
    return (
      <div className="flex flex-col items-center gap-space-md rounded-xl bg-surface-container-low p-space-xl text-center">
        <span className="material-symbols-outlined text-[48px] text-primary">
          event_available
        </span>
        <h3 className="font-headline-md text-on-surface">Reservation request received!</h3>
        <p className="text-body-sm text-on-surface-variant">
          Our host will contact you shortly to confirm your table.
        </p>
      </div>
    )
  }

  return (
    <form className="flex flex-col gap-space-md" onSubmit={handleSubmit}>
      <div className="grid grid-cols-1 gap-space-md md:grid-cols-2">
        <div className="flex flex-col gap-space-xs">
          <label className="text-label-md text-on-surface" htmlFor="name">
            Full Name
          </label>
          <input
            className={inputClasses}
            id="name"
            name="name"
            placeholder="Aarav Sharma"
            required
            type="text"
          />
        </div>
        <div className="flex flex-col gap-space-xs">
          <label className="text-label-md text-on-surface" htmlFor="phone">
            Phone Number
          </label>
          <input
            className={inputClasses}
            id="phone"
            name="phone"
            placeholder="+91 98765 43210"
            required
            type="tel"
          />
        </div>
      </div>
      <div className="grid grid-cols-1 gap-space-md md:grid-cols-3">
        <div className="flex flex-col gap-space-xs">
          <label className="text-label-md text-on-surface" htmlFor="date">
            Date
          </label>
          <input className={inputClasses} id="date" name="date" required type="date" />
        </div>
        <div className="flex flex-col gap-space-xs">
          <label className="text-label-md text-on-surface" htmlFor="time">
            Time Slot
          </label>
          <select className={inputClasses} id="time" name="time" required defaultValue="">
            <option disabled value="">
              Select time
            </option>
            {TIME_SLOTS.map((slot) => (
              <option key={slot.value} value={slot.value}>
                {slot.label}
              </option>
            ))}
          </select>
        </div>
        <div className="flex flex-col gap-space-xs">
          <label className="text-label-md text-on-surface" htmlFor="guests">
            Guests
          </label>
          <select className={inputClasses} id="guests" name="guests" required defaultValue="">
            <option disabled value="">
              Party size
            </option>
            {PARTY_SIZES.map((size) => (
              <option key={size.value} value={size.value}>
                {size.label}
              </option>
            ))}
          </select>
        </div>
      </div>
      <div className="flex flex-col gap-space-xs">
        <label className="text-label-md text-on-surface" htmlFor="requests">
          Special Requests / Seating Preference
        </label>
        <textarea
          className={inputClasses}
          id="requests"
          name="requests"
          placeholder="Indoor seating near copper tanks, anniversary celebration, etc."
          rows={3}
        />
      </div>
      {status === 'error' ? (
        <p className="text-body-sm text-error">{errorMessage}</p>
      ) : null}
      <button
        className="mt-space-sm flex cursor-pointer items-center justify-center gap-space-sm rounded-lg bg-primary px-space-lg py-space-md font-bold text-on-primary shadow-md transition-all duration-300 hover:bg-primary-container"
        type="submit"
        disabled={status === 'sending'}
      >
        <span className="material-symbols-outlined">event_available</span>
        {status === 'sending' ? 'Sending…' : 'Confirm Reservation'}
      </button>
    </form>
  )
}
