import type { ReactNode } from "react";

export function SliceShell({
  top,
  left,
  center,
  right,
  bottom,
}: {
  top: ReactNode;
  left: ReactNode;
  center: ReactNode;
  right: ReactNode;
  bottom: ReactNode;
}) {
  return (
    <div className="slice-shell" style={{ height: "100dvh", minHeight: 0, background: "radial-gradient(circle at 50% 12%, rgba(34,211,238,0.12), transparent 34%), #040810", color: "#d4dce8", overflow: "hidden" }}>
      <style>{`
        .slice-grid > * { min-width: 0; }
        .slice-left,
        .slice-right,
        .slice-center {
          min-height: 0;
          overflow: auto;
        }

        @media (max-width: 900px) {
          .slice-shell { height: 100dvh !important; overflow: auto !important; }
          .slice-grid { min-height: 100dvh !important; height: auto !important; grid-template-columns: 1fr !important; grid-template-rows: auto !important; padding-top: 58px !important; overflow: visible !important; }
          .slice-top { position: fixed !important; inset: 0 0 auto 0 !important; z-index: 10 !important; border-radius: 0 !important; }
          .slice-left, .slice-right, .slice-bottom { grid-column: 1 !important; }
          .slice-left, .slice-right, .slice-center { overflow: visible !important; }
          .slice-bottom-content { grid-template-columns: 1fr !important; }
          .slice-action-palette { grid-template-columns: 1fr !important; }
          .slice-center { min-height: min(420px, calc(100dvh - 140px)) !important; }
          .slice-loop-panel { min-height: 420px !important; }
          .slice-loop-state { min-height: 220px !important; }
        }

        @media (max-height: 720px) and (min-width: 901px) {
          .slice-grid { grid-template-rows: 44px minmax(0, 1fr) 108px !important; }
          .slice-loop-panel { padding: 12px !important; gap: 10px !important; }
          .slice-loop-title { font-size: 22px !important; }
          .slice-loop-copy { display: none !important; }
          .slice-loop-state { min-height: 0 !important; }
        }
      `}</style>
      <div
        className="slice-grid"
        style={{
          height: "100%",
          minHeight: 0,
          display: "grid",
          gridTemplateColumns: "minmax(220px, 0.72fr) minmax(360px, 1.5fr) minmax(240px, 0.78fr)",
          gridTemplateRows: "48px minmax(0, 1fr) clamp(108px, 16dvh, 132px)",
          gap: 8,
          padding: 8,
          boxSizing: "border-box",
          overflow: "hidden",
        }}
      >
        <div className="slice-top" style={{ gridColumn: "1 / -1" }}>{top}</div>
        <div className="slice-left" style={{ display: "grid", gap: 8, alignContent: "start" }}>{left}</div>
        <main className="slice-center">{center}</main>
        <div className="slice-right" style={{ display: "grid", gap: 8, alignContent: "start" }}>{right}</div>
        <div className="slice-bottom" style={{ gridColumn: "1 / -1" }}>{bottom}</div>
      </div>
    </div>
  );
}
