'use client';

import { useState, useRef } from 'react';
import { useFileOperations } from '@/hooks/use-file-operations';
import { ExportDialog } from '@/components/modals/export-dialog';
import { NewImageDialog } from '@/components/modals/new-image-dialog';
import {
  FileImage,
  FolderOpen,
  Download,
  Save,
  ChevronDown,
} from 'lucide-react';
import { cn } from '@/lib/utils';

export function FileMenu() {
  const {
    createNewImage,
    handleFileInput,
    exportImage,
    saveProject,
  } = useFileOperations();

  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isNewDialogOpen, setIsNewDialogOpen] = useState(false);
  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleOpenFile = () => {
    fileInputRef.current?.click();
    setIsMenuOpen(false);
  };

  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      await handleFileInput(file);
    }
    // Reset input
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  const handleSaveProject = () => {
    saveProject('project');
    setIsMenuOpen(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"
        >
          <span className="text-sm font-medium">File</span>
          <ChevronDown className="h-4 w-4" />
        </button>

        {isMenuOpen && (
          <>
            <div
              className="fixed inset-0 z-10"
              onClick={() => setIsMenuOpen(false)}
            />
            <div className="absolute left-0 top-full mt-1 w-48 bg-card border border-border rounded-md shadow-lg z-20">
              <button
                onClick={() => {
                  setIsNewDialogOpen(true);
                  setIsMenuOpen(false);
                }}
                className="flex items-center gap-3 w-full px-4 py-2 text-sm hover:bg-accent transition-colors"
              >
                <FileImage className="h-4 w-4" />
                New Image
              </button>

              <button
                onClick={handleOpenFile}
                className="flex items-center gap-3 w-full px-4 py-2 text-sm hover:bg-accent transition-colors"
              >
                <FolderOpen className="h-4 w-4" />
                Open...
              </button>

              <div className="h-px bg-border my-1" />

              <button
                onClick={handleSaveProject}
                className="flex items-center gap-3 w-full px-4 py-2 text-sm hover:bg-accent transition-colors"
              >
                <Save className="h-4 w-4" />
                Save Project
              </button>

              <button
                onClick={() => {
                  setIsExportDialogOpen(true);
                  setIsMenuOpen(false);
                }}
                className="flex items-center gap-3 w-full px-4 py-2 text-sm hover:bg-accent transition-colors"
              >
                <Download className="h-4 w-4" />
                Export Image...
              </button>
            </div>
          </>
        )}
      </div>

      {/* Hidden file input */}
      <input
        ref={fileInputRef}
        type="file"
        accept="image/*,.paint"
        onChange={handleFileChange}
        className="hidden"
      />

      {/* Dialogs */}
      <NewImageDialog
        isOpen={isNewDialogOpen}
        onClose={() => setIsNewDialogOpen(false)}
        onCreate={createNewImage}
      />

      <ExportDialog
        isOpen={isExportDialogOpen}
        onClose={() => setIsExportDialogOpen(false)}
        onExport={exportImage}
      />
    </>
  );
}