paint-ui/components/layers/layers-panel.tsx

'use client';

import { useLayerStore } from '@/store';
import { useContextMenuStore } from '@/store/context-menu-store';
import { Eye, EyeOff, Trash2, Copy, Layers, MoveUp, MoveDown } from 'lucide-react';
import { cn } from '@/lib/utils';
import {
  deleteLayerWithHistory,
  updateLayerWithHistory,
  duplicateLayerWithHistory,
} from '@/lib/layer-operations';
import { LayerEffectsPanel } from './layer-effects-panel';

export function LayersPanel() {
  const { layers, activeLayerId, setActiveLayer, reorderLayer } = useLayerStore();
  const { showContextMenu } = useContextMenuStore();

  // Sort layers by order (highest first)
  const sortedLayers = [...layers].sort((a, b) => b.order - a.order);

  const handleMoveLayer = (layerId: string, direction: 'up' | 'down') => {
    const layer = layers.find((l) => l.id === layerId);
    if (!layer) return;

    const layerIndex = sortedLayers.findIndex((l) => l.id === layerId);
    if (direction === 'up' && layerIndex > 0) {
      const targetLayer = sortedLayers[layerIndex - 1];
      reorderLayer(layerId, targetLayer.order);
    } else if (direction === 'down' && layerIndex < sortedLayers.length - 1) {
      const targetLayer = sortedLayers[layerIndex + 1];
      reorderLayer(layerId, targetLayer.order);
    }
  };

  const handleContextMenu = (e: React.MouseEvent, layerId: string) => {
    e.preventDefault();
    const layer = layers.find((l) => l.id === layerId);
    if (!layer) return;

    const layerIndex = sortedLayers.findIndex((l) => l.id === layerId);
    const canMoveUp = layerIndex > 0;
    const canMoveDown = layerIndex < sortedLayers.length - 1;
    const canDelete = layers.length > 1;

    showContextMenu(e.clientX, e.clientY, [
      {
        label: 'Duplicate Layer',
        icon: <Copy className="h-4 w-4" />,
        onClick: () => duplicateLayerWithHistory(layerId),
      },
      {
        separator: true,
        label: '',
        onClick: () => {},
      },
      {
        label: 'Move Up',
        icon: <MoveUp className="h-4 w-4" />,
        onClick: () => handleMoveLayer(layerId, 'up'),
        disabled: !canMoveUp,
      },
      {
        label: 'Move Down',
        icon: <MoveDown className="h-4 w-4" />,
        onClick: () => handleMoveLayer(layerId, 'down'),
        disabled: !canMoveDown,
      },
      {
        separator: true,
        label: '',
        onClick: () => {},
      },
      {
        label: layer.visible ? 'Hide Layer' : 'Show Layer',
        icon: layer.visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />,
        onClick: () => updateLayerWithHistory(layerId, { visible: !layer.visible }, 'Toggle Visibility'),
      },
      {
        separator: true,
        label: '',
        onClick: () => {},
      },
      {
        label: 'Delete Layer',
        icon: <Trash2 className="h-4 w-4" />,
        onClick: () => {
          if (confirm('Delete this layer?')) {
            deleteLayerWithHistory(layerId);
          }
        },
        disabled: !canDelete,
        danger: true,
      },
    ]);
  };

  return (
    <div className="flex h-full flex-col bg-card">
      <div className="border-b border-border p-3">
        <h2 className="text-sm font-semibold text-card-foreground">Layers</h2>
      </div>

      <div className="flex-1 overflow-y-auto">
        <div className="p-2 space-y-1">
          {sortedLayers.length === 0 ? (
            <div className="flex h-full items-center justify-center">
              <p className="text-sm text-muted-foreground">No layers</p>
            </div>
          ) : (
            sortedLayers.map((layer) => (
              <div
                key={layer.id}
                className={cn(
                  'group flex items-center gap-2 rounded-md border p-2 transition-colors cursor-pointer',
                  activeLayerId === layer.id
                    ? 'border-primary bg-primary/10'
                    : 'border-border hover:border-primary/50 hover:bg-accent/50'
                )}
                onClick={() => setActiveLayer(layer.id)}
                onContextMenu={(e) => handleContextMenu(e, layer.id)}
              >
                <button
                  className="shrink-0 text-muted-foreground hover:text-foreground"
                  onClick={(e) => {
                    e.stopPropagation();
                    updateLayerWithHistory(layer.id, { visible: !layer.visible }, 'Toggle Visibility');
                  }}
                  title="Toggle visibility"
                >
                  {layer.visible ? (
                    <Eye className="h-4 w-4" />
                  ) : (
                    <EyeOff className="h-4 w-4" />
                  )}
                </button>

                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium text-card-foreground truncate">
                    {layer.name}
                  </p>
                  <p className="text-xs text-muted-foreground">
                    {layer.width} × {layer.height}
                  </p>
                </div>

                <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                  <button
                    className="shrink-0 text-muted-foreground hover:text-foreground"
                    onClick={(e) => {
                      e.stopPropagation();
                      duplicateLayerWithHistory(layer.id);
                    }}
                    title="Duplicate layer"
                  >
                    <Copy className="h-4 w-4" />
                  </button>
                  <button
                    className="shrink-0 text-muted-foreground hover:text-destructive"
                    onClick={(e) => {
                      e.stopPropagation();
                      if (layers.length > 1 && confirm('Delete this layer?')) {
                        deleteLayerWithHistory(layer.id);
                      }
                    }}
                    title="Delete layer"
                  >
                    <Trash2 className="h-4 w-4" />
                  </button>
                </div>

                <div className="shrink-0 text-xs text-muted-foreground">
                  {Math.round(layer.opacity * 100)}%
                </div>
              </div>
            ))
          )}
        </div>

        {/* Layer Effects Panel for Active Layer */}
        {activeLayerId && <LayerEffectsPanel layerId={activeLayerId} />}
      </div>
    </div>
  );
}