import { useHealth } from '@/hooks/useHealth';
import { useAuth } from '@/context/AuthContext';
import { Badge } from '@/components/ui/Badge';
import { useNavigate } from 'react-router-dom';

export function Header() {
  const { health } = useHealth(15_000);
  const { token } = useAuth();
  const navigate = useNavigate();

  return (
    <header className="h-14 bg-dark-card border-b border-dark-border flex items-center justify-between px-6 shrink-0">
      <div>
        {!token && (
          <button
            onClick={() => navigate('/settings')}
            className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-dark-warning/15 border border-dark-warning/30 text-dark-warning text-xs font-medium hover:bg-dark-warning/25 transition-colors"
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
              <line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" />
            </svg>
            Token 未配置 — 点击前往 Settings
          </button>
        )}
      </div>
      <div className="flex items-center gap-3">
        {health && (
          <Badge variant={health.healthy ? 'success' : 'danger'}>
            {health.healthy ? 'Healthy' : 'Unhealthy'}
          </Badge>
        )}
        {!health && <Badge variant="warning">Connecting...</Badge>}
      </div>
    </header>
  );
}