// Stubs.jsx — placeholder pages for non-deep-built sections.

const StubPage = ({ title, subtitle, icon, children }) => (
  <div className="portal-page-wide" style={{ maxWidth: 1280 }}>
    <div className="portal-page-header">
      <div>
        <h1 className="portal-page-title">{title}</h1>
        <div className="portal-page-subtitle">{subtitle}</div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <PBtn variant="secondary" icon="download">Export</PBtn>
        <PBtn variant="primary" icon="plus">New</PBtn>
      </div>
    </div>
    {children}
  </div>
);

const StubEmpty = ({ icon, label }) => (
  <div className="portal-empty">
    <div style={{ width: 48, height: 48, borderRadius: 999, background: 'var(--bg-sunken)', margin: '0 auto 14px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-2)' }}>
      <PIcon name={icon} size={22} />
    </div>
    <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg-1)', marginBottom: 6 }}>{label}</div>
    <div style={{ fontSize: 12.5, color: 'var(--fg-3)' }}>Coming next — design in progress.</div>
  </div>
);

const ClosingStub_REMOVED = () => null;

const BroadcastsStub = () => (
  <StubPage title="Broadcasts" subtitle="Compose and review owner-to-staff messages.">
    <div className="portal-card">
      <div className="portal-card-header">
        <div className="portal-card-title">Recent broadcasts</div>
      </div>
      <table className="portal-table">
        <thead><tr><th>Sent</th><th>Title</th><th>Urgency</th><th>Acks</th></tr></thead>
        <tbody>
          <tr><td>Today, 10:14</td><td>Walk-in cooler door — keep firmly shut</td><td><span style={{ fontSize: 10.5, padding: '2px 7px', borderRadius: 999, background: '#F3EAE8', color: '#8B2A1A' }}>Urgent</span></td><td><PAvatarStack ids={['mei','jorge','bo','tina','ana']} size={20} /></td></tr>
          <tr><td>Yesterday</td><td>New cabbage prep technique — see video</td><td><span style={{ fontSize: 10.5, padding: '2px 7px', borderRadius: 999, background: 'var(--bg-sunken)', color: 'var(--fg-2)' }}>Normal</span></td><td><PAvatarStack ids={['mei','jorge','bo']} size={20} /></td></tr>
          <tr><td>2 days ago</td><td>Inventory count Friday at 8 AM</td><td><span style={{ fontSize: 10.5, padding: '2px 7px', borderRadius: 999, background: '#F5F0E3', color: '#8A6A1F' }}>Heads-up</span></td><td><PAvatarStack ids={['mei','jorge','bo','tina','ana','luis']} size={20} /></td></tr>
        </tbody>
      </table>
    </div>
  </StubPage>
);

const InventoryStub = () => (
  <StubPage title="Items & Pars" subtitle="Master list of inventory with par levels, vendors, and prices.">
    <div className="portal-card">
      <table className="portal-table">
        <thead><tr><th>Item</th><th>Category</th><th>Par</th><th>On hand</th><th>Vendor</th><th>Price</th></tr></thead>
        <tbody>
          {window.SAMPLE_INVENTORY.slice(0, 12).map(i => (
            <tr key={i.id}>
              <td style={{ fontWeight: 500 }}>{i.name}</td>
              <td><PCategoryChip category={i.category} /></td>
              <td style={{ fontVariantNumeric: 'tabular-nums' }}>{i.par}</td>
              <td style={{ fontVariantNumeric: 'tabular-nums', color: i.last < i.par * 0.4 ? '#8B2A1A' : 'var(--fg-1)' }}>{i.last}</td>
              <td style={{ color: 'var(--fg-2)' }}>{i.vendor}</td>
              <td style={{ fontVariantNumeric: 'tabular-nums' }}>${i.price.toFixed(2)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </StubPage>
);

const VendorsStub = () => (
  <StubPage title="Vendors" subtitle="Suppliers, contacts, and order schedules.">
    <StubEmpty icon="truck" label="Vendor management" />
  </StubPage>
);

const StaffStub = () => (
  <StubPage title="Staff & PINs" subtitle="Manage staff roster and 4-digit PINs for the iPad app.">
    <div className="portal-card">
      <table className="portal-table">
        <thead><tr><th>Person</th><th>PIN</th><th>Last login</th><th></th></tr></thead>
        <tbody>
          {window.SAMPLE_STAFF.map(s => (
            <tr key={s.id}>
              <td>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <PAvatar staff={s} size={26} />
                  <span style={{ fontWeight: 500 }}>{s.name}</span>
                </div>
              </td>
              <td>
                <span style={{ fontFamily: "ui-monospace, 'SF Mono', Menlo, monospace", fontSize: 13, letterSpacing: 2, color: 'var(--fg-2)' }}>••••</span>
                <button style={{ marginLeft: 8, fontSize: 11.5, color: 'var(--fg-3)' }}>Reveal</button>
              </td>
              <td style={{ fontSize: 12, color: 'var(--fg-2)' }}>11 min ago</td>
              <td><div className="row-actions"><button><PIcon name="edit" size={13} /></button></div></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </StubPage>
);

const HistoryStub = () => (
  <StubPage title="History" subtitle="Read-only record of past prep sessions, closing checklists, and broadcasts.">
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
      {[
        { t: 'Daily prep log', s: 'What was assigned, what got completed, who logged each contribution.', icon: 'clipboard' },
        { t: 'Broadcast acks', s: 'Who acknowledged what, and when.', icon: 'megaphone' },
        { t: 'Staff activity', s: 'Per-person timeline of clock-ins, prep contributions, and acks.', icon: 'users' },
      ].map((c, i) => (
        <div key={i} className="portal-card" style={{ padding: 18 }}>
          <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--bg-sunken)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-2)', marginBottom: 12 }}>
            <PIcon name={c.icon} size={16} />
          </div>
          <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>{c.t}</div>
          <div style={{ fontSize: 12.5, color: 'var(--fg-2)', lineHeight: 1.5 }}>{c.s}</div>
        </div>
      ))}
    </div>
  </StubPage>
);

const SettingsStub = () => (
  <StubPage title="Settings" subtitle="Portal preferences, integrations, and account.">
    <StubEmpty icon="settings" label="Settings panel" />
  </StubPage>
);

Object.assign(window, {
  BroadcastsStub, InventoryStub, VendorsStub, StaffStub, HistoryStub, SettingsStub,
});