/* ============================================================================
   MOWDEW — Phone frame, chrome & navigation primitives
   PhoneFrame (bezel + status bar + home indicator), Screen scaffold, TopBar,
   TabBar (role-aware), FAB, ActionBar, Sheet, Toggle, Row. On window.
   ========================================================================= */

function StatusBar({ tint = 'var(--ink-900)' }) {
  return (
    <div style={{ height: 50, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 28px 0 30px', flexShrink: 0, position: 'relative', zIndex: 5 }}>
      <span style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15, color: tint, letterSpacing: '0.02em' }}>9:41</span>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, color: tint }}>
        <svg width="18" height="12" viewBox="0 0 18 12" fill="currentColor"><rect x="0" y="7.5" width="3" height="4.5" rx="0.7"/><rect x="4.5" y="5" width="3" height="7" rx="0.7"/><rect x="9" y="2.5" width="3" height="9.5" rx="0.7"/><rect x="13.5" y="0" width="3" height="12" rx="0.7"/></svg>
        <svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><path d="M8 2.6c2.1 0 4 .8 5.4 2.2l1-1A9 9 0 0 0 8 1 9 9 0 0 0 1.6 3.8l1 1A7.6 7.6 0 0 1 8 2.6Z"/><path d="M8 6c1.2 0 2.3.5 3.1 1.3l1-1A6 6 0 0 0 8 4.6 6 6 0 0 0 3.9 6.3l1 1A4.4 4.4 0 0 1 8 6Z"/><circle cx="8" cy="9.6" r="1.5"/></svg>
        <svg width="25" height="12" viewBox="0 0 25 12"><rect x="0.5" y="0.5" width="21" height="11" rx="3" stroke="currentColor" strokeOpacity="0.4" fill="none"/><rect x="2" y="2" width="17" height="8" rx="1.6" fill="currentColor"/><rect x="23" y="4" width="1.5" height="4" rx="0.7" fill="currentColor" fillOpacity="0.5"/></svg>
      </span>
    </div>
  );
}

function PhoneFrame({ children, dark = false }) {
  return (
    <div style={{ width: 392, height: 820, borderRadius: 52, padding: 11, background: 'linear-gradient(160deg,#2c2a26,#15140f)', boxShadow: '0 50px 90px rgba(27,26,23,.34), 0 0 0 1px rgba(0,0,0,.25)', flexShrink: 0 }}>
      <div style={{ width: '100%', height: '100%', borderRadius: 42, overflow: 'hidden', position: 'relative', background: dark ? 'var(--ink-900)' : 'var(--paper)', display: 'flex', flexDirection: 'column' }}>
        {/* dynamic island */}
        <div style={{ position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)', width: 116, height: 33, borderRadius: 20, background: '#000', zIndex: 30 }} />
        <StatusBar tint={dark ? '#fff' : 'var(--ink-900)'} />
        <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>{children}</div>
        {/* home indicator */}
        <div style={{ position: 'absolute', bottom: 7, left: '50%', transform: 'translateX(-50%)', width: 132, height: 5, borderRadius: 99, background: dark ? 'rgba(255,255,255,.7)' : 'rgba(27,26,23,.28)', zIndex: 40, pointerEvents: 'none' }} />
      </div>
    </div>
  );
}

/* TopBar — sticky screen header. variant: plain | green | dark */
function TopBar({ title, subtitle, onBack, right, variant = 'plain', big = false, children }) {
  const dark = variant === 'green' || variant === 'dark';
  const bg = variant === 'green' ? 'var(--green-700)' : variant === 'dark' ? 'var(--ink-900)' : 'var(--paper)';
  const fg = dark ? '#fff' : 'var(--ink-900)';
  const sub = dark ? 'rgba(255,255,255,.72)' : 'var(--ink-500)';
  return (
    <div style={{ background: bg, padding: variant === 'plain' ? '6px 18px 12px' : '6px 18px 18px', flexShrink: 0, borderBottom: variant === 'plain' ? '1px solid var(--ink-100)' : 'none', position: 'relative', zIndex: 4 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, minHeight: 40 }}>
        {onBack && (
          <button onClick={onBack} aria-label="Back" style={{ width: 40, height: 40, marginLeft: -8, borderRadius: 12, border: 'none', background: dark ? 'rgba(255,255,255,.14)' : 'transparent', color: fg, display: 'grid', placeItems: 'center', cursor: 'pointer', flexShrink: 0 }}>
            <Icon name="arrow-left" size={22} />
          </button>
        )}
        <div style={{ flex: 1, minWidth: 0 }}>
          {!big && <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19, letterSpacing: '-0.02em', color: fg, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{title}</div>}
          {!big && subtitle && <div style={{ fontSize: 12.5, color: sub, marginTop: 1 }}>{subtitle}</div>}
        </div>
        {right}
      </div>
      {big && (
        <div style={{ marginTop: 8 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 30, letterSpacing: '-0.03em', color: fg, lineHeight: 1.08 }}>{title}</div>
          {subtitle && <div style={{ fontSize: 14, color: sub, marginTop: 3 }}>{subtitle}</div>}
        </div>
      )}
      {children}
    </div>
  );
}

/* Screen — scroll body + optional sticky footer/tabbar */
function Screen({ children, footer, dark = false, padBottom = 22, scrollRef }) {
  return (
    <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', background: dark ? 'var(--ink-900)' : 'var(--paper)' }}>
      <div ref={scrollRef} className="tn-scroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', overflowX: 'hidden' }}>
        <div style={{ paddingBottom: padBottom }}>{children}</div>
      </div>
      {footer}
    </div>
  );
}

/* TabBar — role-aware bottom nav with center FAB */
const TABS = {
  provider: [['route', 'Today', 'pro_today'], ['check-circle', 'Done', 'pro_done'], [null], ['notes', 'Notes', 'pro_notes'], ['settings', 'Settings', 'settings']],
  homeowner: [['feed', 'Visits', 'h_feed'], ['droplet', 'Pool', 'h_chem'], [null], ['file', 'Invoices', 'h_inbox'], ['ledger', 'Ledger', 'h_ledger']],
  owner: [['home', 'Home', 'o_home'], ['dollar', 'Money', 'o_money'], [null], ['inbox', 'Inbox', 'o_inbox'], ['users', 'Customers', 'o_customers']],
};
const TAB_ICON = { homes: 'users' };
function TabBar({ role, active, go, onFab }) {
  const items = TABS[role];
  return (
    <div style={{ position: 'relative', flexShrink: 0, background: 'var(--surface)', borderTop: '1px solid var(--ink-100)', boxShadow: '0 -4px 20px rgba(27,26,23,.05)', paddingBottom: 18 }}>
      <button onClick={onFab} aria-label="Action" style={{ position: 'absolute', top: -26, left: '50%', transform: 'translateX(-50%)', width: 60, height: 60, borderRadius: '50%', background: 'var(--green-700)', border: '5px solid var(--surface)', boxShadow: 'var(--shadow-green)', color: '#fff', display: 'grid', placeItems: 'center', cursor: 'pointer', zIndex: 2 }}>
        <Icon name={role === 'provider' ? 'camera' : 'plus'} size={26} strokeWidth={2.4} />
      </button>
      <div style={{ display: 'flex', alignItems: 'flex-end', padding: '10px 6px 4px' }}>
        {items.map((it, i) => {
          if (it[0] === null) return <div key={i} style={{ width: 64 }} />;
          const [ic, lb, scr] = it;
          const on = active === scr;
          return (
            <button key={i} onClick={() => go(scr)} style={{ flex: 1, background: 'none', border: 'none', cursor: 'pointer', display: 'grid', placeItems: 'center', gap: 3, padding: '4px 0', color: on ? 'var(--green-700)' : 'var(--ink-500)' }}>
              <Icon name={TAB_ICON[ic] || ic} size={24} strokeWidth={on ? 2.4 : 2} />
              <span style={{ fontSize: 10.5, fontWeight: on ? 700 : 600, letterSpacing: '-0.01em' }}>{lb}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

/* Sticky action bar (single/double button) */
function ActionBar({ children, dark = false }) {
  return (
    <div style={{ flexShrink: 0, padding: '12px 18px 20px', background: dark ? 'var(--ink-900)' : 'var(--surface)', borderTop: `1px solid ${dark ? 'rgba(255,255,255,.1)' : 'var(--ink-100)'}`, display: 'flex', gap: 10 }}>
      {children}
    </div>
  );
}

/* Toggle switch */
function Toggle({ on, onChange, tone = 'green' }) {
  const bg = on ? (tone === 'green' ? 'var(--green-600)' : 'var(--blue-500)') : 'var(--ink-200)';
  return (
    <button role="switch" aria-checked={on} onClick={() => onChange(!on)} style={{ width: 52, height: 31, borderRadius: 99, background: bg, border: 'none', cursor: 'pointer', padding: 3, display: 'flex', justifyContent: on ? 'flex-end' : 'flex-start', transition: 'background .18s ease', flexShrink: 0 }}>
      <span style={{ width: 25, height: 25, borderRadius: '50%', background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,.25)', transition: 'all .18s ease' }} />
    </button>
  );
}

/* Bottom sheet overlay */
function Sheet({ open, onClose, children, title }) {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position: 'absolute', inset: 0, zIndex: 50, background: 'rgba(27,26,23,.4)', display: 'flex', alignItems: 'flex-end', animation: 'tnFade .18s ease' }}>
      <div onClick={e => e.stopPropagation()} style={{ width: '100%', background: 'var(--surface)', borderRadius: '28px 28px 0 0', padding: '12px 20px 26px', animation: 'tnSlideUp .26s cubic-bezier(.22,1,.36,1)', maxHeight: '86%', overflowY: 'auto' }}>
        <div style={{ width: 40, height: 5, borderRadius: 99, background: 'var(--ink-200)', margin: '0 auto 16px' }} />
        {title && <h2 style={{ marginBottom: 14 }}>{title}</h2>}
        {children}
      </div>
    </div>
  );
}

/* Toast */
function Toast({ msg, tone = 'green' }) {
  if (!msg) return null;
  const bg = tone === 'green' ? 'var(--green-700)' : tone === 'blue' ? 'var(--blue-700)' : 'var(--ink-900)';
  return (
    <div style={{ position: 'absolute', bottom: 96, left: '50%', transform: 'translateX(-50%)', zIndex: 60, background: bg, color: '#fff', padding: '12px 18px', borderRadius: 99, fontSize: 14, fontWeight: 700, boxShadow: 'var(--shadow-lg)', display: 'flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap', animation: 'tnSlideUp .26s cubic-bezier(.22,1,.36,1)' }}>
      <Icon name="check-circle" size={18} />{msg}
    </div>
  );
}

Object.assign(window, { StatusBar, PhoneFrame, TopBar, Screen, TabBar, ActionBar, Toggle, Sheet, Toast });