/* Device shell — desktop is edge-to-edge; toggles tucked in bottom-right floater */

function DeviceShell({ mode, setMode, children }) {
  const opts = [
    { id: "desktop", label: "Desktop" },
    { id: "tablet",  label: "Tablet" },
    { id: "mobile",  label: "Mobile" },
  ];

  // Desktop = full-bleed, no frame chrome
  if (mode === "desktop") {
    return (
      <div className="device-shell device-shell-fullbleed">
        <div className="device-frame device-frame-fullbleed" data-mode="desktop">
          {children}
        </div>
        <DeviceFloater mode={mode} setMode={setMode} opts={opts} />
      </div>
    );
  }

  // Tablet/Mobile: keep a centered frame so the user can see the responsive form
  return (
    <div className="device-shell">
      <div className="device-stage">
        <div className="device-frame" data-mode={mode}>
          {children}
        </div>
      </div>
      <DeviceFloater mode={mode} setMode={setMode} opts={opts} />
    </div>
  );
}

function DeviceFloater({ mode, setMode, opts }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className={`device-floater ${open ? "is-open" : ""}`}>
      {open && (
        <div className="df-options">
          {opts.map(o => (
            <button
              key={o.id}
              className={mode === o.id ? "is-active" : ""}
              onClick={() => { setMode(o.id); setOpen(false); }}
            >
              <DeviceIcon id={o.id} /> {o.label}
            </button>
          ))}
        </div>
      )}
      <button className="df-trigger" onClick={() => setOpen(o => !o)} title="Preview size">
        <DeviceIcon id={mode} />
        <span className="df-label">{mode}</span>
      </button>
    </div>
  );
}

function DeviceIcon({ id }) {
  if (id === "desktop") return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="4" width="20" height="13" rx="1.5"/><path d="M8 21h8M12 17v4"/></svg>;
  if (id === "tablet")  return <svg width="11" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M11 19h2"/></svg>;
  return <svg width="9" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M11 19h2"/></svg>;
}

window.DeviceShell = DeviceShell;