/* Shell components: Sidebar, Topbar, KPI strip, Subbar, Modals, Drawer */
const { useState, useEffect, useMemo, useRef, useCallback } = React;
const { fmtTime, durationLabel, initials, STATUS_LABEL } = window.SEATIQ_HELPERS;

// ---------- Sidebar ----------
function Sidebar({ active, onChange, visible }) {
  const items = [
    { id: 'home',     icon: 'home',     badge: 0 },
    { id: 'res',      icon: 'calendar', badge: 0 },
    { id: 'guests',   icon: 'users',    badge: 0 },
    { id: 'stats',    icon: 'chart',    badge: 0 },
    { id: 'gift',     icon: 'gift',     badge: 0 },
    { id: 'menu',     icon: 'menu-book',badge: 0 },
    { id: 'comms',    icon: 'megaphone',badge: 2 },
  ];
  return (
    <aside className={`sidebar ${visible ? '' : 'collapsed'}`}>
      <button className="sb-logo" onClick={() => onChange('home')} title="Seatiq">S</button>
      {items.map(it => (
        <button key={it.id}
          className={`sb-item ${active === it.id ? 'active' : ''}`}
          onClick={() => onChange(it.id)}
          title={it.id}>
          <Icon name={it.icon} size={20} stroke={1.8} />
          {it.badge > 0 && <span className="dot" />}
        </button>
      ))}
      <div className="sb-spacer" />
      <button className={`sb-item ${active === 'settings' ? 'active' : ''}`}
        title="Indstillinger" onClick={() => onChange('settings')}>
        <Icon name="settings" size={20} stroke={1.8} />
      </button>
      <button className="sb-item" title="Log ud"><Icon name="logout" size={20} stroke={1.8} /></button>
    </aside>
  );
}

// ---------- Top bar ----------
function TopBar({ view, onView, page, onMenu, onWaitlist, waitlistCount, notifications, onBell, notifOpen, tenantName, userEmail, onSignOut }) {
  const views = [
    { id: 'day',   label: 'Dagsoversigt' },
    { id: 'floor', label: 'Bordplan' },
    { id: 'list',  label: 'Liste' },
    { id: 'month', label: 'Måned' },
  ];
  const [menuOpen, setMenuOpen] = React.useState(false);
  const initials = (userEmail || '?').split('@')[0].slice(0,2).toUpperCase();
  return (
    <div className="topbar">
      <div className="topbar-left">
        <button className="btn-icon" onClick={onMenu} title="Sidebar"><Icon name="sidebar" size={18}/></button>
        <div className="brandmark">SEATIQ<span className="dot">.</span></div>
        <div style={{height: 24, width: 1, background: 'var(--line)'}}/>
        <div style={{display: 'flex', flexDirection: 'column'}}>
          <div style={{fontFamily: 'var(--display)', fontWeight: 800, fontSize: 15, letterSpacing: '-0.02em', lineHeight: 1}}>{(tenantName || 'Restaurant').toUpperCase()}</div>
          <div style={{fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginTop: 3}}>{userEmail || 'Service-overblik'}</div>
        </div>
      </div>
      <div className="topbar-center">
        {page === 'res' && views.map(v => (
          <button key={v.id}
            className={`tab ${view === v.id ? 'active' : ''}`}
            onClick={() => onView(v.id)}>
            {v.label}
          </button>
        ))}
      </div>
      <div className="topbar-right">
        <button className="btn btn-ghost" onClick={onWaitlist}>
          <Icon name="clock" size={15}/> Venteliste
          {waitlistCount > 0 && (
            <span style={{
              background: 'var(--danger)', color: '#fff', borderRadius: 999, padding: '1px 7px',
              fontSize: 10, fontWeight: 800, marginLeft: 2
            }}>{waitlistCount}</span>
          )}
        </button>
        <button className="btn-icon" title="Notifikationer" onClick={onBell} style={{position: 'relative'}}>
          <Icon name="bell" size={18}/>
          {notifications?.unread > 0 && <span className="bell-badge">{notifications.unread}</span>}
        </button>
        <div style={{position: 'relative'}}>
          <button
            onClick={() => setMenuOpen(v => !v)}
            title={userEmail || 'Konto'}
            style={{
              width: 34, height: 34, borderRadius: 100, background: 'var(--ink)', color: 'var(--bg)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700,
              border: 0, cursor: 'pointer'
            }}>{initials}</button>
          {menuOpen && (
            <>
              <div style={{position: 'fixed', inset: 0, zIndex: 64}} onClick={() => setMenuOpen(false)}/>
              <div style={{
                position: 'absolute', top: 42, right: 0, zIndex: 65,
                background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12,
                boxShadow: 'var(--shadow-lg)', minWidth: 220, padding: 8
              }}>
                <div style={{padding: '8px 10px', borderBottom: '1px solid var(--line)', marginBottom: 6}}>
                  <div style={{fontWeight: 700, fontSize: 13}}>{userEmail}</div>
                  <div style={{fontSize: 11, color: 'var(--muted)', marginTop: 2}}>{tenantName || ''}</div>
                </div>
                <button className="btn btn-soft" style={{width: '100%', justifyContent: 'flex-start'}}
                  onClick={() => { setMenuOpen(false); onSignOut?.(); }}>
                  <Icon name="logout" size={14}/> Log ud
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// ---------- KPI strip ----------
function KPIStrip({ stats, onNewReservation, onWalkin }) {
  return (
    <div className="kpi-strip">
      <div className="kpi">
        <div className="kpi-label">Reservationer</div>
        <div className="kpi-value">{stats.reservations}</div>
        <div className="kpi-sub"><span className="pos">+3</span> vs. sidste tirsdag</div>
      </div>
      <div className="kpi">
        <div className="kpi-label">Covers</div>
        <div className="kpi-value">{stats.covers} <span className="unit">/ 60</span></div>
        <div className="kpi-sub">{Math.round(stats.covers/60*100)}% kapacitet</div>
      </div>
      <div className="kpi">
        <div className="kpi-label">Siddende nu</div>
        <div className="kpi-value">{stats.seated}</div>
        <div className="kpi-sub">{stats.arriving} på vej</div>
      </div>
      <div className="kpi">
        <div className="kpi-label">Forventet omsætning</div>
        <div className="kpi-value">{stats.revenue.toLocaleString('da-DK')}<span className="unit">kr</span></div>
        <div className="kpi-sub">Snit 685 kr / cover</div>
      </div>
      <div className="kpi">
        <div className="kpi-label">No-shows (30 d)</div>
        <div className="kpi-value">2,4<span className="unit">%</span></div>
        <div className="kpi-sub"><span className="pos">−0,8pp</span> mod sidste md.</div>
      </div>
      <div className="kpi action">
        <button className="btn btn-soft" title="Walk-in" onClick={onWalkin}><Icon name="bolt" size={15}/> Walk-in</button>
        <button className="btn btn-primary" onClick={onNewReservation}><Icon name="plus" size={15}/> Ny reservation</button>
      </div>
    </div>
  );
}

// ---------- Subbar (date + filters) ----------
function Subbar({ date, onDate, filter, onFilter, granularity, onGran, view }) {
  const fmt = new Intl.DateTimeFormat('da-DK', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
  const label = fmt.format(date).toUpperCase();
  const shift = (days) => {
    const d = new Date(date); d.setDate(d.getDate() + days); onDate(d);
  };
  return (
    <div className="subbar">
      <div className="date-picker">
        <button className="arrow" onClick={() => shift(-1)}><Icon name="chev-left" size={14}/></button>
        <span className="dlabel">{label}</span>
        <button className="arrow" onClick={() => shift(1)}><Icon name="chev-right" size={14}/></button>
      </div>
      <button className="btn btn-soft" onClick={() => onDate(new Date(2026, 4, 18))}>I dag</button>
      <div style={{flex: 1}} />

      {view === 'day' && (
        <>
          <div className="subbar-segs">
            {['Alle','Frokost','Aften','Bar'].map(f => (
              <button key={f}
                className={filter === f ? 'active' : ''}
                onClick={() => onFilter(f)}>{f}</button>
            ))}
          </div>
          <div className="subbar-segs">
            {[15, 30, 60].map(g => (
              <button key={g}
                className={granularity === g ? 'active' : ''}
                onClick={() => onGran(g)}>{g}m</button>
            ))}
          </div>
        </>
      )}
      <div className="search">
        <Icon name="search" size={15}/>
        <input placeholder="Søg gæst, telefon, bord…" />
      </div>
    </div>
  );
}

// ---------- New reservation modal ----------
function NewReservationModal({ onClose, onCreate, tables, defaultStart = 18*60 }) {
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [pax, setPax] = useState(2);
  const [start, setStart] = useState(defaultStart);
  const [table, setTable] = useState('');
  const [notes, setNotes] = useState('');

  const times = [];
  for (let m = 11*60; m <= 22*60; m += 15) times.push(m);

  const candidateTables = tables.filter(t => pax >= t.cap[0] && pax <= t.cap[1]);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" style={{width: 540}} onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <h3>NY RESERVATION</h3>
          <p>Bekræft straks · sendes via SMS og email til gæsten</p>
        </div>
        <div className="modal-body">
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12}}>
            <div className="field">
              <label>Gæst</label>
              <input value={name} onChange={e => setName(e.target.value)} placeholder="Fulde navn" />
            </div>
            <div className="field">
              <label>Telefon</label>
              <input value={phone} onChange={e => setPhone(e.target.value)} placeholder="+45 ..." />
            </div>
          </div>

          <div className="field">
            <label>Antal gæster</label>
            <div className="pax-picker">
              {[1,2,3,4,5,6,7,8].map(n => (
                <button key={n}
                  className={pax === n ? 'active' : ''}
                  onClick={() => setPax(n)}>{n}</button>
              ))}
            </div>
          </div>

          <div className="field">
            <label>Tidspunkt</label>
            <div className="time-picker">
              {times.map(m => (
                <button key={m}
                  className={start === m ? 'active' : ''}
                  onClick={() => setStart(m)}>{fmtTime(m)}</button>
              ))}
            </div>
          </div>

          <div className="field">
            <label>Bord (foreslået · klik for at vælge)</label>
            <div style={{display: 'flex', gap: 6, flexWrap: 'wrap'}}>
              <button
                className={`chip ${table === '' ? 'active' : ''}`}
                onClick={() => setTable('')}>Automatisk</button>
              {candidateTables.map(t => (
                <button key={t.id}
                  className={`chip ${table === t.id ? 'active' : ''}`}
                  onClick={() => setTable(t.id)}>
                  {t.name} <span style={{opacity:0.6, marginLeft:4}}>· {t.cap[0]}-{t.cap[1]}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="field">
            <label>Noter</label>
            <textarea rows={2} value={notes} onChange={e => setNotes(e.target.value)} placeholder="Allergier, fødselsdag, ønsker..." />
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn btn-ghost" onClick={onClose}>Annuller</button>
          <button className="btn btn-accent" onClick={() => {
            if (!name) { alert('Indtast navn'); return; }
            const selectedTable = table || candidateTables[0]?.id || tables[0].id;
            onCreate({ name, phone, pax, start, end: start + 105, table: selectedTable, notes, status: 'confirmed' });
            onClose();
          }}><Icon name="check" size={15}/> Bekræft reservation</button>
        </div>
      </div>
    </div>
  );
}

// ---------- Walk-in modal ----------
function WalkinModal({ onClose, onCreate, tables }) {
  const [name, setName] = useState('');
  const [pax, setPax] = useState(2);
  const [table, setTable] = useState('');
  const candidateTables = tables.filter(t => pax >= t.cap[0] && pax <= t.cap[1]);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <h3>WALK-IN</h3>
          <p>Sæt en gæst direkte til bords · ingen bekræftelse sendes</p>
        </div>
        <div className="modal-body">
          <div className="field">
            <label>Navn (valgfrit — bruges på regningen)</label>
            <input value={name} onChange={e => setName(e.target.value)} placeholder="Walk-in" />
          </div>
          <div className="field">
            <label>Antal gæster</label>
            <div className="pax-picker">
              {[1,2,3,4,5,6,7,8].map(n => (
                <button key={n}
                  className={pax === n ? 'active' : ''}
                  onClick={() => setPax(n)}>{n}</button>
              ))}
            </div>
          </div>
          <div className="field">
            <label>Bord</label>
            <div style={{display: 'flex', gap: 6, flexWrap: 'wrap'}}>
              {candidateTables.map(t => (
                <button key={t.id}
                  className={`chip ${table === t.id ? 'active' : ''}`}
                  onClick={() => setTable(t.id)}>
                  {t.name}
                </button>
              ))}
              {candidateTables.length === 0 && <span style={{color: 'var(--muted)', fontSize: 13}}>Ingen ledige borde lige nu — føj til venteliste.</span>}
            </div>
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn btn-ghost" onClick={onClose}>Annuller</button>
          <button className="btn btn-accent" onClick={() => {
            const t = table || candidateTables[0]?.id;
            if (!t) { alert('Vælg et bord'); return; }
            onCreate({ name: name || 'Walk-in', phone: '', pax, table: t, notes: '' });
            onClose();
          }}><Icon name="bolt" size={15}/> Sæt til bords</button>
        </div>
      </div>
    </div>
  );
}

// ---------- Reservation drawer ----------
function ReservationDrawer({ res, table, onClose, onStatusChange, onDelete }) {
  if (!res) return null;
  const guestSinceMin = 24; // mock minutes since seated
  const totalMin = res.end - res.start;
  const elapsed = Math.min(1, Math.max(0, guestSinceMin / totalMin));

  const statusFlow = ['confirmed','arriving','seated','finished'];
  const idx = statusFlow.indexOf(res.status);

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose} />
      <div className="drawer">
        <div className="drawer-head">
          <div>
            <div className="subtitle">{fmtTime(res.start)} – {fmtTime(res.end)} · {durationLabel(res.start, res.end)} · {res.pax} pers</div>
            <div className="title">{res.name}</div>
            <div style={{marginTop: 10, display: 'flex', gap: 6, flexWrap: 'wrap'}}>
              <span className={`status-chip ${res.status}`}>
                <span style={{width: 6, height: 6, borderRadius: 100, background: 'currentColor'}}/>
                {STATUS_LABEL[res.status]}
              </span>
              {res.tags?.map(t => <span key={t} className="tag-pill">{t}</span>)}
            </div>
          </div>
          <button className="btn-icon" onClick={onClose}><Icon name="x" size={18}/></button>
        </div>
        <div className="drawer-body">
          <div className="drawer-section">
            <h4>Status</h4>
            <div className="timeline-mini">
              {statusFlow.map((s, i) => (
                <div key={s} className={`step ${i < idx ? 'done' : ''} ${i === idx ? 'now' : ''}`} />
              ))}
            </div>
            <div className="step-labels">
              <span>Bekræftet</span><span>Ankommer</span><span>Siddende</span><span>Færdig</span>
            </div>
            <div className="status-actions">
              {res.status === 'confirmed' && <button className="primary" onClick={() => onStatusChange(res.id, 'arriving')}><Icon name="bolt" size={13}/> Markér som ankommet</button>}
              {res.status === 'arriving' && <button className="primary" onClick={() => onStatusChange(res.id, 'seated')}><Icon name="check" size={13}/> Sæt til bords</button>}
              {res.status === 'seated' && <button className="primary" onClick={() => onStatusChange(res.id, 'finished')}><Icon name="check-circle" size={13}/> Færdig & betalt</button>}
              {res.status !== 'finished' && <button onClick={() => onStatusChange(res.id, 'late')}><Icon name="clock" size={13}/> Forsinket</button>}
            </div>
          </div>

          <div className="drawer-section">
            <h4>Bord & detaljer</h4>
            <div className="kv-row"><div className="k">Bord</div><div className="v">{table?.name || '—'} <span style={{color: 'var(--muted)', fontWeight: 400}}>· {table?.room}</span></div></div>
            <div className="kv-row"><div className="k">Varighed</div><div className="v">{durationLabel(res.start, res.end)}</div></div>
            <div className="kv-row"><div className="k">Kilde</div><div className="v">{res.source}</div></div>
            <div className="kv-row"><div className="k">Oprettet</div><div className="v">{res.created}</div></div>
            {res.deposit > 0 && <div className="kv-row"><div className="k">Depositum</div><div className="v" style={{color: 'var(--accent-deep)'}}>{res.deposit.toLocaleString('da-DK')} kr betalt</div></div>}
          </div>

          <div className="drawer-section">
            <h4>Kontakt</h4>
            <div style={{display: 'flex', gap: 8}}>
              <a className="btn btn-soft" style={{flex: 1, justifyContent: 'center'}} href={`tel:${res.phone}`}><Icon name="phone" size={14}/> Ring</a>
              <a className="btn btn-soft" style={{flex: 1, justifyContent: 'center'}} href={`sms:${res.phone}`}><Icon name="message" size={14}/> SMS</a>
              <a className="btn btn-soft" style={{flex: 1, justifyContent: 'center'}} href={`mailto:${res.email}`}><Icon name="mail" size={14}/> Email</a>
            </div>
            <div className="kv-row"><div className="k">Telefon</div><div className="v">{res.phone}</div></div>
            <div className="kv-row"><div className="k">Email</div><div className="v">{res.email}</div></div>
          </div>

          {(res.notes || res.allergies?.length) && (
            <div className="drawer-section">
              <h4>Noter & allergier</h4>
              {res.allergies?.length > 0 && (
                <div style={{marginBottom: 8}}>
                  {res.allergies.map(a => <span key={a} className="tag-pill allergy"><Icon name="no-entry" size={11}/> {a}</span>)}
                </div>
              )}
              {res.notes && <div style={{fontSize: 13, color: 'var(--ink-2)', padding: '8px 12px', background: 'var(--surface-2)', borderRadius: 10, lineHeight: 1.5}}>{res.notes}</div>}
            </div>
          )}

          <div className="drawer-section">
            <h4>Seneste SMS sendt</h4>
            <div className="sms-preview">
              Hej {res.name.split(' ')[0]}! Vi glæder os til at se dig kl. {fmtTime(res.start)} i dag på Restaurant Hjem. Svar BEKRÆFT for at bekræfte, eller AFBUD hvis du må aflyse. Mvh, Hjem
            </div>
          </div>

          <div style={{display: 'flex', gap: 8, marginTop: 24}}>
            <button className="btn btn-ghost" style={{flex: 1, justifyContent: 'center'}}><Icon name="edit" size={14}/> Rediger</button>
            <button className="btn btn-ghost" style={{flex: 1, justifyContent: 'center', color: 'var(--danger)', borderColor: 'rgba(224,83,58,0.3)'}} onClick={() => onDelete(res.id)}><Icon name="x" size={14}/> Aflys</button>
          </div>
        </div>
      </div>
    </>
  );
}

// ---------- Waitlist panel ----------
function WaitlistPanel({ items, onClose, onSeat }) {
  return (
    <>
      <div className="drawer-backdrop" onClick={onClose} />
      <div className="waitlist">
        <div className="wl-head">
          <div>
            <div style={{fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 4}}>{items.length} grupper venter</div>
            <h3>VENTELISTE</h3>
          </div>
          <button className="btn-icon" onClick={onClose}><Icon name="x" size={18}/></button>
        </div>
        <div className="wl-list">
          {items.map(w => (
            <div key={w.id} className="wl-item">
              <div className="row1">
                <span className="name">{w.name}</span>
                <span className="status-chip arriving" style={{textTransform: 'none', letterSpacing: 0, fontSize: 11}}>{w.addedMin}m</span>
              </div>
              <div className="meta">{w.pax} pers · ønsket {fmtTime(w.requested)} · {w.phone}</div>
              {w.notes && <div style={{fontSize: 12, color: 'var(--ink-2)'}}>{w.notes}</div>}
              <div className="actions">
                <button className="primary" onClick={() => onSeat(w)}><Icon name="check" size={12}/> Sæt til bords</button>
                <button><Icon name="message" size={12}/> SMS</button>
                <button><Icon name="x" size={12}/></button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// ---------- Notifications popover ----------
function NotificationsPanel({ items, onClose, onMarkAllRead, onJump }) {
  return (
    <>
      <div style={{position: 'fixed', inset: 0, zIndex: 69}} onClick={onClose}/>
      <div className="notif-pop" onClick={e => e.stopPropagation()}>
        <div className="notif-head">
          <h3>NOTIFIKATIONER</h3>
          <button className="btn btn-soft" style={{fontSize: 12}} onClick={onMarkAllRead}>Markér alle læst</button>
        </div>
        <div className="notif-list">
          {items.length === 0 && (
            <div style={{padding: 40, textAlign: 'center', color: 'var(--muted)'}}>
              <Icon name="bell" size={32} stroke={1.5}/>
              <div style={{marginTop: 8}}>Ingen notifikationer endnu</div>
            </div>
          )}
          {items.map(n => (
            <div key={n.id} className={`notif-item ${n.unread ? 'unread' : ''}`} onClick={() => onJump?.(n)}>
              <span className={`notif-icon ${n.color}`}>
                <Icon name={n.icon} size={16}/>
              </span>
              <div>
                <div className="notif-title">{n.title}</div>
                <div className="notif-meta">{n.time}{n.sub ? ` · ${n.sub}` : ''}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="notif-foot">
          <button className="btn btn-soft" onClick={onClose}>Luk</button>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { Sidebar, TopBar, KPIStrip, Subbar, NewReservationModal, WalkinModal, ReservationDrawer, WaitlistPanel, NotificationsPanel });