/* Variant screens shown in a design_canvas: real Ply screens —
   Stuff library, AI panel (3 modes), per-site privacy, device sync. */

function SmallChrome({ title, children, w = 540, h = 380 }) {
  const Icon = window.PlyIcon;
  return (
    <div style={{
      width: w, height: h,
      background: "var(--app-frame)",
      border: "1px solid var(--rule-2)",
      borderRadius: 10,
      overflow: "hidden",
      display: "flex", flexDirection: "column",
      boxShadow: "0 16px 32px -12px rgba(20,19,15,.18)",
    }}>
      <div style={{
        height: 26,
        background: "linear-gradient(180deg, var(--app-bar-1), var(--app-bar-2))",
        borderBottom: "1px solid var(--rule-2)",
        display: "flex", alignItems: "center",
        padding: "0 10px", gap: 6,
      }}>
        <div style={{ display: "flex", gap: 5 }}>
          <div style={{ width: 9, height: 9, borderRadius: 99, background: "#e96d59" }} />
          <div style={{ width: 9, height: 9, borderRadius: 99, background: "#e6bf3f" }} />
          <div style={{ width: 9, height: 9, borderRadius: 99, background: "#62c454" }} />
        </div>
        <div style={{ flex: 1, textAlign: "center", fontFamily: "var(--mono)", fontSize: 10, color: "var(--fg-3)" }}>
          {title}
        </div>
      </div>
      <div style={{ flex: 1, overflow: "auto", background: "var(--bg)" }}>
        {children}
      </div>
    </div>
  );
}

/* —— Stuff library (reuses the live StuffMini) —— */
function StuffArtboard() {
  const StuffMini = window.StuffMini;
  return (
    <SmallChrome title="Ply — Stuff">
      <StuffMini />
    </SmallChrome>
  );
}

/* —— AI panel (reuses the live AiPanel, shown inline not as overlay) —— */
function AiArtboard() {
  const AiPanel = window.AiPanel;
  return (
    <SmallChrome title="Ply — AI panel">
      <div style={{ position: "relative", height: "100%", background: "var(--bg-2)" }}>
        {/* AiPanel renders an overlay; the dim backdrop + centered card read fine inside the frame */}
        <AiPanel onClose={() => {}} initialMode="library" />
      </div>
    </SmallChrome>
  );
}

/* —— Per-site privacy (reuses PrivacyMini) —— */
function PrivacyArtboard() {
  const PrivacyMini = window.PrivacyMini;
  return (
    <SmallChrome title="Ply — site privacy">
      <PrivacyMini />
    </SmallChrome>
  );
}

/* —— Device sync (reuses SyncMini) —— */
function SyncArtboard() {
  const SyncMini = window.SyncMini;
  return (
    <SmallChrome title="Ply — Devices · sync">
      <SyncMini />
    </SmallChrome>
  );
}

/* ————— Mount the canvas ————— */
function CanvasMount() {
  return (
    <DesignCanvas storageKey="ply-canvas-v2" initialZoom={0.55} initialPanY={-20}>
      <DCSection id="screens" title="Inside Ply" defaultOpen>
        <DCArtboard id="ab-stuff" label="Stuff — the library, by section" width={540} height={380}>
          <StuffArtboard />
        </DCArtboard>
        <DCArtboard id="ab-ai" label="AI panel — search library mode" width={540} height={380}>
          <AiArtboard />
        </DCArtboard>
        <DCArtboard id="ab-privacy" label="Per-site privacy shield" width={540} height={380}>
          <PrivacyArtboard />
        </DCArtboard>
        <DCArtboard id="ab-sync" label="Device sync over local network" width={540} height={380}>
          <SyncArtboard />
        </DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
}

const canvasEl = document.querySelector("#canvas-mount");
if (canvasEl) ReactDOM.createRoot(canvasEl).render(<CanvasMount />);