paint-ui/components/editor/panel-dock.tsx

'use client';

import { useState, useRef, useEffect } from 'react';
import { ChevronDown, ChevronRight, Wand2, Square, Move, Hexagon, History, Sliders, Wrench } from 'lucide-react';
import { useUIStore } from '@/store';
import { LayersPanel } from '@/components/layers/layers-panel';
import { ColorPanel } from '@/components/colors';
import { FilterPanel } from '@/components/filters';
import { SelectionPanel } from '@/components/selection';
import { TransformPanel } from '@/components/transform';
import { ShapePanel } from '@/components/shapes';
import { HistoryPanel } from './history-panel';

interface CollapsibleSectionProps {
  title: string;
  icon?: React.ComponentType<{ className?: string }>;
  children: React.ReactNode;
  id: 'filters' | 'selection' | 'transform' | 'shapeSettings';
}

function CollapsibleSection({ title, icon: Icon, children, id }: CollapsibleSectionProps) {
  const { collapsed, toggleCollapsed } = useUIStore();
  const isOpen = collapsed[id];

  return (
    <div className="border-b border-border">
      <button
        onClick={() => toggleCollapsed(id)}
        className="w-full flex items-center justify-between px-3 py-2 hover:bg-accent/50 transition-colors"
      >
        <div className="flex items-center gap-2">
          {Icon && <Icon className="h-4 w-4 text-primary" />}
          <h3 className="text-sm font-semibold text-card-foreground">{title}</h3>
        </div>
        {isOpen ? (
          <ChevronDown className="h-4 w-4 text-muted-foreground" />
        ) : (
          <ChevronRight className="h-4 w-4 text-muted-foreground" />
        )}
      </button>
      {isOpen && <div>{children}</div>}
    </div>
  );
}

export function PanelDock() {
  const {
    panelDock,
    setActiveTab,
    setPanelWidth,
    setLayersHeight,
    setColorsHeight,
  } = useUIStore();
  const { activeTab, width, layersHeight, colorsHeight } = panelDock;

  const [isResizingWidth, setIsResizingWidth] = useState(false);
  const [isResizingLayersHeight, setIsResizingLayersHeight] = useState(false);
  const [isResizingColorsHeight, setIsResizingColorsHeight] = useState(false);
  const dockRef = useRef<HTMLDivElement>(null);

  // Handle width resize
  useEffect(() => {
    if (!isResizingWidth) return;

    const handleMouseMove = (e: MouseEvent) => {
      if (!dockRef.current) return;
      const containerRect = dockRef.current.parentElement?.getBoundingClientRect();
      if (!containerRect) return;

      const newWidth = containerRect.right - e.clientX;
      setPanelWidth(newWidth);
    };

    const handleMouseUp = () => {
      setIsResizingWidth(false);
    };

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isResizingWidth]);

  // Handle layers height resize
  useEffect(() => {
    if (!isResizingLayersHeight) return;

    const handleMouseMove = (e: MouseEvent) => {
      if (!dockRef.current) return;
      const dockRect = dockRef.current.getBoundingClientRect();
      const relativeY = e.clientY - dockRect.top;
      const percentage = (relativeY / dockRect.height) * 100;
      setLayersHeight(percentage);
    };

    const handleMouseUp = () => {
      setIsResizingLayersHeight(false);
    };

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isResizingLayersHeight]);

  // Handle colors height resize
  useEffect(() => {
    if (!isResizingColorsHeight) return;

    const handleMouseMove = (e: MouseEvent) => {
      if (!dockRef.current) return;
      const dockRect = dockRef.current.getBoundingClientRect();
      const layersBottom = (layersHeight / 100) * dockRect.height;
      const relativeY = e.clientY - dockRect.top - layersBottom;
      const percentage = (relativeY / dockRect.height) * 100;
      setColorsHeight(percentage);
    };

    const handleMouseUp = () => {
      setIsResizingColorsHeight(false);
    };

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isResizingColorsHeight, layersHeight]);

  return (
    <div
      ref={dockRef}
      className="border-l border-border bg-card flex flex-col overflow-hidden relative"
      style={{ width: `${width}px` }}
    >
      {/* Width resize handle (left edge) */}
      <div
        className="absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/50 transition-colors z-10"
        onMouseDown={() => setIsResizingWidth(true)}
      />

      {/* Layers Panel */}
      <div
        className="overflow-hidden"
        style={{ height: `${layersHeight}%` }}
      >
        <LayersPanel />
      </div>

      {/* Height resize handle (between layers and colors) */}
      <div
        className="h-1 cursor-row-resize hover:bg-primary/50 transition-colors border-b border-border flex-shrink-0"
        onMouseDown={() => setIsResizingLayersHeight(true)}
      />

      {/* Colors Panel */}
      <div
        className="overflow-hidden flex flex-col bg-card"
        style={{ height: `${colorsHeight}%` }}
      >
        <div className="border-b border-border p-3 flex-shrink-0">
          <h2 className="text-sm font-semibold text-card-foreground">Colors</h2>
        </div>
        <div className="flex-1 overflow-y-auto">
          <ColorPanel />
        </div>
      </div>

      {/* Height resize handle (between colors and tabs) */}
      <div
        className="h-1 cursor-row-resize hover:bg-primary/50 transition-colors border-b border-border flex-shrink-0"
        onMouseDown={() => setIsResizingColorsHeight(true)}
      />

      {/* Tabbed section */}
      <div className="flex-1 flex flex-col overflow-hidden" style={{ height: `${100 - layersHeight - colorsHeight}%` }}>
        {/* Tab buttons */}
        <div className="flex border-b border-border">
          <button
            onClick={() => setActiveTab('adjustments')}
            className={`flex-1 flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium transition-colors ${
              activeTab === 'adjustments'
                ? 'bg-background text-foreground border-b-2 border-primary'
                : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
            }`}
          >
            <Sliders className="h-4 w-4" />
            Adjustments
          </button>
          <button
            onClick={() => setActiveTab('tools')}
            className={`flex-1 flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium transition-colors ${
              activeTab === 'tools'
                ? 'bg-background text-foreground border-b-2 border-primary'
                : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
            }`}
          >
            <Wrench className="h-4 w-4" />
            Tools
          </button>
          <button
            onClick={() => setActiveTab('history')}
            className={`flex-1 flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium transition-colors ${
              activeTab === 'history'
                ? 'bg-background text-foreground border-b-2 border-primary'
                : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
            }`}
          >
            <History className="h-4 w-4" />
            History
          </button>
        </div>

        {/* Tab content */}
        <div className="flex-1 overflow-y-auto">
          {activeTab === 'adjustments' && (
            <div>
              <CollapsibleSection title="Filters" icon={Wand2} id="filters">
                <FilterPanel />
              </CollapsibleSection>
              <CollapsibleSection title="Selection" icon={Square} id="selection">
                <SelectionPanel />
              </CollapsibleSection>
              <CollapsibleSection title="Transform" icon={Move} id="transform">
                <TransformPanel />
              </CollapsibleSection>
            </div>
          )}

          {activeTab === 'tools' && (
            <div>
              <CollapsibleSection title="Shape Settings" icon={Hexagon} id="shapeSettings">
                <ShapePanel />
              </CollapsibleSection>
            </div>
          )}

          {activeTab === 'history' && (
            <div className="h-full">
              <HistoryPanel />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}