// Field app — phone shell with bottom tabs
const { Icon } = window.FF;

function AppFrame({ tab, onTab, label, children }) {
  const tabs = [
    { k: 'prices', icon: 'hand-coins', en: 'Prices', kh: 'តម្លៃ' },
    { k: 'scan', icon: 'qr-code', en: 'Scan', kh: 'ស្កេន' },
    { k: 'deliveries', icon: 'truck', en: 'Deliveries', kh: 'ការដឹកជញ្ជូន' },
    { k: 'me', icon: 'users', en: 'Account', kh: 'គណនី' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'center' }}>
      <div
        style={{
          width: 390, height: 844, position: 'relative', display: 'flex', flexDirection: 'column',
          background: 'var(--surface-page)', borderRadius: 40, overflow: 'hidden',
          border: '1px solid var(--border-strong)', boxShadow: 'var(--shadow-3)',
        }}
      >
        <div style={{ height: 44, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 24px', font: 'var(--type-mono)', fontSize: 12, color: 'var(--text-strong)', background: 'var(--surface-page)' }}>
          <span>07:12</span>
          <span style={{ display: 'flex', gap: 6, alignItems: 'center' }}><Icon name="wifi" size={13} /><Icon name="battery-full" size={15} /></span>
        </div>
        <div style={{ flex: 1, overflowY: 'auto' }}>{children}</div>
        <nav style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '1px solid var(--border-hairline)', background: 'var(--surface-card)', paddingBottom: 18 }}>
          {tabs.map((t) => {
            const on = t.k === tab;
            return (
              <button
                key={t.k}
                onClick={() => onTab && onTab(t.k)}
                style={{
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
                  minHeight: 'var(--tap-min)', padding: '9px 0 4px', border: 'none', cursor: 'pointer',
                  background: 'transparent', color: on ? 'var(--ff-pepper)' : 'var(--text-meta)',
                  boxShadow: on ? 'inset 0 2px 0 0 var(--ff-pepper)' : 'none',
                }}
              >
                <Icon name={t.icon} size={20} />
                <span style={{ font: 'var(--type-meta)', fontSize: 11, fontWeight: on ? 600 : 400 }}>{t.en}</span>
                <span style={{ fontFamily: 'var(--ff-font-khmer)', fontSize: 10, lineHeight: 1.6, color: 'var(--text-meta)' }}>{t.kh}</span>
              </button>
            );
          })}
        </nav>
      </div>
      <span style={{ font: 'var(--type-mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>{label}</span>
    </div>
  );
}
window.AppFrame = AppFrame;