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 { CanvasWithTools } from '@/components/canvas/canvas-with-tools';
import { FileMenu } from './file-menu';
import { ToolOptions } from './tool-options';
import { PanelDock } from './panel-dock';
import { ToolPalette } from '@/components/tools';
import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts';
import { useFileOperations } from '@/hooks/use-file-operations';
import { useDragDrop } from '@/hooks/use-drag-drop';
import { useClipboard } from '@/hooks/use-clipboard';
import { createLayerWithHistory } from '@/lib/layer-operations';
import { Plus, ZoomIn, ZoomOut, Maximize, Undo, Redo, Upload } 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();
  const { handleDataTransfer } = useFileOperations();

  // Enable keyboard shortcuts
  useKeyboardShortcuts();

  // Enable drag & drop
  const { isDragging, handleDragOver, handleDragLeave, handleDrop } = useDragDrop(handleDataTransfer);

  // Enable clipboard paste
  useClipboard(handleDataTransfer);

  // 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 - 344; // Subtract sidebar width (64px tools + 280px panels)
    const viewportHeight = window.innerHeight - 88; // Subtract toolbar height (48px header + 40px tool adjustments)
    zoomToFit(viewportWidth, viewportHeight);
  };

  return (
    <div
      className="flex h-screen flex-col overflow-hidden"
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
    >
      {/* Drag overlay */}
      {isDragging && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
          <div className="flex flex-col items-center gap-4 p-8 bg-card border-2 border-dashed border-primary rounded-lg">
            <Upload className="h-16 w-16 text-primary" />
            <p className="text-lg font-semibold text-foreground">
              Drop image or project file
            </p>
            <p className="text-sm text-muted-foreground">
              Supports: PNG, JPG, WEBP, .paint
            </p>
          </div>
        </div>
      )}

      {/* Header Bar */}
      <div className="flex h-12 items-center justify-between border-b border-border bg-card px-4">
        {/* Left: Title and File Menu */}
        <div className="flex items-center gap-4">
          <h1 className="text-lg font-semibold bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent">
            Paint UI
          </h1>
          <FileMenu />
        </div>

        {/* Right: Controls */}
        <div className="flex items-center gap-2">
          {/* History controls */}
          <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 className="w-px h-6 bg-border mx-1" />

          {/* Zoom controls */}
          <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 className="w-px h-6 bg-border mx-1" />

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

      {/* Tool Adjustments Bar */}
      <div className="flex h-10 items-center border-b border-border bg-card/50 px-4">
        <ToolOptions />
      </div>

      {/* Main content */}
      <div className="flex flex-1 overflow-hidden">
        {/* Left: Tool Palette */}
        <ToolPalette />

        {/* Center: Canvas */}
        <div className="flex-1">
          <CanvasWithTools />
        </div>

        {/* Right: Panel Dock */}
        <PanelDock />
      </div>
    </div>
  );
}