'use client';

import { useState } from 'react';
import { AdjustmentsDialog } from '@/components/modals/adjustments-dialog';
import { CanvasResizeDialog } from '@/components/modals/canvas-resize-dialog';
import {
  Sliders,
  ChevronDown,
  Maximize2,
} from 'lucide-react';

export function ImageMenu() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isAdjustmentsOpen, setIsAdjustmentsOpen] = useState(false);
  const [isCanvasResizeOpen, setIsCanvasResizeOpen] = useState(false);

  return (
    <>
      <div className="relative">
        <button
          onClick={() => setIsMenuOpen(!isMenuOpen)}
          className="flex items-center gap-2 px-3 py-2 hover:bg-accent rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
          aria-label="Image menu"
          aria-expanded={isMenuOpen}
          aria-haspopup="menu"
        >
          <span className="text-sm font-medium">Image</span>
          <ChevronDown className="h-4 w-4" aria-hidden="true" />
        </button>

        {isMenuOpen && (
          <>
            <div
              className="fixed inset-0 z-10"
              onClick={() => setIsMenuOpen(false)}
              aria-hidden="true"
            />
            <div
              className="absolute left-0 top-full mt-1 w-56 bg-card border border-border rounded-md shadow-lg z-20"
              role="menu"
              aria-label="Image operations"
            >
              <button
                onClick={() => {
                  setIsAdjustmentsOpen(true);
                  setIsMenuOpen(false);
                }}
                className="flex items-center gap-3 w-full px-4 py-2 text-sm hover:bg-accent transition-colors focus:outline-none focus:bg-accent text-left"
                role="menuitem"
              >
                <Sliders className="h-4 w-4" aria-hidden="true" />
                Filters & Adjustments...
              </button>
              <button
                onClick={() => {
                  setIsCanvasResizeOpen(true);
                  setIsMenuOpen(false);
                }}
                className="flex items-center gap-3 w-full px-4 py-2 text-sm hover:bg-accent transition-colors focus:outline-none focus:bg-accent text-left"
                role="menuitem"
              >
                <Maximize2 className="h-4 w-4" aria-hidden="true" />
                Canvas Size...
              </button>
            </div>
          </>
        )}
      </div>

      {/* Adjustments Dialog */}
      <AdjustmentsDialog
        isOpen={isAdjustmentsOpen}
        onClose={() => setIsAdjustmentsOpen(false)}
      />

      {/* Canvas Resize Dialog */}
      <CanvasResizeDialog
        isOpen={isCanvasResizeOpen}
        onClose={() => setIsCanvasResizeOpen(false)}
      />
    </>
  );
}