'use client'

import { useState } from 'react'

interface HeaderProps {
  onCopilotClick: () => void
}

export default function Header({ onCopilotClick }: HeaderProps) {
  const [searchQuery, setSearchQuery] = useState('')

  return (
    <header className="h-16 bg-slate-900 border-b border-slate-800 flex items-center justify-between px-6">
      {/* Search */}
      <div className="flex-1 max-w-xl">
        <div className="relative">
          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500">
            🔍
          </span>
          <input
            type="text"
            placeholder="Search hosts, metrics, logs..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full pl-10 pr-4 py-2 bg-slate-800 border border-slate-700 rounded-lg focus:outline-none focus:border-green-500 text-sm"
          />
          <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500 bg-slate-700 px-2 py-0.5 rounded">
            ⌘K
          </span>
        </div>
      </div>

      {/* Right Side */}
      <div className="flex items-center space-x-4">
        {/* Time Range */}
        <select className="bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-green-500">
          <option>Last 1 hour</option>
          <option>Last 6 hours</option>
          <option>Last 24 hours</option>
          <option>Last 7 days</option>
          <option>Last 30 days</option>
        </select>

        {/* Refresh */}
        <button className="p-2 hover:bg-slate-800 rounded-lg transition" title="Refresh">
          🔄
        </button>

        {/* Notifications */}
        <button className="relative p-2 hover:bg-slate-800 rounded-lg transition" title="Notifications">
          🔔
          <span className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-xs flex items-center justify-center">
            3
          </span>
        </button>

        {/* AI Copilot Button */}
        <button
          onClick={onCopilotClick}
          className="flex items-center space-x-2 px-4 py-2 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-500 hover:to-purple-600 rounded-lg transition font-medium"
        >
          <span>🤖</span>
          <span>AI Copilot</span>
        </button>
      </div>
    </header>
  )
}
