/* global React */
// wf-mobile · device-frame.jsx
// Wraps children in a realistic iPhone 17 Pro / Pixel 9 Pro / iPad Pro shell.
window.WFMobile = window.WFMobile || {};

function StatusBar({ variant = 'ios', time = '9:41', dark = false }) {
  const ink = dark ? '#fff' : '#0c0a09';
  return (
    <div className="wf-statusbar" data-variant={variant} style={{ color: ink }}>
      <div className="wf-sb-time">{time}</div>
      <div className="wf-sb-icons">
        <div className="wf-sb-bars"><i/><i/><i/><i/></div>
        <svg width="16" height="11" viewBox="0 0 16 11" fill="none" aria-hidden="true">
          <path d="M8 10.5C8 10.5 13 6 13 3.5C13 1 11 0.5 8 0.5C5 0.5 3 1 3 3.5C3 6 8 10.5 8 10.5Z" stroke={ink} strokeWidth="1.2" fill="none"/>
        </svg>
        <div className="wf-sb-batt"><i style={{ background: ink }} /></div>
      </div>
    </div>
  );
}

function IPhone17Pro({ color = 'natural', dark = false, time = '9:41', children }) {
  return (
    <div className="wf-device wf-iphone" data-color={color}>
      <span className="wf-btn-action" />
      <span className="wf-btn-volup" />
      <span className="wf-btn-voldn" />
      <span className="wf-btn-right" />
      <div className="wf-bezel">
        <div className="wf-screen">
          <StatusBar variant="ios" dark={dark} time={time} />
          {children}
          <div className="wf-home-indicator" />
        </div>
      </div>
      <div className="wf-island" />
    </div>
  );
}

function Pixel9Pro({ color = 'obsidian', dark = false, time = '12:30', children }) {
  return (
    <div className="wf-device wf-android" data-color={color}>
      <span className="wf-btn-right" />
      <span className="wf-btn-right power" />
      <div className="wf-bezel">
        <div className="wf-screen">
          <StatusBar variant="android" dark={dark} time={time} />
          {children}
          <div className="wf-android-pill" />
        </div>
      </div>
      <div className="wf-punch" />
    </div>
  );
}

function IPadPro({ dark = false, time = '9:41', children }) {
  return (
    <div className="wf-device wf-ipad">
      <div className="wf-bezel">
        <div className="wf-screen">
          <StatusBar variant="ios" dark={dark} time={time} />
          {children}
        </div>
      </div>
      <div className="wf-cam" />
    </div>
  );
}

// Natural (unscaled) device dimensions in CSS px — must match device-frame.css.
const DEVICE_SIZE = {
  iphone:  { w: 402, h: 874 },
  android: { w: 408, h: 884 },
  pixel:   { w: 408, h: 884 },
  tablet:  { w: 820, h: 1180 },
  ipad:    { w: 820, h: 1180 },
};
const GAP = 56; // matches .wf-fit gap

function DeviceFrame({ device = 'iphone', color, dark, time, wallpaper = 'default', secondary, children }) {
  const stageRef = React.useRef(null);
  const outerRef = React.useRef(null);
  const fitRef = React.useRef(null);

  const renderOne = (d) => {
    if (d === 'android' || d === 'pixel') return <Pixel9Pro color={color} dark={dark} time={time}>{children}</Pixel9Pro>;
    if (d === 'tablet' || d === 'ipad') return <IPadPro dark={dark} time={time}>{children}</IPadPro>;
    return <IPhone17Pro color={color} dark={dark} time={time}>{children}</IPhone17Pro>;
  };

  // Auto-scale device(s) to fit viewport using known dimensions (no measurement race).
  // Outer wrapper gets explicit scaled size so grid centering uses post-scale bounds.
  React.useLayoutEffect(() => {
    const outer = outerRef.current;
    const fit = fitRef.current;
    if (!outer || !fit) return;

    const PAD_X = 64;
    const PAD_Y = 64;
    const MIN = 0.3;
    const MAX = (device === 'tablet' || device === 'ipad') ? 0.62 : 0.92;

    let raf = 0;
    const recompute = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const a = DEVICE_SIZE[device] || DEVICE_SIZE.iphone;
        const b = secondary ? (DEVICE_SIZE[secondary] || DEVICE_SIZE.iphone) : null;
        const fw = b ? a.w + GAP + b.w : a.w;
        const fh = b ? Math.max(a.h, b.h) : a.h;

        const vw = window.innerWidth - PAD_X * 2;
        const vh = window.innerHeight - PAD_Y * 2;
        if (vw <= 0 || vh <= 0) return;

        const raw = Math.min(vw / fw, vh / fh);
        const scale = Math.max(MIN, Math.min(raw, MAX));

        fit.style.setProperty('--wf-scale', String(scale));
        outer.style.width  = (fw * scale) + 'px';
        outer.style.height = (fh * scale) + 'px';
      });
    };

    recompute();
    if (document.fonts && document.fonts.ready) {
      document.fonts.ready.then(recompute).catch(() => {});
    }
    window.addEventListener('resize', recompute);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('resize', recompute);
    };
  }, [device, secondary]);

  return (
    <div className="wf-stage" data-wallpaper={wallpaper} ref={stageRef}>
      <div className="wf-fit-outer" ref={outerRef}>
        <div className="wf-fit" ref={fitRef}>
          {renderOne(device)}
          {secondary ? renderOne(secondary) : null}
        </div>
      </div>
      <div className="wf-stage-watermark">Pradnya Bali · Membership App</div>
    </div>
  );
}

window.WFMobile.DeviceFrame = DeviceFrame;
window.WFMobile.StatusBar = StatusBar;