// screens_entry.jsx — Home (amount) + Scan (auto-advancing). -> window.

// ── Shared header ─────────────────────────────────────────────
function ScreenHeader({ title, onBack, right, sub }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px 6px 6px', flexShrink: 0 }}>
      {onBack
        ? <IconButton onClick={onBack} title="Back"><IconBack s={24} /></IconButton>
        : <div style={{ width: 12 }} />}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--display-weight)',
          fontSize: 'calc(21px * var(--fs,1))', letterSpacing: -0.3, lineHeight: 1.1 }}>{title}</div>
        {sub && <div style={{ fontSize: 12.5, color: 'var(--on-surface-var)', marginTop: 1 }}>{sub}</div>}
      </div>
      {right}
    </div>
  );
}

// ── Step indicator (Divvy · Tip · Settle) ─────────────────────
function Steps({ active }) {
  const steps = ['Divvy', 'Tip', 'Settle'];
  const i = steps.indexOf(active);
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, padding: '0 18px 4px', flexShrink: 0 }}>
      {steps.map((s, k) => (
        <React.Fragment key={s}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 18, height: 18, borderRadius: 99, fontSize: 11, fontWeight: 800,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              background: k <= i ? 'var(--primary)' : 'var(--surface-variant)',
              color: k <= i ? 'var(--on-primary)' : 'var(--on-surface-var)' }}>
              {k < i ? '✓' : k + 1}
            </span>
            <span style={{ fontSize: 12, fontWeight: 700, color: k === i ? 'var(--on-surface)' : 'var(--on-surface-var)' }}>{s}</span>
          </div>
          {k < steps.length - 1 && <div style={{ width: 14, height: 2, borderRadius: 9, background: 'var(--outline-faint)' }} />}
        </React.Fragment>
      ))}
    </div>
  );
}

// ── Home / amount entry ───────────────────────────────────────
function HomeScreen({ state, set, currency, nav, clearBill }) {
  const cents = state.subtotalCents || 0;
  // every keypad edit asserts a clean MANUAL bill — so a previously scanned
  // receipt can never bleed into a typed amount.
  const manualPatch = (s) => ({ entry: 'manual', items: [], includeTax: false, taxRate: 0, merchant: '',
    splitMode: s.splitMode === 'items' ? 'even' : s.splitMode });
  const press = (d) => set((s) => ({ ...manualPatch(s), subtotalCents: Math.min((s.subtotalCents || 0) * 10 + d, 99999999) }));
  const back = () => set((s) => ({ ...manualPatch(s), subtotalCents: Math.floor((s.subtotalCents || 0) / 10) }));
  const dbl = () => set((s) => ({ ...manualPatch(s), subtotalCents: Math.min((s.subtotalCents || 0) * 100, 99999999) }));

  const Key = ({ label, onClick }) => (
    <button className="ta-press" onClick={onClick} style={{ border: 'none', background: 'transparent', cursor: 'pointer',
      borderRadius: 16, fontFamily: 'var(--font-display)', fontWeight: 600, color: 'var(--on-surface)',
      fontSize: 'calc(26px * var(--fs,1))', height: 52, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{label}</button>
  );

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 18px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <img src="app/divvy-icon.png" alt="DivvyTab" width="30" height="30" style={{ width: 30, height: 30, borderRadius: 9, display: 'block', objectFit: 'cover' }} />
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--display-weight)', fontSize: 18, letterSpacing: -0.3 }}>DivvyTab</span>
        </div>
        <IconButton variant="tonal" size={38} onClick={() => nav('history')} title="History"><IconClock s={20} /></IconButton>
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 6, padding: '4px 18px', minHeight: 0 }}>
        <Label>Bill amount</Label>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <MoneyBig cents={cents} currency={currency} size={60} color={cents ? 'var(--on-surface)' : 'var(--on-surface-var)'} />
          {cents > 0 && (
            <button className="ta-press" onClick={clearBill} title="Clear amount" style={{ width: 30, height: 30, borderRadius: 99, border: 'none', cursor: 'pointer',
              background: 'var(--surface-variant)', color: 'var(--on-surface-var)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <IconClose s={17} />
            </button>
          )}
        </div>
        <div style={{ fontSize: 13, color: 'var(--on-surface-var)' }}>Enter the total before tip</div>
      </div>

      <div style={{ padding: '0 18px 8px', flexShrink: 0 }}>
        <button className="ta-press" onClick={() => nav('scan')} style={{ width: '100%', minHeight: 50, padding: '8px 14px', borderRadius: 99, border: 'none', cursor: 'pointer',
          background: 'var(--secondary-container)', color: 'var(--on-secondary-container)', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9 }}>
          <IconScan s={20} /> Scan a receipt instead
        </button>
      </div>

      <div style={{ background: 'var(--surface)', borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: '12px 18px 14px', boxShadow: '0 -6px 24px rgba(0,0,0,0.05)', flexShrink: 0 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 3, marginBottom: 10 }}>
          {[1,2,3,4,5,6,7,8,9].map((n) => <Key key={n} label={n} onClick={() => press(n)} />)}
          <Key label="00" onClick={dbl} />
          <Key label={0} onClick={() => press(0)} />
          <button className="ta-press" onClick={back} style={{ border: 'none', background: 'transparent', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--on-surface-var)' }}>
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6H9L3 12l6 6h11a1 1 0 001-1V7a1 1 0 00-1-1z"/><path d="M16 10l-4 4M12 10l4 4"/></svg>
          </button>
        </div>
        <Button disabled={cents <= 0} onClick={() => nav('split')}>Divvy It</Button>
      </div>
    </div>
  );
}

// ── Scan (entry point lives in screens_scan.jsx) ──────────────

Object.assign(window, { ScreenHeader, Steps, HomeScreen });