// Full-bleed site shell — header + routed content + bottom tab bar (mobile only)

const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#66D8FF",
  "headline": "Your bin\nis a biohazard.",
  "heroSub": "We hydroblast trash carts at your curb. Eco-soap, neighborhood kids, gone before your coffee's cold.",
  "showSidebars": false,
  "phoneRoute": "home"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];

  const [route, setRoute] = useStateA('home');
  const [bookingService, setBookingService] = useStateA('bin');
  const [booking, setBooking] = useStateA(null);
  const [opUpdates, setOpUpdates] = useStateA([]);
  const [opPhase, setOpPhase] = useStateA(null);
  const [opDraft, setOpDraft] = useStateA('');
  const [toast, setToast] = useStateA(null);

  function showToast(msg) {
    setToast(msg);
    setTimeout(() => setToast(null), 2200);
  }

  function handleNav(r, opts) {
    if (opts && opts.service) setBookingService(opts.service);
    setRoute(r);
    window.scrollTo({ top: 0, behavior: 'instant' });
  }

  function handleBookComplete(b) {
    if (b && b.date && b.slot && window.BlastStore) {
      const dateKey = window.BlastStore.dateKey(b.date);
      window.BlastStore.addJob({
        dateKey, slot: b.slot,
        bins: b.bins, size: b.size, frequency: b.frequency,
        address: b.address, total: b.total, initials: b.initials,
      });
    }
    setBooking(b);
    setRoute('tracker');
    showToast("Booked · we're on our way");
    window.scrollTo({ top: 0, behavior: 'instant' });
  }

  const tabs = [
    { id: 'home', label: 'Home', I: Icon.Drop },
    { id: 'book', label: 'Book', I: Icon.Spray },
    { id: 'about', label: 'About', I: Icon.Shield },
  ];

  return (
    <div className="stage">
      <header className="site-header">
        <a className="logo" href="#" onClick={(e) => { e.preventDefault(); handleNav('home'); }}>
          <span className="badge">B</span> BLAST CO.
        </a>
        <nav>
          {tabs.map(tab => (
            <button key={tab.id}
              className={route === tab.id ? 'on' : ''}
              onClick={() => handleNav(tab.id)}>
              {tab.label}
            </button>
          ))}
        </nav>
        <span style={{ width: 22 }} />
      </header>

      <div className="device-wrap">
        <div className="phone">
          <div className="phone-screen">
            <div className="phone-app no-scrollbar" key={route}>
              {route === 'home' && (
                <HomeScreen onNav={handleNav} accent={t.accent} copy={{ heroSub: t.heroSub }} />
              )}
              {route === 'about' && (
                <AboutScreen onNav={handleNav} accent={t.accent} />
              )}
              {route === 'book' && (
                <BookingScreen
                  onBack={() => handleNav('home')}
                  onComplete={handleBookComplete}
                  accent={t.accent}
                  initialService={bookingService}
                />
              )}
              {route === 'tracker' && (
                <TrackerScreen
                  booking={booking}
                  onHome={() => handleNav('home')}
                  accent={t.accent}
                  operatorUpdates={opUpdates}
                  operatorPhase={opPhase}
                />
              )}
            </div>
          </div>
        </div>
      </div>

      {(route === 'home' || route === 'about') && (
        <div className="site-tabbar">
          {tabs.map(tab => {
            const active = route === tab.id;
            return (
              <button key={tab.id} onClick={() => handleNav(tab.id)} style={{
                background: active ? 'var(--blast-ink)' : 'rgba(7,8,12,0.04)',
                color: active ? 'var(--blast-bone)' : 'var(--blast-ink)',
                border: 'none', cursor: 'pointer',
                padding: '8px 14px', borderRadius: 999,
                display: 'flex', alignItems: 'center', gap: 6,
                fontFamily: 'var(--font-mono)', fontSize: 11,
                letterSpacing: '0.08em', textTransform: 'uppercase',
                fontWeight: 600,
              }}>
                <tab.I s={16} c="currentColor"/>
                {tab.label}
              </button>
            );
          })}
        </div>
      )}

      {toast && <div className="toast">{toast}</div>}

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Look" />
          <window.TweakColor label="Accent" value={t.accent}
            onChange={v => setTweak('accent', v)} />

          <window.TweakSection label="Copy" />
          <window.TweakText label="Hero subhead" value={t.heroSub}
            onChange={v => setTweak('heroSub', v)} />

          <window.TweakSection label="Jump to screen" />
          <window.TweakButton label="Home" onClick={() => handleNav('home')} />
          <window.TweakButton label="About us" onClick={() => handleNav('about')} />
          <window.TweakButton label="Booking flow" onClick={() => handleNav('book')} />
          <window.TweakButton label="Live tracker" onClick={() => {
            setBooking({ slot: '9–11 AM', date: { y: new Date().getFullYear(), m: new Date().getMonth(), d: new Date().getDate() + 1 } });
            handleNav('tracker');
          }} />

          <window.TweakSection label="Crew console (push live updates)" />
          <window.TweakSelect label="Job phase" value={opPhase == null ? 'auto' : String(opPhase)}
            options={[
              { label: 'Auto progress', value: 'auto' },
              { label: '1 · Booked', value: '0' },
              { label: '2 · Prepping', value: '1' },
              { label: '3 · On our way', value: '2' },
              { label: '4 · Blasting', value: '3' },
            ]}
            onChange={v => setOpPhase(v === 'auto' ? null : Number(v))} />
          <window.TweakText label="Message to customer" value={opDraft} onChange={setOpDraft}
            placeholder="e.g. Running 5 min late — heavy traffic on Madison" />
          <window.TweakButton label="Push update" onClick={() => {
            const msg = (opDraft || '').trim();
            if (!msg) return;
            const time = new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
            setOpUpdates(u => [{ text: msg, who: 'Henry', time }, ...u]);
            setOpDraft('');
            showToast('Update sent to customer');
          }} />
          <window.TweakButton label="Clear update history" onClick={() => { setOpUpdates([]); setOpPhase(null); }} />
        </window.TweaksPanel>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);