// WalkinDrawer — quick manual booking. Used when a guest walks up to a venue
// or when an agent needs to log a booking outside the live inventory flow.

function WalkinDrawer({ open, onClose, onCreate }) {
  const [form, setForm] = React.useState(() => emptyForm());
  React.useEffect(() => { if (open) setForm(emptyForm()); }, [open]);
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  if (!open) return null;

  const set = (patch) => setForm({ ...form, ...patch });
  const venue = form.venueId ? venueById(form.venueId) : null;
  const product = form.productId ? productById(form.productId) : null;
  const validVenueProducts = venue ? venue.products : [];

  const valid = form.venueId && form.productId && form.date && form.guests >= 1;

  const submit = () => {
    if (!valid) return;
    const newBooking = {
      id: 'b-w' + (4000 + Math.floor(Math.random() * 900)),
      source: 'Walk-in',
      operator: venue.operator,
      venue: venue.name,
      city: venue.city,
      product: form.productId,
      customer: form.customer || 'Walk-in guest',
      date: form.date,
      time: form.time || '—',
      rcvd: new Date().toISOString().slice(0,10),
      guests: form.guests,
      status: 'confirmed',
      walkIn: true,
      notes: form.notes,
    };
    onCreate(newBooking);
    onClose();
  };

  return (
    <React.Fragment>
      <div className="pp-drawer-scrim" onClick={onClose}/>
      <aside className="pp-drawer" role="dialog" aria-label="Walk-in booking">
        <header className="pp-drawer-head">
          <div className="pp-drawer-head-title">
            <span className="pp-drawer-eyebrow">Quick add · Walk-in</span>
            <h2>Log a manual booking</h2>
            <p className="pp-drawer-lede">Use this when a guest walks up to a venue or you’re recording an off-system booking. Inventory checks are skipped.</p>
          </div>
          <button className="pp-icon-btn" onClick={onClose} aria-label="Close">
            <IconClose size={16}/>
          </button>
        </header>

        <div className="pp-drawer-body">
          <section className="pp-form-section">
            <h3 className="pp-form-section-title">Where & what</h3>
            <Field label="Venue">
              <VenuePicker value={form.venueId} onChange={(id) => set({ venueId: id, productId: null })}/>
            </Field>
            <Field label="Product / booking type">
              <div className="pp-product-radio">
                {(validVenueProducts.length ? validVenueProducts : PRODUCT_TYPES.map(p => p.id)).map(pid => {
                  const p = productById(pid);
                  const G = PRODUCT_GLYPHS[pid];
                  const disabled = venue && !venue.products.includes(pid);
                  return (
                    <button key={pid} type="button"
                            className={"pp-product-radio-btn" + (form.productId === pid ? " is-active" : "") + (disabled ? " is-disabled" : "")}
                            onClick={() => !disabled && set({ productId: pid })}>
                      <G size={14}/>
                      <span>{p.name}</span>
                    </button>
                  );
                })}
              </div>
              {!venue && <div className="pp-field-hint">Pick a venue first to filter available products.</div>}
            </Field>
          </section>

          <section className="pp-form-section">
            <h3 className="pp-form-section-title">When & how many</h3>
            <Field label="Date">
              <div className="pp-cal-wrap">
                <Calendar value={form.date} onChange={(iso) => set({ date: iso })}/>
              </div>
            </Field>
            <div className="pp-form-grid pp-form-grid--2">
              <Field label="Time (optional)">
                <input className="pp-input" type="time" value={form.time}
                       onChange={(e) => set({ time: e.target.value })}/>
              </Field>
              <Field label="Guests">
                <Stepper value={form.guests} min={1} max={100} onChange={(g) => set({ guests: g })}/>
              </Field>
            </div>
          </section>

          <section className="pp-form-section">
            <h3 className="pp-form-section-title">Guest details (optional)</h3>
            <Field label="Customer name">
              <input className="pp-input" value={form.customer} placeholder="Walk-in guest"
                     onChange={(e) => set({ customer: e.target.value })}/>
            </Field>
            <Field label="Internal notes">
              <textarea className="pp-input pp-input--area" rows={2}
                        placeholder="Anything the venue should know"
                        value={form.notes}
                        onChange={(e) => set({ notes: e.target.value })}/>
            </Field>
          </section>

        </div>

        <footer className="pp-drawer-foot">
          <button type="button" className="pp-btn pp-btn--ghost" onClick={onClose}>Cancel</button>
          <button type="button" className="pp-btn pp-btn--primary" onClick={submit} disabled={!valid}>
            Save walk-in booking
          </button>
        </footer>
      </aside>
    </React.Fragment>
  );
}

function emptyForm() {
  return {
    venueId: null,
    productId: null,
    date: new Date().toISOString().slice(0,10),
    time: '',
    guests: 2,
    customer: '',
    notes: '',
  };
}

// Searchable venue picker — list grouped by operator, filterable.
function VenuePicker({ value, onChange }) {
  const [open, setOpen] = React.useState(false);
  const [filter, setFilter] = React.useState('');
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);

  const selected = value ? venueById(value) : null;
  const list = VENUES.filter(v => !filter
    || v.name.toLowerCase().includes(filter.toLowerCase())
    || v.city.toLowerCase().includes(filter.toLowerCase()));

  return (
    <div className="pp-venue-picker" ref={ref}>
      <button type="button" className={"pp-venue-picker-btn" + (open ? " is-open" : "")}
              onClick={() => setOpen(o => !o)}>
        {selected ? (
          <span className="pp-venue-picker-selected">
            <span className="pp-venue-picker-name">{selected.name}</span>
            <span className="pp-venue-picker-meta">{selected.city} · {operatorById(selected.operator).name}</span>
          </span>
        ) : (
          <span className="pp-venue-picker-placeholder">Choose a venue…</span>
        )}
        <IconChevronDn size={14}/>
      </button>
      {open && (
        <div className="pp-venue-picker-menu">
          <div className="pp-dd-search">
            <IconSearch size={13}/>
            <input autoFocus value={filter} onChange={(e) => setFilter(e.target.value)} placeholder="Filter venues…"/>
          </div>
          {OPERATORS.map(op => {
            const venues = list.filter(v => v.operator === op.id);
            if (venues.length === 0) return null;
            return (
              <div key={op.id} className="pp-venue-picker-group">
                <div className="pp-venue-picker-group-head">
                  <OperatorTag id={op.id} size="sm"/>
                  <span className="pp-muted">{venues.length}</span>
                </div>
                {venues.map(v => (
                  <button key={v.id} type="button"
                          className={"pp-dd-item pp-venue-picker-item" + (value === v.id ? " is-active" : "")}
                          onClick={() => { onChange(v.id); setOpen(false); }}>
                    <span className="pp-venue-picker-item-name">{v.name}</span>
                    <span className="pp-venue-picker-item-city">{v.city}</span>
                  </button>
                ))}
              </div>
            );
          })}
          {list.length === 0 && <div className="pp-dd-empty">No venues match “{filter}”</div>}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { WalkinDrawer });