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

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { platform } from "@/lib/platform";

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

  useEffect(() => {
    return platform.window.onMaximizeChange(setIsMaximized);
  }, []);

  if (platform.kind !== "electron") return null;

  const minimize = (
    <Button
      key="minimize"
      variant="ghost"
      size="icon-sm"
      onClick={() => platform.window.minimize()}
      aria-label="Minimize"
      className="dark:hover:bg-white/10 rounded text-white/50"
    >
      <Minus />
    </Button>
  );

  const maximize = (
    <Button
      key="maximize"
      variant="ghost"
      size="icon-sm"
      onClick={() => platform.window.maximize()}
      aria-label={isMaximized ? "Restore" : "Maximize"}
      className="dark:hover:bg-white/10 rounded text-white/50"
    >
      {isMaximized ? <Copy /> : <Square />}
    </Button>
  );

  const close = (
    <Button
      key="close"
      variant="ghost"
      size="icon-sm"
      onClick={() => platform.window.close()}
      aria-label="Close"
      className="hover:text-destructive dark:hover:bg-white/10 rounded text-white/50"
    >
      <X />
    </Button>
  );

  const buttons = [close, maximize, minimize];

  return (
    <div
      className={cn(
        "no-drag flex items-center gap-0.5"
      )}
    >
      {buttons}
    </div>
  );
}