// Main App — manages all sheet states + tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "spacious",
  "showNumbersDefault": false,
  "tone": "calm",
  "softHero": true
}/*EDITMODE-END*/;

function FactorActivoApp({ platform = 'ios' }) {
  const [tab, setTab] = React.useState('balance');
  const [notifOpen, setNotifOpen] = React.useState(false);
  // sheet stack: detail → sign | request
  const [detail,  setDetail]  = React.useState(null); // contract being previewed
  const [signing, setSigning] = React.useState(null); // contract being signed
  const [request, setRequest] = React.useState(null); // contract requesting withdrawal
  const [tweaks, setTweaks] = React.useState(TWEAK_DEFAULTS);
  const [editOn, setEditOn] = React.useState(false);

  React.useEffect(() => {
    const onMsg = (e) => {
      const d = e.data;
      if (!d || typeof d !== 'object') return;
      if (d.type === '__activate_edit_mode') setEditOn(true);
      if (d.type === '__deactivate_edit_mode') setEditOn(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const setTweak = (k, v) => {
    setTweaks(prev => ({ ...prev, [k]: v }));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  // open contract detail (from list, notifs, agenda)
  const openContract = (c) => {
    setNotifOpen(false);
    setDetail(c);
  };

  // open request flow directly (from reminder notifications)
  const openContractRequest = (c) => {
    setNotifOpen(false);
    setRequest(c);
  };

  // from detail: open sign flow
  const openSign = () => {
    const c = detail;
    setDetail(null);
    setSigning(c);
  };

  // from detail: open request flow
  const openRequest = () => {
    const c = detail;
    setDetail(null);
    setRequest(c);
  };

  // back from sign → detail
  const backToDetail = () => {
    const c = signing || request;
    setSigning(null);
    setRequest(null);
    setDetail(c);
  };

  const closeAll = () => {
    setDetail(null); setSigning(null); setRequest(null);
  };

  const screens = {
    balance:   <BalanceScreen   onBell={() => setNotifOpen(true)} setTab={setTab} tweaks={tweaks} openContractRequest={openContractRequest}/>,
    contracts: <ContractsScreen onBell={() => setNotifOpen(true)} setTab={setTab} openContract={openContract} tweaks={tweaks}/>,
    dates:     <DatesScreen     onBell={() => setNotifOpen(true)} setTab={setTab} openContract={openContract}/>,
    settings:  <SettingsScreen  onBell={() => setNotifOpen(true)} setTab={setTab}/>,
  };

  // For iOS the status bar is absolute, so we bound the scroll area below it.
  // For Android the status bar is part of AndroidDevice's flex structure — no offset needed.
  const scrollStyle = platform === 'ios'
    ? { position: 'absolute', top: 54, left: 0, right: 0, bottom: 0, overflowY: 'auto' }
    : { height: '100%', overflowY: 'auto' };

  return (
    <div style={{ position: 'relative', height: '100%', background: FA.bgSoft, overflow: 'hidden' }}>
      <div style={scrollStyle}>
        {screens[tab]}
      </div>
      <TabBar active={tab} onChange={setTab}/>

      {/* sheets — ordered by z-index in the components */}
      <NotificationsSheet open={notifOpen} onClose={() => setNotifOpen(false)} onSign={openContract} onRequest={openContractRequest}/>
      {detail  && <ContractDetailSheet contract={detail}  onClose={closeAll} onSign={openSign}  onRequest={openRequest}/>}
      {signing && <SignContractSheet   contract={signing} onClose={closeAll} onBack={backToDetail}/>}
      {request && <RequestAmountSheet  contract={request} onClose={closeAll} onBack={backToDetail}/>}

      {editOn && <TweaksPanel tweaks={tweaks} setTweak={setTweak}/>}
    </div>
  );
}

// ─── Tweaks panel ───────────────────────────────────────────
function TweaksPanel({ tweaks, setTweak }) {
  return (
    <div style={{
      position: 'absolute', bottom: 110, right: 12, zIndex: 100,
      width: 240, background: '#fff', borderRadius: 16,
      boxShadow: '0 10px 40px rgba(10,22,40,.18), 0 0 0 1px rgba(10,22,40,.06)',
      padding: 14, fontFamily: FA.sans,
    }}>
      <div style={{ fontSize: 12, fontWeight: 700, color: FA.ink, textTransform: 'uppercase', letterSpacing: 0.6, marginBottom: 10 }}>Tweaks</div>
      <TweakLabel>Densidad</TweakLabel>
      <TweakSegment value={tweaks.density} onChange={v => setTweak('density', v)}
        options={[['spacious','Calma'],['cozy','Media'],['compact','Detalle']]}/>
      <TweakLabel>Tono</TweakLabel>
      <TweakSegment value={tweaks.tone} onChange={v => setTweak('tone', v)}
        options={[['calm','Cálido'],['neutral','Neutro'],['detailed','Formal']]}/>
      <TweakLabel>Mostrar montos</TweakLabel>
      <TweakSwitch on={tweaks.showNumbersDefault} onChange={v => setTweak('showNumbersDefault', v)}/>
      <TweakLabel>Hero suave</TweakLabel>
      <TweakSwitch on={tweaks.softHero} onChange={v => setTweak('softHero', v)}/>
    </div>
  );
}

const TweakLabel = ({ children }) => (
  <div style={{ fontSize: 11, color: FA.muted, fontWeight: 600, marginTop: 10, marginBottom: 6 }}>{children}</div>
);
function TweakSegment({ value, onChange, options }) {
  return (
    <div style={{ display: 'flex', background: FA.bgSoft, borderRadius: 9, padding: 3 }}>
      {options.map(([v, l]) => (
        <button key={v} onClick={() => onChange(v)} style={{
          flex: 1, border: 'none',
          background: value === v ? '#fff' : 'transparent',
          color: value === v ? FA.ink : FA.muted,
          fontSize: 11, fontWeight: 600, padding: '6px 4px', borderRadius: 7,
          cursor: 'pointer', fontFamily: FA.sans,
          boxShadow: value === v ? '0 1px 3px rgba(10,22,40,.08)' : 'none',
        }}>{l}</button>
      ))}
    </div>
  );
}
function TweakSwitch({ on, onChange }) {
  return (
    <button onClick={() => onChange(!on)} style={{
      width: 40, height: 24, borderRadius: 12, border: 'none',
      background: on ? FA.blue : '#cbd5e1', position: 'relative', cursor: 'pointer', padding: 0,
    }}>
      <div style={{
        position: 'absolute', top: 2, left: on ? 18 : 2,
        width: 20, height: 20, borderRadius: 10, background: '#fff',
        transition: 'left .15s', boxShadow: '0 1px 3px rgba(0,0,0,0.15)',
      }}/>
    </button>
  );
}

Object.assign(window, { FactorActivoApp });