paint-ui/components/editor/editor-layout.tsx

'use client';

import { useEffect } from 'react';
import { useCanvasStore, useLayerStore } from '@/store';
import { useHistoryStore } from '@/store/history-store';
import { CanvasWrapper } from '@/components/canvas/canvas-wrapper';
import { LayersPanel } from '@/components/layers/layers-panel';
import { HistoryPanel } from './history-panel';
import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts';
import { createLayerWithHistory } from '@/lib/layer-operations';
import { Plus, ZoomIn, ZoomOut, Maximize, Undo, Redo } from 'lucide-react';
import { cn } from '@/lib/utils';

export function EditorLayout() {
  const { zoom, zoomIn, zoomOut, zoomToFit } = useCanvasStore();
  const { layers } = useLayerStore();
  const { undo, redo, canUndo, canRedo } = useHistoryStore();

  // Enable keyboard shortcuts
  useKeyboardShortcuts();

  // Initialize with a default layer (without history)
  useEffect(() => {
    if (layers.length === 0) {
      const { createLayer } = useLayerStore.getState();
      createLayer({
        name: 'Background',
        width: 800,
        height: 600,
        fillColor: '#ffffff',
      });
    }
  }, []);

  const handleNewLayer = () => {
    createLayerWithHistory({
      name: `Layer ${layers.length + 1}`,
      width: 800,
      height: 600,
    });
  };

  const handleZoomToFit = () => {
    // Approximate viewport size (accounting for panels)
    const viewportWidth = window.innerWidth - 320; // Subtract sidebar width
    const viewportHeight = window.innerHeight - 60; // Subtract toolbar height
    zoomToFit(viewportWidth, viewportHeight);
  };

  return (
    <div className="flex h-screen flex-col overflow-hidden">
      {/* Toolbar */}
      <div className="flex h-14 items-center justify-between border-b border-border bg-card px-4">
        <div className="flex items-center gap-2">
          <h1 className="text-lg font-semibold bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent">
            Paint UI
          </h1>
        </div>

        {/* History controls */}
        <div className="flex items-center gap-1 border-r border-border pr-2">
          <button
            onClick={undo}
            disabled={!canUndo()}
            className={cn(
              'rounded-md p-2 transition-colors',
              canUndo()
                ? 'hover:bg-accent text-foreground'
                : 'text-muted-foreground cursor-not-allowed'
            )}
            title="Undo (Ctrl+Z)"
          >
            <Undo className="h-4 w-4" />
          </button>

          <button
            onClick={redo}
            disabled={!canRedo()}
            className={cn(
              'rounded-md p-2 transition-colors',
              canRedo()
                ? 'hover:bg-accent text-foreground'
                : 'text-muted-foreground cursor-not-allowed'
            )}
            title="Redo (Ctrl+Shift+Z)"
          >
            <Redo className="h-4 w-4" />
          </button>
        </div>

        {/* Zoom controls */}
        <div className="flex items-center gap-2">
          <button
            onClick={zoomOut}
            className="rounded-md p-2 hover:bg-accent transition-colors"
            title="Zoom Out"
          >
            <ZoomOut className="h-4 w-4" />
          </button>

          <span className="min-w-[4rem] text-center text-sm text-muted-foreground">
            {Math.round(zoom * 100)}%
          </span>

          <button
            onClick={zoomIn}
            className="rounded-md p-2 hover:bg-accent transition-colors"
            title="Zoom In"
          >
            <ZoomIn className="h-4 w-4" />
          </button>

          <button
            onClick={handleZoomToFit}
            className="rounded-md p-2 hover:bg-accent transition-colors"
            title="Fit to Screen"
          >
            <Maximize className="h-4 w-4" />
          </button>
        </div>

        <div className="flex items-center gap-2">
          <button
            onClick={handleNewLayer}
            className="flex items-center gap-2 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
          >
            <Plus className="h-4 w-4" />
            New Layer
          </button>
        </div>
      </div>

      {/* Main content */}
      <div className="flex flex-1 overflow-hidden">
        {/* Canvas area */}
        <div className="flex-1">
          <CanvasWrapper />
        </div>

        {/* Right sidebar */}
        <div className="w-80 border-l border-border flex flex-col">
          <div className="flex-1 overflow-hidden">
            <LayersPanel />
          </div>
          <div className="h-64 border-t border-border">
            <HistoryPanel />
          </div>
        </div>
      </div>
    </div>
  );
}