'use client';

import { useEffect } from 'react';
import { useCanvasStore, useLayerStore } from '@/store';
import { CanvasWrapper } from '@/components/canvas/canvas-wrapper';
import { LayersPanel } from '@/components/layers/layers-panel';
import { Plus, ZoomIn, ZoomOut, Maximize } from 'lucide-react';

export function EditorLayout() {
  const { zoom, zoomIn, zoomOut, zoomToFit, setDimensions } = useCanvasStore();
  const { createLayer, layers } = useLayerStore();

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

  const handleNewLayer = () => {
    createLayer({
      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>

        {/* 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">
          <LayersPanel />
        </div>
      </div>
    </div>
  );
}