/* global React, MonoLabel, SectionLabel, Tag, StatusTag, Btn, AdminUtil */
const { useState: usS, useMemo: usM } = React;
const fmtTime = AdminUtil.fmtTime;

// ─── Movies Page (CRUD) ─────────────────────────────────────────────────
function PageMovies({ state, setState }) {
  const [editing, setEditing] = usS(null);
  const [q, setQ] = usS('');
  const filtered = state.movies.filter(m => m.titleEn.toLowerCase().includes(q.toLowerCase()) || m.code.toLowerCase().includes(q.toLowerCase()));
  const onSave = (m) => {
    if (m.id) {
      setState(s => ({ ...s, movies: s.movies.map(x => x.id === m.id ? m : x) }));
      window.adminToast(`Updated "${m.titleEn}"`);
    } else {
      const id = 'm' + Math.random().toString(36).slice(2, 8);
      setState(s => ({ ...s, movies: [...s.movies, { ...m, id }] }));
      window.adminToast(`Added "${m.titleEn}"`);
    }
    setEditing(null);
  };
  const onDelete = (m) => {
    if (!confirm(`Delete "${m.titleEn}"?`)) return;
    setState(s => ({ ...s, movies: s.movies.filter(x => x.id !== m.id) }));
    window.adminToast(`Deleted "${m.titleEn}"`, 'err');
  };

  return (
    <div style={{display:'flex', flexDirection:'column', gap: 32}}>
      <PageHead eyebrow="Catalog" title="Movies" sub={`${state.movies.length} titles in library`}>
        <Btn variant="primary" onClick={() => setEditing({ titleEn:'', code:'', distributor:'', runtime: 120, rating:'PG' })}>+ Add Movie</Btn>
      </PageHead>
      <div className="cos-card" style={{padding: 0, overflow:'hidden'}}>
        <div style={{padding: 16, borderBottom:'1px solid var(--ink-400)'}}>
          <input className="cos-input" value={q} onChange={e => setQ(e.target.value)} placeholder="Search by title or code…"/>
        </div>
        <table style={{width:'100%', borderCollapse:'collapse'}}>
          <thead><tr style={{background:'rgba(198,161,91,0.03)', borderBottom:'1px solid var(--ink-400)'}}>
            <Th>Code</Th><Th>Title</Th><Th>Distributor</Th><Th align="right">Runtime</Th><Th>Rating</Th><Th align="right">Actions</Th>
          </tr></thead>
          <tbody>
            {filtered.map((m, i) => (
              <tr key={m.id} style={{borderBottom: i < filtered.length - 1 ? '1px solid var(--ink-400)' : 'none'}}>
                <Td><span className="cos-mono" style={{color:'var(--gold-300)'}}>{m.code}</span></Td>
                <Td><span style={{color:'var(--accent-gold)', fontWeight: 600}}>{m.titleEn}</span></Td>
                <Td><span style={{color:'var(--ink-800)'}}>{m.distributor}</span></Td>
                <Td align="right" mono>{m.runtime} min</Td>
                <Td><Tag>{m.rating}</Tag></Td>
                <Td align="right">
                  <Btn variant="quiet" onClick={() => setEditing(m)} style={{padding:'4px 12px', fontSize: 12, color:'var(--accent-gold)'}}>Edit</Btn>
                  <Btn variant="quiet" onClick={() => onDelete(m)} style={{padding:'4px 12px', fontSize: 12, color:'var(--err-soft)'}}>Delete</Btn>
                </Td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {editing && <MovieModal movie={editing} onClose={() => setEditing(null)} onSave={onSave}/>}
    </div>
  );
}

function MovieModal({ movie, onClose, onSave }) {
  const [m, setM] = usS(movie);
  return (
    <Modal onClose={onClose} title={movie.id ? 'Edit movie' : 'Add movie'}>
      <div style={{display:'flex', flexDirection:'column', gap: 14}}>
        <Field label="Title (English)"><input className="cos-input" value={m.titleEn} onChange={e => setM({...m, titleEn: e.target.value})}/></Field>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 14}}>
          <Field label="Code"><input className="cos-input" value={m.code} onChange={e => setM({...m, code: e.target.value.toUpperCase()})}/></Field>
          <Field label="Rating">
            <select className="cos-input" value={m.rating} onChange={e => setM({...m, rating: e.target.value})}>
              <option>G</option><option>PG</option><option>PG-13</option><option>R</option><option>NC-17</option>
            </select>
          </Field>
        </div>
        <Field label="Distributor"><input className="cos-input" value={m.distributor} onChange={e => setM({...m, distributor: e.target.value})}/></Field>
        <Field label="Runtime (min)"><input className="cos-input" type="number" value={m.runtime} onChange={e => setM({...m, runtime: parseInt(e.target.value) || 0})}/></Field>
      </div>
      <div style={{display:'flex', justifyContent:'flex-end', gap: 10, marginTop: 24}}>
        <Btn onClick={onClose}>Cancel</Btn>
        <Btn variant="primary" onClick={() => onSave(m)}>Save</Btn>
      </div>
    </Modal>
  );
}

// ─── Showtime Matrix Page ─────────────────────────────────────────────
function PageScheduler({ state, setState }) {
  const halls = ['STD-01', 'STD-02', 'IMAX', 'DOLBY', 'VIP'];
  const hours = Array.from({length: 13}).map((_, i) => 10 + i);
  const colW = 92;
  const movieById = usM(() => Object.fromEntries(state.movies.map(m => [m.id, m])), [state.movies]);
  const onMove = (id, deltaHrs) => {
    setState(s => ({ ...s, showtimes: s.showtimes.map(st => st.id === id ? { ...st, start: Math.max(10, Math.min(22, st.start + deltaHrs)) } : st) }));
  };
  const onCancel = (id) => {
    setState(s => ({ ...s, showtimes: s.showtimes.map(st => st.id === id ? { ...st, status: 'cancelled' } : st) }));
    window.adminToast('Showtime cancelled', 'err');
  };

  return (
    <div style={{display:'flex', flexDirection:'column', gap: 24}}>
      <PageHead eyebrow="Today" title="Showtime Matrix" sub="Today · Baghdad / Karrada">
        <Btn onClick={() => window.adminToast('Auto-balance runs in the full admin')}>Auto-balance</Btn>
        <Btn variant="primary" onClick={() => window.adminToast('Day published')}>Publish day</Btn>
      </PageHead>

      {/* Grid */}
      <div className="cos-card" style={{padding: 0, overflow:'auto'}}>
        <div style={{display:'flex', paddingLeft: 180, borderBottom:'1px solid var(--ink-400)', height: 36, alignItems:'center'}}>
          {hours.map(h => (
            <div key={h} style={{width: colW, fontFamily:'var(--font-mono)', fontSize: 10, color:'var(--ink-700)', borderLeft:'1px solid var(--ink-300)', paddingLeft: 8, height:'100%', display:'flex', alignItems:'center'}}>
              {String(h).padStart(2, '0')}:00
            </div>
          ))}
        </div>
        {halls.map((h, i) => (
          <div key={h} style={{display:'flex', height: 96, borderBottom: i < halls.length - 1 ? '1px solid var(--ink-300)' : 'none'}}>
            <div style={{width: 180, padding:'12px 16px', borderRight:'1px solid var(--ink-400)', display:'flex', flexDirection:'column', justifyContent:'center'}}>
              <span className="cos-mono" style={{color:'var(--ink-999)'}}>{h}</span>
              <span className="cos-mono" style={{marginTop: 4}}>{h === 'IMAX' ? '380 seats' : h === 'VIP' ? '64 seats' : '200 seats'}</span>
            </div>
            <div style={{flex: 1, position:'relative', backgroundImage: `repeating-linear-gradient(90deg, transparent 0, transparent ${colW - 1}px, var(--ink-300) ${colW - 1}px, var(--ink-300) ${colW}px)`}}>
              {state.showtimes.filter(st => st.hall === h && st.status !== 'cancelled').map(st => {
                const m = movieById[st.movieId];
                if (!m) return null;
                const left = (st.start - 10) * colW;
                const w = st.dur * colW;
                const cls = 'cco-slot' + (st.status === 'sold_out' ? ' sold' : st.status === 'draft' ? ' draft' : '');
                return (
                  <div key={st.id} className={cls} style={{top: 8, left, width: w - 6, height: 80}}
                  onClick={() => {
                    const action = prompt(`${m.titleEn} @ ${fmtTime(st.start)}\n\nType: -1, +1 (shift hours), or "cancel"`);
                    if (action === '-1') onMove(st.id, -1);
                    else if (action === '+1') onMove(st.id, 1);
                    else if (action === 'cancel') onCancel(st.id);
                  }}>
                    <div style={{fontFamily:'var(--font-mono)', fontSize: 10, color:'var(--gold-300)', letterSpacing:'0.06em'}}>{m.code}</div>
                    <div style={{fontFamily:'var(--font-display)', fontSize: 13, fontWeight: 500, marginTop: 2, color:'var(--ink-999)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{m.titleEn}</div>
                    <div style={{fontFamily:'var(--font-mono)', fontSize: 10, color:'var(--ink-700)', marginTop: 4}}>{fmtTime(st.start)} → {fmtTime(st.start + st.dur)}</div>
                    {st.status === 'sold_out' && <div style={{position:'absolute', top: 6, right: 8, fontFamily:'var(--font-mono)', fontSize: 9, fontWeight: 700, color:'var(--err)'}}>SOLD OUT</div>}
                    {st.status === 'draft' && <div style={{position:'absolute', top: 6, right: 8, fontFamily:'var(--font-mono)', fontSize: 9, fontWeight: 700, color:'var(--warn)'}}>DRAFT</div>}
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
      <p style={{margin: 0, fontSize: 13, color:'var(--text-fog-strong)'}}>Click any block to shift it by ±1 hour or cancel it.</p>
    </div>
  );
}

// ─── Promotions Page (CRUD) ─────────────────────────────────────────────
function PagePromotions({ state, setState }) {
  const [editing, setEditing] = usS(null);
  const onSave = (p) => {
    if (p.id) {
      setState(s => ({ ...s, promotions: s.promotions.map(x => x.id === p.id ? p : x) }));
      window.adminToast(`Updated ${p.code}`);
    } else {
      const id = 'p' + Math.random().toString(36).slice(2, 8);
      setState(s => ({ ...s, promotions: [...s.promotions, { ...p, id, used: 0 }] }));
      window.adminToast(`Created ${p.code}`);
    }
    setEditing(null);
  };
  const onToggle = (p) => {
    setState(s => ({ ...s, promotions: s.promotions.map(x => x.id === p.id ? { ...x, active: !x.active } : x) }));
    window.adminToast(`${p.code} ${p.active ? 'paused' : 'activated'}`);
  };
  return (
    <div style={{display:'flex', flexDirection:'column', gap: 32}}>
      <PageHead eyebrow="Catalog" title="Promotions" sub="Codes apply at POS and online checkout">
        <Btn variant="primary" onClick={() => setEditing({ code:'', type:'percent', value: 10, scope:'All films', usageLimit: 1000, validTo:'2026-12-31', active: true })}>+ New promotion</Btn>
      </PageHead>
      <div className="cos-card" style={{padding: 0, overflow:'hidden'}}>
        <table style={{width:'100%', borderCollapse:'collapse'}}>
          <thead><tr style={{background:'rgba(198,161,91,0.03)', borderBottom:'1px solid var(--ink-400)'}}>
            <Th>Code</Th><Th>Type</Th><Th align="right">Value</Th><Th>Scope</Th><Th align="right">Used / Limit</Th><Th>Status</Th><Th align="right">Actions</Th>
          </tr></thead>
          <tbody>
            {state.promotions.map((p, i) => {
              const used = p.usageLimit > 0 ? (p.used / p.usageLimit) : 0;
              return (
                <tr key={p.id} style={{borderBottom: i < state.promotions.length - 1 ? '1px solid var(--ink-400)' : 'none'}}>
                  <Td><span className="cos-mono" style={{color: p.active ? 'var(--gold-300)' : 'var(--ink-700)', fontSize: 14, letterSpacing:'0.08em'}}>{p.code}</span></Td>
                  <Td><span style={{color:'var(--ink-800)'}}>{p.type}</span></Td>
                  <Td align="right" mono><span style={{color:'var(--ink-999)'}}>{p.type === 'percent' ? p.value + '%' : p.value.toLocaleString() + ' IQD'}</span></Td>
                  <Td><span style={{color:'var(--ink-800)'}}>{p.scope}</span></Td>
                  <Td align="right">
                    <div style={{display:'flex', flexDirection:'column', alignItems:'flex-end', gap: 4}}>
                      <span className="cos-mono" style={{color:'var(--ink-900)'}}>{p.used.toLocaleString()} / {p.usageLimit.toLocaleString()}</span>
                      <div style={{width: 80, height: 3, background:'var(--ink-400)', borderRadius: 2, overflow:'hidden'}}>
                        <div style={{width: `${Math.min(100, used * 100)}%`, height:'100%', background: used > 0.8 ? 'var(--warn)' : 'var(--accent-gold)'}}/>
                      </div>
                    </div>
                  </Td>
                  <Td>{p.active ? <Tag tone="ok">Active</Tag> : <Tag>Paused</Tag>}</Td>
                  <Td align="right">
                    <Btn variant="quiet" onClick={() => onToggle(p)} style={{padding:'4px 12px', fontSize: 12}}>{p.active ? 'Pause' : 'Activate'}</Btn>
                    <Btn variant="quiet" onClick={() => setEditing(p)} style={{padding:'4px 12px', fontSize: 12, color:'var(--accent-gold)'}}>Edit</Btn>
                  </Td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      {editing && <PromoModal promo={editing} onClose={() => setEditing(null)} onSave={onSave}/>}
    </div>
  );
}
function PromoModal({ promo, onClose, onSave }) {
  const [p, setP] = usS(promo);
  return (
    <Modal onClose={onClose} title={promo.id ? 'Edit promotion' : 'New promotion'}>
      <div style={{display:'flex', flexDirection:'column', gap: 14}}>
        <Field label="Code"><input className="cos-input" value={p.code} onChange={e => setP({...p, code: e.target.value.toUpperCase()})}/></Field>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 14}}>
          <Field label="Type">
            <select className="cos-input" value={p.type} onChange={e => setP({...p, type: e.target.value})}>
              <option value="percent">Percent off</option>
              <option value="flat">Flat amount off</option>
              <option value="free_concession">Free concession</option>
              <option value="bogo">BOGO</option>
            </select>
          </Field>
          <Field label={p.type === 'percent' ? 'Value (%)' : 'Value (IQD)'}>
            <input className="cos-input" type="number" value={p.value} onChange={e => setP({...p, value: parseInt(e.target.value) || 0})}/>
          </Field>
        </div>
        <Field label="Scope"><input className="cos-input" value={p.scope} onChange={e => setP({...p, scope: e.target.value})}/></Field>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 14}}>
          <Field label="Usage limit"><input className="cos-input" type="number" value={p.usageLimit} onChange={e => setP({...p, usageLimit: parseInt(e.target.value) || 0})}/></Field>
          <Field label="Valid until"><input className="cos-input" type="date" value={p.validTo} onChange={e => setP({...p, validTo: e.target.value})}/></Field>
        </div>
      </div>
      <div style={{display:'flex', justifyContent:'flex-end', gap: 10, marginTop: 24}}>
        <Btn onClick={onClose}>Cancel</Btn>
        <Btn variant="primary" onClick={() => onSave(p)}>Save</Btn>
      </div>
    </Modal>
  );
}

// ─── FX Rates Page ─────────────────────────────────────────────────────
function PageFX({ state, setState }) {
  const [rate, setRate] = usS(state.fxRate);
  const onLock = () => {
    setState(s => ({ ...s, fxRate: rate }));
    window.adminToast(`FX rate locked at ${rate.toLocaleString()} IQD/USD`);
  };
  return (
    <div style={{display:'flex', flexDirection:'column', gap: 32}}>
      <PageHead eyebrow="Cash & Books" title="FX Rates" sub="Lock the daily IQD ↔ USD rate"/>
      <div className="cos-card-elevated" style={{padding: 32, maxWidth: 560}}>
        <SectionLabel>Current · locked</SectionLabel>
        <p style={{margin:'14px 0 0', fontSize: 52, fontWeight: 700, letterSpacing:'-0.03em', lineHeight: 1, color:'var(--ink-999)', fontVariantNumeric:'tabular-nums'}}>
          {state.fxRate.toLocaleString()}
          <span style={{fontFamily:'var(--font-mono)', fontSize: 16, fontWeight: 500, color:'var(--ink-700)', marginInlineStart: 10, letterSpacing:'0.04em'}}>IQD per 1 USD</span>
        </p>
        <div style={{marginTop: 32, display:'grid', gridTemplateColumns:'1fr auto', gap: 12, alignItems:'flex-end'}}>
          <Field label="New rate (IQD per USD)">
            <input className="cos-input" type="number" value={rate} onChange={e => setRate(parseInt(e.target.value) || 0)}/>
          </Field>
          <Btn variant="primary" onClick={onLock} disabled={rate === state.fxRate}>Lock for today</Btn>
        </div>
        <p style={{margin:'16px 0 0', fontSize: 13, color:'var(--text-fog-strong)'}}>Every conversion is audit-logged. POS picks up the new rate immediately.</p>
      </div>

      {/* Rate history */}
      <div className="cos-card" style={{padding: 0, overflow:'hidden'}}>
        <div style={{padding:'16px 24px', borderBottom:'1px solid var(--ink-400)'}}>
          <SectionLabel>Recent · audit log</SectionLabel>
        </div>
        <table style={{width:'100%', borderCollapse:'collapse'}}>
          <thead><tr style={{background:'rgba(198,161,91,0.03)', borderBottom:'1px solid var(--ink-400)'}}>
            <Th>Date</Th><Th>Set by</Th><Th align="right">Rate (IQD/USD)</Th><Th align="right">Δ</Th>
          </tr></thead>
          <tbody>
            {[
              { date: 'Today',     by: 'Lana Hassan', rate: state.fxRate, delta: state.fxRate - 1475 },
              { date: 'Yesterday', by: 'Lana Hassan', rate: 1475, delta: -5 },
              { date: '−2 days',   by: 'Hawre M.',    rate: 1480, delta: 5 },
              { date: '−3 days',   by: 'Lana Hassan', rate: 1475, delta: 0 },
              { date: '−4 days',   by: 'Hawre M.',    rate: 1475, delta: -10 },
            ].map((r, i) => (
              <tr key={i} style={{borderBottom: i < 4 ? '1px solid var(--ink-400)' : 'none'}}>
                <Td><span style={{color:'var(--ink-900)'}}>{r.date}</span></Td>
                <Td><span style={{color:'var(--ink-800)'}}>{r.by}</span></Td>
                <Td align="right" mono><span style={{color:'var(--ink-999)'}}>{r.rate.toLocaleString()}</span></Td>
                <Td align="right" mono><span style={{color: r.delta > 0 ? 'var(--ok)' : r.delta < 0 ? 'var(--err)' : 'var(--ink-700)'}}>{r.delta > 0 ? '+' : ''}{r.delta}</span></Td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ─── Configuration (feature flags) Page ─────────────────────────────────
function PageSettings({ state, setState }) {
  const flags = state.flags || {
    enable_promotions: true,
    enable_anti_bot: false,
    enable_corporate: true,
    enable_pos_usd: true,
    enable_2fa: true,
    enable_offline_node: true,
    enable_kiosk_link: true,
    enable_ai_advisor: false,
    enable_signage: true,
    enable_arabic_rtl: true,
    enable_kurdish_rtl: true,
    enable_pdf_tickets: true,
  };
  const toggle = (key) => {
    const next = { ...flags, [key]: !flags[key] };
    setState(s => ({ ...s, flags: next }));
    window.adminToast(`${key} ${next[key] ? 'enabled' : 'disabled'}`);
  };
  return (
    <div style={{display:'flex', flexDirection:'column', gap: 32}}>
      <PageHead eyebrow="System" title="Configuration" sub="Feature flags · global or per branch"/>
      <div className="cos-card" style={{padding: 0, overflow:'hidden'}}>
        {Object.entries(flags).map(([k, v], i, arr) => (
          <div key={k} style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'18px 24px', borderBottom: i < arr.length - 1 ? '1px solid var(--ink-400)' : 'none'}}>
            <div>
              <div className="cos-mono" style={{color:'var(--gold-300)', fontSize: 12, textTransform:'none'}}>{k}</div>
              <div style={{display:'flex', alignItems:'center', gap: 6, marginTop: 6}}>
                <span style={{width: 7, height: 7, borderRadius:'50%', background: v ? 'var(--ok)' : 'var(--ink-600)'}}/>
                <span style={{fontSize: 12, color: v ? 'var(--text-fog-strong)' : 'var(--ink-700)'}}>
                  {v ? 'Enabled · Global' : 'Disabled'}
                </span>
              </div>
            </div>
            <Toggle on={v} onClick={() => toggle(k)}/>
          </div>
        ))}
      </div>
    </div>
  );
}

function Toggle({ on, onClick }) {
  return (
    <button onClick={onClick} aria-pressed={on} style={{
      width: 48, height: 28, borderRadius: 14, position:'relative',
      background: on ? 'var(--accent-gold)' : 'var(--ink-400)',
      border:'1px solid ' + (on ? 'var(--accent-gold)' : 'var(--ink-500)'), cursor:'pointer',
      transition: 'background .18s, border-color .18s',
    }}>
      <span style={{
        position:'absolute', top: 2, left: on ? 22 : 2, width: 22, height: 22, borderRadius:'50%',
        background:'var(--surface-obsidian)', transition:'left .18s',
      }}/>
    </button>
  );
}

// ─── Common bits ────────────────────────────────────────────────────────
function PageHead({ eyebrow, title, sub, children }) {
  return (
    <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', gap: 16}}>
      <div>
        <SectionLabel>{eyebrow}</SectionLabel>
        <h1 style={{fontFamily:'var(--font-display)', fontSize: 28, fontWeight: 700, letterSpacing:'-0.025em', lineHeight: 1.1, color:'var(--text-chalk)', margin:'8px 0 0'}}>{title}</h1>
        {sub && <p style={{color:'var(--text-fog-strong)', margin:'6px 0 0', fontSize: 13}}>{sub}</p>}
      </div>
      <div style={{display:'flex', gap: 10}}>{children}</div>
    </div>
  );
}

function Th({ children, align = 'left' }) {
  return <th className="cos-mono" style={{padding:'12px 20px', textAlign: align, color:'rgba(198,161,91,0.6)', fontWeight: 500}}>{children}</th>;
}
function Td({ children, align = 'left', mono }) {
  return <td style={{padding:'12px 20px', textAlign: align, color:'var(--ink-800)', fontFamily: mono ? 'var(--font-mono)' : 'inherit', fontSize: mono ? 13 : 14}}>{children}</td>;
}
function Field({ label, children }) {
  return (
    <label style={{display:'flex', flexDirection:'column', gap: 6}}>
      <span className="cos-mono">{label}</span>
      {children}
    </label>
  );
}
function Modal({ children, onClose, title }) {
  React.useEffect(() => {
    const k = (e) => e.key === 'Escape' && onClose();
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, [onClose]);
  return (
    <div onClick={onClose} style={{position:'fixed', inset: 0, background:'rgba(3,5,8,0.8)', zIndex: 100, display:'grid', placeItems:'center', padding: 40}}>
      <div onClick={e => e.stopPropagation()} style={{background:'var(--surface-raised)', border:'1px solid var(--ink-500)', borderRadius: 16, padding: 32, width:'100%', maxWidth: 520, boxShadow:'var(--shadow-card)'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 20}}>
          <div style={{fontFamily:'var(--font-display)', fontSize: 20, fontWeight: 600, color:'var(--text-chalk)'}}>{title}</div>
          <button onClick={onClose} aria-label="Close" style={{background:'none', border:'none', color:'var(--ink-700)', fontSize: 22, cursor:'pointer'}}>×</button>
        </div>
        {children}
      </div>
    </div>
  );
}

Object.assign(window, { PageMovies, PageScheduler, PagePromotions, PageFX, PageSettings });