// The dual-canvas workspace shell.
// Composes TopBar / SocratesDock / LeftRail / TextCanvas / DiagramCanvas / StatusBar.
// Ported from docs/design-source/socrata/project/editor-shell.jsx (EditorShell).

"use client";

import { useState } from "react";
import { TopBar } from "./TopBar";
import { LeftRail } from "./LeftRail";
import { CanvasHeader } from "./CanvasHeader";
import { StatusBar } from "./StatusBar";
import { TextCanvas } from "../text-canvas/TextCanvas";
import { DiagramCanvas, type DiagramVariant } from "../diagram-canvas/DiagramCanvas";
import { SocratesDock, type Density, type SocratesPresence } from "../socrates/SocratesDock";
import type { MarkupStyle } from "../text-canvas/Chip";
import type { FixtureData } from "../../lib/fixtures/aristotle";

interface EditorShellProps {
  data: FixtureData;
  density?: Density;
  markupStyle?: MarkupStyle;
  diagramStyle?: DiagramVariant;
  presence?: SocratesPresence;
}

export function EditorShell({
  data,
  density = "comfortable",
  markupStyle = "color",
  diagramStyle = "softened",
  presence = "default",
}: EditorShellProps) {
  const [focusBlockId, setFocusBlockId] = useState<string | null>(null);

  return (
    <div className={`shell shell-density-${density} shell-presence-${presence}`}>
      <TopBar data={data} />

      <div className="shell-body">
        <SocratesDock thread={data.socratesThread} presence={presence} density={density} />
        <LeftRail data={data} focusBlockId={focusBlockId} setFocusBlockId={setFocusBlockId} />

        <main className="canvases">
          <section className="canvas canvas-text">
            <CanvasHeader title="Narrative" subtitle="Markup-augmented prose · synced to model" />
            <div className="canvas-scroll">
              <TextCanvas
                data={data}
                density={density}
                markupStyle={markupStyle}
                focusBlockId={focusBlockId}
                setFocusBlockId={setFocusBlockId}
              />
            </div>
          </section>

          <div className="canvas-divider" />

          <section className="canvas canvas-diagram">
            <CanvasHeader
              title="Model"
              subtitle="SysML · 6 blocks · 6 associations · 1 constraint"
              right={
                <div className="canvas-actions">
                  <span className="canvas-mode-pill">Fit</span>
                  <span className="canvas-mode-pill canvas-mode-active">100%</span>
                  <span className="canvas-mode-pill">Layout</span>
                </div>
              }
            />
            <div className="canvas-scroll canvas-scroll-diagram">
              <DiagramCanvas
                data={data}
                density={density}
                variant={diagramStyle}
                focusBlockId={focusBlockId}
                onSelect={setFocusBlockId}
              />
            </div>
          </section>
        </main>
      </div>

      <StatusBar data={data} />
    </div>
  );
}