'use client'

import React, { useState, useEffect, Suspense } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import Link from 'next/link'

interface Resident {
  id: number
  name: string
  room: string
  table?: string
  station?: string
  highCaloric?: boolean
  aversions?: string
  notes?: string
}

type MealType = 'breakfast' | 'lunch' | 'dinner'

interface BreakfastOptions {
  accordingToPlan: boolean
  bread: {
    breadRoll: boolean
    wholeGrainRoll: boolean
    greyBread: boolean
    wholeGrainBread: boolean
    whiteBread: boolean
    crispbread: boolean
  }
  porridge: boolean
  preparation: { sliced: boolean; spread: boolean }
  spreads: {
    butter: boolean
    margarine: boolean
    jam: boolean
    diabeticJam: boolean
    honey: boolean
    cheese: boolean
    quark: boolean
    sausage: boolean
  }
  beverages: { coffee: boolean; tea: boolean; hotMilk: boolean; coldMilk: boolean }
  additions: { sugar: boolean; sweetener: boolean; coffeeCreamer: boolean }
}

interface LunchOptions {
  portionSize: 'small' | 'large' | 'vegetarian'
  soup: boolean
  dessert: boolean
  specialPreparations: {
    pureedFood: boolean
    pureedMeat: boolean
    slicedMeat: boolean
    mashedPotatoes: boolean
  }
  restrictions: { noFish: boolean; fingerFood: boolean; onlySweet: boolean }
}

interface DinnerOptions {
  accordingToPlan: boolean
  bread: { greyBread: boolean; wholeGrainBread: boolean; whiteBread: boolean; crispbread: boolean }
  preparation: { spread: boolean; sliced: boolean }
  spreads: { butter: boolean; margarine: boolean }
  soup: boolean
  porridge: boolean
  noFish: boolean
  beverages: { tea: boolean; cocoa: boolean; hotMilk: boolean; coldMilk: boolean }
  additions: { sugar: boolean; sweetener: boolean }
}

const defaultBreakfast: BreakfastOptions = {
  accordingToPlan: false,
  bread: {
    breadRoll: false,
    wholeGrainRoll: false,
    greyBread: false,
    wholeGrainBread: false,
    whiteBread: false,
    crispbread: false,
  },
  porridge: false,
  preparation: { sliced: false, spread: false },
  spreads: {
    butter: false,
    margarine: false,
    jam: false,
    diabeticJam: false,
    honey: false,
    cheese: false,
    quark: false,
    sausage: false,
  },
  beverages: { coffee: false, tea: false, hotMilk: false, coldMilk: false },
  additions: { sugar: false, sweetener: false, coffeeCreamer: false },
}

const defaultLunch: LunchOptions = {
  portionSize: 'large',
  soup: false,
  dessert: true,
  specialPreparations: {
    pureedFood: false,
    pureedMeat: false,
    slicedMeat: false,
    mashedPotatoes: false,
  },
  restrictions: { noFish: false, fingerFood: false, onlySweet: false },
}

const defaultDinner: DinnerOptions = {
  accordingToPlan: false,
  bread: { greyBread: false, wholeGrainBread: false, whiteBread: false, crispbread: false },
  preparation: { spread: false, sliced: false },
  spreads: { butter: false, margarine: false },
  soup: false,
  porridge: false,
  noFish: false,
  beverages: { tea: false, cocoa: false, hotMilk: false, coldMilk: false },
  additions: { sugar: false, sweetener: false },
}

function NewOrderContent() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const initialMealType = (searchParams.get('mealType') as MealType) || null

  const [step, setStep] = useState(initialMealType ? 2 : 1)
  const [residents, setResidents] = useState<Resident[]>([])
  const [selectedResident, setSelectedResident] = useState<Resident | null>(null)
  const [mealType, setMealType] = useState<MealType | null>(initialMealType)
  const [date, setDate] = useState(() => new Date().toISOString().split('T')[0])
  const [breakfast, setBreakfast] = useState<BreakfastOptions>(defaultBreakfast)
  const [lunch, setLunch] = useState<LunchOptions>(defaultLunch)
  const [dinner, setDinner] = useState<DinnerOptions>(defaultDinner)
  const [loading, setLoading] = useState(true)
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [searchQuery, setSearchQuery] = useState('')

  useEffect(() => {
    const fetchResidents = async () => {
      try {
        const res = await fetch('/api/residents?where[active][equals]=true&limit=100&sort=name', {
          credentials: 'include',
        })
        if (res.ok) {
          const data = await res.json()
          setResidents(data.docs || [])
        } else if (res.status === 401) {
          router.push('/caregiver/login')
        }
      } catch (err) {
        console.error('Error fetching residents:', err)
      } finally {
        setLoading(false)
      }
    }
    fetchResidents()
  }, [router])

  const filteredResidents = residents.filter(
    (r) =>
      r.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      r.room.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  const handleSubmit = async () => {
    if (!selectedResident || !mealType || !date) return

    setSubmitting(true)
    setError(null)

    try {
      const orderData: Record<string, unknown> = {
        resident: selectedResident.id,
        date,
        mealType,
        status: 'pending',
      }

      if (mealType === 'breakfast') {
        orderData.breakfast = breakfast
      } else if (mealType === 'lunch') {
        orderData.lunch = lunch
      } else if (mealType === 'dinner') {
        orderData.dinner = dinner
      }

      const res = await fetch('/api/meal-orders', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(orderData),
        credentials: 'include',
      })

      if (!res.ok) {
        const data = await res.json()
        throw new Error(data.errors?.[0]?.message || 'Failed to create order')
      }

      router.push('/caregiver/dashboard')
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred')
    } finally {
      setSubmitting(false)
    }
  }

  const getMealTypeLabel = (type: MealType) => {
    switch (type) {
      case 'breakfast':
        return 'Breakfast (Frühstück)'
      case 'lunch':
        return 'Lunch (Mittagessen)'
      case 'dinner':
        return 'Dinner (Abendessen)'
    }
  }

  const renderCheckbox = (
    label: string,
    checked: boolean,
    onChange: (checked: boolean) => void,
  ) => (
    <label className={`checkbox-item ${checked ? 'checkbox-item--checked' : ''}`}>
      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
      <span>{label}</span>
    </label>
  )

  if (loading) {
    return (
      <div className="login-page">
        <div className="spinner" />
      </div>
    )
  }

  return (
    <>
      <header className="header">
        <div className="header__content">
          <Link href="/caregiver/dashboard" className="btn btn--secondary">
            &larr; Back
          </Link>
          <h1 className="header__title">New Meal Order</h1>
        </div>
      </header>

      <main className="container">
        {/* Progress Steps */}
        <div className="steps">
          <div className={`steps__step ${step >= 1 ? 'steps__step--active' : ''} ${step > 1 ? 'steps__step--completed' : ''}`} />
          <div className={`steps__step ${step >= 2 ? 'steps__step--active' : ''} ${step > 2 ? 'steps__step--completed' : ''}`} />
          <div className={`steps__step ${step >= 3 ? 'steps__step--active' : ''} ${step > 3 ? 'steps__step--completed' : ''}`} />
          <div className={`steps__step ${step >= 4 ? 'steps__step--active' : ''}`} />
        </div>

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

        {/* Step 1: Select Meal Type */}
        {step === 1 && (
          <div className="card">
            <div className="card__header">
              <h2>Step 1: Select Meal Type</h2>
            </div>
            <div className="card__body">
              <div className="form-group">
                <label htmlFor="date">Date</label>
                <input
                  type="date"
                  id="date"
                  className="input"
                  value={date}
                  onChange={(e) => setDate(e.target.value)}
                />
              </div>

              <div className="meal-type-grid">
                <button
                  type="button"
                  className={`meal-type-btn ${mealType === 'breakfast' ? 'meal-type-btn--selected' : ''}`}
                  onClick={() => setMealType('breakfast')}
                >
                  <div className="meal-type-btn__icon">🌅</div>
                  <div className="meal-type-btn__label">Breakfast</div>
                  <div className="meal-type-btn__sublabel">Frühstück</div>
                </button>
                <button
                  type="button"
                  className={`meal-type-btn ${mealType === 'lunch' ? 'meal-type-btn--selected' : ''}`}
                  onClick={() => setMealType('lunch')}
                >
                  <div className="meal-type-btn__icon">☀️</div>
                  <div className="meal-type-btn__label">Lunch</div>
                  <div className="meal-type-btn__sublabel">Mittagessen</div>
                </button>
                <button
                  type="button"
                  className={`meal-type-btn ${mealType === 'dinner' ? 'meal-type-btn--selected' : ''}`}
                  onClick={() => setMealType('dinner')}
                >
                  <div className="meal-type-btn__icon">🌙</div>
                  <div className="meal-type-btn__label">Dinner</div>
                  <div className="meal-type-btn__sublabel">Abendessen</div>
                </button>
              </div>

              <div style={{ marginTop: '1.5rem' }}>
                <button
                  className="btn btn--primary btn--block btn--large"
                  disabled={!mealType}
                  onClick={() => setStep(2)}
                >
                  Continue
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Step 2: Select Resident */}
        {step === 2 && (
          <div className="card">
            <div className="card__header">
              <h2>Step 2: Select Resident</h2>
            </div>
            <div className="card__body">
              <div className="form-group">
                <div className="search-box">
                  <input
                    type="text"
                    placeholder="Search by name or room..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                </div>
              </div>

              <div className="resident-list">
                {filteredResidents.map((resident) => (
                  <div
                    key={resident.id}
                    className={`resident-card ${selectedResident?.id === resident.id ? 'resident-card--selected' : ''}`}
                    onClick={() => setSelectedResident(resident)}
                  >
                    <div className="resident-card__name">{resident.name}</div>
                    <div className="resident-card__details">
                      <span>Room {resident.room}</span>
                      {resident.table && <span>Table {resident.table}</span>}
                      {resident.station && <span>{resident.station}</span>}
                    </div>
                    {resident.highCaloric && (
                      <div className="resident-card__badge">High Caloric</div>
                    )}
                  </div>
                ))}
              </div>

              <div style={{ marginTop: '1.5rem', display: 'flex', gap: '1rem' }}>
                <button className="btn btn--secondary" onClick={() => setStep(1)}>
                  Back
                </button>
                <button
                  className="btn btn--primary btn--block btn--large"
                  disabled={!selectedResident}
                  onClick={() => setStep(3)}
                >
                  Continue
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Step 3: Meal Options */}
        {step === 3 && (
          <div className="card">
            <div className="card__header">
              <h2>Step 3: {mealType && getMealTypeLabel(mealType)} Options</h2>
            </div>
            <div className="card__body">
              {/* Show resident notes if any */}
              {(selectedResident?.aversions || selectedResident?.notes) && (
                <div className="message message--warning">
                  <strong>Notes for {selectedResident?.name}:</strong>
                  {selectedResident?.aversions && <div>Aversions: {selectedResident.aversions}</div>}
                  {selectedResident?.notes && <div>{selectedResident.notes}</div>}
                </div>
              )}

              {/* BREAKFAST OPTIONS */}
              {mealType === 'breakfast' && (
                <>
                  <div className="section">
                    <h3 className="section__title">General</h3>
                    <div className="checkbox-group">
                      {renderCheckbox('According to Plan (lt. Plan)', breakfast.accordingToPlan, (v) =>
                        setBreakfast({ ...breakfast, accordingToPlan: v }),
                      )}
                    </div>
                  </div>

                  <div className="section">
                    <h3 className="section__title">Bread (Brot)</h3>
                    <div className="checkbox-group checkbox-group--cols-2">
                      {renderCheckbox('Bread Roll (Brötchen)', breakfast.bread.breadRoll, (v) =>
                        setBreakfast({ ...breakfast, bread: { ...breakfast.bread, breadRoll: v } }),
                      )}
                      {renderCheckbox('Whole Grain Roll (Vollkornbrötchen)', breakfast.bread.wholeGrainRoll, (v) =>
                        setBreakfast({ ...breakfast, bread: { ...breakfast.bread, wholeGrainRoll: v } }),
                      )}
                      {renderCheckbox('Grey Bread (Graubrot)', breakfast.bread.greyBread, (v) =>
                        setBreakfast({ ...breakfast, bread: { ...breakfast.bread, greyBread: v } }),
                      )}
                      {renderCheckbox('Whole Grain Bread (Vollkornbrot)', breakfast.bread.wholeGrainBread, (v) =>
                        setBreakfast({ ...breakfast, bread: { ...breakfast.bread, wholeGrainBread: v } }),
                      )}
                      {renderCheckbox('White Bread (Weißbrot)', breakfast.bread.whiteBread, (v) =>
                        setBreakfast({ ...breakfast, bread: { ...breakfast.bread, whiteBread: v } }),
                      )}
                      {renderCheckbox('Crispbread (Knäckebrot)', breakfast.bread.crispbread, (v) =>
                        setBreakfast({ ...breakfast, bread: { ...breakfast.bread, crispbread: v } }),
                      )}
                    </div>
                  </div>

                  <div className="section">
                    <h3 className="section__title">Preparation</h3>
                    <div className="checkbox-group checkbox-group--cols-2">
                      {renderCheckbox('Porridge (Brei)', breakfast.porridge, (v) =>
                        setBreakfast({ ...breakfast, porridge: v }),
                      )}
                      {renderCheckbox('Sliced (geschnitten)', breakfast.preparation.sliced, (v) =>
                        setBreakfast({ ...breakfast, preparation: { ...breakfast.preparation, sliced: v } }),
                      )}
                      {renderCheckbox('Spread (geschmiert)', breakfast.preparation.spread, (v) =>
                        setBreakfast({ ...breakfast, preparation: { ...breakfast.preparation, spread: v } }),
                      )}
                    </div>
                  </div>

                  <div className="section">
                    <h3 className="section__title">Spreads (Aufstrich)</h3>
                    <div className="checkbox-group checkbox-group--cols-2">
                      {renderCheckbox('Butter', breakfast.spreads.butter, (v) =>
                        setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, butter: v } }),
                      )}
                      {renderCheckbox('Margarine', breakfast.spreads.margarine, (v) =>
                        setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, margarine: v } }),
                      )}
                      {renderCheckbox('Jam (Konfitüre)', breakfast.spreads.jam, (v) =>
                        setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, jam: v } }),
                      )}
                      {renderCheckbox('Diabetic Jam (Diab. Konfitüre)', breakfast.spreads.diabeticJam, (v) =>
                        setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, diabeticJam: v } }),
                      )}
                      {renderCheckbox('Honey (Honig)', breakfast.spreads.honey, (v) =>
                        setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, honey: v } }),
                      )}
                      {renderCheckbox('Cheese (Käse)', breakfast.spreads.cheese, (v) =>
                        setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, cheese: v } }),
                      )}
                      {renderCheckbox('Quark', breakfast.spreads.quark, (v) =>
                        setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, quark: v } }),
                      )}
                      {renderCheckbox('Sausage (Wurst)', breakfast.spreads.sausage, (v) =>
                        setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, sausage: v } }),
                      )}
                    </div>
                  </div>

                  <div className="section">
                    <h3 className="section__title">Beverages (Getränke)</h3>
                    <div className="checkbox-group checkbox-group--cols-2">
                      {renderCheckbox('Coffee (Kaffee)', breakfast.beverages.coffee, (v) =>
                        setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, coffee: v } }),
                      )}
                      {renderCheckbox('Tea (Tee)', breakfast.beverages.tea, (v) =>
                        setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, tea: v } }),
                      )}
                      {renderCheckbox('Hot Milk (Milch heiß)', breakfast.beverages.hotMilk, (v) =>
                        setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, hotMilk: v } }),
                      )}
                      {renderCheckbox('Cold Milk (Milch kalt)', breakfast.beverages.coldMilk, (v) =>
                        setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, coldMilk: v } }),
                      )}
                    </div>
                  </div>

                  <div className="section">
                    <h3 className="section__title">Additions (Zusätze)</h3>
                    <div className="checkbox-group checkbox-group--cols-3">
                      {renderCheckbox('Sugar (Zucker)', breakfast.additions.sugar, (v) =>
                        setBreakfast({ ...breakfast, additions: { ...breakfast.additions, sugar: v } }),
                      )}
                      {renderCheckbox('Sweetener (Süßstoff)', breakfast.additions.sweetener, (v) =>
                        setBreakfast({ ...breakfast, additions: { ...breakfast.additions, sweetener: v } }),
                      )}
                      {renderCheckbox('Coffee Creamer (Kaffeesahne)', breakfast.additions.coffeeCreamer, (v) =>
                        setBreakfast({ ...breakfast, additions: { ...breakfast.additions, coffeeCreamer: v } }),
                      )}
                    </div>
                  </div>
                </>
              )}

              {/* LUNCH OPTIONS */}
              {mealType === 'lunch' && (
                <>
                  <div className="section">
                    <h3 className="section__title">Portion Size</h3>
                    <div className="checkbox-group checkbox-group--cols-3">
                      <label
                        className={`checkbox-item ${lunch.portionSize === 'small' ? 'checkbox-item--checked' : ''}`}
                      >
                        <input
                          type="radio"
                          name="portionSize"
                          checked={lunch.portionSize === 'small'}
                          onChange={() => setLunch({ ...lunch, portionSize: 'small' })}
                        />
                        <span>Small (Kleine)</span>
                      </label>
                      <label
                        className={`checkbox-item ${lunch.portionSize === 'large' ? 'checkbox-item--checked' : ''}`}
                      >
                        <input
                          type="radio"
                          name="portionSize"
                          checked={lunch.portionSize === 'large'}
                          onChange={() => setLunch({ ...lunch, portionSize: 'large' })}
                        />
                        <span>Large (Große)</span>
                      </label>
                      <label
                        className={`checkbox-item ${lunch.portionSize === 'vegetarian' ? 'checkbox-item--checked' : ''}`}
                      >
                        <input
                          type="radio"
                          name="portionSize"
                          checked={lunch.portionSize === 'vegetarian'}
                          onChange={() => setLunch({ ...lunch, portionSize: 'vegetarian' })}
                        />
                        <span>Vegetarian</span>
                      </label>
                    </div>
                  </div>

                  <div className="section">
                    <h3 className="section__title">Meal Options</h3>
                    <div className="checkbox-group checkbox-group--cols-2">
                      {renderCheckbox('Soup (Suppe)', lunch.soup, (v) => setLunch({ ...lunch, soup: v }))}
                      {renderCheckbox('Dessert', lunch.dessert, (v) => setLunch({ ...lunch, dessert: v }))}
                    </div>
                  </div>

                  <div className="section">
                    <h3 className="section__title">Special Preparations</h3>
                    <div className="checkbox-group checkbox-group--cols-2">
                      {renderCheckbox('Pureed Food (passierte Kost)', lunch.specialPreparations.pureedFood, (v) =>
                        setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, pureedFood: v } }),
                      )}
                      {renderCheckbox('Pureed Meat (passiertes Fleisch)', lunch.specialPreparations.pureedMeat, (v) =>
                        setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, pureedMeat: v } }),
                      )}
                      {renderCheckbox('Sliced Meat (geschnittenes Fleisch)', lunch.specialPreparations.slicedMeat, (v) =>
                        setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, slicedMeat: v } }),
                      )}
                      {renderCheckbox('Mashed Potatoes (Kartoffelbrei)', lunch.specialPreparations.mashedPotatoes, (v) =>
                        setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, mashedPotatoes: v } }),
                      )}
                    </div>
                  </div>

                  <div className="section">
                    <h3 className="section__title">Restrictions</h3>
                    <div className="checkbox-group checkbox-group--cols-3">
                      {renderCheckbox('No Fish (ohne Fisch)', lunch.restrictions.noFish, (v) =>
                        setLunch({ ...lunch, restrictions: { ...lunch.restrictions, noFish: v } }),
                      )}
                      {renderCheckbox('Finger Food', lunch.restrictions.fingerFood, (v) =>
                        setLunch({ ...lunch, restrictions: { ...lunch.restrictions, fingerFood: v } }),
                      )}
                      {renderCheckbox('Only Sweet (nur süß)', lunch.restrictions.onlySweet, (v) =>
                        setLunch({ ...lunch, restrictions: { ...lunch.restrictions, onlySweet: v } }),
                      )}
                    </div>
                  </div>
                </>
              )}

              {/* DINNER OPTIONS */}
              {mealType === 'dinner' && (
                <>
                  <div className="section">
                    <h3 className="section__title">General</h3>
                    <div className="checkbox-group">
                      {renderCheckbox('According to Plan (lt. Plan)', dinner.accordingToPlan, (v) =>
                        setDinner({ ...dinner, accordingToPlan: v }),
                      )}
                    </div>
                  </div>

                  <div className="section">
                    <h3 className="section__title">Bread (Brot)</h3>
                    <div className="checkbox-group checkbox-group--cols-2">
                      {renderCheckbox('Grey Bread (Graubrot)', dinner.bread.greyBread, (v) =>
                        setDinner({ ...dinner, bread: { ...dinner.bread, greyBread: v } }),
                      )}
                      {renderCheckbox('Whole Grain Bread (Vollkornbrot)', dinner.bread.wholeGrainBread, (v) =>
                        setDinner({ ...dinner, bread: { ...dinner.bread, wholeGrainBread: v } }),
                      )}
                      {renderCheckbox('White Bread (Weißbrot)', dinner.bread.whiteBread, (v) =>
                        setDinner({ ...dinner, bread: { ...dinner.bread, whiteBread: v } }),
                      )}
                      {renderCheckbox('Crispbread (Knäckebrot)', dinner.bread.crispbread, (v) =>
                        setDinner({ ...dinner, bread: { ...dinner.bread, crispbread: v } }),
                      )}
                    </div>
                  </div>

                  <div className="section">
                    <h3 className="section__title">Preparation</h3>
                    <div className="checkbox-group checkbox-group--cols-2">
                      {renderCheckbox('Spread (geschmiert)', dinner.preparation.spread, (v) =>
                        setDinner({ ...dinner, preparation: { ...dinner.preparation, spread: v } }),
                      )}
                      {renderCheckbox('Sliced (geschnitten)', dinner.preparation.sliced, (v) =>
                        setDinner({ ...dinner, preparation: { ...dinner.preparation, sliced: v } }),
                      )}
                    </div>
                  </div>

                  <div className="section">
                    <h3 className="section__title">Spreads (Aufstrich)</h3>
                    <div className="checkbox-group checkbox-group--cols-2">
                      {renderCheckbox('Butter', dinner.spreads.butter, (v) =>
                        setDinner({ ...dinner, spreads: { ...dinner.spreads, butter: v } }),
                      )}
                      {renderCheckbox('Margarine', dinner.spreads.margarine, (v) =>
                        setDinner({ ...dinner, spreads: { ...dinner.spreads, margarine: v } }),
                      )}
                    </div>
                  </div>

                  <div className="section">
                    <h3 className="section__title">Additional Items</h3>
                    <div className="checkbox-group checkbox-group--cols-3">
                      {renderCheckbox('Soup (Suppe)', dinner.soup, (v) => setDinner({ ...dinner, soup: v }))}
                      {renderCheckbox('Porridge (Brei)', dinner.porridge, (v) =>
                        setDinner({ ...dinner, porridge: v }),
                      )}
                      {renderCheckbox('No Fish (ohne Fisch)', dinner.noFish, (v) =>
                        setDinner({ ...dinner, noFish: v }),
                      )}
                    </div>
                  </div>

                  <div className="section">
                    <h3 className="section__title">Beverages (Getränke)</h3>
                    <div className="checkbox-group checkbox-group--cols-2">
                      {renderCheckbox('Tea (Tee)', dinner.beverages.tea, (v) =>
                        setDinner({ ...dinner, beverages: { ...dinner.beverages, tea: v } }),
                      )}
                      {renderCheckbox('Cocoa (Kakao)', dinner.beverages.cocoa, (v) =>
                        setDinner({ ...dinner, beverages: { ...dinner.beverages, cocoa: v } }),
                      )}
                      {renderCheckbox('Hot Milk (Milch heiß)', dinner.beverages.hotMilk, (v) =>
                        setDinner({ ...dinner, beverages: { ...dinner.beverages, hotMilk: v } }),
                      )}
                      {renderCheckbox('Cold Milk (Milch kalt)', dinner.beverages.coldMilk, (v) =>
                        setDinner({ ...dinner, beverages: { ...dinner.beverages, coldMilk: v } }),
                      )}
                    </div>
                  </div>

                  <div className="section">
                    <h3 className="section__title">Additions (Zusätze)</h3>
                    <div className="checkbox-group checkbox-group--cols-2">
                      {renderCheckbox('Sugar (Zucker)', dinner.additions.sugar, (v) =>
                        setDinner({ ...dinner, additions: { ...dinner.additions, sugar: v } }),
                      )}
                      {renderCheckbox('Sweetener (Süßstoff)', dinner.additions.sweetener, (v) =>
                        setDinner({ ...dinner, additions: { ...dinner.additions, sweetener: v } }),
                      )}
                    </div>
                  </div>
                </>
              )}

              <div style={{ marginTop: '1.5rem', display: 'flex', gap: '1rem' }}>
                <button className="btn btn--secondary" onClick={() => setStep(2)}>
                  Back
                </button>
                <button className="btn btn--primary btn--block btn--large" onClick={() => setStep(4)}>
                  Review Order
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Step 4: Review and Submit */}
        {step === 4 && (
          <div className="card">
            <div className="card__header">
              <h2>Step 4: Review & Submit</h2>
            </div>
            <div className="card__body">
              <div className="order-summary">
                <div className="order-summary__row">
                  <span className="order-summary__label">Resident</span>
                  <span className="order-summary__value">{selectedResident?.name}</span>
                </div>
                <div className="order-summary__row">
                  <span className="order-summary__label">Room</span>
                  <span className="order-summary__value">{selectedResident?.room}</span>
                </div>
                <div className="order-summary__row">
                  <span className="order-summary__label">Date</span>
                  <span className="order-summary__value">{date}</span>
                </div>
                <div className="order-summary__row">
                  <span className="order-summary__label">Meal Type</span>
                  <span className="order-summary__value">{mealType && getMealTypeLabel(mealType)}</span>
                </div>
              </div>

              {selectedResident?.highCaloric && (
                <div className="message message--warning" style={{ marginTop: '1rem' }}>
                  <strong>Note:</strong> This resident requires high caloric meals.
                </div>
              )}

              <div style={{ marginTop: '1.5rem', display: 'flex', gap: '1rem' }}>
                <button className="btn btn--secondary" onClick={() => setStep(3)}>
                  Back
                </button>
                <button
                  className="btn btn--success btn--block btn--large"
                  onClick={handleSubmit}
                  disabled={submitting}
                >
                  {submitting ? 'Creating...' : 'Create Order'}
                </button>
              </div>
            </div>
          </div>
        )}
      </main>
    </>
  )
}

export default function NewOrderPage() {
  return (
    <Suspense
      fallback={
        <div className="login-page">
          <div className="spinner" />
        </div>
      }
    >
      <NewOrderContent />
    </Suspense>
  )
}