"use client"

import { getCurrentWindow } from '@tauri-apps/api/window'

export function TitleBar() {
  const handleMinimize = async () => {
    const window = getCurrentWindow()
    await window.minimize()
  }

  const handleMaximize = async () => {
    const window = getCurrentWindow()
    const isMaximized = await window.isMaximized()
    if (isMaximized) {
      await window.unmaximize()
    } else {
      await window.maximize()
    }
  }

  const handleClose = async () => {
    const window = getCurrentWindow()
    await window.close()
  }

  return (
    <div 
      className="h-10 bg-[#ffffff] flex items-center justify-between px-4 select-none border-b border-[#e2e6ea]"
      style={{ 
        WebkitAppRegion: 'drag' 
      } as React.CSSProperties}
    >
      {/* Left: App title */}
      <div className="flex items-center gap-2">
        <span className="w-2 h-2 bg-[#0f141a] flex-shrink-0" />
        <span className="text-xs tracking-[0.2em] uppercase text-[#0f141a] leading-none font-mono">
          ROLL CALL
        </span>
      </div>

      {/* Right: Window controls */}
      <div 
        className="flex gap-1"
        style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
      >
        <button
          onClick={handleMinimize}
          className="w-8 h-8 flex items-center justify-center text-[#8a95a1] hover:text-[#0f141a] hover:bg-[#f1f3f5] transition-colors"
          title="最小化"
        >
          <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
            <line x1="1" y1="5" x2="9" y2="5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </button>
        <button
          onClick={handleMaximize}
          className="w-8 h-8 flex items-center justify-center text-[#8a95a1] hover:text-[#0f141a] hover:bg-[#f1f3f5] transition-colors"
          title="最大化"
        >
          <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
            <rect x="1" y="1" width="8" height="8" stroke="currentColor" strokeWidth="1.5" fill="none"/>
          </svg>
        </button>
        <button
          onClick={handleClose}
          className="w-8 h-8 flex items-center justify-center text-[#8a95a1] hover:text-[#ffffff] hover:bg-[#d92d20] transition-colors"
          title="关闭"
        >
          <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
            <line x1="2" y1="2" x2="8" y2="8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
            <line x1="8" y1="2" x2="2" y2="8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </button>
      </div>
    </div>
  )
}