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="text-muted-foreground rounded"
    >
      <Minus />
    </Button>
  );

  const maximize = (
    <Button
      key="maximize"
      variant="ghost"
      size="icon-sm"
      onClick={() => platform.window.maximize()}
      aria-label={isMaximized ? 'Restore' : 'Maximize'}
      className="text-muted-foreground rounded"
    >
      {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 text-muted-foreground rounded"
    >
      <X />
    </Button>
  );

  const buttons = [close, maximize, minimize];

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