import { useState, useEffect } from 'react'

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

  useEffect(() => {
    if (window.electronAPI) {
      window.electronAPI.onWindowMaximized(() => setIsMaximized(true))
      window.electronAPI.onWindowUnmaximized(() => setIsMaximized(false))

      return () => {
        window.electronAPI?.removeAllListeners('window-maximized')
        window.electronAPI?.removeAllListeners('window-unmaximized')
      }
    }
  }, [])

  if (!window.electronAPI || process.platform !== 'win32') {
    return null
  }

  return (
    <div className="absolute top-0 right-0 flex h-8 -webkit-app-region-no-drag">
      <button
        onClick={() => window.electronAPI?.minimize()}
        className="px-4 hover:bg-border-default dark:hover:bg-dark-border transition-colors"
        aria-label="Minimize"
      >
        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 12 12">
          <rect y="5" width="12" height="2" />
        </svg>
      </button>
      <button
        onClick={() => window.electronAPI?.maximize()}
        className="px-4 hover:bg-border-default dark:hover:bg-dark-border transition-colors"
        aria-label={isMaximized ? 'Restore' : 'Maximize'}
      >
        {isMaximized ? (
          <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 12 12">
            <path d="M2 0v2H0v10h10V10h2V0H2zm8 10H2V4h8v6zm0-8H4V2h6v6h0v-6z" />
          </svg>
        ) : (
          <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 12 12">
            <rect width="12" height="12" strokeWidth="2" fill="none" stroke="currentColor" />
          </svg>
        )}
      </button>
      <button
        onClick={() => window.electronAPI?.close()}
        className="px-4 hover:bg-error-bg hover:text-error dark:hover:bg-dark-error transition-colors"
        aria-label="Close"
      >
        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 12 12">
          <path d="M1.41 0L6 4.59 10.59 0 12 1.41 7.41 6 12 10.59 10.59 12 6 7.41 1.41 12 0 10.59 4.59 6 0 1.41 1.41 0z" />
        </svg>
      </button>
    </div>
  )
}