// phone-app.jsx — bezel-free, Supabase-wired. Fills the viewport.

const TWEAK_DEFAULTS_PHONE = { theme: 'midnight', screen: 'today' };

function PhoneApp() {
  const theme = THEMES[TWEAK_DEFAULTS_PHONE.theme] || THEMES.midnight;
  const isDark = ['midnight','dark','oled','tactical','stack'].includes(theme.name);

  const [session, setSession] = React.useState(undefined); // undefined = checking
  const [tab, setTab] = React.useState(TWEAK_DEFAULTS_PHONE.screen);
  const [activeCustomerId, setActiveCustomerId] = React.useState(null);
  const [showAdd, setShowAdd] = React.useState(false);
  const [customers, setCustomers] = React.useState([]);
  const [loaded, setLoaded] = React.useState(false);

  // ── auth: check session + subscribe ──
  React.useEffect(() => {
    SBAuth.getSession().then(setSession);
    const { data: sub } = SBAuth.onChange(setSession);
    return () => sub?.subscription?.unsubscribe?.();
  }, []);

  // ── load customers once signed in ──
  React.useEffect(() => {
    if (!session) { setCustomers([]); setLoaded(false); return; }
    let alive = true;
    SBData.load().then(rows => { if (alive) { setCustomers(rows); setLoaded(true); } });
    return () => { alive = false; };
  }, [session && session.user && session.user.id]);

  // ── theme background ──
  React.useEffect(() => {
    document.body.style.background = theme.bg;
    document.documentElement.style.background = theme.bg;
    const m = document.querySelector('meta[name="theme-color"]');
    if (m) m.setAttribute('content', theme.bg);
  }, [theme.bg]);

  const userId = session && session.user && session.user.id;

  const openCustomer = (id) => setActiveCustomerId(id);
  const closeCustomer = () => setActiveCustomerId(null);

  const updateCustomer = (next) => {
    setCustomers(cs => cs.map(c => c.id === next.id ? next : c)); // optimistic
    SBData.update(next).then(saved => {
      if (saved) setCustomers(cs => cs.map(c => c.id === saved.id ? saved : c));
    });
  };

  const addCustomer = (draft) => {
    const tempId = 'tmp_' + Date.now();
    const c = {
      ...draft, id: tempId,
      history: [{ d: 'Sun 24', text: 'Added · ' + (draft.source || 'manual'), status: draft.status || 'neutral' }],
    };
    setCustomers(cs => [c, ...cs]);          // optimistic
    setActiveCustomerId(tempId);
    SBData.create(c, userId).then(saved => {
      if (!saved) return;
      setCustomers(cs => cs.map(x => x.id === tempId ? saved : x));
      setActiveCustomerId(prev => prev === tempId ? saved.id : prev);
    });
  };

  const activeCustomer = customers.find(c => c.id === activeCustomerId);

  // schedule derives from customer date fields (none until a time-picker is added) → empty for now
  const schedule = [];
  const tomorrowSchedule = [];

  const Beam = () => theme.beam ? (
    <React.Fragment>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 380, zIndex: 1, pointerEvents: 'none',
        background: 'radial-gradient(ellipse 60% 70% at 50% -10%, rgba(120,108,255,0.55) 0%, rgba(80,70,220,0.18) 35%, transparent 70%)' }}/>
      <div style={{ position: 'absolute', top: -20, left: '20%', width: 280, height: 460, zIndex: 1, pointerEvents: 'none',
        background: 'linear-gradient(165deg, rgba(150,140,255,0.22), transparent 60%)', transform: 'rotate(15deg)', filter: 'blur(40px)' }}/>
    </React.Fragment>
  ) : null;

  const shellStyle = {
    width: '100vw', height: '100dvh', background: theme.bg, color: theme.text,
    position: 'relative', overflow: 'hidden',
    fontFamily: '-apple-system, "SF Pro Text", system-ui, sans-serif',
    WebkitFontSmoothing: 'antialiased', display: 'flex', flexDirection: 'column',
  };
  const topPad = (
    <style>{`#phone-app [data-topbar]{padding-top:calc(max(env(safe-area-inset-top,0px),32px) + 8px)!important;}`}</style>
  );

  // ── auth gate ──
  if (session === undefined) {
    return <div id="phone-app" style={shellStyle}>{topPad}<Beam/></div>; // brief blank while checking
  }
  if (!session) {
    return (
      <div id="phone-app" style={shellStyle}>{topPad}<Beam/>
        <LoginScreen theme={theme} />
      </div>
    );
  }

  const renderScreen = () => {
    if (showAdd) return <AddCaptureScreen theme={theme} dark={isDark} onClose={() => setShowAdd(false)} onSave={addCustomer} />;
    if (activeCustomer) return <CustomerScreen theme={theme} dark={isDark} customer={activeCustomer} onBack={closeCustomer} onUpdate={updateCustomer} />;
    if (tab === 'today') return <TodayScreen theme={theme} dark={isDark} customers={customers} schedule={schedule} openCustomer={openCustomer} setTab={setTab} />;
    if (tab === 'pipeline') return <PipelineScreen theme={theme} customers={customers} schedule={schedule} tomorrowSchedule={tomorrowSchedule} openCustomer={openCustomer} />;
    if (tab === 'nurturing') return <NurturingScreen theme={theme} customers={customers} openCustomer={openCustomer} setTab={setTab} />;
    if (tab === 'reminders') return <RemindersScreen theme={theme} customers={customers} schedule={schedule} openCustomer={openCustomer} />;
    return null;
  };

  const showTabs = !activeCustomer && !showAdd;

  return (
    <div id="phone-app" style={shellStyle}>
      {topPad}
      <Beam/>
      <div style={{ flex: 1, minHeight: 0, position: 'relative', zIndex: 5, display: 'flex', flexDirection: 'column' }}>
        {renderScreen()}
      </div>
      {showTabs && (
        <div style={{ position: 'relative', zIndex: 5, paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}>
          <BottomTabBar theme={theme} dark={isDark} tab={tab} setTab={setTab} onAdd={() => setShowAdd(true)} />
        </div>
      )}
    </div>
  );
}

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