"use client";

import { useEffect, useState } from 'react';
import { Button } from "@/components/ui/button";
import { X, Minus, Square } from 'lucide-react';

// We're now using the global type declaration from types/electron.d.ts

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

  useEffect(() => {
    // Check if we're running in Electron
    if (window.electron) {
      setIsElectron(true);

      // Set up listeners for window state
      const handleMaximize = () => setIsMaximized(true);
      const handleUnmaximize = () => setIsMaximized(false);

      window.electron.windowState?.onMaximized(handleMaximize);
      window.electron.windowState?.onUnmaximized(handleUnmaximize);

      // Clean up listeners on unmount
      return () => {
        if (window.electron && window.electron.windowState) {
          window.electron.windowState.removeMaximizedListener();
          window.electron.windowState.removeUnmaximizedListener();
        }
      };
    }
  }, []);

  // If not in Electron, don't render anything
  if (!isElectron) return null;

  return (
    <div className="flex items-center">
      <Button
        variant="ghost"
        size="sm"
        className="h-6 w-6 p-0 text-white/70 hover:text-white hover:bg-transparent"
        onClick={() => window.electron?.windowControl.minimize()}
        aria-label="Minimize"
      >
        <Minus className="h-3 w-3" />
      </Button>
      <Button
        variant="ghost"
        size="sm"
        className="h-6 w-6 p-0 text-white/70 hover:text-white hover:bg-transparent"
        onClick={() => window.electron?.windowControl.maximize()}
        aria-label="Maximize"
      >
        <Square className="h-3 w-3" />
      </Button>
      <Button
        variant="ghost"
        size="sm"
        className="h-6 w-6 p-0 text-white/70 hover:text-white hover:bg-red-500"
        onClick={() => window.electron?.windowControl.close()}
        aria-label="Close"
      >
        <X className="h-3 w-3" />
      </Button>
    </div>
  );
}