import { ConfirmDialog } from './components/ConfirmDialog';
import { LivePreview } from './components/LivePreview';
import { ResizeHandle } from './components/ResizeHandle';
import { SnippetLibrary } from './components/SnippetLibrary';
import { SpecEditor } from './components/SpecEditor';
import { ThemeToggle } from './components/ThemeToggle';
import { usePanesStore } from './stores/PanesStore';
import styles from './App.module.css';

/**
 * Application shell — the three-pane workspace from spec §01A
 * (library · editor · preview) under a fixed header.
 *
 * The center editor flexes; the library and preview carry remembered widths and
 * are resized via the drag handles between them (spec §01A). Pane show/hide
 * toggling, modals, routing, and shortcuts arrive in later milestones (see
 * docs/IMPLEMENTATION-PLAN.md).
 */
export function App() {
  const libraryWidth = usePanesStore((s) => s.libraryWidth);
  const previewWidth = usePanesStore((s) => s.previewWidth);

  return (
    <div className={styles.app}>
      <header className={styles.header}>
        <span className={styles.title}>Astrolabe</span>
        <span className={styles.version}>v{__APP_VERSION__}</span>
        <span className={styles.spacer} />
        <ThemeToggle />
      </header>

      <main className={styles.panes}>
        <section
          className={styles.pane}
          style={{ width: libraryWidth }}
          aria-label="Snippet library"
        >
          <SnippetLibrary />
        </section>
        <ResizeHandle side="library" label="Resize snippet library" />
        <section className={styles.paneEditor} aria-label="Spec editor">
          <SpecEditor />
        </section>
        <ResizeHandle side="preview" label="Resize live preview" />
        <section className={styles.pane} style={{ width: previewWidth }} aria-label="Live preview">
          <LivePreview />
        </section>
      </main>

      {/* Global confirmation layer — sits above the (future) feature-modal
          shell so a discard-changes prompt can appear over an open modal. */}
      <ConfirmDialog />
    </div>
  );
}