import { useState, useLayoutEffect, useRef, useEffect } from 'react'
import { format, addDays } from 'date-fns'
import { Star, Banknote, CreditCard, AlertCircle, Map, Plus, Trash2, Tag, Minus, BedDouble, Tv2, Send, Loader2, CheckCircle2, Clock, CalendarDays, User, Phone } from 'lucide-react'
import { MOCK_DISCOUNTS } from '../../pages/DiscountsPage'
import type { Discount } from '../../pages/DiscountsPage'
import { Modal } from '../ui/Modal'
import { cn, BOOKING_STATUS_LABELS } from '../../lib/utils'
import type { Booking, DraftBooking, Room, BookingStatus } from '../../types'
import type { RentalObject, RentalBooking } from '../../data/rentalData'
import { FloorMapModal } from '../floormap/FloorMapModal'
import { useModules } from '../../contexts/ModulesContext'
import { useAuth } from '../../contexts/AuthContext'
import { api } from '../../lib/api'


const GUEST_TAGS = ['VIP', 'Постоянный гость', 'Корпоративный', 'Медовый месяц', 'День рождения', 'Особые пожелания']

const ADDITIONAL_SERVICES = [
  { id: 'breakfast', label: 'Завтрак', price: 800 },
  { id: 'transfer', label: 'Трансфер', price: 2500 },
  { id: 'parking', label: 'Парковка', price: 500 },
  { id: 'laundry', label: 'Стирка', price: 600 },
  { id: 'minibar', label: 'Мини-бар', price: 1500 },
  { id: 'excursion', label: 'Экскурсия', price: 3000 },
]

interface AddedService { id: string; label: string; price: number; qty: number }

const HOURS = Array.from({ length: 24 }, (_, i) => i)

interface BookingModalProps {
  open: boolean
  draft: DraftBooking
  rooms: Room[]
  bookings?: Booking[]
  onClose: () => void
  onSave: (data: Partial<Booking>) => void
  existing?: Booking
  // Rental tab (only shown when these are provided AND not editing existing booking)
  rentalObjects?: RentalObject[]
  rentalBookings?: RentalBooking[]
  onRentalSave?: (b: RentalBooking) => void
  slug?: string
}

// ── Rental time helpers ────────────────────────────────────────────────────────
function rentalTimeOptions(openHour: number, closeHour: number): number[] {
  const result: number[] = []
  for (let m = openHour * 60; m < closeHour * 60; m += 15) result.push(m)
  return result
}
function rentalEndOptions(fromMin: number, toMin: number): number[] {
  const result: number[] = []
  for (let m = fromMin + 15; m <= toMin; m += 15) result.push(m)
  return result
}
function fmtTime(min: number) {
  const h = Math.floor(min / 60)
  const m = min % 60
  return m === 0 ? `${h}:00` : `${h}:${String(m).padStart(2, '0')}`
}

function isConflict(bookings: Booking[], roomId: string, checkIn: string, checkOut: string, excludeId?: string) {
  if (!checkIn || !checkOut || checkIn >= checkOut) return false
  return bookings.some(b =>
    b.roomId === roomId &&
    b.id !== excludeId &&
    b.status !== 'cancelled' && b.status !== 'no_show' && b.status !== 'checked_out' &&
    b.checkIn < checkOut && b.checkOut > checkIn,
  )
}

function availableRooms(rooms: Room[], bookings: Booking[], checkIn: string, checkOut: string, excludeId?: string) {
  return rooms.filter(r => !isConflict(bookings, r.id, checkIn, checkOut, excludeId))
}

// Возвращает уникальные категории (типы) номеров с количеством свободных
function getRoomCategories(rooms: Room[], bookings: Booking[], checkIn: string, checkOut: string, excludeId?: string) {
  const types = Array.from(new Set(rooms.map(r => r.type)))
  return types.map(type => {
    const roomsOfType = rooms.filter(r => r.type === type)
    const freeRooms = roomsOfType.filter(r => !isConflict(bookings, r.id, checkIn, checkOut, excludeId))
    const minRate = Math.min(...roomsOfType.map(r => r.baseRate))
    return { type, total: roomsOfType.length, free: freeRooms.length, minRate, rooms: freeRooms, allRooms: roomsOfType }
  })
}

export function BookingModal({ open, draft, rooms, bookings = [], onClose, onSave, existing, rentalObjects, rentalBookings = [], onRentalSave, slug }: BookingModalProps) {
  const { statuses } = useModules()
  const { user } = useAuth()
  const tvEnabled = statuses['tv-welcome'] === 'active'

  const showRentalTab = !existing && !!rentalObjects && rentalObjects.length > 0

  // ── Rental tab state ────────────────────────────────────────────────────────
  const [bookingType, setBookingType]         = useState<'room' | 'rental'>('room')
  const [rentalObjId, setRentalObjId]         = useState(rentalObjects?.[0]?.id ?? '')
  const [rentalDate, setRentalDate]           = useState(draft.checkIn)
  const [rentalIsFullDay, setRentalIsFullDay] = useState(false)
  const [rentalStartM, setRentalStartM]       = useState(0)   // minutes since midnight
  const [rentalEndM, setRentalEndM]           = useState(60)
  const [rentalGuest, setRentalGuest]         = useState('')
  const [rentalPhone, setRentalPhone]         = useState('')
  const [rentalNotes, setRentalNotes]         = useState('')
  const [rentalSaving, setRentalSaving]       = useState(false)
  // Rental guest autocomplete
  const [rentalShowSugg, setRentalShowSugg]   = useState(false)
  const [rentalDbResults, setRentalDbResults] = useState<{ id: string; firstName: string; lastName: string; phone: string | null }[]>([])
  const rentalSearchTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
  const rentalNameRef = useRef<HTMLDivElement>(null)

  const rentalObj = rentalObjects?.find(o => o.id === rentalObjId) ?? rentalObjects?.[0]
  const rentalDayBookings = rentalBookings.filter(b =>
    b.objectId === rentalObjId &&
    (b.date as string).slice(0, 10) === rentalDate &&
    b.status !== 'cancelled',
  )
  const rentalBufMin = rentalObj?.bufferMinutes ?? 0
  const rentalAvailStarts = rentalObj
    ? rentalTimeOptions(rentalObj.openHour, rentalObj.closeHour).filter(m =>
        !rentalDayBookings.some(b => !b.isFullDay && m >= b.startHour && m < b.endHour + rentalBufMin),
      )
    : []
  const rentalGetMaxEnd = (start: number) => {
    const next = rentalDayBookings.filter(b => !b.isFullDay && b.startHour >= start + 15)
      .sort((a, b) => a.startHour - b.startHour)[0]
    return next ? next.startHour - rentalBufMin : (rentalObj?.closeHour ?? 22) * 60
  }
  const rentalEffStart = rentalAvailStarts.includes(rentalStartM) ? rentalStartM : (rentalAvailStarts[0] ?? (rentalObj?.openHour ?? 8) * 60)
  const rentalAvailEnds = rentalEndOptions(rentalEffStart, rentalGetMaxEnd(rentalEffStart))

  // Sync rentalEndM when rentalEffStart shifts past it
  useLayoutEffect(() => {
    if (!rentalIsFullDay && rentalEndM <= rentalEffStart) {
      setRentalEndM(rentalEffStart + 60)
    }
  }, [rentalEffStart])

  // Close rental guest suggestions on outside click
  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (rentalNameRef.current && !rentalNameRef.current.contains(e.target as Node)) {
        setRentalShowSugg(false)
      }
    }
    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [])

  // Rental guest suggestions from current bookings
  const rentalGuestSugg = [
    ...(bookings ?? []).filter(b => b.status === 'checked_in'),
    ...(bookings ?? []).filter(b => b.status === 'confirmed'),
  ]
  const rentalFiltered = rentalGuest.trim().length > 0
    ? rentalGuestSugg.filter(b => b.guestName.toLowerCase().includes(rentalGuest.toLowerCase()))
    : rentalGuestSugg

  const rentalHasFullDay = rentalDayBookings.some(b => b.isFullDay)
  const rentalHasTimed   = rentalDayBookings.some(b => !b.isFullDay)
  const rentalNoSlots    = !rentalHasFullDay && rentalAvailStarts.length === 0

  const rentalHours = rentalIsFullDay
    ? (rentalObj ? rentalObj.closeHour - rentalObj.openHour : 0)
    : Math.max(0, (rentalEndM - rentalEffStart) / 60)
  const rentalTotal = rentalObj
    ? (rentalIsFullDay ? rentalObj.pricePerDay : rentalHours * rentalObj.pricePerHour)
    : 0

  const handleRentalSave = async () => {
    if (!rentalObj || !rentalGuest.trim() || rentalSaving) return
    setRentalSaving(true)
    try {
      if (slug) {
        const parts = rentalGuest.trim().split(' ')
        await api.guests.create(slug, {
          last_name: parts[0] ?? '', first_name: parts[1] ?? '',
          phone: rentalPhone.trim() || undefined,
        }).catch(() => { /* ignore duplicate */ })
      }
      onRentalSave?.({
        id: `rb-${Date.now()}`,
        objectId: rentalObj.id,
        date: rentalDate,
        isFullDay: rentalIsFullDay,
        startHour: rentalIsFullDay ? rentalObj.openHour * 60 : rentalEffStart,
        endHour:   rentalIsFullDay ? rentalObj.closeHour * 60 : rentalEndM,
        guestName:  rentalGuest.trim(),
        guestPhone: rentalPhone.trim(),
        notes:      rentalNotes.trim() || undefined,
        totalAmount: rentalTotal,
        paidAmount:  0,
        status: 'confirmed',
      })
      onClose()
    } finally {
      setRentalSaving(false)
    }
  }

  // TV message state
  const [tvMsg, setTvMsg] = useState('')
  const [tvSending, setTvSending] = useState(false)
  const [tvSent, setTvSent] = useState(false)
  const [tvError, setTvError] = useState('')

  const handleSendTv = async () => {
    if (!tvMsg.trim() || !existing?.roomId || !user?.hotelSlug) return
    setTvSending(true)
    setTvError('')
    setTvSent(false)
    try {
      await api.netup.sendMessage(user.hotelSlug, existing.roomId, tvMsg, existing.guestName)
      setTvSent(true)
      setTvMsg('')
      setTimeout(() => setTvSent(false), 3000)
    } catch (err) {
      setTvError(err instanceof Error ? err.message : 'Ошибка отправки')
    } finally {
      setTvSending(false)
    }
  }

  const _nameParts = (existing?.guestName ?? '').split(' ')

  // Определяем начальную категорию из существующего бронирования или первого доступного номера
  const _initRoomId = existing?.roomId ?? draft.roomId
  const _initCategory = rooms.find(r => r.id === _initRoomId)?.type ?? rooms[0]?.type ?? ''

  const [selectedCategory, setSelectedCategory] = useState(_initCategory)
  const [pickSpecificRoom, setPickSpecificRoom] = useState(!!existing?.roomId)

  const [form, setForm] = useState({
    roomId:     _initRoomId,
    lastName:   _nameParts[0]        ?? '',
    firstName:  _nameParts[1]        ?? '',
    middleName: _nameParts.slice(2).join(' '),
    phone:      existing?.guestPhone ?? '',
    guestEmail: existing?.guestEmail ?? '',
    checkIn:    existing?.checkIn    ?? draft.checkIn,
    checkOut:   existing?.checkOut   ?? draft.checkOut,
    adults:     existing?.adults     ?? 2,
    children:   existing?.children   ?? 0,
    status:     (existing?.status    ?? 'confirmed') as BookingStatus,
    notes:      existing?.notes      ?? '',
  })
  const [guestTags, setGuestTags] = useState<string[]>([])
  const [paymentMethod, setPaymentMethod] = useState<'cash' | 'terminal' | null>(null)
  const [paidAmount, setPaidAmount] = useState(existing?.paidAmount ?? 0)
  const [showFloorMap, setShowFloorMap] = useState(false)
  const [addedServices, setAddedServices] = useState<AddedService[]>([])
  const [selectedServiceId, setSelectedServiceId] = useState(ADDITIONAL_SERVICES[0].id)
  const [selectedDiscountId, setSelectedDiscountId] = useState<string>('')
  const activeDiscounts = MOCK_DISCOUNTS.filter(d => d.isActive)
  const selectedDiscount: Discount | undefined = activeDiscounts.find(d => d.id === selectedDiscountId)

  // Hourly booking state
  const [isHourly, setIsHourly] = useState(false)
  const [hourlyDate, setHourlyDate] = useState(draft.checkIn)
  const [startHour, setStartHour] = useState(10)
  const [endHour, setEndHour] = useState(12)

  // Extra beds
  const [extraBeds, setExtraBeds] = useState(0)
  const EXTRA_BED_PRICE = 1500

  const room = rooms.find(r => r.id === form.roomId)

  // Категории и доступность
  const categories = getRoomCategories(rooms, bookings, form.checkIn, form.checkOut, existing?.id)
  const currentCategory = categories.find(c => c.type === selectedCategory)
  const categoryAvailableRooms = currentCategory
    ? (pickSpecificRoom ? currentCategory.rooms : currentCategory.allRooms)
    : []

  // При смене категории или дат (если не выбран конкретный номер) — авто-выбираем первый свободный
  const handleCategorySelect = (type: string) => {
    setSelectedCategory(type)
    if (!pickSpecificRoom) {
      const cat = getRoomCategories(rooms, bookings, form.checkIn, form.checkOut, existing?.id).find(c => c.type === type)
      const first = cat?.rooms[0] ?? cat?.allRooms[0]
      if (first) set('roomId', first.id)
    }
  }

  const handlePickSpecificToggle = (on: boolean) => {
    setPickSpecificRoom(on)
    if (!on) {
      // Возвращаемся к первому свободному в категории
      const cat = getRoomCategories(rooms, bookings, form.checkIn, form.checkOut, existing?.id).find(c => c.type === selectedCategory)
      const first = cat?.rooms[0] ?? cat?.allRooms[0]
      if (first) set('roomId', first.id)
    }
  }

  const nights = form.checkIn && form.checkOut
    ? Math.max(0, (new Date(form.checkOut).getTime() - new Date(form.checkIn).getTime()) / 86400000)
    : 0

  const hourlyHours = Math.max(0, endHour - startHour)
  const roomBaseTotal = isHourly && room?.allowHourly
    ? (room.hourlyRate ?? 0) * hourlyHours
    : (room?.baseRate ?? 0) * nights
  const discountAmount = selectedDiscount
    ? selectedDiscount.valueType === 'percent'
      ? Math.round(roomBaseTotal * Math.min(100, selectedDiscount.value) / 100)
      : Math.min(roomBaseTotal, selectedDiscount.value)
    : 0
  const roomTotal = Math.max(0, roomBaseTotal - discountAmount)
  const servicesTotal = addedServices.reduce((s, sv) => s + sv.price * sv.qty, 0)
  const extraBedsTotal = extraBeds * EXTRA_BED_PRICE * (isHourly ? 1 : Math.max(1, nights))
  const total = roomTotal + servicesTotal + extraBedsTotal

  const debt = Math.max(0, total - paidAmount)

  const addService = () => {
    const svc = ADDITIONAL_SERVICES.find(s => s.id === selectedServiceId)
    if (!svc) return
    setAddedServices(prev => {
      const ex = prev.find(s => s.id === svc.id)
      if (ex) return prev.map(s => s.id === svc.id ? { ...s, qty: s.qty + 1 } : s)
      return [...prev, { ...svc, qty: 1 }]
    })
  }

  const removeService = (id: string) =>
    setAddedServices(prev => prev.filter(s => s.id !== id))
  const isFutureBooking = form.checkIn > format(new Date(), 'yyyy-MM-dd')

  const set = <K extends keyof typeof form>(k: K, v: typeof form[K]) =>
    setForm(prev => ({ ...prev, [k]: v }))

  const toggleTag = (tag: string) =>
    setGuestTags(prev => prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag])

  const handleSave = () => {
    if (!form.lastName || !form.firstName) return
    if (isHourly && room?.allowHourly) {
      if (!hourlyDate) return
    } else {
      if (!form.checkIn || !form.checkOut) return
    }

    const guestName = [form.lastName, form.firstName, form.middleName].filter(Boolean).join(' ')
    const hourlyPrefix = isHourly && room?.allowHourly
      ? `[Почасово: ${String(startHour).padStart(2, '0')}:00–${String(endHour).padStart(2, '0')}:00] `
      : ''
    const extraBedsPrefix = extraBeds > 0 ? `[Доп.места: ${extraBeds}] ` : ''

    const checkIn = isHourly && room?.allowHourly ? hourlyDate : form.checkIn
    const checkOut = isHourly && room?.allowHourly ? hourlyDate : form.checkOut

    onSave({
      roomId:     form.roomId,
      guestName,
      guestEmail: form.guestEmail,
      guestPhone: form.phone,
      checkIn,
      checkOut,
      adults:     form.adults,
      children:   form.children,
      status:     form.status,
      notes:      hourlyPrefix + extraBedsPrefix + form.notes,
      totalAmount: total,
      paidAmount,
      id: existing?.id ?? `b-${Date.now()}`,
      hotelId: 'hotel-1',
      guestId: existing?.guestId ?? `g-${Date.now()}`,
      createdAt: existing?.createdAt ?? format(new Date(), 'yyyy-MM-dd'),
      source: 'direct',
    })
  }

  const showHourlyTab = room?.allowHourly === true

  return (
    <>
      <Modal
        open={open}
        onClose={onClose}
        title={existing ? 'Редактировать бронирование' : 'Новое бронирование'}
        size="2xl"
        footer={
          bookingType === 'rental' ? (
            <>
              <button onClick={onClose} className="btn-secondary">Отмена</button>
              <button
                onClick={handleRentalSave}
                className="btn-primary"
                disabled={!rentalGuest.trim() || rentalSaving || rentalHasFullDay || rentalNoSlots || (!rentalIsFullDay && rentalHours <= 0)}
              >
                {rentalSaving ? <Loader2 size={15} className="animate-spin" /> : null}
                Забронировать аренду
              </button>
            </>
          ) : (
            <>
              <button onClick={onClose} className="btn-secondary">Отмена</button>
              <button onClick={handleSave} className="btn-primary" disabled={!form.lastName || !form.firstName}>
                {existing ? 'Сохранить' : 'Создать бронирование'}
              </button>
            </>
          )
        }
      >
        <div className="space-y-4">

        {/* Rental / Room tabs */}
        {showRentalTab && (
          <div className="flex gap-1 p-1 bg-slate-100 dark:bg-slate-700/50 rounded-xl">
            <button
              onClick={() => setBookingType('room')}
              className={cn(
                'flex-1 py-1.5 text-sm font-medium rounded-lg transition-colors',
                bookingType === 'room'
                  ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 shadow-sm'
                  : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300',
              )}
            >
              Номер
            </button>
            <button
              onClick={() => setBookingType('rental')}
              className={cn(
                'flex-1 py-1.5 text-sm font-medium rounded-lg transition-colors',
                bookingType === 'rental'
                  ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 shadow-sm'
                  : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300',
              )}
            >
              Аренда объекта
            </button>
          </div>
        )}

        {/* ── RENTAL FORM ── */}
        {bookingType === 'rental' && rentalObj && (
          <div className="space-y-4">
            {/* Object picker */}
            {rentalObjects && rentalObjects.length > 1 && (
              <div>
                <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Объект аренды</label>
                <div className="grid grid-cols-2 gap-2">
                  {rentalObjects.map(o => (
                    <button
                      key={o.id}
                      onClick={() => { setRentalObjId(o.id); setRentalStartM(o.openHour * 60); setRentalEndM(o.openHour * 60 + 60) }}
                      className={cn(
                        'flex items-center gap-2 p-2.5 rounded-xl border text-sm font-medium transition-colors text-left',
                        rentalObjId === o.id
                          ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300'
                          : 'border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:border-brand-300 dark:hover:border-brand-600',
                      )}
                    >
                      <span className="text-lg">{o.icon}</span>
                      <div className="min-w-0">
                        <p className="truncate">{o.name}</p>
                        <p className="text-xs text-slate-400">{o.pricePerHour} ₽/ч</p>
                      </div>
                    </button>
                  ))}
                </div>
              </div>
            )}
            {rentalObjects?.length === 1 && (
              <div className="flex items-center gap-3 p-3 rounded-xl bg-slate-50 dark:bg-slate-700/40">
                <span className="text-2xl">{rentalObj.icon}</span>
                <div>
                  <p className="font-medium text-slate-900 dark:text-slate-100">{rentalObj.name}</p>
                  <p className="text-xs text-slate-500">{rentalObj.pricePerHour} ₽/ч · {rentalObj.pricePerDay} ₽/день</p>
                </div>
              </div>
            )}

            {/* Date */}
            <div>
              <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Дата</label>
              <input
                type="date"
                className="input"
                value={rentalDate}
                onChange={e => setRentalDate(e.target.value)}
              />
            </div>

            {/* Full day / time */}
            {rentalHasFullDay ? (
              <div className="flex items-center gap-2 p-3 rounded-xl bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 text-sm">
                <AlertCircle size={15} className="shrink-0" />
                <span>Объект уже забронирован на весь день</span>
              </div>
            ) : (
              <>
                <div className={cn('flex items-center gap-3 p-3 rounded-xl border border-slate-200 dark:border-slate-600', rentalHasTimed && 'opacity-50 pointer-events-none')}>
                  <CalendarDays size={16} className="text-slate-400 shrink-0" />
                  <span className="text-sm font-medium text-slate-700 dark:text-slate-300 flex-1">Весь день</span>
                  {rentalHasTimed && <span className="text-xs text-slate-400">Есть частичные брони</span>}
                  <button
                    type="button"
                    onClick={() => !rentalHasTimed && setRentalIsFullDay(v => !v)}
                    className={cn('relative rounded-full overflow-hidden transition-colors shrink-0 p-0', rentalIsFullDay ? 'bg-brand-600' : 'bg-slate-200 dark:bg-slate-600')}
                    style={{ height: 22, width: 40 }}
                  >
                    <span className={cn('absolute top-[3px] left-[2px] w-4 h-4 rounded-full bg-white shadow transition-transform duration-200', rentalIsFullDay ? 'translate-x-[18px]' : 'translate-x-0')} />
                  </button>
                </div>
                {!rentalIsFullDay && (
                  rentalNoSlots ? (
                    <div className="flex items-center gap-2 p-3 rounded-xl bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 text-sm">
                      <AlertCircle size={15} className="shrink-0" />
                      <span>Все слоты на этот день заняты</span>
                    </div>
                  ) : (
                    <div>
                      <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">
                        Время
                        {rentalBufMin > 0 && <span className="ml-1 font-normal normal-case">(перерыв {rentalBufMin} мин)</span>}
                      </label>
                      <div className="flex items-center gap-3">
                        <div className="flex-1">
                          <label className="block text-xs text-slate-500 mb-1">Начало</label>
                          <select className="input text-sm" value={rentalEffStart}
                            onChange={e => {
                              const v = parseInt(e.target.value)
                              setRentalStartM(v)
                              const maxE = rentalGetMaxEnd(v)
                              if (rentalEndM <= v || rentalEndM > maxE) setRentalEndM(Math.min(v + 60, maxE))
                            }}>
                            {rentalAvailStarts.map(m => <option key={m} value={m}>{fmtTime(m)}</option>)}
                          </select>
                        </div>
                        <Clock size={14} className="text-slate-400 mt-4 shrink-0" />
                        <div className="flex-1">
                          <label className="block text-xs text-slate-500 mb-1">Конец</label>
                          <select className="input text-sm"
                            value={rentalAvailEnds.includes(rentalEndM) ? rentalEndM : (rentalAvailEnds[0] ?? rentalEndM)}
                            onChange={e => setRentalEndM(parseInt(e.target.value))}>
                            {rentalAvailEnds.map(m => <option key={m} value={m}>{fmtTime(m)}</option>)}
                          </select>
                        </div>
                      </div>
                    </div>
                  )
                )}
              </>
            )}

            {/* Guest */}
            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
                  <User size={13} className="inline mr-1" />Гость *
                </label>
                <div className="relative" ref={rentalNameRef}>
                  <input type="text" className="input" placeholder="Имя Фамилия" autoComplete="off"
                    value={rentalGuest}
                    onFocus={() => setRentalShowSugg(true)}
                    onChange={e => {
                      const val = e.target.value
                      setRentalGuest(val)
                      setRentalShowSugg(true)
                      if (rentalSearchTimer.current) clearTimeout(rentalSearchTimer.current)
                      if (val.trim().length >= 2 && slug) {
                        rentalSearchTimer.current = setTimeout(async () => {
                          try {
                            const results = await api.guests.list(slug, val.trim())
                            setRentalDbResults(results.slice(0, 8))
                          } catch { setRentalDbResults([]) }
                        }, 300)
                      } else {
                        setRentalDbResults([])
                      }
                    }}
                  />
                  {rentalShowSugg && (rentalFiltered.length > 0 || rentalDbResults.length > 0) && (
                    <div className="absolute top-full left-0 right-0 mt-1 z-50 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-600 shadow-xl overflow-hidden max-h-52 overflow-y-auto">
                      {rentalFiltered.slice(0, 5).map(b => (
                        <button key={b.id} type="button"
                          onMouseDown={() => { setRentalGuest(b.guestName); setRentalPhone(b.guestPhone ?? ''); setRentalShowSugg(false); setRentalDbResults([]) }}
                          className="w-full flex items-center gap-2.5 px-3 py-2.5 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors text-left"
                        >
                          <div className={cn('w-2 h-2 rounded-full shrink-0', b.status === 'checked_in' ? 'bg-emerald-500' : 'bg-sky-400')} />
                          <div className="min-w-0 flex-1">
                            <p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate">{b.guestName}</p>
                            <p className="text-[11px] text-slate-400 truncate">{b.guestPhone || (b.status === 'checked_in' ? '🏠 Проживает' : '📅 Бронь')}</p>
                          </div>
                        </button>
                      ))}
                      {rentalDbResults
                        .filter(g => !rentalFiltered.some(b => b.guestName === `${g.lastName} ${g.firstName}`))
                        .map(g => (
                          <button key={g.id} type="button"
                            onMouseDown={() => { setRentalGuest(`${g.lastName} ${g.firstName}`); setRentalPhone(g.phone ?? ''); setRentalShowSugg(false); setRentalDbResults([]) }}
                            className="w-full flex items-center gap-2.5 px-3 py-2.5 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors text-left"
                          >
                            <div className="w-2 h-2 rounded-full shrink-0 bg-slate-400" />
                            <div className="min-w-0 flex-1">
                              <p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate">{g.lastName} {g.firstName}</p>
                              <p className="text-[11px] text-slate-400 truncate">{g.phone ?? 'нет телефона'}</p>
                            </div>
                          </button>
                        ))}
                    </div>
                  )}
                </div>
              </div>
              <div>
                <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
                  <Phone size={13} className="inline mr-1" />Телефон
                </label>
                <input type="tel" className="input" placeholder="+7 (999) 000-00-00"
                  value={rentalPhone} onChange={e => setRentalPhone(e.target.value)} />
              </div>
            </div>

            <div>
              <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Примечания</label>
              <textarea className="input resize-none h-16 text-sm" placeholder="Доп. пожелания..."
                value={rentalNotes} onChange={e => setRentalNotes(e.target.value)} />
            </div>

            {rentalHours > 0 && (
              <div className="rounded-xl bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-700 p-3">
                <p className="text-sm font-semibold text-brand-700 dark:text-brand-300">
                  Итого: {rentalTotal.toLocaleString('ru-RU')} ₽
                  <span className="ml-2 text-xs font-normal text-brand-500">
                    ({rentalIsFullDay ? 'весь день' : `${rentalHours} ч × ${rentalObj.pricePerHour} ₽`})
                  </span>
                </p>
              </div>
            )}
          </div>
        )}

        {/* ── ROOM FORM ── */}
        {bookingType === 'room' && (<>
        <div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
          {/* ── LEFT COLUMN ── */}
          <div className="flex-1 space-y-4 min-w-0">

            {/* 1. Даты заезда / выезда */}
            <div>
              <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
                Даты проживания
              </label>
              {isHourly && room?.allowHourly ? (
                <div className="space-y-3">
                  <input
                    type="date"
                    className="input"
                    value={hourlyDate}
                    onChange={e => setHourlyDate(e.target.value)}
                  />
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-xs text-slate-500 dark:text-slate-400 mb-1">Начало</label>
                      <select className="input" value={startHour} onChange={e => setStartHour(parseInt(e.target.value))}>
                        {HOURS.map(h => <option key={h} value={h}>{String(h).padStart(2, '0')}:00</option>)}
                      </select>
                    </div>
                    <div>
                      <label className="block text-xs text-slate-500 dark:text-slate-400 mb-1">Конец</label>
                      <select className="input" value={endHour} onChange={e => setEndHour(parseInt(e.target.value))}>
                        {HOURS.filter(h => h > startHour).map(h => <option key={h} value={h}>{String(h).padStart(2, '0')}:00</option>)}
                      </select>
                    </div>
                  </div>
                </div>
              ) : (
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="block text-xs text-slate-500 dark:text-slate-400 mb-1">Заезд *</label>
                    <input
                      type="date" className="input"
                      value={form.checkIn}
                      onChange={e => {
                        const newCheckIn = e.target.value
                        set('checkIn', newCheckIn)
                        if (newCheckIn && (!form.checkOut || form.checkOut <= newCheckIn)) {
                          set('checkOut', format(addDays(new Date(newCheckIn), 1), 'yyyy-MM-dd'))
                        }
                      }}
                    />
                  </div>
                  <div>
                    <label className="block text-xs text-slate-500 dark:text-slate-400 mb-1">Выезд *</label>
                    <input
                      type="date" className="input"
                      value={form.checkOut}
                      onChange={e => set('checkOut', e.target.value)}
                    />
                  </div>
                </div>
              )}
            </div>

            {/* 2. Категория номера */}
            <div>
              <div className="flex items-center justify-between mb-2">
                <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300">
                  Категория номера
                </label>
                <button
                  type="button"
                  onClick={() => setShowFloorMap(true)}
                  className="flex items-center gap-1 text-xs text-brand-600 dark:text-brand-400 hover:underline"
                >
                  <Map size={12} /> Поэтажный план
                </button>
              </div>
              <div className="grid grid-cols-2 gap-2">
                {categories.map(cat => {
                  const isSelected = selectedCategory === cat.type
                  const hasAvailable = cat.free > 0
                  const datesSet = !!(form.checkIn && form.checkOut && form.checkIn < form.checkOut)
                  return (
                    <button
                      key={cat.type}
                      type="button"
                      onClick={() => handleCategorySelect(cat.type)}
                      className={cn(
                        'relative text-left px-3 py-2.5 rounded-xl border-2 transition-all',
                        isSelected
                          ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20'
                          : hasAvailable || !datesSet
                            ? 'border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-700/40 hover:border-brand-300 dark:hover:border-brand-600'
                            : 'border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/40 opacity-60 cursor-default',
                      )}
                    >
                      <p className={cn(
                        'text-sm font-medium leading-tight',
                        isSelected ? 'text-brand-700 dark:text-brand-300' : 'text-slate-700 dark:text-slate-300',
                        !hasAvailable && datesSet && 'text-slate-400 dark:text-slate-500',
                      )}>
                        {cat.type}
                      </p>
                      <p className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">
                        от {cat.minRate.toLocaleString('ru-RU')} ₽/ночь
                      </p>
                      {datesSet && (
                        <span className={cn(
                          'absolute top-2 right-2 text-[10px] font-semibold px-1.5 py-0.5 rounded-full',
                          hasAvailable
                            ? 'bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-400'
                            : 'bg-slate-100 dark:bg-slate-700 text-slate-400',
                        )}>
                          {hasAvailable ? `${cat.free} св.` : 'занято'}
                        </span>
                      )}
                    </button>
                  )
                })}
              </div>

              {/* Переключатель конкретного номера */}
              {selectedCategory && (
                <div className="mt-3 flex items-center justify-between">
                  <label className="flex items-center gap-2 cursor-pointer select-none">
                    <div
                      role="switch"
                      aria-checked={pickSpecificRoom}
                      onClick={() => handlePickSpecificToggle(!pickSpecificRoom)}
                      className={cn(
                        'relative w-9 h-5 rounded-full transition-colors',
                        pickSpecificRoom ? 'bg-brand-600' : 'bg-slate-300 dark:bg-slate-600',
                      )}
                    >
                      <span className={cn(
                        'absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform',
                        pickSpecificRoom && 'translate-x-4',
                      )} />
                    </div>
                    <span className="text-sm text-slate-600 dark:text-slate-400">Выбрать конкретный номер</span>
                  </label>
                </div>
              )}

              {/* Выпадающий список конкретных номеров */}
              {pickSpecificRoom && selectedCategory && (
                <div className="mt-2">
                  {categoryAvailableRooms.length > 0 ? (
                    <select
                      value={form.roomId}
                      onChange={e => set('roomId', e.target.value)}
                      className="input"
                    >
                      {categoryAvailableRooms.map(r => (
                        <option key={r.id} value={r.id}>
                          №{r.number}{r.floor ? `, ${r.floor} эт.` : ''} — {r.baseRate.toLocaleString('ru-RU')} ₽/ночь
                          {r.allowHourly ? ` · ${(r.hourlyRate ?? 0).toLocaleString('ru-RU')} ₽/ч` : ''}
                        </option>
                      ))}
                    </select>
                  ) : (
                    <div className="flex items-center gap-2 p-2.5 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 text-xs text-amber-700 dark:text-amber-300">
                      <AlertCircle size={13} className="shrink-0" />
                      Нет свободных номеров в этой категории на выбранные даты
                    </div>
                  )}
                </div>
              )}

              {/* Почасово / посуточно — только если у выбранного номера есть почасовая ставка */}
              {showHourlyTab && (
                <div className="mt-3 flex rounded-lg overflow-hidden border border-slate-200 dark:border-slate-600">
                  <button
                    type="button"
                    onClick={() => setIsHourly(false)}
                    className={cn(
                      'flex-1 py-1.5 text-sm font-medium transition-colors',
                      !isHourly
                        ? 'bg-brand-600 text-white'
                        : 'bg-white dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600',
                    )}
                  >
                    Посуточно
                  </button>
                  <button
                    type="button"
                    onClick={() => setIsHourly(true)}
                    className={cn(
                      'flex-1 py-1.5 text-sm font-medium transition-colors',
                      isHourly
                        ? 'bg-brand-600 text-white'
                        : 'bg-white dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600',
                    )}
                  >
                    Почасово
                  </button>
                </div>
              )}
            </div>

          </div>

          {/* ── RIGHT COLUMN ── */}
          <div className="flex-1 space-y-4 min-w-0">

            {/* Гость */}
            <div>
              <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
                Гость
              </label>
              <div className="grid grid-cols-3 gap-2">
                <div>
                  <label className="block text-xs text-slate-500 dark:text-slate-400 mb-1">Фамилия *</label>
                  <input
                    type="text" className="input" placeholder="Иванов"
                    value={form.lastName}
                    onChange={e => set('lastName', e.target.value)}
                  />
                </div>
                <div>
                  <label className="block text-xs text-slate-500 dark:text-slate-400 mb-1">Имя *</label>
                  <input
                    type="text" className="input" placeholder="Иван"
                    value={form.firstName}
                    onChange={e => set('firstName', e.target.value)}
                  />
                </div>
                <div>
                  <label className="block text-xs text-slate-500 dark:text-slate-400 mb-1">Отчество</label>
                  <input
                    type="text" className="input" placeholder="Иванович"
                    value={form.middleName}
                    onChange={e => set('middleName', e.target.value)}
                  />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-2 mt-2">
                <div>
                  <label className="block text-xs text-slate-500 dark:text-slate-400 mb-1">Телефон</label>
                  <input
                    type="tel" className="input" placeholder="+7 (999) 000-00-00"
                    value={form.phone}
                    onChange={e => set('phone', e.target.value)}
                  />
                </div>
                <div>
                  <label className="block text-xs text-slate-500 dark:text-slate-400 mb-1">Email</label>
                  <input
                    type="email" className="input" placeholder="guest@example.com"
                    value={form.guestEmail}
                    onChange={e => set('guestEmail', e.target.value)}
                  />
                </div>
              </div>
              <div className="grid grid-cols-3 gap-2 mt-2">
                <div>
                  <label className="block text-xs text-slate-500 dark:text-slate-400 mb-1">Взрослых</label>
                  <input
                    type="number" min={1} max={room?.maxGuests ?? 6} className="input"
                    value={form.adults}
                    onChange={e => set('adults', parseInt(e.target.value) || 1)}
                  />
                </div>
                <div>
                  <label className="block text-xs text-slate-500 dark:text-slate-400 mb-1">Детей</label>
                  <input
                    type="number" min={0} max={4} className="input"
                    value={form.children}
                    onChange={e => set('children', parseInt(e.target.value) || 0)}
                  />
                </div>
                <div>
                  <label className="block text-xs text-slate-500 dark:text-slate-400 mb-1">Статус</label>
                  <select
                    className="input"
                    value={form.status}
                    onChange={e => set('status', e.target.value as BookingStatus)}
                  >
                    {(Object.entries(BOOKING_STATUS_LABELS) as [BookingStatus, string][]).map(([k, v]) => (
                      <option key={k} value={k}>{v}</option>
                    ))}
                  </select>
                </div>
              </div>
            </div>

            {/* Доп. места */}
            <div className="flex items-center justify-between px-3 py-2.5 rounded-xl bg-slate-50 dark:bg-slate-700/40 border border-slate-200 dark:border-slate-600">
              <div className="flex items-center gap-2">
                <BedDouble size={15} className="text-slate-400 shrink-0" />
                <div>
                  <p className="text-sm font-medium text-slate-700 dark:text-slate-300 leading-tight">Доп. места</p>
                  <p className="text-[10px] text-slate-400">{EXTRA_BED_PRICE.toLocaleString('ru-RU')} ₽{!isHourly && nights > 0 ? '/ночь' : ''}</p>
                </div>
              </div>
              <div className="flex items-center gap-1.5">
                {extraBeds > 0 && (
                  <span className="text-[10px] font-medium text-amber-600 dark:text-amber-400">
                    +{extraBedsTotal.toLocaleString('ru-RU')}₽
                  </span>
                )}
                <button type="button" onClick={() => setExtraBeds(e => Math.max(0, e - 1))}
                  className="w-6 h-6 rounded-md bg-slate-200 dark:bg-slate-600 flex items-center justify-center hover:bg-slate-300 dark:hover:bg-slate-500 transition-colors disabled:opacity-40"
                  disabled={extraBeds === 0}
                ><Minus size={11} /></button>
                <span className="w-4 text-center text-sm font-semibold text-slate-900 dark:text-slate-100">{extraBeds}</span>
                <button type="button" onClick={() => setExtraBeds(e => Math.min(4, e + 1))}
                  className="w-6 h-6 rounded-md bg-slate-200 dark:bg-slate-600 flex items-center justify-center hover:bg-slate-300 dark:hover:bg-slate-500 transition-colors disabled:opacity-40"
                  disabled={extraBeds >= 4}
                ><Plus size={11} /></button>
              </div>
            </div>

            {/* Статус гостя (теги) */}
            <div>
              <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
                Статус гостя
              </label>
              <div className="flex flex-wrap gap-1.5">
                {GUEST_TAGS.map(tag => {
                  const isVip = tag === 'VIP'
                  const selected = guestTags.includes(tag)
                  return (
                    <button
                      key={tag}
                      type="button"
                      onClick={() => toggleTag(tag)}
                      className={cn(
                        'flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium border transition-colors',
                        selected
                          ? isVip
                            ? 'bg-amber-500 border-amber-500 text-white'
                            : 'bg-brand-600 border-brand-600 text-white'
                          : 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-300 hover:border-brand-400',
                      )}
                    >
                      {isVip && <Star size={10} className={selected ? 'text-white' : 'text-amber-500'} />}
                      {tag}
                    </button>
                  )
                })}
              </div>
            </div>

            {/* TV Message */}
            {tvEnabled && existing && existing.roomId && (
              <div className="rounded-xl border border-violet-200 dark:border-violet-800/60 bg-violet-50 dark:bg-violet-900/20 p-3 space-y-2">
                <div className="flex items-center gap-2">
                  <Tv2 size={14} className="text-violet-600 dark:text-violet-400 shrink-0" />
                  <span className="text-sm font-medium text-violet-700 dark:text-violet-300">TV-сообщение</span>
                </div>
                <textarea
                  rows={2}
                  value={tvMsg}
                  onChange={e => setTvMsg(e.target.value)}
                  placeholder="Сообщение гостю..."
                  className="w-full rounded-lg border border-violet-200 dark:border-violet-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 resize-none focus:outline-none focus:ring-2 focus:ring-violet-400"
                />
                <div className="flex items-center gap-2">
                  <button
                    type="button"
                    onClick={handleSendTv}
                    disabled={tvSending || !tvMsg.trim()}
                    className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-violet-600 hover:bg-violet-700 disabled:opacity-50 text-white text-xs font-medium transition-colors"
                  >
                    {tvSending ? <Loader2 size={12} className="animate-spin" /> : <Send size={12} />}
                    Отправить
                  </button>
                  {tvSent && (
                    <span className="flex items-center gap-1 text-xs text-emerald-600 dark:text-emerald-400">
                      <CheckCircle2 size={12} /> Отправлено
                    </span>
                  )}
                  {tvError && <span className="text-xs text-red-500">{tvError}</span>}
                </div>
              </div>
            )}
          </div>
        </div>

        {/* ── BOTTOM: Примечания + Оплата (полная ширина) ── */}
        <div className="border-t border-slate-200 dark:border-slate-700 pt-4 space-y-3">
          {/* Примечания */}
          <div>
            <label className="block text-xs text-slate-500 dark:text-slate-400 mb-1">Примечания</label>
            <textarea
              className="input resize-none"
              rows={2}
              placeholder="Дополнительные пожелания..."
              value={form.notes}
              onChange={e => set('notes', e.target.value)}
            />
          </div>

          {/* Оплата — горизонтальная полоса */}
          <div className="rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700/40 px-4 py-3">
            <div className="flex flex-wrap items-end gap-4">
              {/* Способ оплаты */}
              <div className="shrink-0">
                <p className="text-xs text-slate-500 dark:text-slate-400 mb-1.5">Способ оплаты</p>
                <div className="flex gap-2">
                  <button
                    type="button"
                    onClick={() => setPaymentMethod(p => p === 'cash' ? null : 'cash')}
                    className={cn(
                      'flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors',
                      paymentMethod === 'cash'
                        ? 'bg-emerald-600 text-white border-emerald-600'
                        : 'bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600 hover:border-emerald-400',
                    )}
                  >
                    <Banknote size={14} /> Наличные
                  </button>
                  <button
                    type="button"
                    onClick={() => setPaymentMethod(p => p === 'terminal' ? null : 'terminal')}
                    className={cn(
                      'flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors',
                      paymentMethod === 'terminal'
                        ? 'bg-blue-600 text-white border-blue-600'
                        : 'bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600 hover:border-blue-400',
                    )}
                  >
                    <CreditCard size={14} /> Терминал
                  </button>
                </div>
              </div>

              {/* Скидка */}
              <div className="shrink-0 min-w-[160px]">
                <p className="text-xs text-slate-500 dark:text-slate-400 mb-1.5 flex items-center gap-1"><Tag size={11} /> Скидка</p>
                <select
                  className="input text-sm"
                  value={selectedDiscountId}
                  onChange={e => setSelectedDiscountId(e.target.value)}
                >
                  <option value="">— Без скидки —</option>
                  {activeDiscounts.map(d => (
                    <option key={d.id} value={d.id}>
                      {d.name} ({d.value === 100 ? 'Бесплатно' : `−${d.value}${d.valueType === 'percent' ? '%' : ' ₽'}`})
                    </option>
                  ))}
                </select>
              </div>

              {/* Доп. услуги */}
              <div className="shrink-0 min-w-[180px]">
                <p className="text-xs text-slate-500 dark:text-slate-400 mb-1.5">Доп. услуги</p>
                <div className="flex gap-2">
                  <select
                    className="input flex-1 text-sm"
                    value={selectedServiceId}
                    onChange={e => setSelectedServiceId(e.target.value)}
                  >
                    {ADDITIONAL_SERVICES.map(s => (
                      <option key={s.id} value={s.id}>{s.label} — {s.price.toLocaleString('ru-RU')} ₽</option>
                    ))}
                  </select>
                  <button type="button" onClick={addService} className="btn-secondary px-2 shrink-0">
                    <Plus size={14} />
                  </button>
                </div>
                {addedServices.length > 0 && (
                  <div className="mt-1.5 space-y-1">
                    {addedServices.map(s => (
                      <div key={s.id} className="flex items-center justify-between text-xs px-2 py-0.5 rounded bg-white dark:bg-slate-700">
                        <span className="text-slate-600 dark:text-slate-300">{s.label} × {s.qty}</span>
                        <div className="flex items-center gap-1.5">
                          <span className="font-medium">{(s.price * s.qty).toLocaleString('ru-RU')} ₽</span>
                          <button type="button" onClick={() => removeService(s.id)} className="text-slate-400 hover:text-red-500">
                            <Trash2 size={10} />
                          </button>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              {/* Оплачено */}
              <div className="shrink-0">
                <p className="text-xs text-slate-500 dark:text-slate-400 mb-1.5">Оплачено (₽)</p>
                <input
                  type="number" min={0} max={total}
                  className="input w-32"
                  value={paidAmount}
                  onChange={e => setPaidAmount(Math.min(total, Math.max(0, parseInt(e.target.value) || 0)))}
                />
              </div>

              {/* Итого */}
              {room && total > 0 && (
                <div className="ml-auto text-right shrink-0">
                  {room && (
                    <p className="text-xs text-slate-400 mb-0.5">
                      {isHourly && room.allowHourly
                        ? `${hourlyHours} ч × ${(room.hourlyRate ?? 0).toLocaleString('ru-RU')} ₽`
                        : `${nights} ${nights === 1 ? 'ночь' : nights < 5 ? 'ночи' : 'ночей'} × ${room.baseRate.toLocaleString('ru-RU')} ₽`
                      }
                      {discountAmount > 0 && ` − ${discountAmount.toLocaleString('ru-RU')} ₽`}
                    </p>
                  )}
                  <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
                    {total.toLocaleString('ru-RU')} ₽
                  </p>
                  {paidAmount > 0 && (
                    <p className="text-xs text-emerald-600 dark:text-emerald-400">
                      Оплачено {paidAmount.toLocaleString('ru-RU')} ₽
                    </p>
                  )}
                  {debt > 0 && (
                    <p className="text-xs text-red-500 flex items-center gap-1 justify-end">
                      <AlertCircle size={11} />
                      {isFutureBooking ? 'Задолженность' : 'Долг'} {debt.toLocaleString('ru-RU')} ₽
                    </p>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>
        {/* end room form */}
        </>)}

        </div>

      </Modal>

      {showFloorMap && (
        <FloorMapModal
          rooms={rooms}
          selectedRoomId={form.roomId}
          onSelectRoom={(id) => { set('roomId', id); setShowFloorMap(false) }}
          onClose={() => setShowFloorMap(false)}
        />
      )}
    </>
  )
}