// tablet-frame.jsx — Android tablet bezel for the RWIC field tablet
// Landscape 10" Android tablet. Outer chrome is purely cosmetic — the inner
// screen is a fixed 1280×800 canvas that scales to fit the host viewport.

function TabletFrame({ children, scaleToFit = true }) {
  const W = 1280, H = 800;
  const PAD = 28; // bezel thickness
  const wrapRef = useRef(null);
  const [scale, setScale] = useState(1);

  useEffect(() => {
    if (!scaleToFit) return;
    const compute = () => {
      const outerW = W + PAD * 2;
      const outerH = H + PAD * 2;
      const vw = window.innerWidth - 40;
      const vh = window.innerHeight - 40;
      const s = Math.min(vw / outerW, vh / outerH, 1);
      setScale(s);
    };
    compute();
    window.addEventListener('resize', compute);
    return () => window.removeEventListener('resize', compute);
  }, [scaleToFit]);

  return (
    <div ref={wrapRef} style={{
      width: (W + PAD * 2) * scale,
      height: (H + PAD * 2) * scale,
      position: 'relative',
    }}>
      <div style={{
        transform: `scale(${scale})`,
        transformOrigin: 'top left',
        width: W + PAD * 2,
        height: H + PAD * 2,
        position: 'absolute', top: 0, left: 0,
      }}>
        {/* Outer bezel */}
        <div style={{
          width: W + PAD * 2, height: H + PAD * 2,
          background: 'linear-gradient(180deg, #1c1f23 0%, #0f1114 100%)',
          borderRadius: 36,
          padding: PAD,
          boxShadow:
            '0 50px 80px rgba(0,0,0,0.45),' +
            '0 0 0 1px rgba(255,255,255,0.04) inset,' +
            '0 1px 0 rgba(255,255,255,0.06) inset',
          position: 'relative',
        }}>
          {/* Front-facing camera dot — left center bezel */}
          <div style={{
            position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)',
            width: 6, height: 6, borderRadius: '50%',
            background: '#2a2d31', boxShadow: '0 0 0 1px rgba(255,255,255,0.06)',
          }} />
          {/* Power + volume hint on right edge */}
          <div style={{
            position: 'absolute', right: -2, top: 60, width: 3, height: 64,
            background: '#0a0b0e', borderRadius: '0 2px 2px 0',
          }} />
          <div style={{
            position: 'absolute', right: -2, top: 150, width: 3, height: 38,
            background: '#0a0b0e', borderRadius: '0 2px 2px 0',
          }} />

          {/* Screen */}
          <div style={{
            width: W, height: H,
            borderRadius: 14,
            overflow: 'hidden',
            background: 'var(--paper)',
            position: 'relative',
            boxShadow: '0 0 0 2px #050507 inset',
          }}>
            {/* Status bar — thin, Material 3 style */}
            <div style={{
              position: 'absolute', top: 0, left: 0, right: 0, height: 26,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '0 18px',
              fontFamily: 'Roboto, var(--font-sans)',
              fontSize: 12, fontWeight: 500,
              color: 'var(--text-2)',
              background: 'transparent',
              zIndex: 60, pointerEvents: 'none',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span className="mono">06:42</span>
                <span style={{ width: 4, height: 4, borderRadius: 2, background: 'var(--good)' }} />
                <span style={{ fontSize: 11 }}>GPR Cascade</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 11 }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                  <SignalGlyph />
                  LTE
                </span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                  <WifiGlyph />
                </span>
                <BatteryGlyph pct={68} />
                <span className="mono" style={{ fontSize: 11 }}>68%</span>
              </div>
            </div>

            {/* Content — leaves room for status bar */}
            <div style={{
              position: 'absolute', inset: 0, paddingTop: 26,
              display: 'flex', flexDirection: 'column',
            }}>
              {children}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const SignalGlyph = () => (
  <svg width="14" height="10" viewBox="0 0 14 10" style={{ display: 'block' }}>
    <rect x="0"  y="7" width="2" height="3" rx="0.5" fill="currentColor" />
    <rect x="3"  y="5" width="2" height="5" rx="0.5" fill="currentColor" />
    <rect x="6"  y="3" width="2" height="7" rx="0.5" fill="currentColor" />
    <rect x="9"  y="1" width="2" height="9" rx="0.5" fill="currentColor" opacity="0.4"/>
    <rect x="12" y="0" width="2" height="10" rx="0.5" fill="currentColor" opacity="0.25"/>
  </svg>
);
const WifiGlyph = () => (
  <svg width="14" height="10" viewBox="0 0 14 10" style={{ display: 'block' }}>
    <path d="M7 9.2a0.9 0.9 0 1 1 0-1.8 0.9 0.9 0 0 1 0 1.8z" fill="currentColor" />
    <path d="M3 5.6a5.6 5.6 0 0 1 8 0" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
    <path d="M1 3.4a8.6 8.6 0 0 1 12 0" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
  </svg>
);
const BatteryGlyph = ({ pct = 80 }) => (
  <svg width="22" height="11" viewBox="0 0 22 11" style={{ display: 'block' }}>
    <rect x="0.5" y="0.5" width="19" height="10" rx="2" fill="none" stroke="currentColor" strokeWidth="1" />
    <rect x="20" y="3.5" width="1.5" height="4" rx="0.6" fill="currentColor" />
    <rect x="2" y="2" width={Math.max(1, (pct / 100) * 16)} height="7" rx="1" fill="currentColor" />
  </svg>
);

Object.assign(window, { TabletFrame });