'use client';

import { useEffect, useState } from 'react';
import { Minus, Square, X } from 'lucide-react';

// Import types from our electron.d.ts file
declare global {
  interface Window {
    electron?: {
      windowControl: {
        minimize: () => Promise<void>;
        maximize: () => Promise<void>;
        close: () => Promise<void>;
      };
      windowState: {
        onMaximized: (callback: () => void) => void;
        onUnmaximized: (callback: () => void) => void;
        removeMaximizedListener: () => void;
        removeUnmaximizedListener: () => void;
      };
      appInfo: {
        isElectron: boolean;
        version: string;
      };
    };
  }
}

export function WindowControls() {
  const [isElectron, setIsElectron] = useState(false);
  const [isMaximized, setIsMaximized] = useState(false);

  useEffect(() => {
    // Check if running in Electron
    if (typeof window !== 'undefined' && window.electron) {
      setIsElectron(true);
      
      // Set up event listeners for window state
      const maximizedHandler = () => setIsMaximized(true);
      const unmaximizedHandler = () => setIsMaximized(false);
      
      window.electron.windowState.onMaximized(maximizedHandler);
      window.electron.windowState.onUnmaximized(unmaximizedHandler);
      
      return () => {
        window.electron?.windowState.removeMaximizedListener();
        window.electron?.windowState.removeUnmaximizedListener();
      };
    }
  }, []);

  if (!isElectron) return null;

  return (
    <div className="flex -mr-2 items-center">
      <button 
        onClick={() => window.electron?.windowControl.minimize()}
        className="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
        aria-label="Minimize"
      >
        <Minus size={16} />
      </button>
      
      <button 
        onClick={() => window.electron?.windowControl.maximize()}
        className="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
        aria-label={isMaximized ? "Restore" : "Maximize"}
      >
        <Square size={16} />
      </button>
      
      <button 
        onClick={() => window.electron?.windowControl.close()}
        className="px-4 py-2 hover:bg-red-500 dark:hover:bg-red-600"
        aria-label="Close"
      >
        <X size={16} className="hover:text-white" />
      </button>
    </div>
  );
}