import { ComponentSidebar } from './ComponentSidebar';
import { ControlPanel } from './ControlPanel';
import { DetailDrawer } from './DetailDrawer';
import { StatusBar } from './StatusBar';
import { ViewerToolbar } from './ViewerToolbar';
import { SceneRoot } from '../../three/SceneRoot';
import type { MachineRegistryEntry } from '../../modules/machines/schema';

interface ViewerScaffoldProps {
  machine: MachineRegistryEntry;
}

export function ViewerScaffold({ machine }: ViewerScaffoldProps) {
  return (
    <div className="relative flex min-h-[calc(100vh-4rem)] flex-col overflow-hidden bg-background">
      <div className="grid flex-1 overflow-hidden lg:grid-cols-[19rem_minmax(0,1fr)] xl:grid-cols-[19rem_minmax(0,1fr)_21rem]">
        <aside className="hidden overflow-y-auto border-r border-line/70 bg-surface/62 p-4 lg:block">
          <ComponentSidebar machine={machine} />
        </aside>

        <section
          aria-label={`${machine.title} 3D viewer`}
          className="relative min-h-[calc(100vh-11rem)] overflow-hidden bg-background lg:min-h-0"
        >
          <SceneRoot machine={machine} />
          <ViewerToolbar machine={machine} />
        </section>

        <aside className="hidden overflow-y-auto border-l border-line/70 bg-surface/62 p-4 xl:block">
          <ControlPanel machine={machine} />
        </aside>
      </div>

      <div className="grid gap-4 border-t border-line/70 bg-background/95 p-4 lg:hidden">
        <ComponentSidebar machine={machine} />
        <ControlPanel machine={machine} />
      </div>

      <StatusBar machine={machine} />
      <DetailDrawer machine={machine} />
    </div>
  );
}